arie.bagus.2905/web-antrean
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update logika dan flow anjungan, master, store

Browse Source
This commit is contained in:
bagus-arie05
2025-12-16 09:58:25 +07:00
parent 4c2c68d993
commit 78de0418e1
23 changed files with 4169 additions and 2973 deletions
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

components/features/queue/TabelPatientData.vue
+244 -14
View File
@@ -6,6 +6,7 @@
<div class="section-label">DATA PASIEN</div>
<div class="filters">
<!-- Status Filter -->
<v-chip-group v-model="selectedStatusModel" mandatory class="status-filter">
<v-chip
v-for="status in statusOptions"
@@ -17,6 +18,7 @@
</v-chip>
</v-chip-group>
<!-- Search Field -->
<v-text-field
v-model="searchModel"
placeholder="Cari barcode, nomor antrian..."
@@ -26,6 +28,123 @@
prepend-inner-icon="mdi-magnify"
/>
</div>
<!-- Advanced Filters -->
<div class="advanced-filters mt-3">
<v-select
v-model="selectedKlinik"
:items="klinikOptions"
label="Filter Klinik"
density="compact"
hide-details
clearable
class="filter-select"
variant="outlined"
>
<template #prepend-inner>
<v-icon size="20">mdi-hospital-building</v-icon>
</template>
</v-select>
<v-select
v-model="selectedPembayaran"
:items="pembayaranOptions"
label="Filter Pembayaran"
density="compact"
hide-details
clearable
class="filter-select"
variant="outlined"
>
<template #prepend-inner>
<v-icon size="20">mdi-cash</v-icon>
</template>
</v-select>
<v-select
v-model="selectedShift"
:items="shiftOptions"
label="Filter Shift"
density="compact"
hide-details
clearable
class="filter-select"
variant="outlined"
>
<template #prepend-inner>
<v-icon size="20">mdi-clock-outline</v-icon>
</template>
</v-select>
<v-select
v-model="selectedFastTrack"
:items="fastTrackOptions"
label="Filter Fast Track"
density="compact"
hide-details
clearable
class="filter-select"
variant="outlined"
>
<template #prepend-inner>
<v-icon size="20">mdi-flash</v-icon>
</template>
</v-select>
<v-btn
v-if="hasActiveFilters"
variant="text"
color="primary-600"
size="small"
@click="clearAllFilters"
>
<v-icon start size="18">mdi-filter-off</v-icon>
Reset Filter
</v-btn>
</div>
<!-- Active Filter Tags -->
<div v-if="hasActiveFilters" class="active-filters mt-2">
<v-chip
v-if="selectedKlinik"
size="small"
closable
@click:close="selectedKlinik = null"
>
Klinik: {{ selectedKlinik }}
</v-chip>
<v-chip
v-if="selectedPembayaran"
size="small"
closable
@click:close="selectedPembayaran = null"
>
Pembayaran: {{ selectedPembayaran }}
</v-chip>
<v-chip
v-if="selectedShift"
size="small"
closable
@click:close="selectedShift = null"
>
{{ selectedShift }}
</v-chip>
<v-chip
v-if="selectedFastTrack"
size="small"
closable
@click:close="selectedFastTrack = null"
>
Fast Track: {{ selectedFastTrack }}
</v-chip>
</div>
</div>
<!-- Results Info -->
<div v-if="filteredAndSearchedItems.length > 0" class="results-info mb-3">
<span class="results-text">
Menampilkan {{ paginatedItems.length }} dari {{ filteredAndSearchedItems.length }} pasien
</span>
</div>
<!-- Patient Cards Grid -->
@@ -41,8 +160,12 @@
<!-- Empty State -->
<div v-else class="empty-state">
<v-icon size="64" color="neutral-500">mdi-account-search</v-icon>
<div class="empty-text mt-3">Tidak ada data pasien</div>
<div class="empty-subtext">Data akan muncul ketika ada pasien yang terdaftar</div>
<div class="empty-text mt-3">
{{ searchModel || hasActiveFilters ? 'Tidak ada pasien yang sesuai' : 'Tidak ada data pasien' }}
</div>
<div class="empty-subtext">
{{ searchModel || hasActiveFilters ? 'Coba ubah filter atau kata kunci pencarian' : 'Data akan muncul ketika ada pasien yang terdaftar' }}
</div>
</div>
<!-- Pagination -->
@@ -105,11 +228,15 @@ const props = defineProps({
const emit = defineEmits(['update:selectedStatus', 'update:searchQuery', 'action']);
const currentPage = ref(1);
const selectedKlinik = ref(null);
const selectedPembayaran = ref(null);
const selectedShift = ref(null);
const selectedFastTrack = ref(null);
const selectedStatusModel = computed({
get: () => props.selectedStatus,
set: (value) => {
currentPage.value = 1; // Reset to first page on filter change
currentPage.value = 1;
emit('update:selectedStatus', value);
}
});
@@ -117,7 +244,7 @@ const selectedStatusModel = computed({
const searchModel = computed({
get: () => props.searchQuery,
set: (value) => {
currentPage.value = 1; // Reset to first page on search
currentPage.value = 1;
emit('update:searchQuery', value);
}
});
@@ -129,20 +256,76 @@ const statusOptions = computed(() => [
{ value: 'pending', label: props.statusLabels.pending, count: props.pendingCount }
]);
// Generate filter options from items
const klinikOptions = computed(() => {
const kliniks = [...new Set(props.items.map(p => p.klinik))];
return kliniks.sort();
});
const pembayaranOptions = computed(() => {
const pembayaran = [...new Set(props.items.map(p => p.pembayaran))];
return pembayaran.sort();
});
const shiftOptions = computed(() => {
const shifts = [...new Set(props.items.map(p => p.shift))];
return shifts.sort();
});
const fastTrackOptions = computed(() => {
const normalizedValues = props.items
.map((p) => (p.fastTrack ?? "").toString().trim().toUpperCase())
.filter((v) => v.length > 0);
const uniqueTracks = [...new Set(normalizedValues)];
return uniqueTracks.sort();
});
const hasActiveFilters = computed(() => {
return !!(selectedKlinik.value || selectedPembayaran.value || selectedShift.value || selectedFastTrack.value);
});
const clearAllFilters = () => {
selectedKlinik.value = null;
selectedPembayaran.value = null;
selectedShift.value = null;
selectedFastTrack.value = null;
currentPage.value = 1;
};
const filteredItems = computed(() => {
if (selectedStatusModel.value === 'all') return props.items;
return props.items.filter(p => p.status === selectedStatusModel.value);
});
const filteredAndSearchedItems = computed(() => {
if (!searchModel.value) return filteredItems.value;
const searchLower = searchModel.value.toLowerCase();
return filteredItems.value.filter(patient =>
patient.barcode?.toLowerCase().includes(searchLower) ||
patient.noAntrian?.toLowerCase().includes(searchLower) ||
patient.klinik?.toLowerCase().includes(searchLower)
);
let result = filteredItems.value;
// Apply attribute filters
if (selectedKlinik.value) {
result = result.filter(p => p.klinik === selectedKlinik.value);
}
if (selectedPembayaran.value) {
result = result.filter(p => p.pembayaran === selectedPembayaran.value);
}
if (selectedShift.value) {
result = result.filter(p => p.shift === selectedShift.value);
}
if (selectedFastTrack.value) {
result = result.filter(p => p.fastTrack === selectedFastTrack.value);
}
// Apply search
if (searchModel.value) {
const searchLower = searchModel.value.toLowerCase();
result = result.filter(patient =>
patient.barcode?.toLowerCase().includes(searchLower) ||
patient.noAntrian?.toLowerCase().includes(searchLower) ||
patient.klinik?.toLowerCase().includes(searchLower)
);
}
return result;
});
const totalPages = computed(() =>
@@ -190,6 +373,7 @@ const handleAction = (patient, action) => {
.status-filter {
flex: 1;
min-width: 300px;
}
.status-filter .v-chip {
@@ -214,11 +398,43 @@ const handleAction = (patient, action) => {
.search-field {
max-width: 300px;
min-width: 250px;
}
.advanced-filters {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
}
.filter-select {
min-width: 180px;
max-width: 220px;
}
.active-filters {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.results-info {
padding: 8px 12px;
background: var(--color-neutral-200);
border-radius: 8px;
border-left: 3px solid var(--color-primary-600);
}
.results-text {
font-size: 13px;
font-weight: 600;
color: var(--color-neutral-700);
}
.patient-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 16px;
}
@@ -260,8 +476,22 @@ const handleAction = (patient, action) => {
align-items: stretch;
}
.status-filter {
min-width: 100%;
}
.search-field {
max-width: 100%;
min-width: 100%;
}
.advanced-filters {
flex-direction: column;
}
.filter-select {
width: 100%;
max-width: 100%;
}
.patient-grid {
@@ -278,7 +508,7 @@ const handleAction = (patient, action) => {
@media (min-width: 1265px) {
.patient-grid {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
}
</style>