From b452ee8296ece59bd9840924d090390b59d83957 Mon Sep 17 00:00:00 2001
From: MRoyhanF <froyhan0@gmail.com>
Date: Thu, 19 Dec 2024 09:18:47 +0700
Subject: [PATCH] feat: discount | init discount feature

---
 src/modules/discount/discount.controller.js   |  24 +++
 src/modules/discount/discount.routes.js       |   7 +
 src/modules/index.js                          |   2 +
 .../views/components/ui/sidebar.edge          |   6 +
 src/resources/views/pages/discount/index.edge | 185 ++++++++++++++++++
 src/resources/views/pages/user/index.edge     |   2 +-
 6 files changed, 225 insertions(+), 1 deletion(-)
 create mode 100644 src/modules/discount/discount.controller.js
 create mode 100644 src/modules/discount/discount.routes.js
 create mode 100644 src/resources/views/pages/discount/index.edge

diff --git a/src/modules/discount/discount.controller.js b/src/modules/discount/discount.controller.js
new file mode 100644
index 0000000..9fb1cc0
--- /dev/null
+++ b/src/modules/discount/discount.controller.js
@@ -0,0 +1,24 @@
+import axios from 'axios';
+
+export const index = async (req, res, next) => {
+    try {
+        const api = process.env.API_URL;
+        const { token } = req;
+
+        const discountsResponse = await axios.get(`${api}/api/v1/discounts`, {
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+          });
+        
+        const data = {
+            token : token,
+            api : api,
+            discounts : discountsResponse.data.data || [],
+        }
+
+        res.edge('pages/discount/index', data);
+    } catch (error) {
+        next(error)
+    }
+};
\ No newline at end of file
diff --git a/src/modules/discount/discount.routes.js b/src/modules/discount/discount.routes.js
new file mode 100644
index 0000000..141f771
--- /dev/null
+++ b/src/modules/discount/discount.routes.js
@@ -0,0 +1,7 @@
+import * as discountController from "./discount.controller.js";
+import {validateCookies} from '../../middlewares/auth.js';
+
+export default (router) => {
+  const prefix = "/discount";
+  router.get(prefix + "/", validateCookies, discountController.index);
+};
diff --git a/src/modules/index.js b/src/modules/index.js
index b0c8d6d..fe6dc2c 100644
--- a/src/modules/index.js
+++ b/src/modules/index.js
@@ -8,6 +8,7 @@ import airlineRoutes from "./airline/airline.routes.js";
 import flightRoutes from "./flight/flight.routes.js";
 import ticketRoutes from "./tikcet/ticket.routes.js";
 import userRoutes from "./user/user.routes.js";
+import discountRoutes from "./discount/discount.routes.js";
 
 export default (app) => {
   const router = Router();
@@ -29,4 +30,5 @@ export default (app) => {
   flightRoutes(router);
   ticketRoutes(router);
   userRoutes(router);
+  discountRoutes(router);
 };
diff --git a/src/resources/views/components/ui/sidebar.edge b/src/resources/views/components/ui/sidebar.edge
index 5f86b83..2fe7976 100644
--- a/src/resources/views/components/ui/sidebar.edge
+++ b/src/resources/views/components/ui/sidebar.edge
@@ -65,6 +65,12 @@
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 48 48"><g fill="none" stroke="#282828" stroke-linecap="round" stroke-width="4"><path stroke-linejoin="round" d="M9 16L34 6l4 10M4 16h40v6c-3 0-6 2-6 5.5s3 6.5 6 6.5v6H4v-6c3 0 6-2 6-6s-3-6-6-6z"/><path d="M17 25.385h6m-6 6h14"/></g></svg>
       </div>Tikets
     </a>
+    <a href="/admin/discount"
+    class="flex items-center w-full p-3 rounded-lg text-start leading-tight transition-all hover:bg-blue-50 hover:bg-opacity-80 focus:bg-blue-50 focus:bg-opacity-80 active:bg-blue-50 active:bg-opacity-80 hover:text-blue-900 focus:text-blue-900 active:text-blue-900 outline-none">
+      <div class="grid place-items-center mr-4">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" stroke="#282828"><path stroke-width="2.5" d="M10.51 3.665a2 2 0 0 1 2.98 0l.7.782a2 2 0 0 0 1.601.663l1.05-.058a2 2 0 0 1 2.107 2.108l-.058 1.049a2 2 0 0 0 .663 1.6l.782.7a2 2 0 0 1 0 2.981l-.782.7a2 2 0 0 0-.663 1.601l.058 1.05a2 2 0 0 1-2.108 2.107l-1.049-.058a2 2 0 0 0-1.6.663l-.7.782a2 2 0 0 1-2.981 0l-.7-.782a2 2 0 0 0-1.601-.663l-1.05.058a2 2 0 0 1-2.107-2.108l.058-1.049a2 2 0 0 0-.663-1.6l-.782-.7a2 2 0 0 1 0-2.981l.782-.7a2 2 0 0 0 .663-1.601l-.058-1.05A2 2 0 0 1 7.16 5.053l1.049.058a2 2 0 0 0 1.6-.663z"/><path stroke-linejoin="round" stroke-width="3.75" d="M9.5 9.5h.01v.01H9.5zm5 5h.01v.01h-.01z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="m15 9l-6 6"/></g></svg>
+      </div>Discount
+    </a>
     <a href="/admin/users"
     class="flex items-center w-full p-3 rounded-lg text-start leading-tight transition-all hover:bg-blue-50 hover:bg-opacity-80 focus:bg-blue-50 focus:bg-opacity-80 active:bg-blue-50 active:bg-opacity-80 hover:text-blue-900 focus:text-blue-900 active:text-blue-900 outline-none">
       <div class="grid place-items-center mr-4">
diff --git a/src/resources/views/pages/discount/index.edge b/src/resources/views/pages/discount/index.edge
new file mode 100644
index 0000000..a7691b5
--- /dev/null
+++ b/src/resources/views/pages/discount/index.edge
@@ -0,0 +1,185 @@
+@layout.app({ title: "User List" })
+@slot('main')
+
+<div class="px-6 py-2 w-full bg-white rounded-lg">
+    <!-- Content Head -->
+    <div class="flex justify-end items-center mb-2">
+        @component('components/ui/modal', {
+            title: 'Add Discount',
+            buttonClass: 'shadow-md py-2 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-300 text-blue-800 hover:bg-blue-400 focus:outline-none focus:bg-blue-200 disabled:opacity-50 disabled:pointer-events-none',
+            })
+            @slot('header')
+                Add Discount
+            @end
+            @slot('content')
+
+                <form id="adminAddForm" class="max-w-sm mx-auto">
+                    <div class="mb-5">
+                        <label for="percentage" class="block mb-2 text-sm font-medium text-gray-900">Percentage</label>
+                        <input type="number" id="percentage" name="percentage" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="75" required />
+                    </div>
+                    <button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center">Add Dscount</button>
+                </form>
+
+            @end
+        @end
+    </div>
+    
+    <div class="border-2 rounded-lg p-4 overflow-x-auto text-sm">
+        <table class="myTable display" style="width:100%">
+            <thead>
+                <tr>
+                    <th>No</th>
+                    <th>Percentage</th>
+                    <th>Action</th>
+                </tr>
+            </thead>
+            <tbody class="text-center">
+                @each((data, index) in discounts)
+                    <tr>
+                        <td>{{ index + 1 }}</td>
+                        <td>{{ data.percentage }} %</td>
+                        <td>
+                            <div class="flex justify-center items-center gap-2">
+                                @component('components/ui/modal', {
+                                    title: 'Edit Discount',
+                                    buttonClass: 'bg-blue-500 text-white px-2 py-1 rounded-md',
+                                    })
+                                    @slot('header')
+                                        Edit
+                                    @end
+                                    @slot('content')
+
+                                        <form id="adminEditForm" class="max-w-sm mx-auto">
+                                            <div class="mb-5">
+                                                <label for="percentageEdit" class="block mb-2 text-sm font-medium text-gray-900">Percentage</label>
+                                                <input type="number" id="percentageEdit-{{ data.id }}" name="percentageEdit" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" value="{{ data.percentage }}" required />
+                                            </div>
+                                            <button type="button" onclick="editDiscount({{ data.id }})" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center">Edit Dscount</button>
+                                        </form>
+
+                                    @end
+                                @end
+                            <button type="button" onclick="deleteDiscount({{ data.id }})" class="bg-red-500 text-white px-2 py-1 rounded-md">Delete</button>
+                            </div>
+                        </td>
+                    </tr>
+                @else
+                    <tr>
+                        <td colspan="3" class="text-center">No data available</td>
+                    </tr>
+                @end
+            </tbody>
+            
+        </table>
+    </div>
+</div>
+    
+<script>
+    const token = '{{ token }}'
+
+    function editDiscount(id) {
+    const percentageEdit = $(`#percentageEdit-${id}`).val();
+
+        $.ajax({
+            url: '{{ api }}/api/v1/discounts/' + id,
+            method: 'PUT',
+            contentType: 'application/json',
+            data: JSON.stringify({
+                percentage: parseInt(percentageEdit),
+            }),
+            headers: {
+                'Authorization': `Bearer ${token}`
+            },
+            success: function (response) {
+                showToast("success", "Success", "Discount edited successfully!");
+                setTimeout(() => {
+                    window.location.reload();
+                }, 2000);
+            },
+            error: function (xhr) {
+                if (xhr.responseJSON && xhr.responseJSON.errors) {
+                    const errors = xhr.responseJSON.errors;
+                    let errorMessages = '';
+                    errors.forEach(error => {
+                        errorMessages += `${error.field}: ${error.message}\n`;
+                    });
+                    showToast("error", "Error", errorMessages);
+                } else {
+                    showToast("error", "Error", "An error occurred. Please try again.");
+                }
+            },
+        });
+    }
+
+
+    function deleteDiscount(id) {
+        $.ajax({
+            url: '{{ api }}/api/v1/discounts/' + id,
+            method: 'DELETE',
+            headers: {
+                'Authorization': `Bearer ${token}`
+            },
+            success: function (response) {
+                showToast("success", "Success", "Discount deleted successfully!");
+                setTimeout(() => {
+                    window.location.reload();
+                }, 1000);
+            },
+            error: function (xhr) {
+                if (xhr.responseJSON && xhr.responseJSON.errors) {
+                    const errors = xhr.responseJSON.errors;
+                    let errorMessages = '';
+                    errors.forEach(error => {
+                        errorMessages += `${error.field}: ${error.message}\n`;
+                    });
+                    showToast("error", "Error", errorMessages);
+                } else {
+                    showToast("error", "Error", "An error occurred. Please try again.");
+                }
+            },
+        });
+    }
+
+    $(document).ready(function () {
+        $('#adminAddForm').on('submit', function (e) {
+            e.preventDefault(); 
+
+            const formData = {
+                percentage: parseInt($('#percentage').val()),
+            };
+
+            $.ajax({
+                url: '{{ api }}/api/v1/discounts',
+                method: 'POST',
+                contentType: 'application/json',
+                data: JSON.stringify(formData),
+                headers: {
+                    'Authorization': `Bearer ${token}`
+                },
+                success: function (response) {
+                    showToast("success", "Success", "Discount created successfully!");
+                    setTimeout(() => {
+                        window.location.reload();
+                    }, 1000);
+                },
+                error: function (xhr) {
+                    if (xhr.responseJSON && xhr.responseJSON.errors) {
+                        const errors = xhr.responseJSON.errors;
+                        let errorMessages = '';
+                        errors.forEach(error => {
+                            errorMessages += `${error.field}: ${error.message}\n`;
+                        });
+                        showToast("error", "Error", errorMessages);
+                    } else {
+                        showToast("error", "Error", "An error occurred. Please try again.");
+                    }
+                },
+            });
+        });
+    });
+
+</script>
+    
+@endslot
+@end
\ No newline at end of file
diff --git a/src/resources/views/pages/user/index.edge b/src/resources/views/pages/user/index.edge
index 27673c1..ca2304e 100644
--- a/src/resources/views/pages/user/index.edge
+++ b/src/resources/views/pages/user/index.edge
@@ -29,7 +29,7 @@
             @end
         </div>
     
-        <div class="border-2 rounded-lg p-4 overflow-x-auto text-xs">
+        <div class="border-2 rounded-lg p-4 overflow-x-auto text-sm">
             <table class="myTable display" style="width:100%">
                 <thead>
                     <tr>