logapi_nuxt/pages/daftar.vue

<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>