bagus-arie05
125 lines
2.7 KiB
Vue
125 lines
2.7 KiB
Vue
<template>
|
|
<v-data-table
|
|
:headers="headers"
|
|
:items="items"
|
|
:items-per-page="itemsPerPage"
|
|
class="elevation-0 data-table"
|
|
>
|
|
<template #item.pelayanan="{ item }">
|
|
<v-chip
|
|
v-for="(serviceKode, idx) in item.pelayanan.slice(0, 2)"
|
|
:key="idx"
|
|
size="small"
|
|
class="mr-1 mb-1 chip-primary-outline"
|
|
>
|
|
{{ getKlinikName(serviceKode) }}
|
|
</v-chip>
|
|
<v-chip
|
|
v-if="item.pelayanan.length > 2"
|
|
size="small"
|
|
class="chip-neutral"
|
|
>
|
|
+{{ item.pelayanan.length - 2 }}
|
|
</v-chip>
|
|
</template>
|
|
|
|
<template #item.aksi="{ item }">
|
|
<v-btn
|
|
size="small"
|
|
variant="flat"
|
|
class="btn-edit mr-2"
|
|
@click="$emit('edit', item)"
|
|
>
|
|
<v-icon size="16" left>mdi-pencil</v-icon>
|
|
Edit
|
|
</v-btn>
|
|
<v-btn
|
|
size="small"
|
|
variant="outlined"
|
|
class="btn-delete"
|
|
@click="$emit('delete', item)"
|
|
>
|
|
<v-icon size="16" left>mdi-delete</v-icon>
|
|
Delete
|
|
</v-btn>
|
|
</template>
|
|
</v-data-table>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
items: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
itemsPerPage: {
|
|
type: Number,
|
|
default: 10
|
|
},
|
|
getKlinikName: {
|
|
type: Function,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const headers = [
|
|
{ title: "No", value: "no" },
|
|
{ title: "Nama Loket", value: "namaLoket" },
|
|
{ title: "Kuota", value: "kuota" },
|
|
{ title: "Pelayanan", value: "pelayanan" },
|
|
{ title: "Pembayaran", value: "pembayaran" },
|
|
{ title: "Keterangan", value: "keterangan" },
|
|
{ title: "Aksi", value: "aksi", sortable: false },
|
|
];
|
|
|
|
defineEmits(['edit', 'delete']);
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
$neutral-100: #FFFFFF;
|
|
$neutral-600: #89939E;
|
|
$primary-600: #FFA532;
|
|
$danger-600: #E02B1D;
|
|
$font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
$font-weight-medium: 500;
|
|
$font-weight-semibold: 600;
|
|
|
|
.data-table {
|
|
font-family: $font-family-base;
|
|
}
|
|
|
|
.chip-primary-outline {
|
|
border: 1px solid $primary-600;
|
|
background-color: transparent !important;
|
|
color: $primary-600 !important;
|
|
font-weight: $font-weight-medium;
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.chip-neutral {
|
|
background-color: $neutral-600 !important;
|
|
color: $neutral-100 !important;
|
|
font-weight: $font-weight-medium;
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.btn-edit {
|
|
background-color: $primary-600 !important;
|
|
color: $neutral-100 !important;
|
|
text-transform: none;
|
|
font-weight: $font-weight-semibold;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.btn-delete {
|
|
border-color: $danger-600 !important;
|
|
color: $danger-600 !important;
|
|
text-transform: none;
|
|
font-weight: $font-weight-semibold;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
}
|
|
</style> |