antrean-operasi/components/master/guarantor/InsuranceTab.vue

<script setup lang="ts">
import {ref, computed} from 'vue';
import AddGuarantorModal from "~/components/master/guarantor/AddGuarantorModal.vue";
import DialogConfirmModal from "~/components/ui-components/dialogs/DialogConfirmModal.vue";

const search = ref('');
const guarantorTypeSelected = ref('');
const dialogTitle = ref('');
const dialogMessage = ref('');

const isModalOpen = ref(false);
const isConfirmDelete = ref(false);
const colorActive = ref('success');
const colorNonActive = ref('danger');

const headers = [
  {title: 'Nama', key: 'name'},
  {title: 'Status', key: 'status', sortable: false},
  {title: 'Action', key: 'isActive', sortable: false},
  {title: '', key: 'dropdown', sortable: false},
];

const listInsurance = ref([
  {id: 1, name: 'BPJS', status: 'active', isActive: true},
  {id: 2, name: 'Jiwasraya', status: 'non_active', isActive: false},
  {id: 3, name: 'Jasa Raharja', status: 'active', isActive: true},
]);

function handleDataSaved(data) {
  console.log('Data baru diterima di parent:', data);
  lastAddedData.value = data;
}

function handleConfirmDialog(data) {
  console.log('Data baru diterima di parent:', data);
  isConfirmDelete.value = false;
}

const executeDelete = () => {
  console.log('executeDelete');
};

const tableActionData = ref([
  { title: 'View', action: 'view', icon: 'mdi-eye-outline', color: 'success' },
  { title: 'Edit', action: 'edit', icon: 'mdi-pencil-outline', color: 'primary' },
  { title: 'Delete', action: 'delete', icon: 'mdi-delete-outline', color: 'error' },
]);

const handleAction = (action, item) => {
  switch (action) {
    case 'View':
      return console.log("View")
      break;
    case 'Edit':
      return console.log("Edit")
      break;
    case 'Delete':
      confirmDelete(1);
      break;
    default:
      console.warn('Aksi tidak dikenali');
  }
};

const openModalGuarantor = (type) => {
  guarantorTypeSelected.value = type;
  isModalOpen.value = true;
}

</script>

<template>
  <v-card flat>
    <div class="d-sm-flex justify-space-between align-center my-7">
      <v-sheet width="255" class="mb-lg-0 mb-4">
        <v-text-field
            v-model="search"
            label="Cari Penjamin"
            density="comfortable"
            variant="outlined"
            clearable
            hide-details
        >
          <template v-slot:prepend-inner>
            <Icon icon="solar:magnifer-linear" height="18" width="25"/>
          </template>
        </v-text-field>
      </v-sheet>
      <v-btn color="primary" v-bind="props" flat class="ml-auto"
             @click="openModalGuarantor('insurance')">
        <v-icon class="mr-2">mdi-plus</v-icon>
        Tambah Penjamin
      </v-btn>
    </div>

    <v-data-table
        :headers="headers"
        :items="listInsurance"
        :search="search"
        item-key="id"
        class="elevation-1"
        hide-default-footer
    >

      <template v-slot:item.status="{ item }">
        <v-chip
            :color="item.isActive ? 'primary' : 'danger'"
            :text="item.isActive ? 'Aktif' : 'Tidak Aktif'"
            label
            size="small"
        ></v-chip>
      </template>

      <template v-slot:item.isActive="{ item }">
        <div class="d-flex align-center">
          <v-switch
              v-model="item.isActive"
              hide-details
              density="compact"
              :color="item.isActive ? colorActive: colorNonActive"
          ></v-switch>
          <span class="ml-2 text-caption">
            {{ item.isActive ? 'Aktif' : 'Tidak Aktif' }}
          </span>
        </div>
      </template>

      <template v-slot:item.dropdown="{ item }">
        <v-avatar size="22">
          <DotsIcon size="20" color="grey100"/>
        </v-avatar>

        <v-menu activator="parent">
          <v-list>
            <v-list-item value="action" v-for="list in tableActionData" :key="list.title"
                         hide-details min-height="38" @click="handleAction(list.title, 0)">
              <v-list-item-title>
                <v-avatar size="20" class="mr-2">
                  <v-icon :icon="list.icon" :color="list.color"></v-icon>
                </v-avatar>
                {{ list.title }}
              </v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>

      </template>

      <template v-slot:bottom></template>

    </v-data-table>
  </v-card>

  <AddGuarantorModal
      v-model="isModalOpen"
      :guarantor-type="guarantorTypeSelected"
      @data-saved="handleDataSaved"
  />


</template>

<style scoped>

</style>