From 1d64a7f64851b9fe3d716de8e98f9294e7217c6e Mon Sep 17 00:00:00 2001
From: Alexander Jason <alexanderjason526@gmail.com>
Date: Mon, 9 Oct 2023 21:28:30 +0700
Subject: [PATCH] feat: delete page popup
---
app/pages/admin/DeleteAuthorPage.php | 45 ++++++++++++++++++++++++++--
app/pages/admin/DeleteBookPage.php | 43 +++++++++++++++++++++++++-
app/pages/admin/DeleteGenrePage.php | 45 ++++++++++++++++++++++++++--
app/pages/admin/DeleteUserPage.php | 45 ++++++++++++++++++++++++++--
4 files changed, 170 insertions(+), 8 deletions(-)
diff --git a/app/pages/admin/DeleteAuthorPage.php b/app/pages/admin/DeleteAuthorPage.php
index 0b018cf..a82bfde 100644
--- a/app/pages/admin/DeleteAuthorPage.php
+++ b/app/pages/admin/DeleteAuthorPage.php
@@ -10,6 +10,7 @@
<link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/template/globals.css">
<!-- Navbar CSS -->
<link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/template/navbar.css">
+ <link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/template/popup.css">
<!-- Page-specific CSS -->
<link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/admin/list.css">
<title>Delete Author : <? echo $this->data['author_id'];?></title>
@@ -18,13 +19,25 @@
<body>
<!-- Navigation bar -->
<?php include(dirname(__DIR__) . '../../components/Navbar.php') ?>
+ <section>
+ <!-- Pop Up -->
+ <span class="overlay"></span>
+
+ <div class="modal-box">
+ <h2>Delete Author</h2>
+ <h3>Are you sure want to delete this Author?</h3>
+
+ <div class="buttons">
+ <button class="cancel-btn">Cancel</button>
+ <button id="deleteAuthor" class="confirm-btn-delete">Delete</button>
+ </div>
+ </div>
<div class="wrapper-small">
<div class="pad-40">
<h1>Delete Author Page</h1>
<div class="centered">
<form
class="center-contents"
- action="/author/delete/<? echo $this->data['author_id']?>" method="POST" enctype="multipart/form-data"
>
<p class="form-label">Author ID : <?
echo $this->data['author_id'];
@@ -39,12 +52,38 @@
?></p>
- <input type="submit" class="button green-button" value="Delete">
+ <input type="button" class="show-modal button green-button" value="Delete">
</form>
</div>
</div>
</div>
-</body>
+</section>
+<script>
+ const section = document.querySelector("section"),
+ overlay = document.querySelector(".overlay"),
+ showBtn = document.querySelector(".show-modal"),
+ closeBtn = document.querySelector(".cancel-btn"),
+ deleteAuthor = document.getElementById("deleteAuthor");
+ deleteAuthor.addEventListener("click", function (event) {
+ event.preventDefault();
+ const form = document.querySelector('form');
+ form.action="/author/delete/<? echo $this->data['author_id']?>";
+ form.method = "POST";
+ form.enctype = "multipart/form-data";
+ form.submit();
+ });
+
+ showBtn.addEventListener("click", ()=>section.classList.add("active"));
+
+ overlay.addEventListener("click", () =>
+ section.classList.remove("active")
+ );
+
+ closeBtn.addEventListener("click", () =>
+ section.classList.remove("active")
+ );
+</script>
+</body>
</html>
\ No newline at end of file
diff --git a/app/pages/admin/DeleteBookPage.php b/app/pages/admin/DeleteBookPage.php
index b980aca..a59cbbc 100644
--- a/app/pages/admin/DeleteBookPage.php
+++ b/app/pages/admin/DeleteBookPage.php
@@ -10,6 +10,7 @@
<link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/template/globals.css">
<!-- Navbar CSS -->
<link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/template/navbar.css">
+ <link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/template/popup.css">
<!-- Page-specific CSS -->
<link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/admin/list.css">
<title>Delete Book : <? echo $this->data['title'];?></title>
@@ -18,6 +19,19 @@
<body>
<!-- Navigation bar -->
<?php include(dirname(__DIR__) . '../../components/Navbar.php') ?>
+ <section>
+ <!-- Pop Up -->
+ <span class="overlay"></span>
+
+ <div class="modal-box">
+ <h2>Delete Book</h2>
+ <h3>Are you sure want to delete this Book?</h3>
+
+ <div class="buttons">
+ <button class="cancel-btn">Cancel</button>
+ <button id="deleteBook" class="confirm-btn-delete">Delete</button>
+ </div>
+ </div>
<div class="wrapper-small">
<div class="pad-40">
<h1>Delete Book Page</h1>
@@ -50,12 +64,39 @@
?></p>
- <input type="submit" class="button green-button" value="Delete">
+ <input type="button" class="show-modal button green-button" value="Delete">
</form>
</div>
</div>
</div>
+ </section>
+<script>
+ const section = document.querySelector("section"),
+ overlay = document.querySelector(".overlay"),
+ showBtn = document.querySelector(".show-modal"),
+ closeBtn = document.querySelector(".cancel-btn"),
+ deleteBook = document.getElementById("deleteBook");
+
+ deleteBook.addEventListener("click", function (event) {
+ event.preventDefault();
+ const form = document.querySelector('form');
+ form.action="/book/delete/<? echo $this->data['book_id']?>"
+ form.method = "POST";
+ form.enctype = "multipart/form-data";
+ form.submit();
+ });
+
+ showBtn.addEventListener("click", ()=>section.classList.add("active"));
+
+ overlay.addEventListener("click", () =>
+ section.classList.remove("active")
+ );
+
+ closeBtn.addEventListener("click", () =>
+ section.classList.remove("active")
+ );
+</script>
</body>
</html>
\ No newline at end of file
diff --git a/app/pages/admin/DeleteGenrePage.php b/app/pages/admin/DeleteGenrePage.php
index 4b82b48..084f469 100644
--- a/app/pages/admin/DeleteGenrePage.php
+++ b/app/pages/admin/DeleteGenrePage.php
@@ -9,6 +9,7 @@
<!-- Global CSS -->
<link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/template/globals.css">
<!-- Navbar CSS -->
+ <link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/template/popup.css">
<link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/template/navbar.css">
<!-- Page-specific CSS -->
<link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/admin/list.css">
@@ -18,13 +19,26 @@
<body>
<!-- Navigation bar -->
<?php include(dirname(__DIR__) . '../../components/Navbar.php') ?>
+ <section>
+ <!-- Pop Up -->
+ <span class="overlay"></span>
+
+ <div class="modal-box">
+ <h2>Delete Genre</h2>
+ <h3>Are you sure want to delete this Genre?</h3>
+
+ <div class="buttons">
+ <button class="cancel-btn">Cancel</button>
+ <button id="deleteGenre" class="confirm-btn-delete">Delete</button>
+ </div>
+ </div>
<div class="wrapper-small">
<div class="pad-40">
<h1>Delete Genre Page</h1>
<div class="centered">
<form
class="center-contents"
- action="/genre/delete/<? echo $this->data['genre_id']?>" method="POST" enctype="multipart/form-data"
+ enctype="multipart/form-data"
>
<p class="form-label">Genre ID : <?
echo $this->data['genre_id'];
@@ -34,12 +48,39 @@
echo $this->data['name'];
?></p>
- <input type="submit" class="button green-button" value="Delete">
+ <input type="button" class="show-modal button green-button" value="Delete">
</form>
</div>
</div>
</div>
+ </section>
+<script>
+ const section = document.querySelector("section"),
+ overlay = document.querySelector(".overlay"),
+ showBtn = document.querySelector(".show-modal"),
+ closeBtn = document.querySelector(".cancel-btn"),
+ deleteGenre = document.getElementById("deleteGenre");
+
+ deleteGenre.addEventListener("click", function (event) {
+ event.preventDefault();
+ const form = document.querySelector('form');
+ form.action="/genre/delete/<? echo $this->data['genre_id']?>"
+ form.method = "POST";
+ form.enctype = "multipart/form-data";
+ form.submit();
+ });
+
+ showBtn.addEventListener("click", ()=>section.classList.add("active"));
+
+ overlay.addEventListener("click", () =>
+ section.classList.remove("active")
+ );
+
+ closeBtn.addEventListener("click", () =>
+ section.classList.remove("active")
+ );
+</script>
</body>
</html>
\ No newline at end of file
diff --git a/app/pages/admin/DeleteUserPage.php b/app/pages/admin/DeleteUserPage.php
index 4c593c1..81f076c 100644
--- a/app/pages/admin/DeleteUserPage.php
+++ b/app/pages/admin/DeleteUserPage.php
@@ -9,6 +9,7 @@
<!-- Global CSS -->
<link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/template/globals.css">
<!-- Navbar CSS -->
+ <link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/template/popup.css">
<link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/template/navbar.css">
<!-- Page-specific CSS -->
<link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/admin/list.css">
@@ -18,13 +19,26 @@
<body>
<!-- Navigation bar -->
<?php include(dirname(__DIR__) . '../../components/Navbar.php') ?>
+ <section>
+ <!-- Pop Up -->
+ <span class="overlay"></span>
+
+ <div class="modal-box">
+ <h2>Delete User</h2>
+ <h3>Are you sure want to delete this User?</h3>
+
+ <div class="buttons">
+ <button class="cancel-btn">Cancel</button>
+ <button id="deleteUser" class="confirm-btn-delete">Delete</button>
+ </div>
+ </div>
<div class="wrapper-small">
<div class="pad-40">
<h1>Delete User Page</h1>
<div class="centered">
<form
class="center-contents"
- action="/user/delete/<? echo $this->data['username']?>" method="POST" enctype="multipart/form-data"
+ enctype="multipart/form-data"
>
<p class="form-label">Username : <?
echo $this->data['username'];
@@ -35,12 +49,39 @@
?></p>
- <input type="submit" class="button green-button" value="Delete">
+ <input type="button" class="show-modal button green-button" value="Delete">
</form>
</div>
</div>
</div>
+ </section>
+<script>
+ const section = document.querySelector("section"),
+ overlay = document.querySelector(".overlay"),
+ showBtn = document.querySelector(".show-modal"),
+ closeBtn = document.querySelector(".cancel-btn"),
+ deleteUser = document.getElementById("deleteUser");
+
+ deleteUser.addEventListener("click", function (event) {
+ event.preventDefault();
+ const form = document.querySelector('form');
+ form.action="/user/delete/<? echo $this->data['username']?>"
+ form.method = "POST";
+ form.enctype = "multipart/form-data";
+ form.submit();
+ });
+
+ showBtn.addEventListener("click", ()=>section.classList.add("active"));
+
+ overlay.addEventListener("click", () =>
+ section.classList.remove("active")
+ );
+
+ closeBtn.addEventListener("click", () =>
+ section.classList.remove("active")
+ );
+</script>
</body>
</html>
\ No newline at end of file
--
GitLab