fix(FE) : fix review style
This commit is contained in:
Yusron alamsyah
No files matched your search
@@ -166,24 +166,24 @@ watch(() => props.modelValue, (isOpen) => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-dialog v-model="dialog" max-width="800" persistent scrollable>
|
||||
<v-dialog v-model="dialog" max-width="900px" persistent scrollable>
|
||||
<v-card>
|
||||
<v-card-title class="d-flex align-center justify-space-between bg-primary pa-4">
|
||||
<v-card-title class="d-flex align-center justify-space-between pa-4">
|
||||
<div class="d-flex align-center">
|
||||
<Icon icon="solar:clipboard-check-bold" height="24" class="mr-2" />
|
||||
<span class="text-h5">Update Status Antrian Operasi</span>
|
||||
<Icon icon="solar:clipboard-check-bold-duotone" height="28" class="text-primary mr-3" />
|
||||
<span class="text-h6">Update Status Antrian Operasi</span>
|
||||
</div>
|
||||
<v-btn
|
||||
icon
|
||||
variant="text"
|
||||
size="small"
|
||||
@click="dialog = false"
|
||||
:disabled="loadingSubmit"
|
||||
>
|
||||
<Icon icon="mdi-close" height="20" />
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</v-card-title>
|
||||
<v-card-text class="pa-4" style="max-height: 600px;">
|
||||
|
||||
<v-card-text class="pa-5 bg-background" style="max-height: 75vh; overflow-y: auto;">
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading" class="text-center py-8">
|
||||
<v-progress-circular
|
||||
@@ -207,62 +207,96 @@ watch(() => props.modelValue, (isOpen) => {
|
||||
<!-- Content -->
|
||||
<div v-else-if="pasienData">
|
||||
<!-- Informasi Pasien -->
|
||||
<v-card variant="outlined" class="mb-6">
|
||||
<v-card-item>
|
||||
<h6 class="text-h6 font-weight-bold mb-4">
|
||||
<Icon icon="solar:user-bold" height="20" class="mr-2" />
|
||||
Informasi Pasien
|
||||
</h6>
|
||||
</v-card-item>
|
||||
<v-divider></v-divider>
|
||||
<v-card-text >
|
||||
<v-card elevation="2" class="mb-4">
|
||||
<v-card-title class="bg-blue-lighten-5 pa-4">
|
||||
<div class="d-flex align-center">
|
||||
<Icon icon="solar:user-bold-duotone" height="24" class="mr-2 text-primary" />
|
||||
<span class="text-h6">Informasi Pasien</span>
|
||||
</div>
|
||||
</v-card-title>
|
||||
<v-card-text class="pa-5">
|
||||
<v-row>
|
||||
<v-col cols="12" sm="6">
|
||||
<div class="mb-3">
|
||||
<div class="text-caption text-medium-emphasis">No. Rekam Medis</div>
|
||||
<div class="text-body-1 font-weight-medium">{{ pasienData.formData?.noRekamMedis || '-' }}</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">
|
||||
<Icon icon="mdi-card-account-details" height="20" class="mr-2" />
|
||||
No. Rekam Medis
|
||||
</div>
|
||||
<div class="info-value font-weight-bold">
|
||||
{{ pasienData.formData?.noRekamMedis || '-' }}
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6">
|
||||
<div class="mb-3">
|
||||
<div class="text-caption text-medium-emphasis">Nama Pasien</div>
|
||||
<div class="text-body-1 font-weight-medium">{{ pasienData.formData?.namaPasien || '-' }}</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">
|
||||
<Icon icon="solar:user-heart-bold" height="20" class="mr-2" />
|
||||
Nama Pasien
|
||||
</div>
|
||||
<div class="info-value font-weight-bold">
|
||||
{{ pasienData.formData?.namaPasien || '-' }}
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6">
|
||||
<div class="mb-3">
|
||||
<div class="text-caption text-medium-emphasis">Jenis Kelamin</div>
|
||||
<div class="text-body-1">{{ getGenderText(pasienData.formData?.jenisKelamin) }}</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">
|
||||
<Icon icon="mdi-gender-male-female" height="20" class="mr-2" />
|
||||
Jenis Kelamin
|
||||
</div>
|
||||
<div class="info-value">
|
||||
{{ getGenderText(pasienData.formData?.jenisKelamin) }}
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6">
|
||||
<div class="mb-3">
|
||||
<div class="text-caption text-medium-emphasis">Tanggal Daftar</div>
|
||||
<div class="text-body-1">{{ formatDate(pasienData.rencanaOperasiData?.tanggalDaftar) }}</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">
|
||||
<Icon icon="solar:calendar-date-bold" height="20" class="mr-2" />
|
||||
Tanggal Daftar
|
||||
</div>
|
||||
<div class="info-value">
|
||||
{{ formatDate(pasienData.rencanaOperasiData?.tanggalDaftar) }}
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="4">
|
||||
<div class="mb-3">
|
||||
<div class="text-caption text-medium-emphasis">Kategori</div>
|
||||
<v-chip size="small" color="primary" variant="tonal">
|
||||
{{ pasienData.rencanaOperasiData?.kategoriName || '-' }}
|
||||
</v-chip>
|
||||
<div class="info-item">
|
||||
<div class="info-label">
|
||||
<Icon icon="solar:clipboard-list-bold" height="20" class="mr-2" />
|
||||
Kategori
|
||||
</div>
|
||||
<div class="info-value">
|
||||
<v-chip size="small" color="primary" variant="flat">
|
||||
{{ pasienData.rencanaOperasiData?.kategoriName || '-' }}
|
||||
</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="4">
|
||||
<div class="mb-3">
|
||||
<div class="text-caption text-medium-emphasis">Spesialis</div>
|
||||
<v-chip size="small" color="secondary" variant="tonal">
|
||||
{{ pasienData.rencanaOperasiData?.SpesialisName || '-' }}
|
||||
</v-chip>
|
||||
<div class="info-item">
|
||||
<div class="info-label">
|
||||
<Icon icon="solar:stethoscope-bold" height="20" class="mr-2" />
|
||||
Spesialis
|
||||
</div>
|
||||
<div class="info-value">
|
||||
<v-chip size="small" color="secondary" variant="flat">
|
||||
{{ pasienData.rencanaOperasiData?.SpesialisName || '-' }}
|
||||
</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="4">
|
||||
<div class="mb-3">
|
||||
<div class="text-caption text-medium-emphasis">Sub Spesialis</div>
|
||||
<v-chip size="small" color="info" variant="tonal">
|
||||
{{ pasienData.rencanaOperasiData?.SubSpesialisName || '-' }}
|
||||
</v-chip>
|
||||
<div class="info-item">
|
||||
<div class="info-label">
|
||||
<Icon icon="solar:health-bold" height="20" class="mr-2" />
|
||||
Sub Spesialis
|
||||
</div>
|
||||
<div class="info-value">
|
||||
<v-chip size="small" color="info" variant="flat">
|
||||
{{ pasienData.rencanaOperasiData?.SubSpesialisName || '-' }}
|
||||
</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
@@ -270,15 +304,14 @@ watch(() => props.modelValue, (isOpen) => {
|
||||
</v-card>
|
||||
|
||||
<!-- Form Update Status -->
|
||||
<v-card variant="outlined">
|
||||
<v-card-item>
|
||||
<h6 class="text-h6 font-weight-bold mb-4">
|
||||
<Icon icon="solar:settings-bold" height="20" class="mr-2" />
|
||||
Update Status Operasi
|
||||
</h6>
|
||||
</v-card-item>
|
||||
<v-divider></v-divider>
|
||||
<v-card-text>
|
||||
<v-card elevation="2" class="mb-2">
|
||||
<v-card-title class="bg-orange-lighten-5 pa-4">
|
||||
<div class="d-flex align-center">
|
||||
<Icon icon="solar:settings-bold-duotone" height="24" class="mr-2 text-warning" />
|
||||
<span class="text-h6">Update Status Operasi</span>
|
||||
</div>
|
||||
</v-card-title>
|
||||
<v-card-text class="pa-4">
|
||||
<v-row>
|
||||
<!-- Status Operasi -->
|
||||
<v-col cols="12">
|
||||
@@ -299,6 +332,7 @@ watch(() => props.modelValue, (isOpen) => {
|
||||
:color="formData.statusOperasi === STATUS.BELUM ? 'primary' : 'default'"
|
||||
@click="formData.statusOperasi = STATUS.BELUM"
|
||||
>
|
||||
<Icon v-if="formData.statusOperasi === STATUS.BELUM" icon="mdi-progress-clock" height="20" class="mr-2" />
|
||||
Belum
|
||||
</v-btn>
|
||||
<v-btn
|
||||
@@ -308,6 +342,7 @@ watch(() => props.modelValue, (isOpen) => {
|
||||
:color="formData.statusOperasi === STATUS.SELESAI ? 'success' : 'default'"
|
||||
@click="formData.statusOperasi = STATUS.SELESAI"
|
||||
>
|
||||
<Icon v-if="formData.statusOperasi === STATUS.SELESAI" icon="mdi-check-circle" height="20" class="mr-2" />
|
||||
Selesai
|
||||
</v-btn>
|
||||
<v-btn
|
||||
@@ -317,6 +352,7 @@ watch(() => props.modelValue, (isOpen) => {
|
||||
:color="formData.statusOperasi === STATUS.TUNDA ? 'warning' : 'default'"
|
||||
@click="formData.statusOperasi = STATUS.TUNDA"
|
||||
>
|
||||
<Icon v-if="formData.statusOperasi === STATUS.TUNDA" icon="mdi-timer-sand" height="20" class="mr-2" />
|
||||
Tunda
|
||||
</v-btn>
|
||||
<v-btn
|
||||
@@ -326,6 +362,7 @@ watch(() => props.modelValue, (isOpen) => {
|
||||
:color="formData.statusOperasi === STATUS.BATAL ? 'error' : 'default'"
|
||||
@click="formData.statusOperasi = STATUS.BATAL"
|
||||
>
|
||||
<Icon v-if="formData.statusOperasi === STATUS.BATAL" icon="mdi-close-circle" height="20" class="mr-2" />
|
||||
Batal
|
||||
</v-btn>
|
||||
</v-btn-group>
|
||||
@@ -369,27 +406,16 @@ watch(() => props.modelValue, (isOpen) => {
|
||||
</div>
|
||||
</v-card-text>
|
||||
|
||||
<v-divider></v-divider>
|
||||
|
||||
<v-card-actions class="pa-4">
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn
|
||||
variant="outlined"
|
||||
@click="dialog = false"
|
||||
:disabled="loadingSubmit"
|
||||
size="large"
|
||||
prepend-icon="mdi-close"
|
||||
>
|
||||
Batal
|
||||
</v-btn>
|
||||
|
||||
<v-card-actions class="pa-4 justify-end">
|
||||
<v-btn
|
||||
color="primary"
|
||||
@click="handleSubmit"
|
||||
size="large"
|
||||
variant="flat"
|
||||
prepend-icon="mdi-content-save"
|
||||
:loading="loadingSubmit"
|
||||
:disabled="loading || !isFormValid"
|
||||
variant="flat"
|
||||
size="large"
|
||||
prepend-icon="mdi-content-save"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
Simpan
|
||||
</v-btn>
|
||||
@@ -415,3 +441,25 @@ watch(() => props.modelValue, (isOpen) => {
|
||||
</v-snackbar>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.info-item {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.875rem;
|
||||
color: rgb(var(--v-theme-on-surface));
|
||||
opacity: 0.7;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 1rem;
|
||||
color: rgb(var(--v-theme-on-surface));
|
||||
padding-left: 28px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user