update komponen, data pasien, list pasien, screen
This commit is contained in:
bagus-arie05
204
pages/Setting/Screen/edit/[id].vue
Normal file
204
pages/Setting/Screen/edit/[id].vue
Normal file
@@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<div class="screen-edit">
|
||||
<!-- Header -->
|
||||
<div class="d-flex align-center mb-4">
|
||||
<v-btn icon="mdi-arrow-left" @click="goBack" class="mr-2"></v-btn>
|
||||
<h2>Edit Screen</h2>
|
||||
</div>
|
||||
|
||||
<!-- Screen Selection Cards -->
|
||||
<div class="screen-cards mb-6">
|
||||
<v-row>
|
||||
<v-col cols="12" md="4" v-for="screen in screens" :key="screen.id">
|
||||
<v-card
|
||||
:class="['screen-card', { active: selectedScreen?.id === screen.id }]"
|
||||
@click="selectScreen(screen)"
|
||||
elevation="2"
|
||||
>
|
||||
<v-card-title class="text-center">
|
||||
{{ screen.nama }}
|
||||
</v-card-title>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
|
||||
<!-- Selected Screen Display -->
|
||||
<div v-if="selectedScreen" class="mb-4">
|
||||
<v-chip color="primary" size="large">
|
||||
Selected: {{ selectedScreen.nama }}
|
||||
</v-chip>
|
||||
</div>
|
||||
|
||||
<!-- Clinic Selection Table -->
|
||||
<TabelLayanan
|
||||
v-if="selectedScreen"
|
||||
:headers="computedHeaders"
|
||||
:items="klinikItems"
|
||||
:selectedItems="selectedKlinik"
|
||||
@update:selectedItems="updateSelectedKlinik"
|
||||
/>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="d-flex justify-end gap-4 mt-6">
|
||||
<v-btn variant="outlined" @click="cancel">
|
||||
Cancel
|
||||
</v-btn>
|
||||
<v-btn color="warning" @click="submit" :disabled="!selectedScreen">
|
||||
Submit
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import TabelLayanan from '~/components/TabelLayanan.vue';
|
||||
|
||||
// Get route parameter
|
||||
const route = useRoute();
|
||||
const screenId = route.params.id;
|
||||
|
||||
// Data
|
||||
const selectedScreen = ref(null);
|
||||
const selectedKlinik = ref([]);
|
||||
|
||||
const screens = ref([
|
||||
{ id: 1, nama: 'Screen 1' },
|
||||
{ id: 2, nama: 'Screen 2' },
|
||||
{ id: 3, nama: 'Screen 3' }
|
||||
]);
|
||||
|
||||
const klinikItems = ref([
|
||||
{ id: 1, no: 1, nama_klinik: 'ANAK' },
|
||||
{ id: 2, no: 2, nama_klinik: 'ANESTESI' },
|
||||
{ id: 3, no: 3, nama_klinik: 'BEDAH' },
|
||||
{ id: 4, no: 4, nama_klinik: 'GIGI DAN MULUT' },
|
||||
{ id: 5, no: 5, nama_klinik: 'GERIATRI' },
|
||||
{ id: 6, no: 6, nama_klinik: 'GIZI' },
|
||||
{ id: 7, no: 7, nama_klinik: 'IPD' },
|
||||
{ id: 8, no: 8, nama_klinik: 'JANTUNG' },
|
||||
{ id: 9, no: 9, nama_klinik: 'JIWA' },
|
||||
{ id: 10, no: 10, nama_klinik: 'KUL KEL' },
|
||||
{ id: 11, no: 11, nama_klinik: 'KOMPLEMENTER' },
|
||||
{ id: 12, no: 12, nama_klinik: 'MATA' },
|
||||
{ id: 13, no: 13, nama_klinik: 'SARAF' },
|
||||
{ id: 14, no: 14, nama_klinik: 'KANDUNGAN' },
|
||||
{ id: 15, no: 15, nama_klinik: 'ONKOLOGI' },
|
||||
{ id: 16, no: 16, nama_klinik: 'PARU' },
|
||||
{ id: 17, no: 17, nama_klinik: 'RADIOTERAPI' },
|
||||
{ id: 18, no: 18, nama_klinik: 'REHAB MEDIK' },
|
||||
{ id: 19, no: 19, nama_klinik: 'THT' },
|
||||
{ id: 20, no: 20, nama_klinik: 'MCU' },
|
||||
{ id: 21, no: 21, nama_klinik: 'KEMOTERAPI' },
|
||||
{ id: 22, no: 22, nama_klinik: 'R. TINDAKAN' },
|
||||
{ id: 23, no: 23, nama_klinik: 'HOM' }
|
||||
]);
|
||||
|
||||
// Computed headers based on selected screen
|
||||
const computedHeaders = computed(() => {
|
||||
return [
|
||||
{ title: 'No', key: 'no', sortable: false, width: '80px' },
|
||||
{ title: 'Nama Klinik', key: 'nama_klinik', sortable: true },
|
||||
{ title: 'Pilih', key: 'pilih', sortable: false, width: '100px' }
|
||||
];
|
||||
});
|
||||
|
||||
// Methods
|
||||
const selectScreen = (screen) => {
|
||||
selectedScreen.value = screen;
|
||||
loadScreenData(screen.id);
|
||||
};
|
||||
|
||||
const loadScreenData = (screenId) => {
|
||||
// Simulate loading existing selections for the screen
|
||||
switch(parseInt(screenId)) {
|
||||
case 1:
|
||||
selectedKlinik.value = [1, 2, 3, 4, 5, 6, 7, 8]; // ANAK, ANESTESI, etc.
|
||||
break;
|
||||
case 2:
|
||||
selectedKlinik.value = [9, 10, 11, 12, 13, 14, 15, 16]; // JIWA, KUL KEL, etc.
|
||||
break;
|
||||
case 3:
|
||||
selectedKlinik.value = [17, 18, 19, 20, 21, 22, 23]; // RADIOTERAPI, REHAB MEDIK, etc.
|
||||
break;
|
||||
default:
|
||||
selectedKlinik.value = [];
|
||||
}
|
||||
};
|
||||
|
||||
const updateSelectedKlinik = (newSelection) => {
|
||||
selectedKlinik.value = newSelection;
|
||||
};
|
||||
|
||||
const submit = () => {
|
||||
if (!selectedScreen.value) {
|
||||
alert('Please select a screen first');
|
||||
return;
|
||||
}
|
||||
|
||||
// Simulate API call to save the configuration
|
||||
const data = {
|
||||
screenId: selectedScreen.value.id,
|
||||
selectedKlinik: selectedKlinik.value
|
||||
};
|
||||
|
||||
console.log('Saving configuration:', data);
|
||||
alert('Configuration saved successfully!');
|
||||
goBack();
|
||||
};
|
||||
|
||||
const cancel = () => {
|
||||
goBack();
|
||||
};
|
||||
|
||||
const goBack = () => {
|
||||
navigateTo('/setting/screen');
|
||||
};
|
||||
|
||||
// Lifecycle
|
||||
onMounted(() => {
|
||||
// Auto-select screen based on route parameter
|
||||
if (screenId) {
|
||||
const screen = screens.value.find(s => s.id == screenId);
|
||||
if (screen) {
|
||||
selectScreen(screen);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.screen-edit {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.screen-cards {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.screen-card {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.screen-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.screen-card.active {
|
||||
border-color: #1976d2;
|
||||
background-color: #f3f7ff;
|
||||
}
|
||||
|
||||
.screen-card .v-card-title {
|
||||
font-weight: 600;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.gap-4 {
|
||||
gap: 16px;
|
||||
}
|
||||
</style>
|
||||
151
pages/Setting/Screen/index.vue
Normal file
151
pages/Setting/Screen/index.vue
Normal file
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<div class="screen-list">
|
||||
<!-- Header -->
|
||||
<div class="d-flex justify-space-between align-center mb-4">
|
||||
<h2>Screen</h2>
|
||||
<div class="d-flex gap-2">
|
||||
<v-btn color="primary" variant="outlined" prepend-icon="mdi-eye">
|
||||
View
|
||||
</v-btn>
|
||||
<v-btn color="warning" prepend-icon="mdi-pencil">
|
||||
Edit
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Controls -->
|
||||
<div class="d-flex justify-space-between align-center mb-4">
|
||||
<div class="d-flex align-center gap-2">
|
||||
<span>Show</span>
|
||||
<v-select
|
||||
v-model="itemsPerPage"
|
||||
:items="[10, 25, 50, 100]"
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
style="width: 80px;"
|
||||
></v-select>
|
||||
<span>entries</span>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-center gap-2">
|
||||
<span>Search:</span>
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
hide-details
|
||||
style="width: 200px;"
|
||||
></v-text-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="screenItems"
|
||||
:items-per-page="itemsPerPage"
|
||||
:search="search"
|
||||
class="elevation-1"
|
||||
>
|
||||
<template v-slot:item.no="{ index }">
|
||||
{{ index + 1 }}
|
||||
</template>
|
||||
|
||||
<template v-slot:item.klinik="{ item }">
|
||||
<div class="klinik-tags">
|
||||
<v-chip
|
||||
v-for="klinik in item.klinik"
|
||||
:key="klinik"
|
||||
size="small"
|
||||
class="ma-1"
|
||||
color="red"
|
||||
text-color="white"
|
||||
>
|
||||
{{ klinik }}
|
||||
</v-chip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.actions="{ item }">
|
||||
<v-btn
|
||||
icon="mdi-pencil"
|
||||
size="small"
|
||||
color="primary"
|
||||
@click="editScreen(item)"
|
||||
></v-btn>
|
||||
</template>
|
||||
</v-data-table>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="d-flex justify-space-between align-center mt-4">
|
||||
<div>
|
||||
Showing {{ currentPageStart }} to {{ currentPageEnd }} of {{ totalItems }} entries
|
||||
</div>
|
||||
|
||||
<v-pagination
|
||||
v-model="currentPage"
|
||||
:length="totalPages"
|
||||
:total-visible="5"
|
||||
></v-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
|
||||
// Data
|
||||
const search = ref('');
|
||||
const itemsPerPage = ref(10);
|
||||
const currentPage = ref(1);
|
||||
|
||||
const headers = [
|
||||
{ title: 'No', key: 'no', sortable: false, width: '60px' },
|
||||
{ title: 'Nama Screen', key: 'nama_screen', sortable: true },
|
||||
{ title: 'Klinik', key: 'klinik', sortable: false },
|
||||
{ title: 'Actions', key: 'actions', sortable: false, width: '100px' }
|
||||
];
|
||||
|
||||
const screenItems = ref([
|
||||
{
|
||||
id: 1,
|
||||
nama_screen: 'Layar Screen 1',
|
||||
klinik: ['ANAK', 'ANESTESI', 'BEDAH', 'GIGI DAN MULUT', 'GERIATRI', 'GIZI', 'IPD', 'JANTUNG']
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
nama_screen: 'Layar Screen 2',
|
||||
klinik: ['JIWA', 'KUL KEL', 'KOMPLEMENTER', 'MATA', 'SARAF', 'KANDUNGAN', 'ONKOLOGI', 'PARU']
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
nama_screen: 'Layar Screen 3',
|
||||
klinik: ['RADIOTERAPI', 'REHAB MEDIK', 'THT', 'MCU', 'KEMOTERAPI', 'R. TINDAKAN', 'HOM']
|
||||
}
|
||||
]);
|
||||
|
||||
// Computed
|
||||
const totalItems = computed(() => screenItems.value.length);
|
||||
const totalPages = computed(() => Math.ceil(totalItems.value / itemsPerPage.value));
|
||||
const currentPageStart = computed(() => (currentPage.value - 1) * itemsPerPage.value + 1);
|
||||
const currentPageEnd = computed(() => Math.min(currentPage.value * itemsPerPage.value, totalItems.value));
|
||||
|
||||
// Methods
|
||||
const editScreen = (item) => {
|
||||
navigateTo(`/setting/screen/edit/${item.id}`);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.screen-list {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.klinik-tags {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user