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

Update Theme

Browse Source
This commit is contained in:
bagus-arie05
2025-09-24 11:18:02 +07:00
parent a66f883372
commit 1b1d7e331a
11 changed files with 368 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
pages/Setting/Screen/index.vue
View File

@@ -1,7 +1,28 @@
<template>
<div class="screen-list">
<!-- Header -->
<div class="d-flex justify-space-between align-center mb-4">
<div class="page-header">
<div class="header-content">
<div class="header-left">
<div class="header-icon">
<v-icon size="32" color="white">mdi-monitor</v-icon>
</div>
<div class="header-text">
<h1 class="page-title">Screen</h1>
<p class="page-subtitle">Rabu, 13 Agustus 2025 - Pelayanan</p>
</div>
</div>
<div class="header-right">
<!-- <v-chip color="success" variant="flat" class="mr-2">
Total {{ totalPasien }} Pasien
</v-chip> -->
<v-chip color="white" variant="flat" class="text-primary" to="/Setting/screen/edit/1">
Edit Screen
</v-chip>
</div>
</div>
</div>
<!-- <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">
@@ -11,7 +32,7 @@
Edit
</v-btn>
</div>
</div>
</div> -->
<!-- Controls -->
<div class="d-flex justify-space-between align-center mb-4">
@@ -22,11 +43,11 @@
:items="[10, 25, 50, 100]"
density="compact"
variant="outlined"
style="width: 80px;"
style="width: 80px"
></v-select>
<span>entries</span>
</div>
<div class="d-flex align-center gap-2">
<span>Search:</span>
<v-text-field
@@ -34,7 +55,7 @@
density="compact"
variant="outlined"
hide-details
style="width: 200px;"
style="width: 200px"
></v-text-field>
</div>
</div>
@@ -50,7 +71,7 @@
<template v-slot:item.no="{ index }">
{{ index + 1 }}
</template>
<template v-slot:item.klinik="{ item }">
<div class="klinik-tags">
<v-chip
@@ -70,9 +91,9 @@
<v-btn
icon="mdi-pencil"
size="small"
color=#ff9248
color="#ff9248"
@click="editScreen(item)"
style="color:white;"
style="color: white"
></v-btn>
</template>
</v-data-table>
@@ -80,9 +101,10 @@
<!-- Footer -->
<div class="d-flex justify-space-between align-center mt-4">
<div>
Showing {{ currentPageStart }} to {{ currentPageEnd }} of {{ totalItems }} entries
Showing {{ currentPageStart }} to {{ currentPageEnd }} of
{{ totalItems }} entries
</div>
<v-pagination
v-model="currentPage"
:length="totalPages"
@@ -93,43 +115,75 @@
</template>
<script setup>
import { ref, computed } from 'vue';
import { ref, computed } from "vue";
// Data
const search = ref('');
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' }
{ 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']
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']
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']
}
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));
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) => {
@@ -138,6 +192,53 @@ const editScreen = (item) => {
</script>
<style scoped>
.page-header {
background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
border-radius: 16px;
margin-bottom: 24px;
box-shadow: 0 8px 32px rgba(25, 118, 210, 0.3);
}
.header-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 32px;
color: white;
}
.header-left {
display: flex;
align-items: center;
}
.header-icon {
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
padding: 16px;
margin-right: 20px;
backdrop-filter: blur(10px);
}
.page-title {
font-size: 32px;
font-weight: 700;
margin: 0;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.page-subtitle {
margin: 4px 0 0 0;
opacity: 0.9;
font-size: 16px;
}
.header-right {
display: flex;
align-items: center;
}
.screen-list {
padding: 20px;
}
@@ -149,4 +250,4 @@ const editScreen = (item) => {
.gap-2 {
gap: 8px;
}
</style>
</style>