refactor(admin): adjust backoffice playground layout

isd-sgcu · Dec 22, 2024 · 4704d9a · 4704d9a
1 parent 2331e69
commit 4704d9a
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 41 deletions.
diff --git a/src/lib/components/Backoffice/Modal/FileRankingModal.svelte b/src/lib/components/Backoffice/Modal/FileRankingModal.svelte
@@ -3,6 +3,9 @@
     import Fa from 'svelte-fa';
 
     export let open = false;
+    export let variant: 'announcement' | 'statistic' = 'announcement';
+
+    
     let dialogEl: HTMLDialogElement;
     
     let title = '';
@@ -11,7 +14,6 @@
     let contentFiles: File[] = [];
     let documentFiles: File[] = [];
     let mainCoverIndex = 0;
-    let variant: 'announcement' | 'statistic' = 'announcement';
     let dragOver = {
         cover: false,
         content: false,

diff --git a/src/lib/components/BackofficePlayground.svelte b/src/lib/components/BackofficePlayground.svelte
@@ -1,16 +1,18 @@
 <script lang="ts">
-    import CreateStatisticModal from './Backoffice/CreateStatisticModal.svelte';
-    import EditUserModal from './Backoffice/EditUserModal.svelte';
     import ChangePasswordModal from './Backoffice/Modal/ChangePasswordModal.svelte';
+    import ConfirmationModal from './Backoffice/Modal/ConfirmationModal.svelte';
+    import CreateDocumentModal from './Backoffice/Modal/CreateDocumentModal.svelte';
+    import CreateStatisticModal from './Backoffice/Modal/CreateStatisticModal.svelte';
+    import EditUserModal from './Backoffice/Modal/EditUserModal.svelte';
+    import FileRankingModal from './Backoffice/Modal/FileRankingModal.svelte';
+
     let changePasswordModalOpen = false;
-    let StatisticModalOpen = false;
     let confirmationModalOpen = false;
-    import ConfirmationModal from './Backoffice/ConfirmationModal.svelte';
-    let editUserModalOpen = false;
-    import CreateDocumentModal from './Backoffice/CreateDocumentModal.svelte';
-    let createDocumentModalOpen = false;
-    import CreateAnnouncementModal from './Backoffice/CreateAnnouncementModal.svelte';
     let createAnnouncementModalOpen = false;
+    let createDocumentModalOpen = false;
+    let editUserModalOpen = false;
+    let StatisticModalOpen = false;
+
     function showConfirmationModal() {
         confirmationModalOpen = true;
     }
@@ -30,19 +32,11 @@
     }
 </script>
 
-<main class="h-screen">
-    <section class="section mb-5">
-        <h2 class="font-bold text-2xl mb-4">Custom Modal</h2>
-        <div class="space-x-4">
-            <ConfirmationModal 
-                bind:isOpen={confirmationModalOpen} 
-                title="ยืนยันการลบเอกสาร" 
-                body="หากทำการยืนยันเอกสารที่เลือกจะถูกลบและไม่สามารถย้อนกลับได้" 
-                confirmText="ยืนยัน" 
-                cancelText="ยกเลิก" 
-                onConfirm={handleConfirm} 
-                onCancel={handleCancel}
-            />
+<main class="h-screen p-8">
+    <section>
+        <h2 class="font-bold text-2xl mb-6">Backoffice modal</h2>
+
+        <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-8">
             <button
                 class="px-4 py-2 bg-rose-500 text-white rounded-lg hover:bg-rose-600 transition-colors"
                 on:click={showConfirmationModal}
@@ -63,30 +57,42 @@
             >
                 แก้ไขผู้ใช้งาน
             </button>
+
+            <button
+                class="px-4 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition-colors"
+                on:click={() => changePasswordModalOpen = true}
+            >
+                เปลี่ยนรหัสผ่าน
+            </button>
+
+            <button
+                class="px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-colors" 
+                on:click={() => createDocumentModalOpen = true}
+            >
+                สร้างเอกสาร
+            </button>
+
+            <button
+                class="px-4 py-2 bg-indigo-500 text-white rounded-lg hover:bg-indigo-600 transition-colors"
+                on:click={() => createAnnouncementModalOpen = true}
+            >
+                สร้างประกาศ
+            </button>
         </div>
 
+        <ConfirmationModal 
+            bind:isOpen={confirmationModalOpen} 
+            title="ยืนยันการลบเอกสาร" 
+            body="หากทำการยืนยันเอกสารที่เลือกจะถูกลบและไม่สามารถย้อนกลับได้" 
+            confirmText="ยืนยัน" 
+            cancelText="ยกเลิก" 
+            onConfirm={handleConfirm} 
+            onCancel={handleCancel}
+        />
         <CreateStatisticModal bind:open={StatisticModalOpen} />
         <EditUserModal bind:open={editUserModalOpen} />
-
-        <button on:click={() => changePasswordModalOpen = true}>
-            เปลี่ยนรหัสผ่าน
-        </button>
-
         <ChangePasswordModal bind:open={changePasswordModalOpen} />
-
-
-        <button on:click={() => createDocumentModalOpen = true}>
-            สร้างเอกสาร
-        </button>
-
         <CreateDocumentModal bind:isOpen={createDocumentModalOpen} />
-
-
-
-        <button on:click={() => createAnnouncementModalOpen = true}>
-            สร้างประกาศ
-        </button>
-
-        <CreateAnnouncementModal bind:open={createAnnouncementModalOpen} />
+        <FileRankingModal bind:open={createAnnouncementModalOpen} variant="announcement" />
     </section>
 </main>