antrean-operasi/components/pendaftaran/StatusPasienOperasi.vue

<script setup lang="ts">
import type { Props } from '~/types/common';
import { STATUS } from '~/types/antrean';

interface StatusProps extends Props {
    rencanaOperasiData?: {
        tanggalDaftar: string;
    };
}

const props = withDefaults(defineProps<StatusProps>(), {
    readonly: false
});

const statusPasienData = defineModel<{
    tanggalSelesai: string;
    statusOperasi: string;
    keteranganStatus: string;
}>({ required: true });

// Computed min date from tanggal daftar
const minTanggalSelesai = computed(() => {
    return props.rencanaOperasiData?.tanggalDaftar || '';
});

// Validation rules
const rules = {
    requiredIfSelesai: (value: any) => {
        if (statusPasienData.value.statusOperasi === STATUS.SELESAI && !value) {
            return 'Tanggal selesai operasi wajib diisi jika status Selesai';
        }
        return true;
    },
    minDate: (value: any) => {
        if (value && minTanggalSelesai.value && value < minTanggalSelesai.value) {
            return 'Tanggal selesai tidak boleh kurang dari tanggal daftar';
        }
        return true;
    }
};
</script>

<template>
    <v-card elevation="10">
        <v-card-item>
            <h5 class="text-h5 font-weight-bold">Data Status Pasien Operasi</h5>
        </v-card-item>
        <v-divider></v-divider>
        <v-card-text>
            <v-row>
                <!-- Status Operasi -->
                <v-col cols="12">
                    <v-label class="mb-2 font-weight-medium">Status Operasi <span class="text-error">*</span></v-label>
                    <v-row class="mt-2">
                        <v-col cols="12" sm="6" md="3">
                            <v-btn
                                block
                                size="large"
                                :variant="statusPasienData.statusOperasi === STATUS.BELUM ? 'flat' : 'outlined'"
                                :color="statusPasienData.statusOperasi === STATUS.BELUM ? 'primary' : 'default'"
                                @click="!readonly && (statusPasienData.statusOperasi = STATUS.BELUM)"
                                :disabled="readonly"
                            >
                                <v-icon left class="mr-2">{{ statusPasienData.statusOperasi === STATUS.BELUM ? 'mdi-radiobox-marked' : 'mdi-radiobox-blank' }}</v-icon>
                                Belum
                            </v-btn>
                        </v-col>
                        <v-col cols="12" sm="6" md="3">
                            <v-btn
                                block
                                size="large"
                                :variant="statusPasienData.statusOperasi === STATUS.SELESAI ? 'flat' : 'outlined'"
                                :color="statusPasienData.statusOperasi === STATUS.SELESAI ? 'primary' : 'default'"
                                @click="!readonly && (statusPasienData.statusOperasi = STATUS.SELESAI)"
                                :disabled="readonly"
                            >
                                <v-icon left class="mr-2">{{ statusPasienData.statusOperasi === STATUS.SELESAI ? 'mdi-radiobox-marked' : 'mdi-radiobox-blank' }}</v-icon>
                                Selesai
                            </v-btn>
                        </v-col>
                        <v-col cols="12" sm="6" md="3">
                            <v-btn
                                block
                                size="large"
                                :variant="statusPasienData.statusOperasi === STATUS.TUNDA ? 'flat' : 'outlined'"
                                :color="statusPasienData.statusOperasi === STATUS.TUNDA ? 'primary' : 'default'"
                                @click="!readonly && (statusPasienData.statusOperasi = STATUS.TUNDA)"
                                :disabled="readonly"
                            >
                                <v-icon left class="mr-2">{{ statusPasienData.statusOperasi === STATUS.TUNDA ? 'mdi-radiobox-marked' : 'mdi-radiobox-blank' }}</v-icon>
                                Tunda
                            </v-btn>
                        </v-col>
                        <v-col cols="12" sm="6" md="3">
                            <v-btn
                                block
                                size="large"
                                :variant="statusPasienData.statusOperasi === STATUS.BATAL ? 'flat' : 'outlined'"
                                :color="statusPasienData.statusOperasi === STATUS.BATAL ? 'primary' : 'default'"
                                @click="!readonly && (statusPasienData.statusOperasi = STATUS.BATAL)"
                                :disabled="readonly"
                            >
                                <v-icon left class="mr-2">{{ statusPasienData.statusOperasi === STATUS.BATAL ? 'mdi-radiobox-marked' : 'mdi-radiobox-blank' }}</v-icon>
                                Batal
                            </v-btn>
                        </v-col>
                    </v-row>
                </v-col>

                <!-- Tanggal Selesai Operasi -->
                <v-col cols="6">
                    <v-label class="mb-2 font-weight-medium">
                        Tanggal Selesai Operasi
                        <span v-if="statusPasienData.statusOperasi === STATUS.SELESAI" class="text-error">*</span>
                    </v-label>
                    <v-text-field
                        v-model="statusPasienData.tanggalSelesai"
                        type="datetime-local"
                        variant="outlined"
                        density="comfortable"
                        hide-details="auto"
                        :readonly="readonly"
                        :bg-color="readonly ? 'grey-lighten-3' : undefined"
                        :min="minTanggalSelesai"
                        :rules="[rules.requiredIfSelesai, rules.minDate]"
                    ></v-text-field>
                </v-col>

                <!-- Keterangan Status Pasien -->
                <v-col cols="12">
                    <v-label class="mb-2 font-weight-medium">Keterangan Status Pasien</v-label>
                    <v-textarea
                        v-model="statusPasienData.keteranganStatus"
                        variant="outlined"
                        rows="3"
                        hide-details="auto"
                        :readonly="readonly"
                        :bg-color="readonly ? 'grey-lighten-3' : undefined"
                        placeholder="Keterangan status tunda / batal"
                    ></v-textarea>
                </v-col>
            </v-row>
        </v-card-text>
    </v-card>
</template>