senarai w backend

pages/permohonan-temujanji/senarai/index.vue

@@ -1,12 +1,15 @@
 <template>
   <div>
+    <!-- Header with title and "Permohonan Baru" button -->
     <div class="flex justify-between items-center">
       <h1>Senarai Permohonan</h1>
+      <!-- Button to navigate to the "Permohonan Baru" page -->
       <rs-button @click="permohonanBaru()" variant="primary" class="mt-2">
         Permohonan Baru
       </rs-button>
     </div>
 
+    <!-- Table displaying the list of permohonan -->
     <rs-card class="mt-4 py-2">
       <rs-table
         :data="tableData"
@@ -22,6 +25,7 @@
         }"
         advanced
       >
+        <!-- Table Headers -->
         <template v-slot:header>
           <tr>
             <th>No</th>
@@ -31,6 +35,8 @@
             <th>Butiran</th>
           </tr>
         </template>
+
+        <!-- Table Data Rows -->
         <template v-slot:no="data">
           {{ data.text }}
         </template>
@@ -51,8 +57,11 @@
             {{ data.text || "N/A" }}
           </rs-badge>
         </template>
+
+        <!-- Actions for each permohonan -->
         <template v-slot:butiran="data">
           <div class="flex flex-wrap gap-2" v-if="data.value.status !== 'Sah'">
+            <!-- Button to navigate to the "Kemaskini" page for the selected permohonan -->
             <rs-button
               @click="kemaskini(data.value.noSiri)"
               variant="primary"
@@ -62,6 +71,8 @@
             >
               <Icon name="ic:baseline-edit" size="1.2rem" />
             </rs-button>
+
+            <!-- Button to delete the selected permohonan -->
             <rs-button
               @click="hapus(data.value.noSiri)"
               variant="danger"
@@ -72,6 +83,8 @@
               <Icon name="ic:baseline-delete" size="1.2rem" />
             </rs-button>
           </div>
+
+          <!-- If permohonan has been confirmed -->
           <div v-else>
             <span>Permohonan telah disahkan</span>
           </div>
@@ -82,86 +95,72 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
 const { $swal } = useNuxtApp();
 
-definePageMeta({
-  title: "Senarai Permohonan",
-});
+// Reactive variable to store table data
+const tableData = ref([]);
 
-const tableData = ref([
-  {
-    no: 1,
-    noSiri: "1234567890",
-    tarikhMasa: "2024-01-01 12:00:00",
-    status: "Sah",
-    butiran: 1,
-  },
-  {
-    no: 2,
-    noSiri: "0987654321",
-    tarikhMasa: "2024-02-01 14:30:00",
-    status: "Tidak Aktif",
-    butiran: 2,
-  },
-  {
-    no: 3,
-    noSiri: "1122334455",
-    tarikhMasa: "2024-03-01 09:15:00",
-    status: "Aktif",
-    butiran: 3,
-  },
-  {
-    no: 4,
-    noSiri: "5566778899",
-    tarikhMasa: "2024-04-01 16:45:00",
-    status: "Tidak Aktif",
-    butiran: 4,
-  },
-  {
-    no: 5,
-    noSiri: "6677889900",
-    tarikhMasa: "2024-05-01 11:00:00",
-    status: "Aktif",
-    butiran: 5,
-  },
-]);
+// Fetch permohonan list from API
+const fetchPermohonan = async () => {
+  try {
+    const response = await $fetch("/api/permohonan");
+    if (response.statusCode === 200) {
+      // Populate tableData with the fetched permohonan list
+      tableData.value = response.data;
+    } else {
+      console.error(response.message);
+    }
+  } catch (error) {
+    console.error("Error fetching permohonan data:", error);
+  }
+};
 
+// Function to navigate to the "Permohonan Baru" page
 const permohonanBaru = () => {
   navigateTo("/permohonan-temujanji/baru");
 };
 
-const kemaskini = (item) => {
-  navigateTo(`/permohonan-temujanji/kemaskini/${item}`);
+// Function to navigate to the "Kemaskini" page for a specific permohonan
+const kemaskini = (noSiri) => {
+  navigateTo(`/permohonan-temujanji/kemaskini/${noSiri}`);
 };
 
-const hapus = (item) => {
-  $swal
-    .fire({
-      title: "Anda pasti?",
-      text: "Anda tidak akan dapat memulihkan semula data ini!",
-      icon: "warning",
-      showCancelButton: true,
-      confirmButtonColor: "#3085d6",
-      cancelButtonColor: "#d33",
-      confirmButtonText: "Ya, hapuskan!",
-      cancelButtonText: "Batal",
-    })
-    .then((result) => {
-      if (result.isConfirmed) {
-        // Perform deletion logic here
-        console.log("Deleting item:", item);
-        // For now, let's just remove the item from the tableData
-        const index = tableData.value.findIndex((row) => row.noSiri === item);
-        if (index !== -1) {
-          tableData.value.splice(index, 1);
-        }
-        $swal.fire("Dihapuskan!", "Data telah dihapuskan.", "success");
+// Function to delete a permohonan by its noSiri
+const hapus = async (noSiri) => {
+  const confirmation = await $swal.fire({
+    title: "Anda pasti?",
+    text: "Anda tidak akan dapat memulihkan semula data ini!",
+    icon: "warning",
+    showCancelButton: true,
+    confirmButtonColor: "#3085d6",
+    cancelButtonColor: "#d33",
+    confirmButtonText: "Ya, hapuskan!",
+    cancelButtonText: "Batal",
+  });
+
+  if (confirmation.isConfirmed) {
+    try {
+      // Call API to delete the permohonan
+      const response = await $fetch(`/api/permohonan/${noSiri}`, {
+        method: "DELETE",
+      });
+      if (response.statusCode === 200) {
+        // Remove the deleted permohonan from tableData
+        tableData.value = tableData.value.filter(
+          (row) => row.noSiri !== noSiri
+        );
+        $swal.fire("Dihapuskan!", response.message, "success");
+      } else {
+        $swal.fire("Error!", response.message, "error");
       }
-    });
+    } catch (error) {
+      $swal.fire("Error!", "Failed to delete permohonan.", "error");
+    }
+  }
 };
-</script>
 
-<style lang="scss" scoped>
-/* Add any scoped styles here */
-</style>
+// Fetch the permohonan list when the component is mounted
+onMounted(() => {
+  fetchPermohonan();
+});
+</script>

server/api/permohonan/[noSiri].js

@@ -0,0 +1,27 @@
+// File: server/api/permohonan/[noSiri].delete.js
+export default defineEventHandler(async (event) => {
+  const { noSiri } = event.context.params;
+
+  if (!noSiri) {
+    return {
+      statusCode: 400,
+      message: "noSiri is required.",
+    };
+  }
+
+  try {
+    await prisma.permohonan.delete({
+      where: { no_siri: noSiri },
+    });
+
+    return {
+      statusCode: 200,
+      message: "Permohonan successfully deleted.",
+    };
+  } catch (error) {
+    return {
+      statusCode: 500,
+      message: "Failed to delete permohonan.",
+    };
+  }
+});

server/api/permohonan/index.js

@@ -0,0 +1,30 @@
+// File: server/api/permohonan/index.get.js
+export default defineEventHandler(async () => {
+  try {
+    const permohonan = await prisma.permohonan.findMany({
+      select: {
+        id: true,
+        no_siri: true,
+        create_at: true,
+        status_permohonan: true,
+      },
+    });
+
+    return {
+      statusCode: 200,
+      message: "Success",
+      data: permohonan.map((item, index) => ({
+        no: index + 1,
+        noSiri: item.no_siri,
+        tarikhMasa: item.create_at.toISOString().replace("T", " ").slice(0, 19),
+        status: item.status_permohonan,
+        butiran: item.id,
+      })),
+    };
+  } catch (error) {
+    return {
+      statusCode: 500,
+      message: "Failed to fetch permohonan data.",
+    };
+  }
+});