effendy-dev
155 lines
4.1 KiB
Vue
155 lines
4.1 KiB
Vue
<script setup lang="ts">
|
|
import {ref, computed} from 'vue';
|
|
import AddGuarantorModal from "~/components/master/guarantor/AddGuarantorModal.vue";
|
|
import {EditIcon, EyeIcon, PlusIcon, TrashIcon} from "vue-tabler-icons";
|
|
|
|
const search = ref('');
|
|
const guarantorTypeSelected = ref('');
|
|
const isModalOpen = 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: 4, name: 'PT Bentoel', status: 'active', isActive: true},
|
|
{id: 5, name: 'PT Outsuka', status: 'non_active', isActive: true},
|
|
{id: 6, name: 'PT. Gandum', status: 'active', isActive: false},
|
|
]);
|
|
|
|
const toggleStatus = (item) => {
|
|
item.isActive = !item.isActive;
|
|
};
|
|
|
|
function handleDataSaved(data) {
|
|
console.log('Data baru diterima di parent:', data);
|
|
|
|
// Tampilkan data yang baru ditambahkan (simulasi penambahan data ke list)
|
|
// lastAddedData.value = data;
|
|
|
|
// Di sini Anda akan memuat ulang data tabel utama (jika menggunakan API)
|
|
}
|
|
|
|
const tableActionData = ref([
|
|
{
|
|
icon: EyeIcon,
|
|
listtitle: 'View'
|
|
},
|
|
{
|
|
icon: EditIcon,
|
|
listtitle: 'Edit'
|
|
},
|
|
{
|
|
icon: TrashIcon,
|
|
listtitle: 'Delete'
|
|
}
|
|
]);
|
|
|
|
const handleAction = (action) => {
|
|
console.log(action);
|
|
};
|
|
|
|
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('company')">
|
|
<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.listtitle"
|
|
hide-details min-height="38" @click="handleAction(list.listtitle)">
|
|
<v-list-item-title>
|
|
<v-avatar size="20" class="mr-2">
|
|
<component :is="list.icon" stroke-width="2" size="20"/>
|
|
</v-avatar>
|
|
{{ list.listtitle }}
|
|
</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>
|