Merge branch 'dev' of https://github.com/corrad-software/niise into dev
This commit is contained in:
commit
fd4c511256
@ -131,17 +131,23 @@ export default [
|
||||
icon: "ph:number-circle-one-fill",
|
||||
child: [
|
||||
{
|
||||
title: "Permohonan Online",
|
||||
path: "/permohonan-online/senarai",
|
||||
title: "Permohonan Temujanji",
|
||||
path: "/permohonan-temujanji/senarai",
|
||||
child: [],
|
||||
meta: {},
|
||||
},
|
||||
{
|
||||
title: "Kemaskini Daftar",
|
||||
title: "Kaunter Semakan ",
|
||||
path: "/kemaskini-daftar/senarai",
|
||||
child: [],
|
||||
meta: {},
|
||||
},
|
||||
// {
|
||||
// title: "Kemaskini Daftar",
|
||||
// path: "/kemaskini-daftar/senarai",
|
||||
// child: [],
|
||||
// meta: {},
|
||||
// },
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex justify-between items-center">
|
||||
@ -104,14 +103,12 @@
|
||||
type="text"
|
||||
label="No Kertas Siasatan"
|
||||
v-model="noKertasSiasatan"
|
||||
validation="required"
|
||||
disabled
|
||||
/>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="No Laporan Polis"
|
||||
v-model="noLaporanPolis"
|
||||
validation="required"
|
||||
disabled
|
||||
/>
|
||||
<div class="flex justify-end gap-2 mt-4">
|
||||
@ -353,4 +350,4 @@ button {
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
176
pages/kemaskini-daftar/maklumat/[noSiri]/index.vue
Normal file
176
pages/kemaskini-daftar/maklumat/[noSiri]/index.vue
Normal file
@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- CARD: Status Semakan & Status Penerimaan -->
|
||||
<rs-card class="mt-4 p-4">
|
||||
<div class="flex justify-between">
|
||||
<h3>Status Semakan</h3>
|
||||
<rs-badge
|
||||
:variant="statusSemakan === 'Selesai' ? 'success' : 'warning'"
|
||||
>
|
||||
{{ statusSemakan }}
|
||||
</rs-badge>
|
||||
</div>
|
||||
<div class="flex justify-between mt-2">
|
||||
<h3>Status Penerimaan</h3>
|
||||
<rs-badge
|
||||
:variant="statusPenerimaan === 'Diterima' ? 'success' : 'danger'"
|
||||
>
|
||||
{{ statusPenerimaan }}
|
||||
</rs-badge>
|
||||
</div>
|
||||
</rs-card>
|
||||
|
||||
<!-- LIST: Pegawai Forensic Yang Terlibat -->
|
||||
<rs-card class="mt-4 p-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<h3>Pegawai Forensik Yang Terlibat</h3>
|
||||
<rs-button
|
||||
v-if="isKetuaBahagian"
|
||||
@click="addPegawai"
|
||||
variant="primary"
|
||||
size="sm"
|
||||
>Tambah Pegawai</rs-button
|
||||
>
|
||||
</div>
|
||||
<rs-table
|
||||
:data="forensicOfficers"
|
||||
:options="{ striped: true, borderless: true }"
|
||||
>
|
||||
<template v-slot:header>
|
||||
<tr>
|
||||
<th>Pangkat</th>
|
||||
<th>Nama</th>
|
||||
<th>No Pegawai</th>
|
||||
<th v-if="isKetuaBahagian">Tindakan</th>
|
||||
</tr>
|
||||
</template>
|
||||
<template v-slot:pangkat="data">
|
||||
{{ data.text }}
|
||||
</template>
|
||||
<template v-slot:nama="data">
|
||||
{{ data.text }}
|
||||
</template>
|
||||
<template v-slot:noPegawai="data">
|
||||
{{ data.text }}
|
||||
</template>
|
||||
<template v-slot:action="data" v-if="isKetuaBahagian">
|
||||
<div class="flex gap-2">
|
||||
<rs-button @click="editPegawai(data.value)" variant="info" size="sm"
|
||||
>Edit</rs-button
|
||||
>
|
||||
<rs-button
|
||||
@click="deletePegawai(data.value)"
|
||||
variant="danger"
|
||||
size="sm"
|
||||
>Delete</rs-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</rs-table>
|
||||
</rs-card>
|
||||
|
||||
<!-- LIST: Bahan Bukti -->
|
||||
<rs-card class="mt-4 p-4">
|
||||
<h3>Bahan Bukti</h3>
|
||||
<rs-table
|
||||
:data="evidences"
|
||||
:options="{ striped: true, borderless: true }"
|
||||
>
|
||||
<template v-slot:header>
|
||||
<tr>
|
||||
<th>No</th>
|
||||
<th>Jenis Barang</th>
|
||||
<th>Tag No.</th>
|
||||
<th>Keadaan</th>
|
||||
<th>Kuantiti</th>
|
||||
<th v-if="!isKetuaJabatan">Tindakan</th>
|
||||
</tr>
|
||||
</template>
|
||||
<template v-slot:no="data">
|
||||
{{ data.text }}
|
||||
</template>
|
||||
<template v-slot:jenisBarang="data">
|
||||
{{ data.text }}
|
||||
</template>
|
||||
<template v-slot:tagNo="data">
|
||||
{{ data.text }}
|
||||
</template>
|
||||
<template v-slot:keadaan="data">
|
||||
{{ data.text }}
|
||||
</template>
|
||||
<template v-slot:kuantiti="data">
|
||||
{{ data.text }}
|
||||
</template>
|
||||
<template v-slot:action="data" v-if="!isKetuaJabatan">
|
||||
<rs-button
|
||||
@click="generateReport(data.value)"
|
||||
variant="primary"
|
||||
size="sm"
|
||||
>Jana Laporan</rs-button
|
||||
>
|
||||
</template>
|
||||
</rs-table>
|
||||
</rs-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { useNuxtApp } from "nuxt/app";
|
||||
|
||||
// Status data
|
||||
const statusSemakan = ref("Selesai"); // Can be dynamic (e.g., "Dalam Proses", "Selesai")
|
||||
const statusPenerimaan = ref("Diterima"); // Can be dynamic (e.g., "Diterima", "Ditolak")
|
||||
|
||||
// Forensic Officers Data (Pangkat, Nama, No Pegawai)
|
||||
const forensicOfficers = ref([
|
||||
{ pangkat: "Inspektor", nama: "Ali bin Abu", noPegawai: "PG12345" },
|
||||
{ pangkat: "Sarjan", nama: "Siti binti Ahmad", noPegawai: "PG54321" },
|
||||
]);
|
||||
|
||||
// Evidence Data (No, Jenis Barang, Tag No, Keadaan, Kuantiti)
|
||||
const evidences = ref([
|
||||
{
|
||||
no: 1,
|
||||
jenisBarang: "Dokumen",
|
||||
tagNo: "TAG001",
|
||||
keadaan: "Baik",
|
||||
kuantiti: 3,
|
||||
},
|
||||
{
|
||||
no: 2,
|
||||
jenisBarang: "Peralatan Elektronik",
|
||||
tagNo: "TAG002",
|
||||
keadaan: "Rosak",
|
||||
kuantiti: 5,
|
||||
},
|
||||
]);
|
||||
|
||||
// User Roles
|
||||
const isKetuaBahagian = ref(true); // Simulate role check
|
||||
const isKetuaJabatan = ref(false); // Simulate role check
|
||||
|
||||
// Actions
|
||||
const addPegawai = () => {
|
||||
console.log("Add Pegawai clicked");
|
||||
};
|
||||
|
||||
const editPegawai = (pegawai) => {
|
||||
console.log("Edit Pegawai:", pegawai);
|
||||
};
|
||||
|
||||
const deletePegawai = (pegawai) => {
|
||||
console.log("Delete Pegawai:", pegawai);
|
||||
forensicOfficers.value = forensicOfficers.value.filter(
|
||||
(officer) => officer.noPegawai !== pegawai.noPegawai
|
||||
);
|
||||
};
|
||||
|
||||
const generateReport = (bahanBukti) => {
|
||||
console.log("Generate Report for:", bahanBukti);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* Style customizations for table or buttons */
|
||||
</style>
|
||||
@ -1,4 +1,3 @@
|
||||
@ -1,146 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex justify-between items-center">
|
||||
@ -8,16 +7,16 @@
|
||||
<rs-card class="mt-4 py-2">
|
||||
<rs-table
|
||||
:data="tableData"
|
||||
:options="{
|
||||
variant: 'default',
|
||||
:options='{
|
||||
variant: "default",
|
||||
striped: true,
|
||||
borderless: true,
|
||||
}"
|
||||
:options-advanced="{
|
||||
borderless: true
|
||||
}'
|
||||
:options-advanced='{
|
||||
sortable: true,
|
||||
responsive: true,
|
||||
filterable: false,
|
||||
}"
|
||||
filterable: false
|
||||
}'
|
||||
advanced
|
||||
>
|
||||
<template v-slot:header>
|
||||
@ -45,6 +44,18 @@
|
||||
</template>
|
||||
<template v-slot:butiran="data">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<!-- View Button -->
|
||||
<rs-button
|
||||
@click="lihat(data.value.noSiri)"
|
||||
variant="info"
|
||||
size="sm"
|
||||
class="p-1"
|
||||
title="Lihat"
|
||||
>
|
||||
<Icon name="ic:outline-visibility" size="1.2rem" />
|
||||
</rs-button>
|
||||
|
||||
<!-- Edit Button -->
|
||||
<rs-button
|
||||
@click="kemaskini(data.value.noSiri)"
|
||||
variant="primary"
|
||||
@ -108,13 +119,18 @@ const tableData = ref([
|
||||
]);
|
||||
|
||||
const permohonanBaru = () => {
|
||||
navigateTo("/permohonan-online/baru");
|
||||
navigateTo("/permohonan-temujanji/baru");
|
||||
};
|
||||
|
||||
const kemaskini = (item) => {
|
||||
navigateTo(`/kemaskini-daftar/kemaskini/${item}`);
|
||||
};
|
||||
|
||||
const lihat = (item) => {
|
||||
// Navigate to a detailed view page for the selected item
|
||||
navigateTo(`/kemaskini-daftar/maklumat/${item}`);
|
||||
};
|
||||
|
||||
const hapus = (item) => {
|
||||
$swal
|
||||
.fire({
|
||||
@ -131,7 +147,7 @@ const hapus = (item) => {
|
||||
if (result.isConfirmed) {
|
||||
// Perform deletion logic here
|
||||
console.log("Deleting item:", item);
|
||||
// For now, let's just remove the item from the tableData
|
||||
// Remove the item from the tableData
|
||||
const index = tableData.value.findIndex((row) => row.noSiri === item);
|
||||
if (index !== -1) {
|
||||
tableData.value.splice(index, 1);
|
||||
@ -141,7 +157,3 @@ const hapus = (item) => {
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* Add any scoped styles here */
|
||||
</style>
|
||||
@ -1,257 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex justify-between items-center">
|
||||
<h1>Permohonan Baru</h1>
|
||||
</div>
|
||||
|
||||
<rs-card class="mt-4 p-4">
|
||||
<FormKit type="form" :actions="false" @submit="submitForm">
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Nama Pemohon"
|
||||
v-model="namaPemohon"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Pangkat Pemohon"
|
||||
v-model="pangkatPemohon"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="No Pegawai Pemohon"
|
||||
v-model="noPegawaiPemohon"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Nama Penghantar"
|
||||
v-model="namaPenghantar"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Pangkat Penghantar"
|
||||
v-model="pangkatPenghantar"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="textarea"
|
||||
label="Ringkasan Kenyataan Kes"
|
||||
v-model="ringkasanKenyataanKes"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="number"
|
||||
label="Bilangan"
|
||||
v-model="bilangan"
|
||||
validation="required|number"
|
||||
/>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Jenis Barang"
|
||||
v-model="jenisBarang"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Tanda Barang"
|
||||
v-model="tandaBarang"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Keadaan Barang"
|
||||
v-model="keadaanBarang"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="number"
|
||||
label="Kuantiti Barang"
|
||||
v-model="kuantitiBarang"
|
||||
validation="required|number"
|
||||
/>
|
||||
<FormKit
|
||||
type="select"
|
||||
label="Jenis Barang"
|
||||
v-model="jenisBarangDetail"
|
||||
:options="jenisBarangDetailOptions"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="select"
|
||||
label="Jenis Barang Siber"
|
||||
v-model="jenisBarangSiber"
|
||||
:options="jenisBarangSiberOptions"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="No Kertas Siasatan"
|
||||
v-model="noKertasSiasatan"
|
||||
validation="required"
|
||||
/>
|
||||
<FormKit
|
||||
type="text"
|
||||
label="No Laporan Polis"
|
||||
v-model="noLaporanPolis"
|
||||
validation="required"
|
||||
/>
|
||||
<div class="flex justify-end gap-2 mt-4">
|
||||
<rs-button type="button" @click="navigateBack" variant="danger"
|
||||
>Kembali</rs-button
|
||||
>
|
||||
<rs-button
|
||||
type="button"
|
||||
btn-type="submit"
|
||||
@click="simpan"
|
||||
variant="primary"
|
||||
>Simpan</rs-button
|
||||
>
|
||||
<rs-button
|
||||
type="submit"
|
||||
@click="submitForm"
|
||||
btn-type="submit"
|
||||
variant="success"
|
||||
>Hantar</rs-button
|
||||
>
|
||||
</div>
|
||||
</FormKit>
|
||||
</rs-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const namaPemohon = ref("");
|
||||
const pangkatPemohon = ref("");
|
||||
const noPegawaiPemohon = ref("");
|
||||
const namaPenghantar = ref("");
|
||||
const pangkatPenghantar = ref("");
|
||||
const ringkasanKenyataanKes = ref("");
|
||||
const bilangan = ref(0);
|
||||
const jenisBarang = ref("");
|
||||
const tandaBarang = ref("");
|
||||
const keadaanBarang = ref("");
|
||||
const kuantitiBarang = ref(0);
|
||||
const jenisBarangDetail = ref("");
|
||||
const jenisBarangSiber = ref("");
|
||||
const noKertasSiasatan = ref("");
|
||||
const noLaporanPolis = ref("");
|
||||
|
||||
const jenisBarangDetailOptions = [
|
||||
"PASPORT",
|
||||
"MALPASS",
|
||||
"CAP KESELAMATAN",
|
||||
"CAP JARI",
|
||||
"PEMERIKSAAN",
|
||||
"I-KAD",
|
||||
"LAIN-LAIN",
|
||||
];
|
||||
|
||||
const jenisBarangSiberOptions = ["SIBER", "TULISAN TANGAN"];
|
||||
|
||||
const navigateBack = () => {
|
||||
router.back();
|
||||
};
|
||||
|
||||
const isFormValid = () => {
|
||||
const requiredFields = [
|
||||
namaPemohon,
|
||||
pangkatPemohon,
|
||||
noPegawaiPemohon,
|
||||
namaPenghantar,
|
||||
pangkatPenghantar,
|
||||
ringkasanKenyataanKes,
|
||||
bilangan,
|
||||
jenisBarang,
|
||||
tandaBarang,
|
||||
keadaanBarang,
|
||||
kuantitiBarang,
|
||||
jenisBarangDetail,
|
||||
jenisBarangSiber,
|
||||
noKertasSiasatan,
|
||||
noLaporanPolis,
|
||||
];
|
||||
|
||||
return requiredFields.every(
|
||||
(field) => field.value !== "" && field.value !== 0
|
||||
);
|
||||
};
|
||||
|
||||
const simpan = () => {
|
||||
if (isFormValid()) {
|
||||
// Save form data logic
|
||||
console.log("Form data saved");
|
||||
} else {
|
||||
console.error("Please fill in all required fields.");
|
||||
}
|
||||
};
|
||||
|
||||
const submitForm = () => {
|
||||
if (isFormValid()) {
|
||||
// Handle form submission
|
||||
console.log({
|
||||
namaPemohon: namaPemohon.value,
|
||||
pangkatPemohon: pangkatPemohon.value,
|
||||
noPegawaiPemohon: noPegawaiPemohon.value,
|
||||
namaPenghantar: namaPenghantar.value,
|
||||
pangkatPenghantar: pangkatPenghantar.value,
|
||||
ringkasanKenyataanKes: ringkasanKenyataanKes.value,
|
||||
bilangan: bilangan.value,
|
||||
jenisBarang: jenisBarang.value,
|
||||
tandaBarang: tandaBarang.value,
|
||||
keadaanBarang: keadaanBarang.value,
|
||||
kuantitiBarang: kuantitiBarang.value,
|
||||
jenisBarangDetail: jenisBarangDetail.value,
|
||||
jenisBarangSiber: jenisBarangSiber.value,
|
||||
noKertasSiasatan: noKertasSiasatan.value,
|
||||
noLaporanPolis: noLaporanPolis.value,
|
||||
});
|
||||
|
||||
// Show success message
|
||||
$swal.fire({
|
||||
title: "Berjaya!",
|
||||
text: "Borang telah berjaya dihantar.",
|
||||
icon: "success",
|
||||
confirmButtonText: "OK",
|
||||
});
|
||||
} else {
|
||||
// Show error message
|
||||
$swal.fire({
|
||||
title: "Ralat!",
|
||||
text: "Sila isi semua medan yang diperlukan.",
|
||||
icon: "error",
|
||||
confirmButtonText: "OK",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const { $swal } = useNuxtApp();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
</style>
|
||||
401
pages/permohonan-temujanji/baru/index.vue
Normal file
401
pages/permohonan-temujanji/baru/index.vue
Normal file
@ -0,0 +1,401 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex justify-between items-center">
|
||||
<h1>Permohonan Baru</h1>
|
||||
</div>
|
||||
|
||||
<rs-card class="mt-4 p-4">
|
||||
<FormKit type="form" :actions="false" @submit="submitForm">
|
||||
<!-- Nama Pemohon Input -->
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Nama Pemohon"
|
||||
v-model="namaPemohon"
|
||||
validation="required"
|
||||
/>
|
||||
|
||||
<!-- Pangkat Pemohon Input -->
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Pangkat Pemohon"
|
||||
v-model="pangkatPemohon"
|
||||
validation="required"
|
||||
/>
|
||||
|
||||
<!-- No Pegawai Pemohon Input -->
|
||||
<FormKit
|
||||
type="text"
|
||||
label="No Pegawai Pemohon"
|
||||
v-model="noPegawaiPemohon"
|
||||
validation="required"
|
||||
/>
|
||||
|
||||
<!-- Checkbox: Apply Pemohon info to Penghantar -->
|
||||
<FormKit
|
||||
type="checkbox"
|
||||
label="Penghantar Sama seperti Pemohon"
|
||||
v-model="isPenghantarSameAsPemohon"
|
||||
/>
|
||||
|
||||
<!-- Conditionally render Nama Penghantar field if checkbox is not checked -->
|
||||
<FormKit
|
||||
v-if="!isPenghantarSameAsPemohon"
|
||||
type="text"
|
||||
label="Nama Penghantar"
|
||||
v-model="namaPenghantar"
|
||||
validation="required"
|
||||
/>
|
||||
|
||||
<!-- Conditionally render Pangkat Penghantar field if checkbox is not checked -->
|
||||
<FormKit
|
||||
v-if="!isPenghantarSameAsPemohon"
|
||||
type="text"
|
||||
label="Pangkat Penghantar"
|
||||
v-model="pangkatPenghantar"
|
||||
validation="required"
|
||||
/>
|
||||
|
||||
<!-- Conditionally render No Pegawai Penghantar field if checkbox is not checked -->
|
||||
<FormKit
|
||||
v-if="!isPenghantarSameAsPemohon"
|
||||
type="text"
|
||||
label="No Pegawai Penghantar"
|
||||
v-model="noPegawaiPenghantar"
|
||||
validation="required"
|
||||
/>
|
||||
|
||||
<!-- Ringkasan Kenyataan Kes Input -->
|
||||
<FormKit
|
||||
type="textarea"
|
||||
label="Ringkasan Kenyataan Kes"
|
||||
v-model="ringkasanKenyataanKes"
|
||||
validation="required"
|
||||
/>
|
||||
|
||||
<!-- Bilangan Input -->
|
||||
<FormKit
|
||||
type="number"
|
||||
label="Bilangan"
|
||||
v-model="bilangan"
|
||||
validation="required|number"
|
||||
/>
|
||||
|
||||
<!-- Jenis Barang Input -->
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Jenis Barang"
|
||||
v-model="jenisBarang"
|
||||
validation="required"
|
||||
/>
|
||||
|
||||
<!-- Tanda Barang Input -->
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Tanda Barang"
|
||||
v-model="tandaBarang"
|
||||
validation="required"
|
||||
/>
|
||||
|
||||
<!-- Keadaan Barang Input -->
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Keadaan Barang"
|
||||
v-model="keadaanBarang"
|
||||
validation="required"
|
||||
/>
|
||||
|
||||
<!-- Kuantiti Barang Input -->
|
||||
<FormKit
|
||||
type="number"
|
||||
label="Kuantiti Barang"
|
||||
v-model="kuantitiBarang"
|
||||
validation="required|number"
|
||||
/>
|
||||
|
||||
<!-- Jenis Barang Detail Select Input -->
|
||||
<FormKit
|
||||
type="select"
|
||||
label="Jenis Barang"
|
||||
v-model="jenisBarangDetail"
|
||||
:options="jenisBarangDetailOptions"
|
||||
validation="required"
|
||||
/>
|
||||
|
||||
<!-- Jenis Barang Siber Select Input -->
|
||||
<FormKit
|
||||
type="select"
|
||||
label="Jenis Barang Siber"
|
||||
v-model="jenisBarangSiber"
|
||||
:options="jenisBarangSiberOptions"
|
||||
validation="required"
|
||||
/>
|
||||
|
||||
<!-- No Kertas Siasatan Input -->
|
||||
<FormKit
|
||||
type="text"
|
||||
label="No Kertas Siasatan"
|
||||
v-model="noKertasSiasatan"
|
||||
validation="required"
|
||||
/>
|
||||
|
||||
<!-- No Laporan Polis Input -->
|
||||
<FormKit
|
||||
type="text"
|
||||
label="No Laporan Polis"
|
||||
v-model="noLaporanPolis"
|
||||
validation="required"
|
||||
/>
|
||||
|
||||
<!-- Tarikh Temujanji Input -->
|
||||
<FormKit
|
||||
type="date"
|
||||
label="Tarikh temujanji"
|
||||
v-model="tarikhTemujanji"
|
||||
validation="required|date|after:today"
|
||||
:validation-messages="{
|
||||
after: 'Tarikh temujanji harus selepas hari ini',
|
||||
}"
|
||||
/>
|
||||
|
||||
<!-- Slot Masa Input -->
|
||||
<FormKit
|
||||
type="time"
|
||||
label="Slot masa"
|
||||
v-model="slotMasa"
|
||||
validation="required"
|
||||
/>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="flex justify-end gap-2 mt-4">
|
||||
<rs-button type="button" @click="navigateBack" variant="danger"
|
||||
>Kembali</rs-button
|
||||
>
|
||||
<rs-button
|
||||
type="button"
|
||||
btn-type="submit"
|
||||
@click="simpan"
|
||||
variant="primary"
|
||||
>Simpan</rs-button
|
||||
>
|
||||
<rs-button
|
||||
type="submit"
|
||||
@click="submitForm"
|
||||
btn-type="submit"
|
||||
variant="success"
|
||||
>Hantar</rs-button
|
||||
>
|
||||
</div>
|
||||
</FormKit>
|
||||
</rs-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const namaPemohon = ref("");
|
||||
const pangkatPemohon = ref("");
|
||||
const noPegawaiPemohon = ref("");
|
||||
const namaPenghantar = ref("");
|
||||
const pangkatPenghantar = ref("");
|
||||
const noPegawaiPenghantar = ref("");
|
||||
const ringkasanKenyataanKes = ref("");
|
||||
const bilangan = ref(0);
|
||||
const jenisBarang = ref("");
|
||||
const tandaBarang = ref("");
|
||||
const keadaanBarang = ref("");
|
||||
const kuantitiBarang = ref(0);
|
||||
const jenisBarangDetail = ref("");
|
||||
const jenisBarangSiber = ref("");
|
||||
const noKertasSiasatan = ref("");
|
||||
const noLaporanPolis = ref("");
|
||||
const tarikhTemujanji = ref("");
|
||||
const slotMasa = ref("");
|
||||
|
||||
// State for single checkbox
|
||||
const isPenghantarSameAsPemohon = ref(false);
|
||||
|
||||
const jenisBarangDetailOptions = [
|
||||
"PASPORT",
|
||||
"MALPASS",
|
||||
"CAP KESELAMATAN",
|
||||
"CAP JARI",
|
||||
"PEMERIKSAAN",
|
||||
"I-KAD",
|
||||
"LAIN-LAIN",
|
||||
];
|
||||
|
||||
const jenisBarangSiberOptions = ["SIBER", "TULISAN TANGAN"];
|
||||
|
||||
// Watcher to update Penghantar fields when the single checkbox is checked
|
||||
watch(isPenghantarSameAsPemohon, (newValue) => {
|
||||
if (newValue) {
|
||||
// Copy values from Pemohon fields to Penghantar fields
|
||||
namaPenghantar.value = namaPemohon.value;
|
||||
pangkatPenghantar.value = pangkatPemohon.value;
|
||||
noPegawaiPenghantar.value = noPegawaiPemohon.value;
|
||||
} else {
|
||||
// Clear Penghantar fields when unchecked
|
||||
namaPenghantar.value = "";
|
||||
pangkatPenghantar.value = "";
|
||||
noPegawaiPenghantar.value = "";
|
||||
}
|
||||
});
|
||||
|
||||
const navigateBack = () => {
|
||||
router.back();
|
||||
};
|
||||
|
||||
const isFormValid = () => {
|
||||
const requiredFields = [
|
||||
namaPemohon,
|
||||
pangkatPemohon,
|
||||
noPegawaiPemohon,
|
||||
namaPenghantar,
|
||||
pangkatPenghantar,
|
||||
noPegawaiPenghantar,
|
||||
ringkasanKenyataanKes,
|
||||
bilangan,
|
||||
jenisBarang,
|
||||
tandaBarang,
|
||||
keadaanBarang,
|
||||
kuantitiBarang,
|
||||
jenisBarangDetail,
|
||||
jenisBarangSiber,
|
||||
noKertasSiasatan,
|
||||
noLaporanPolis,
|
||||
tarikhTemujanji,
|
||||
slotMasa,
|
||||
];
|
||||
|
||||
return requiredFields.every(
|
||||
(field) => field.value !== "" && field.value !== 0
|
||||
);
|
||||
};
|
||||
|
||||
const simpan = () => {
|
||||
$swal
|
||||
.fire({
|
||||
title: "Adakah anda pasti?",
|
||||
text: "Borang boleh dikemaskini selepas di simpan.",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
confirmButtonText: "Ya, Hantar",
|
||||
cancelButtonText: "Batal",
|
||||
})
|
||||
.then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
// Handle form submission
|
||||
console.log({
|
||||
namaPemohon: namaPemohon.value,
|
||||
pangkatPemohon: pangkatPemohon.value,
|
||||
noPegawaiPemohon: noPegawaiPemohon.value,
|
||||
namaPenghantar: namaPenghantar.value,
|
||||
pangkatPenghantar: pangkatPenghantar.value,
|
||||
noPegawaiPenghantar: noPegawaiPenghantar.value,
|
||||
ringkasanKenyataanKes: ringkasanKenyataanKes.value,
|
||||
bilangan: bilangan.value,
|
||||
jenisBarang: jenisBarang.value,
|
||||
tandaBarang: tandaBarang.value,
|
||||
keadaanBarang: keadaanBarang.value,
|
||||
kuantitiBarang: kuantitiBarang.value,
|
||||
jenisBarangDetail: jenisBarangDetail.value,
|
||||
jenisBarangSiber: jenisBarangSiber.value,
|
||||
noKertasSiasatan: noKertasSiasatan.value,
|
||||
noLaporanPolis: noLaporanPolis.value,
|
||||
tarikhTemujanji: tarikhTemujanji.value,
|
||||
slotMasa: slotMasa.value,
|
||||
});
|
||||
|
||||
// Show success message
|
||||
$swal.fire({
|
||||
title: "Berjaya!",
|
||||
text: "Borang telah berjaya disimpan.",
|
||||
icon: "success",
|
||||
confirmButtonText: "OK",
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const submitForm = () => {
|
||||
$swal
|
||||
.fire({
|
||||
title: "Adakah anda pasti?",
|
||||
text: "Anda tidak boleh mengubah maklumat selepas borang dihantar.",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
confirmButtonText: "Ya, Hantar",
|
||||
cancelButtonText: "Batal",
|
||||
})
|
||||
.then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
if (isFormValid()) {
|
||||
// Handle form submission
|
||||
console.log({
|
||||
namaPemohon: namaPemohon.value,
|
||||
pangkatPemohon: pangkatPemohon.value,
|
||||
noPegawaiPemohon: noPegawaiPemohon.value,
|
||||
namaPenghantar: namaPenghantar.value,
|
||||
pangkatPenghantar: pangkatPenghantar.value,
|
||||
noPegawaiPenghantar: noPegawaiPenghantar.value,
|
||||
ringkasanKenyataanKes: ringkasanKenyataanKes.value,
|
||||
bilangan: bilangan.value,
|
||||
jenisBarang: jenisBarang.value,
|
||||
tandaBarang: tandaBarang.value,
|
||||
keadaanBarang: keadaanBarang.value,
|
||||
kuantitiBarang: kuantitiBarang.value,
|
||||
jenisBarangDetail: jenisBarangDetail.value,
|
||||
jenisBarangSiber: jenisBarangSiber.value,
|
||||
noKertasSiasatan: noKertasSiasatan.value,
|
||||
noLaporanPolis: noLaporanPolis.value,
|
||||
tarikhTemujanji: tarikhTemujanji.value,
|
||||
slotMasa: slotMasa.value,
|
||||
});
|
||||
|
||||
// Show success message
|
||||
$swal.fire({
|
||||
title: "Berjaya!",
|
||||
text: "Borang telah berjaya dihantar.",
|
||||
icon: "success",
|
||||
confirmButtonText: "OK",
|
||||
});
|
||||
} else {
|
||||
// Show error message
|
||||
$swal.fire({
|
||||
title: "Ralat!",
|
||||
text: "Sila isi semua medan yang diperlukan.",
|
||||
icon: "error",
|
||||
confirmButtonText: "OK",
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const { $swal } = useNuxtApp();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
</style>
|
||||
@ -6,72 +6,113 @@
|
||||
|
||||
<rs-card class="mt-4 p-4">
|
||||
<FormKit type="form" :actions="false" @submit="submitForm">
|
||||
<!-- Nama Pemohon Input -->
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Nama Pemohon"
|
||||
v-model="namaPemohon"
|
||||
validation="required"
|
||||
/>
|
||||
|
||||
<!-- Pangkat Pemohon Input -->
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Pangkat Pemohon"
|
||||
v-model="pangkatPemohon"
|
||||
validation="required"
|
||||
/>
|
||||
|
||||
<!-- No Pegawai Pemohon Input -->
|
||||
<FormKit
|
||||
type="text"
|
||||
label="No Pegawai Pemohon"
|
||||
v-model="noPegawaiPemohon"
|
||||
validation="required"
|
||||
/>
|
||||
|
||||
<!-- Checkbox: Apply Pemohon info to Penghantar -->
|
||||
<FormKit
|
||||
type="checkbox"
|
||||
label="Sama seperti Pemohon"
|
||||
v-model="isPenghantarSameAsPemohon"
|
||||
/>
|
||||
|
||||
<!-- Conditionally render Nama Penghantar field if checkbox is not checked -->
|
||||
<FormKit
|
||||
v-if="!isPenghantarSameAsPemohon"
|
||||
type="text"
|
||||
label="Nama Penghantar"
|
||||
v-model="namaPenghantar"
|
||||
validation="required"
|
||||
/>
|
||||
|
||||
<!-- Conditionally render Pangkat Penghantar field if checkbox is not checked -->
|
||||
<FormKit
|
||||
v-if="!isPenghantarSameAsPemohon"
|
||||
type="text"
|
||||
label="Pangkat Penghantar"
|
||||
v-model="pangkatPenghantar"
|
||||
validation="required"
|
||||
/>
|
||||
|
||||
<!-- Conditionally render No Pegawai Penghantar field if checkbox is not checked -->
|
||||
<FormKit
|
||||
v-if="!isPenghantarSameAsPemohon"
|
||||
type="text"
|
||||
label="No Pegawai Penghantar"
|
||||
v-model="noPegawaiPenghantar"
|
||||
validation="required"
|
||||
/>
|
||||
|
||||
<!-- Ringkasan Kenyataan Kes Input -->
|
||||
<FormKit
|
||||
type="textarea"
|
||||
label="Ringkasan Kenyataan Kes"
|
||||
v-model="ringkasanKenyataanKes"
|
||||
validation="required"
|
||||
/>
|
||||
|
||||
<!-- Bilangan Input -->
|
||||
<FormKit
|
||||
type="number"
|
||||
label="Bilangan"
|
||||
v-model="bilangan"
|
||||
validation="required|number"
|
||||
/>
|
||||
|
||||
<!-- Jenis Barang Input -->
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Jenis Barang"
|
||||
v-model="jenisBarang"
|
||||
validation="required"
|
||||
/>
|
||||
|
||||
<!-- Tanda Barang Input -->
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Tanda Barang"
|
||||
v-model="tandaBarang"
|
||||
validation="required"
|
||||
/>
|
||||
|
||||
<!-- Keadaan Barang Input -->
|
||||
<FormKit
|
||||
type="text"
|
||||
label="Keadaan Barang"
|
||||
v-model="keadaanBarang"
|
||||
validation="required"
|
||||
/>
|
||||
|
||||
<!-- Kuantiti Barang Input -->
|
||||
<FormKit
|
||||
type="number"
|
||||
label="Kuantiti Barang"
|
||||
v-model="kuantitiBarang"
|
||||
validation="required|number"
|
||||
/>
|
||||
|
||||
<!-- Jenis Barang Detail Select Input -->
|
||||
<FormKit
|
||||
type="select"
|
||||
label="Jenis Barang"
|
||||
@ -79,6 +120,8 @@
|
||||
:options="jenisBarangDetailOptions"
|
||||
validation="required"
|
||||
/>
|
||||
|
||||
<!-- Jenis Barang Siber Select Input -->
|
||||
<FormKit
|
||||
type="select"
|
||||
label="Jenis Barang Siber"
|
||||
@ -86,18 +129,38 @@
|
||||
:options="jenisBarangSiberOptions"
|
||||
validation="required"
|
||||
/>
|
||||
|
||||
<!-- No Kertas Siasatan Input -->
|
||||
<FormKit
|
||||
type="text"
|
||||
label="No Kertas Siasatan"
|
||||
v-model="noKertasSiasatan"
|
||||
validation="required"
|
||||
/>
|
||||
|
||||
<!-- No Laporan Polis Input -->
|
||||
<FormKit
|
||||
type="text"
|
||||
label="No Laporan Polis"
|
||||
v-model="noLaporanPolis"
|
||||
validation="required"
|
||||
/>
|
||||
|
||||
<!-- Tarikh Temujanji Input -->
|
||||
<FormKit
|
||||
type="date"
|
||||
label="Tarikh temujanji"
|
||||
v-model="tarikhTemujanji"
|
||||
validation="date|after:today"
|
||||
:validation-messages="{
|
||||
after: 'Tarikh temujanji mestilah selepas hari ini',
|
||||
}"
|
||||
/>
|
||||
|
||||
<!-- Slot Masa Input -->
|
||||
<FormKit type="time" label="Slot masa" v-model="slotMasa" />
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="flex justify-end gap-2 mt-4">
|
||||
<rs-button type="button" @click="navigateBack" variant="danger"
|
||||
>Kembali</rs-button
|
||||
@ -123,7 +186,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
@ -131,11 +194,13 @@ const route = useRoute();
|
||||
|
||||
const noSiri = ref(route.params.noSiri);
|
||||
|
||||
// Form data
|
||||
const namaPemohon = ref("");
|
||||
const pangkatPemohon = ref("");
|
||||
const noPegawaiPemohon = ref("");
|
||||
const namaPenghantar = ref("");
|
||||
const pangkatPenghantar = ref("");
|
||||
const noPegawaiPenghantar = ref("");
|
||||
const ringkasanKenyataanKes = ref("");
|
||||
const bilangan = ref(0);
|
||||
const jenisBarang = ref("");
|
||||
@ -146,6 +211,11 @@ const jenisBarangDetail = ref("");
|
||||
const jenisBarangSiber = ref("");
|
||||
const noKertasSiasatan = ref("");
|
||||
const noLaporanPolis = ref("");
|
||||
const tarikhTemujanji = ref("");
|
||||
const slotMasa = ref("");
|
||||
|
||||
// State for single checkbox
|
||||
const isPenghantarSameAsPemohon = ref(false);
|
||||
|
||||
const jenisBarangDetailOptions = [
|
||||
"PASPORT",
|
||||
@ -159,10 +229,26 @@ const jenisBarangDetailOptions = [
|
||||
|
||||
const jenisBarangSiberOptions = ["SIBER", "TULISAN TANGAN"];
|
||||
|
||||
// Watcher to update Penghantar fields when the checkbox is checked
|
||||
watch(isPenghantarSameAsPemohon, (newValue) => {
|
||||
if (newValue) {
|
||||
// Copy values from Pemohon fields to Penghantar fields
|
||||
namaPenghantar.value = namaPemohon.value;
|
||||
pangkatPenghantar.value = pangkatPemohon.value;
|
||||
noPegawaiPenghantar.value = noPegawaiPemohon.value;
|
||||
} else {
|
||||
// Clear Penghantar fields when unchecked
|
||||
namaPenghantar.value = "";
|
||||
pangkatPenghantar.value = "";
|
||||
noPegawaiPenghantar.value = "";
|
||||
}
|
||||
});
|
||||
|
||||
const navigateBack = () => {
|
||||
router.back();
|
||||
};
|
||||
|
||||
// Validate the form
|
||||
const isFormValid = () => {
|
||||
const requiredFields = [
|
||||
namaPemohon,
|
||||
@ -170,6 +256,7 @@ const isFormValid = () => {
|
||||
noPegawaiPemohon,
|
||||
namaPenghantar,
|
||||
pangkatPenghantar,
|
||||
noPegawaiPenghantar,
|
||||
ringkasanKenyataanKes,
|
||||
bilangan,
|
||||
jenisBarang,
|
||||
@ -180,6 +267,8 @@ const isFormValid = () => {
|
||||
jenisBarangSiber,
|
||||
noKertasSiasatan,
|
||||
noLaporanPolis,
|
||||
tarikhTemujanji,
|
||||
slotMasa,
|
||||
];
|
||||
|
||||
return requiredFields.every(
|
||||
@ -188,53 +277,106 @@ const isFormValid = () => {
|
||||
};
|
||||
|
||||
const simpan = () => {
|
||||
if (isFormValid()) {
|
||||
// Save form data logic
|
||||
console.log("Form data saved");
|
||||
} else {
|
||||
console.error("Please fill in all required fields.");
|
||||
}
|
||||
$swal
|
||||
.fire({
|
||||
title: "Adakah anda pasti?",
|
||||
text: "Borang boleh dikemas kini selepas di simpan.",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
confirmButtonText: "Ya, Hantar",
|
||||
cancelButtonText: "Batal",
|
||||
})
|
||||
.then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
// Handle form submission
|
||||
console.log({
|
||||
namaPemohon: namaPemohon.value,
|
||||
pangkatPemohon: pangkatPemohon.value,
|
||||
noPegawaiPemohon: noPegawaiPemohon.value,
|
||||
namaPenghantar: namaPenghantar.value,
|
||||
pangkatPenghantar: pangkatPenghantar.value,
|
||||
noPegawaiPenghantar: noPegawaiPenghantar.value,
|
||||
ringkasanKenyataanKes: ringkasanKenyataanKes.value,
|
||||
bilangan: bilangan.value,
|
||||
jenisBarang: jenisBarang.value,
|
||||
tandaBarang: tandaBarang.value,
|
||||
keadaanBarang: keadaanBarang.value,
|
||||
kuantitiBarang: kuantitiBarang.value,
|
||||
jenisBarangDetail: jenisBarangDetail.value,
|
||||
jenisBarangSiber: jenisBarangSiber.value,
|
||||
noKertasSiasatan: noKertasSiasatan.value,
|
||||
noLaporanPolis: noLaporanPolis.value,
|
||||
tarikhTemujanji: tarikhTemujanji.value,
|
||||
slotMasa: slotMasa.value,
|
||||
});
|
||||
|
||||
// Show success message
|
||||
$swal.fire({
|
||||
title: "Berjaya!",
|
||||
text: "Borang telah berjaya disimpan.",
|
||||
icon: "success",
|
||||
confirmButtonText: "OK",
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const submitForm = () => {
|
||||
if (isFormValid()) {
|
||||
// Handle form submission
|
||||
console.log({
|
||||
namaPemohon: namaPemohon.value,
|
||||
pangkatPemohon: pangkatPemohon.value,
|
||||
noPegawaiPemohon: noPegawaiPemohon.value,
|
||||
namaPenghantar: namaPenghantar.value,
|
||||
pangkatPenghantar: pangkatPenghantar.value,
|
||||
ringkasanKenyataanKes: ringkasanKenyataanKes.value,
|
||||
bilangan: bilangan.value,
|
||||
jenisBarang: jenisBarang.value,
|
||||
tandaBarang: tandaBarang.value,
|
||||
keadaanBarang: keadaanBarang.value,
|
||||
kuantitiBarang: kuantitiBarang.value,
|
||||
jenisBarangDetail: jenisBarangDetail.value,
|
||||
jenisBarangSiber: jenisBarangSiber.value,
|
||||
noKertasSiasatan: noKertasSiasatan.value,
|
||||
noLaporanPolis: noLaporanPolis.value,
|
||||
});
|
||||
$swal
|
||||
.fire({
|
||||
title: "Adakah anda pasti?",
|
||||
text: "Borang boleh dikemaskini selepas di simpan.",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
confirmButtonText: "Ya, Hantar",
|
||||
cancelButtonText: "Batal",
|
||||
})
|
||||
.then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
if (isFormValid()) {
|
||||
// Handle form submission
|
||||
console.log({
|
||||
namaPemohon: namaPemohon.value,
|
||||
pangkatPemohon: pangkatPemohon.value,
|
||||
noPegawaiPemohon: noPegawaiPemohon.value,
|
||||
namaPenghantar: namaPenghantar.value,
|
||||
pangkatPenghantar: pangkatPenghantar.value,
|
||||
noPegawaiPenghantar: noPegawaiPenghantar.value,
|
||||
ringkasanKenyataanKes: ringkasanKenyataanKes.value,
|
||||
bilangan: bilangan.value,
|
||||
jenisBarang: jenisBarang.value,
|
||||
tandaBarang: tandaBarang.value,
|
||||
keadaanBarang: keadaanBarang.value,
|
||||
kuantitiBarang: kuantitiBarang.value,
|
||||
jenisBarangDetail: jenisBarangDetail.value,
|
||||
jenisBarangSiber: jenisBarangSiber.value,
|
||||
noKertasSiasatan: noKertasSiasatan.value,
|
||||
noLaporanPolis: noLaporanPolis.value,
|
||||
tarikhTemujanji: tarikhTemujanji.value,
|
||||
slotMasa: slotMasa.value,
|
||||
});
|
||||
|
||||
// Show success message
|
||||
$swal.fire({
|
||||
title: "Berjaya!",
|
||||
text: "Borang telah berjaya dihantar.",
|
||||
icon: "success",
|
||||
confirmButtonText: "OK",
|
||||
// Show success message
|
||||
$swal.fire({
|
||||
title: "Berjaya!",
|
||||
text: "Borang telah berjaya dihantar.",
|
||||
icon: "success",
|
||||
confirmButtonText: "OK",
|
||||
});
|
||||
} else {
|
||||
// Show error message
|
||||
$swal.fire({
|
||||
title: "Ralat!",
|
||||
text: "Sila isi semua medan yang diperlukan.",
|
||||
icon: "error",
|
||||
confirmButtonText: "OK",
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// Show error message
|
||||
$swal.fire({
|
||||
title: "Ralat!",
|
||||
text: "Sila isi semua medan yang diperlukan.",
|
||||
icon: "error",
|
||||
confirmButtonText: "OK",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Function to generate sample data
|
||||
function generateSampleData(noSiri) {
|
||||
const randomNumber = (min, max) =>
|
||||
Math.floor(Math.random() * (max - min + 1) + min);
|
||||
@ -275,6 +417,10 @@ function generateSampleData(noSiri) {
|
||||
jenisBarangSiber: randomChoice(jenisBarangSiberOptions),
|
||||
noKertasSiasatan: `KS-${randomNumber(10000, 99999)}`,
|
||||
noLaporanPolis: `RPT-${randomNumber(100000, 999999)}`,
|
||||
tarikhTemujanji: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
|
||||
.toISOString()
|
||||
.split("T")[0], // 7 days from now
|
||||
slotMasa: `${randomNumber(9, 16)}:00`, // Random hour between 9 AM and 4 PM
|
||||
};
|
||||
}
|
||||
|
||||
@ -296,6 +442,8 @@ onMounted(() => {
|
||||
jenisBarangSiber.value = sampleData.jenisBarangSiber;
|
||||
noKertasSiasatan.value = sampleData.noKertasSiasatan;
|
||||
noLaporanPolis.value = sampleData.noLaporanPolis;
|
||||
tarikhTemujanji.value = sampleData.tarikhTemujanji;
|
||||
slotMasa.value = sampleData.slotMasa;
|
||||
});
|
||||
|
||||
const { $swal } = useNuxtApp();
|
||||
@ -320,4 +468,4 @@ button {
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@ -1,4 +1,3 @@
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex justify-between items-center">
|
||||
@ -42,12 +41,18 @@
|
||||
{{ data.text || "N/A" }}
|
||||
</template>
|
||||
<template v-slot:status="data">
|
||||
<rs-badge :variant="data.text === 'Aktif' ? 'success' : 'danger'">
|
||||
<rs-badge
|
||||
:variant="
|
||||
data.text === 'Aktif' || data.text === 'Sah'
|
||||
? 'success'
|
||||
: 'danger'
|
||||
"
|
||||
>
|
||||
{{ data.text || "N/A" }}
|
||||
</rs-badge>
|
||||
</template>
|
||||
<template v-slot:butiran="data">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<div class="flex flex-wrap gap-2" v-if="data.value.status !== 'Sah'">
|
||||
<rs-button
|
||||
@click="kemaskini(data.value.noSiri)"
|
||||
variant="primary"
|
||||
@ -67,6 +72,9 @@
|
||||
<Icon name="ic:baseline-delete" size="1.2rem" />
|
||||
</rs-button>
|
||||
</div>
|
||||
<div v-else>
|
||||
<span>Permohonan telah disahkan</span>
|
||||
</div>
|
||||
</template>
|
||||
</rs-table>
|
||||
</rs-card>
|
||||
@ -86,7 +94,7 @@ const tableData = ref([
|
||||
no: 1,
|
||||
noSiri: "1234567890",
|
||||
tarikhMasa: "2024-01-01 12:00:00",
|
||||
status: "Aktif",
|
||||
status: "Sah",
|
||||
butiran: 1,
|
||||
},
|
||||
{
|
||||
@ -120,42 +128,40 @@ const tableData = ref([
|
||||
]);
|
||||
|
||||
const permohonanBaru = () => {
|
||||
navigateTo("/permohonan-online/baru");
|
||||
navigateTo("/permohonan-temujanji/baru");
|
||||
};
|
||||
|
||||
const kemaskini = (item) => {
|
||||
navigateTo(`/permohonan-online/kemaskini/${item}`);
|
||||
navigateTo(`/permohonan-temujanji/kemaskini/${item}`);
|
||||
};
|
||||
|
||||
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({
|
||||
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");
|
||||
}
|
||||
$swal.fire(
|
||||
'Dihapuskan!',
|
||||
'Data telah dihapuskan.',
|
||||
'success'
|
||||
)
|
||||
}
|
||||
})
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* Add any scoped styles here */
|
||||
</style>
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user