bagus-arie05
111 lines
2.4 KiB
Vue
111 lines
2.4 KiB
Vue
<template>
|
|
<v-data-table
|
|
:headers="headers"
|
|
:items="items"
|
|
:items-per-page="itemsPerPage"
|
|
class="elevation-0 data-table"
|
|
>
|
|
<template #item.shift="{ item }">
|
|
<v-chip size="small" class="chip-secondary">
|
|
{{ item.shift }}
|
|
</v-chip>
|
|
</template>
|
|
|
|
<template #item.totalQuota="{ item }">
|
|
<span class="body-2 text-semibold">{{ item.totalQuota }}</span>
|
|
</template>
|
|
|
|
<template #item.aksi="{ item }">
|
|
<v-btn
|
|
size="small"
|
|
class="btn-edit mr-2"
|
|
variant="flat"
|
|
@click="$emit('edit', item)"
|
|
>
|
|
<v-icon size="16" left>mdi-pencil</v-icon>
|
|
Edit
|
|
</v-btn>
|
|
<v-btn
|
|
size="small"
|
|
class="btn-delete"
|
|
variant="outlined"
|
|
@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
|
|
}
|
|
});
|
|
|
|
const headers = [
|
|
{ title: 'No', value: 'no', sortable: true },
|
|
{ title: 'Kode', value: 'kode', sortable: true },
|
|
{ title: 'Nama Klinik', value: 'nama', sortable: true },
|
|
{ title: 'Shift', value: 'shift', sortable: true },
|
|
{ title: 'Total Kuota', value: 'totalQuota', sortable: true },
|
|
{ title: 'Aksi', value: 'aksi', sortable: false },
|
|
];
|
|
|
|
defineEmits(['edit', 'delete']);
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
$neutral-100: #FFFFFF;
|
|
$neutral-800: #4D4D4D;
|
|
$primary-600: #FFA532;
|
|
$secondary-600: #0671E0;
|
|
$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-secondary {
|
|
background-color: $secondary-600 !important;
|
|
color: $neutral-100 !important;
|
|
font-weight: $font-weight-medium;
|
|
}
|
|
|
|
.body-2 {
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.text-semibold {
|
|
font-weight: $font-weight-semibold !important;
|
|
}
|
|
|
|
.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> |