Fanrouver
105 lines
2.6 KiB
Vue
105 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
modelValue: string;
|
|
primaryColor: string;
|
|
secondaryColor: string;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: string];
|
|
'submit': [];
|
|
'open-history': [];
|
|
}>();
|
|
|
|
const manualForm = ref<{ validate: () => boolean; resetValidation: () => void; reset: () => void } | null>(null);
|
|
|
|
const localValue = computed({
|
|
get: () => props.modelValue,
|
|
set: (value) => emit('update:modelValue', value),
|
|
});
|
|
|
|
const handleSubmit = () => {
|
|
emit('submit');
|
|
};
|
|
|
|
const handleOpenHistory = () => {
|
|
emit('open-history');
|
|
};
|
|
|
|
// Expose form ref for parent component
|
|
defineExpose({
|
|
form: manualForm,
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="tab-content">
|
|
<!-- Status Header -->
|
|
<div class="status-header mb-3">
|
|
<div class="status-icon-wrapper">
|
|
<v-icon :color="secondaryColor" size="24">mdi-keyboard</v-icon>
|
|
</div>
|
|
<div class="status-text">
|
|
<h3 class="status-title">Input Manual</h3>
|
|
<p class="status-subtitle">Masukkan nomor antrean atau ID pasien</p>
|
|
</div>
|
|
</div>
|
|
|
|
<v-form @submit.prevent="handleSubmit" ref="manualForm">
|
|
<v-text-field
|
|
v-model="localValue"
|
|
label="Nomor Antrean / ID Pasien"
|
|
placeholder="Contoh: P12345"
|
|
prepend-inner-icon="mdi-account-card-details"
|
|
variant="outlined"
|
|
:color="primaryColor"
|
|
class="input-modern mb-4"
|
|
required
|
|
:rules="[v => !!v || 'Field ini wajib diisi']"
|
|
density="comfortable"
|
|
hide-details="auto"
|
|
>
|
|
<template v-slot:append-inner>
|
|
<v-icon :color="localValue ? 'success' : 'grey'" size="20">
|
|
{{ localValue ? 'mdi-check-circle' : 'mdi-circle-outline' }}
|
|
</v-icon>
|
|
</template>
|
|
</v-text-field>
|
|
|
|
<v-btn
|
|
class="btn-primary-modern btn-centered"
|
|
size="large"
|
|
type="submit"
|
|
elevation="0"
|
|
>
|
|
<v-icon start size="20">mdi-login</v-icon>
|
|
Check-in Sekarang
|
|
</v-btn>
|
|
</v-form>
|
|
|
|
<!-- Quick Access Buttons -->
|
|
<div class="quick-actions mt-4">
|
|
<p class="text-caption text-grey text-center mb-3">Akses Cepat</p>
|
|
<v-row dense>
|
|
<v-col cols="12">
|
|
<v-btn
|
|
variant="outlined"
|
|
:color="primaryColor"
|
|
block
|
|
size="small"
|
|
class="text-none"
|
|
@click="handleOpenHistory"
|
|
>
|
|
<v-icon start size="18">mdi-history</v-icon>
|
|
Riwayat
|
|
</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
@import '~/assets/scss/checkin/components';
|
|
</style>
|