effendy/antrean-operasi
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(FE) : use general snackbar

Browse Source
This commit is contained in:
Yusron alamsyah
2026-03-09 08:58:25 +07:00
parent 38809bec2b
commit 3e21705795
6 changed files with 50 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

components/pendaftaran/CardAntrianList.vue
+1 -1
View File
@@ -201,7 +201,7 @@ onUnmounted(() => {
No Spesialis : {{ item.NoUrutSpesialis }}
</v-chip>
<v-chip size="small" color="primary" variant="outlined" label class="font-weight-medium">
No SubSpesialis : {{ item.NoUrutSubSpesialis }}
No Sub Spesialis : {{ item.NoUrutSubSpesialis }}
</v-chip>
</div>
<!-- Medical Details Grid -->
components/pendaftaran/ModalUpdateStatus.vue
+4 -18
View File
@@ -1,6 +1,6 @@
<script setup lang="ts">
import { Icon } from '@iconify/vue';
import type { AntreanOperasi } from '~/types/antrean';
import { usePendaftaranStore } from "~/store/pendaftaran";
import { STATUS } from '~/types/antrean';
import { getAntrianOperasiById, updateStatusAntrianOperasi } from '@/services/antrean';
@@ -38,15 +38,11 @@ const formData = ref<{
keteranganStatus: ''
});
// Snackbar
const snackbar = ref(false);
const snackbarMessage = ref('');
const snackbarColor = ref('success');
// Use pendaftaranStore for global snackbar
const pendaftaranStore = usePendaftaranStore();
const showSnackbar = (message: string, color: string = 'success') => {
snackbarMessage.value = message;
snackbarColor.value = color;
snackbar.value = true;
pendaftaranStore.showSnackbar(message, color);
};
// Fetch data pasien
@@ -414,16 +410,6 @@ watch(() => props.modelValue, (isOpen) => {
</v-btn>
</v-card-actions>
</v-card>
<!-- Snackbar -->
<v-snackbar v-model="snackbar" :color="snackbarColor" :timeout="3000" location="top">
{{ snackbarMessage }}
<template #actions>
<v-btn variant="text" @click="snackbar = false">
Close
</v-btn>
</template>
</v-snackbar>
</v-dialog>
</template>
pages/antrean/all.vue
+4 -27
View File
@@ -9,12 +9,14 @@ import { getAntrianOperasi, deleteAntrianOperasi } from '~/services/antrean';
import { Icon } from '@iconify/vue';
import type { AntreanOperasi } from '~/types/antrean';
import { STATUS, statusOptions } from '~/types/antrean';
import { usePendaftaranStore } from '~/store/pendaftaran';
definePageMeta({
middleware: 'auth',
pageTitle: 'Semua Antrean Operasi',
});
const pendaftaranStore = usePendaftaranStore();
const search = ref('');
const filterValues = ref<{
statusFilter: string | null;
@@ -164,15 +166,8 @@ onMounted(() => {
fetchData();
});
// Snackbar state
const snackbar = ref(false);
const snackbarMessage = ref('');
const snackbarColor = ref('success');
const showSnackbar = (message: string, color: string = 'success') => {
snackbarMessage.value = message;
snackbarColor.value = color;
snackbar.value = true;
pendaftaranStore.showSnackbar(message, color);
};
@@ -263,7 +258,7 @@ const handleUpdateStatusSuccess = () => {
</script>
<template>
<v-row>
<v-col cols="12">
<v-col cols="12" class="pa-6">
<div class="d-flex justify-space-between align-center mb-4 flex-wrap ga-3">
<div class="d-flex align-center ga-3 flex-wrap" style="width: 70%;">
<v-text-field
@@ -310,24 +305,6 @@ const handleUpdateStatusSuccess = () => {
</v-col>
</v-row>
<!-- Snackbar for notifications -->
<v-snackbar
v-model="snackbar"
:color="snackbarColor"
:timeout="3000"
location="top"
>
{{ snackbarMessage }}
<template #actions>
<v-btn
variant="text"
@click="snackbar = false"
>
Close
</v-btn>
</template>
</v-snackbar>
<!-- Modal Pendaftaran -->
<ModalPendaftaran
v-model="showModal"
pages/antrean/kategori/[id].vue
+30 -86
View File
@@ -8,10 +8,12 @@ import { Icon } from '@iconify/vue';
import ModalPendaftaran from '@/components/pendaftaran/ModalPendaftaranV2.vue';
import ModalDetailPendaftaran from '@/components/pendaftaran/ModalDetailPendaftaran.vue';
import ModalUpdateStatus from '@/components/pendaftaran/ModalUpdateStatus.vue';
import { usePendaftaranStore } from '~/store/pendaftaran';
const route = useRoute();
const idKategori = route.params.id as string;
const categoryName = route.query.category as string || 'Kategori';
const pendaftaranStore = usePendaftaranStore();
// State
const search = ref('');
@@ -39,15 +41,8 @@ const selectedId = ref<string | number | null>(null);
const selectedIdForEdit = ref<string | number | null>(null);
const selectedIdForStatus = ref<string | number | null>(null);
// Snackbar state
const snackbar = ref(false);
const snackbarMessage = ref('');
const snackbarColor = ref('success');
const showSnackbar = (message: string, color: string = 'success') => {
snackbarMessage.value = message;
snackbarColor.value = color;
snackbar.value = true;
pendaftaranStore.showSnackbar(message, color);
};
// Define filter options
@@ -91,13 +86,13 @@ const fetchData = async (append: boolean = false) => {
const offset = (currentPage.value - 1) * itemsPerPage.value;
let sortBy: string | undefined;
let sortOrder: string | undefined;
if (filterValues.value.sortOption && filterValues.value.sortOption !== null) {
const parts = filterValues.value.sortOption.split('|');
sortBy = parts[0];
sortOrder = parts[1];
}
const response = await getAntrianOperasi({
type: 'kategori',
limit: itemsPerPage.value,
@@ -116,7 +111,7 @@ const fetchData = async (append: boolean = false) => {
antreanList.value = response.data;
}
totalItems.value = response.Paginate.Total;
// Check if there's more data
const totalLoaded = currentPage.value * itemsPerPage.value;
hasMore.value = totalLoaded < response.Paginate.Total;
@@ -215,7 +210,7 @@ const handleUpdateStatus = async (item: unknown) => {
const handleDelete = async (item: unknown) => {
const data = item as AntreanOperasi;
if(confirm('Apakah Anda yakin ingin menghapus data ini?')) {
if (confirm('Apakah Anda yakin ingin menghapus data ini?')) {
try {
const response = await deleteAntrianOperasi(data.id);
if (response.success) {
@@ -257,90 +252,39 @@ const handleUpdateStatusSuccess = () => {
</script>
<template>
<v-row>
<v-col cols="12">
<v-card elevation="10">
<v-card-text>
<div class="d-flex justify-space-between align-center mb-4">
<div class="d-flex align-center ga-3 w-50">
<v-text-field v-model="search" placeholder="Cari..." variant="outlined" density="compact"
hide-details prepend-inner-icon="mdi-magnify" style="max-width: 300px;"></v-text-field>
<FilterSortMenu
v-model="filterValues"
:filters="filterOptions"
/>
</div>
<v-col cols="12" class="pa-6">
<div class="d-flex justify-space-between align-center mb-4">
<div class="d-flex align-center ga-3 w-50">
<v-text-field v-model="search" placeholder="Cari..." variant="outlined" density="compact"
hide-details prepend-inner-icon="mdi-magnify" style="max-width: 300px;"></v-text-field>
<v-btn color="primary" size="large" elevation="2" @click="showModal = true">
<Icon icon="solar:add-circle-bold" height="20" class="mr-2" />
Pendaftaran Operasi Baru
</v-btn>
</div>
<FilterSortMenu v-model="filterValues" :filters="filterOptions" />
</div>
<CardAntrianList
:items="antreanList"
:loading="loading"
:has-more="hasMore"
:total-items="totalItems"
:get-actions="getActionsForItem"
@view="handleView"
@edit="handleEdit"
@updateStatus="handleUpdateStatus"
@delete="handleDelete"
@loadMore="handleLoadMore"
/>
</v-card-text>
</v-card>
<v-btn color="primary" size="large" elevation="2" @click="showModal = true">
<Icon icon="solar:add-circle-bold" height="20" class="mr-2" />
Pendaftaran Operasi Baru
</v-btn>
</div>
<CardAntrianList :items="antreanList" :loading="loading" :has-more="hasMore" :total-items="totalItems"
:get-actions="getActionsForItem" @view="handleView" @edit="handleEdit"
@updateStatus="handleUpdateStatus" @delete="handleDelete" @loadMore="handleLoadMore" />
</v-col>
</v-row>
<!-- Snackbar for notifications -->
<v-snackbar
v-model="snackbar"
:color="snackbarColor"
:timeout="3000"
location="top"
>
{{ snackbarMessage }}
<template #actions>
<v-btn
variant="text"
@click="snackbar = false"
>
Close
</v-btn>
</template>
</v-snackbar>
<!-- Modal Pendaftaran -->
<ModalPendaftaran
v-model="showModal"
mode="create"
:initial-kategori="parseInt(idKategori)"
@success="handleModalSuccess"
/>
<ModalPendaftaran v-model="showModal" mode="create" :initial-kategori="parseInt(idKategori)"
@success="handleModalSuccess" />
<!-- Modal Edit Pendaftaran -->
<ModalPendaftaran
v-if="selectedIdForEdit"
v-model="showEditModal"
mode="edit"
:id="selectedIdForEdit"
@success="handleEditModalSuccess"
/>
<ModalPendaftaran v-if="selectedIdForEdit" v-model="showEditModal" mode="edit" :id="selectedIdForEdit"
@success="handleEditModalSuccess" />
<!-- Modal Detail Pendaftaran -->
<ModalDetailPendaftaran
v-if="selectedId"
v-model="showDetailModal"
:id="selectedId"
/>
<ModalDetailPendaftaran v-if="selectedId" v-model="showDetailModal" :id="selectedId" />
<!-- Modal Update Status -->
<ModalUpdateStatus
v-if="selectedIdForStatus"
v-model="showUpdateStatusModal"
:id="selectedIdForStatus"
@success="handleUpdateStatusSuccess"
/>
<ModalUpdateStatus v-if="selectedIdForStatus" v-model="showUpdateStatusModal" :id="selectedIdForStatus"
@success="handleUpdateStatusSuccess" />
</template>
pages/antrean/spesialis/[kode].vue
+5 -32
View File
@@ -1,6 +1,6 @@
<script setup lang="ts">
import TableAntrian from '@/components/pendaftaran/TableAntrian.vue';
import CardAntrianList from '@/components/pendaftaran/CardAntrianListV2.vue';
import CardAntrianList from '@/components/pendaftaran/CardAntrianList.vue';
import FilterSortMenu from '@/components/pendaftaran/FilterSortMenu.vue';
import { getAntrianOperasi, deleteAntrianOperasi } from '~/services/antrean';
import { statusOptions, STATUS } from '~/types/antrean';
@@ -9,10 +9,12 @@ import { Icon } from '@iconify/vue';
import ModalPendaftaran from '@/components/pendaftaran/ModalPendaftaranV2.vue';
import ModalDetailPendaftaran from '@/components/pendaftaran/ModalDetailPendaftaran.vue';
import ModalUpdateStatus from '@/components/pendaftaran/ModalUpdateStatus.vue';
import { usePendaftaranStore } from '~/store/pendaftaran';
const route = useRoute();
const kodeSpesialis = route.params.kode as string;
const spesialisName = route.query.spesialis as string || 'Spesialis';
const pendaftaranStore = usePendaftaranStore();
// State
const search = ref('');
@@ -39,15 +41,8 @@ const selectedId = ref<string | number | null>(null);
const selectedIdForEdit = ref<string | number | null>(null);
const selectedIdForStatus = ref<string | number | null>(null);
// Snackbar state
const snackbar = ref(false);
const snackbarMessage = ref('');
const snackbarColor = ref('success');
const showSnackbar = (message: string, color: string = 'success') => {
snackbarMessage.value = message;
snackbarColor.value = color;
snackbar.value = true;
pendaftaranStore.showSnackbar(message, color);
};
// Define filter options
@@ -259,9 +254,7 @@ const handleUpdateStatusSuccess = () => {
<template>
<v-row>
<v-col cols="12">
<v-card elevation="10">
<v-card-text>
<v-col cols="12" class="pa-6">
<div class="d-flex justify-space-between align-center mb-4">
<div class="d-flex align-center ga-3 w-50">
<v-text-field v-model="search" placeholder="Cari..." variant="outlined" density="compact"
@@ -291,29 +284,9 @@ const handleUpdateStatusSuccess = () => {
@delete="handleDelete"
@loadMore="handleLoadMore"
/>
</v-card-text>
</v-card>
</v-col>
</v-row>
<!-- Snackbar for notifications -->
<v-snackbar
v-model="snackbar"
:color="snackbarColor"
:timeout="3000"
location="top"
>
{{ snackbarMessage }}
<template #actions>
<v-btn
variant="text"
@click="snackbar = false"
>
Close
</v-btn>
</template>
</v-snackbar>
<!-- Modal Pendaftaran -->
<ModalPendaftaran
v-model="showModal"
pages/antrean/subspesialis/[kode].vue
+6 -33
View File
@@ -8,11 +8,13 @@ import { Icon } from '@iconify/vue';
import ModalPendaftaran from '@/components/pendaftaran/ModalPendaftaranV2.vue';
import ModalDetailPendaftaran from '@/components/pendaftaran/ModalDetailPendaftaran.vue';
import ModalUpdateStatus from '@/components/pendaftaran/ModalUpdateStatus.vue';
import { usePendaftaranStore } from '~/store/pendaftaran';
const route = useRoute();
const kodeSubSpesialis = route.params.kode as string;
const subSpesialisName = route.query.subspecialis as string || 'Sub Spesialis';
const spesialisId = route.query.spesialis_id as string || null;
const pendaftaranStore = usePendaftaranStore();
// State
const search = ref('');
@@ -39,15 +41,8 @@ const selectedId = ref<string | number | null>(null);
const selectedIdForEdit = ref<string | number | null>(null);
const selectedIdForStatus = ref<string | number | null>(null);
// Snackbar state
const snackbar = ref(false);
const snackbarMessage = ref('');
const snackbarColor = ref('success');
const showSnackbar = (message: string, color: string = 'success') => {
snackbarMessage.value = message;
snackbarColor.value = color;
snackbar.value = true;
pendaftaranStore.showSnackbar(message, color);
};
// Define filter options
@@ -259,12 +254,10 @@ const handleUpdateStatusSuccess = () => {
<template>
<v-row>
<v-col cols="12">
<v-card elevation="10">
<v-card-text>
<div class="d-flex justify-space-between align-center mb-4">
<v-col cols="12" class="pa-6">
<div class="d-flex justify-space-between align-center mb-4">
<div class="d-flex align-center ga-3 w-50">
<v-text-field v-model="search" placeholder="Cari..." variant="outlined" density="compact"
<v-text-field v-model="search" placeholder="Cari..." variant="outlined" clearable density="compact"
hide-details prepend-inner-icon="mdi-magnify" style="max-width: 300px;"></v-text-field>
<FilterSortMenu
@@ -291,29 +284,9 @@ const handleUpdateStatusSuccess = () => {
@delete="handleDelete"
@loadMore="handleLoadMore"
/>
</v-card-text>
</v-card>
</v-col>
</v-row>
<!-- Snackbar for notifications -->
<v-snackbar
v-model="snackbar"
:color="snackbarColor"
:timeout="3000"
location="top"
>
{{ snackbarMessage }}
<template #actions>
<v-btn
variant="text"
@click="snackbar = false"
>
Close
</v-btn>
</template>
</v-snackbar>
<!-- Modal Pendaftaran -->
<ModalPendaftaran
v-model="showModal"