penambahan tabel pencarian, form tambah, form ubah

pages/daftar.vue

@@ -0,0 +1,180 @@
+<template>
+  <div>
+    <v-app>
+      <v-app-bar>
+        <v-app-bar-title>Hello</v-app-bar-title>
+        <v-spacer />
+        <v-btn @click="toggleTheme">
+          <v-icon>ph:sun</v-icon>
+          toggle thema</v-btn>
+      </v-app-bar>
+      <v-main>
+        <v-container>
+          <v-card title="List Surat Kontrol" flat> 
+            <template v-slot:text>
+              <!-- <v-icon small @click="addTutorial()">mdi-plus-circle</v-icon> -->
+               <v-row>
+                <v-col>
+                  <VBtn class="mx-2" @click="navigateTo('/formSurkon')">Tambah SURKON</VBtn>
+                  <VBtn class="mx-2" @click="navigateTo('/formSubspesialis')">Tambah SUBSPESIALIS</VBtn>
+                </v-col>
+               </v-row>
+              <v-text-field class="mt-5" v-model="search" label="Search" prepend-inner-icon="mdi-magnify" variant="outlined" hide-details single-line></v-text-field>
+            </template>
+
+            <v-data-table :headers="headers" :items="subspesialis_" F :search="search">
+              <!-- <template v-slot:[`item.actions`]="{ item }">
+                <v-icon small class="mr-2" @click="editTutorial(item.id)">mdi-pencil</v-icon>
+                <v-icon small @click="deleteTutorial(item.id)">mdi-delete</v-icon>
+              </template> -->
+              <template v-slot:item.action="{ item }">
+                <v-icon small class="mr-2" @click="proses_edit(item)">mdi-pencil</v-icon>
+                <v-icon small @click="modal_hapus(item)">mdi-delete</v-icon>
+                <!-- <v-btn>OPEN</v-btn> -->
+              </template>
+            </v-data-table>
+          </v-card>
+        </v-container>
+        <v-container>
+          <v-card title="List Surat Kontrol" flat>
+            <template v-slot:text>
+              <v-text-field v-model="search" label="Search" prepend-inner-icon="mdi-magnify" variant="outlined" hide-details single-line></v-text-field>
+            </template>
+
+            <v-data-table :headers="headers" :items="surkon.list_data" F :search="search"></v-data-table>
+          </v-card>
+        </v-container>
+
+        <!-- Dialog Konfirmasi Hapus -->
+        <v-dialog v-model="dialog.dialog" max-width="400" persistent>
+          <!-- <template v-slot:activator="{ props: activatorProps }">
+            <v-btn v-bind="activatorProps" style="display: none;">Open Dialog</v-btn>
+          </template> -->
+
+          <v-card>
+            <v-toolbar dense flat class="body-2 font-weight-bold px-5">
+              Konfirmasi
+            </v-toolbar>
+            <v-row class="ma-1">
+              <v-col cols="12">
+                Yakin akan dihapus?
+              </v-col>
+            </v-row>
+
+            <template v-slot:actions>
+              <v-spacer></v-spacer>
+              <v-btn @click="dialog.dialog = false">Tidak</v-btn>
+              <v-btn @click="proses_hapus()">Ya</v-btn>
+            </template>
+          </v-card>
+        </v-dialog>
+
+      </v-main>
+    </v-app>
+  </div>
+</template>
+<script setup>
+
+import { ref, reactive } from 'vue';
+import { useTheme } from "vuetify";
+import { storeToRefs } from "pinia";
+
+const theme = useTheme();
+const dialog = reactive({
+  dialog: false,
+});
+
+const hapusData = ref(null);
+function toggleTheme () {
+  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'myTheme';
+}
+
+// const itemsPerPage= 5;
+const search = ref("");
+//let form = document.getElementById('search')
+// if(form) (form as HTMLFormElement).reset(); 
+// const { list } = storeToRefs(useSubspesialisStorePost());
+// const { proses_edit } = useSubspesialisStorePost();
+
+
+/*function editTutorial(data){
+  // console.log(data)
+  proses_edit()
+}
+
+function deleteTutorial(data){
+  console.log(data)
+}*/
+
+
+
+const proses_edit = (item)=>{
+    //console.log(item)
+    const { proses_edit } = useSubspesialisStorePost();
+    proses_edit(item);
+//     const {data_edit} = storeToRefs(useSubspesialisStorePost());
+// console.log(data_edit)
+    // proses_edit(payload);
+   navigateTo(`/formSubspesialis`)
+}
+
+const modal_hapus = (item) => {
+ hapusData.value = item;
+ dialog.dialog = true;
+}
+
+const proses_hapus = () => {
+  console.log("proses hapus")
+  // console.log(hapusData.value)
+  // console.log(hapusData.value.id)
+  dialog.dialog = false;
+}
+
+// console.log(search.value)
+const headers = [
+  {
+    align: 'start',
+    key: 'name',
+    sortable: false,
+  },
+  { key: 'Nomor_surat_kontrol', title: 'Nomor surat kontrol' },
+  { key: 'Nomor_sep', title: 'Nomor sep' },
+  { key: 'Tanggal_cetak_surat_kontrol', title: 'Tanggal Entry' },
+  { key: 'Tanggal_rencana_kontrol', title: 'Tanggal Rencana Kontrol' },
+  { key: 'No_rm', title: 'Nomor Rekam Medik' },
+  { key: 'NamaDokter', title: 'Nama Dokter' },
+  { text: "", value: "action" },
+];
+const payload = {
+    // no_rm: "",
+    // no_sep: "",
+    // poliklinik: "",
+    // tanggal_awal: "2024-10-16",
+    // tanggal_akhir: "2024-10-30",
+    // offset: "0",
+    // limit: "10",
+   "idxdaftar":"1054782",
+    "noSEP":"1323R0011024V000003",
+    "kodeHFIS":"37092",
+    "id_dokter":"d2014e7d-6bb2-4dcf-99d6-6b830c4adb9a",
+    "kodePoli":"018",
+    "subspesialis":"BEDAH DIGESTIF",
+    "tglRencanaKontrol":"2024-11-26",
+    "user":"dr.DWICHA RAHMAWANSA S.,Sp.B-KBD",
+    "kode_diagnosa":"A02.0",
+    "nama_diagnosa":"Salmonella enteritis",
+    "tipe_surkon":"0",
+    "tipe_rawat":"RJ"
+  };
+  const { subspesialis_ } = storeToRefs(useSubspesialisStore());
+  const { loadSubspesialis } = useSubspesialisStore();
+
+  const { surkon } = storeToRefs(useSubspesialisStorePost());
+  const { loadSurKon } = useSubspesialisStorePost();
+
+  // Call loadSurKon when the page loads
+  onMounted(() => {
+    loadSubspesialis();
+    // loadSurKon(payload);
+  });
+</script>