general-template/components/apps/registration/form/PatientData.vue

<template>
  <v-card>
    <v-card-title class="d-flex justify-space-between align-center">
      <span class="text-h6">DATA PASIEN</span>
      <v-btn variant="text" color="primary" size="small" @click="resetSection">
        Atur Ulang
      </v-btn>
    </v-card-title>

    <v-card-text>
      <v-row>
        <v-col cols="12">
          <v-text-field
            v-model="localData.name"
            label="Nama Pasien"
            variant="outlined"
            density="compact"
            placeholder="Masukkan Nama Pasien"
            :rules="[rules.required]"
          />
        </v-col>
      </v-row>

      <v-row>
        <v-col cols="12" md="6">
          <v-text-field
            v-model="localData.medicalRecordNumber"
            label="No. Rekam medis"
            variant="outlined"
            density="compact"
            placeholder="MRN Pasien"
            :rules="[rules.required]"
          />
        </v-col>

        <v-col cols="12" md="6">
          <v-select
            v-model="localData.category"
            :items="patientCategories"
            label="Kategori Pasien"
            variant="outlined"
            density="compact"
            placeholder="Pilih Kategori Pasien"
            append-inner-icon="mdi-chevron-down"
          />
        </v-col>
      </v-row>

      <v-row>
        <v-col cols="12" md="6">
          <v-text-field
            v-model="localData.birthDate"
            label="Tanggal Lahir"
            variant="outlined"
            density="compact"
            type="date"
            placeholder="Tanggal Lahir (DD/MM/YYYY)"
            :rules="[rules.required]"
          >
            <template v-slot:label>
              Tanggal Lahir <span class="text-red">*</span>
            </template>
          </v-text-field>
        </v-col>

        <v-col cols="12" md="6">
          <v-select
            v-model="localData.gender"
            :items="genderOptions"
            label="Jenis Kelamin"
            variant="outlined"
            density="compact"
            placeholder="Pilih"
            :rules="[rules.required]"
            append-inner-icon="mdi-chevron-down"
          >
            <template v-slot:label>
              Jenis Kelamin <span class="text-red">*</span>
            </template>
          </v-select>
        </v-col>
      </v-row>

      <v-row>
        <v-col cols="12">
          <v-textarea
            v-model="localData.address"
            label="Alamat"
            variant="outlined"
            density="compact"
            rows="3"
            placeholder="Alamat"
            :rules="[rules.required]"
            counter="100"
          >
            <template v-slot:label>
              Alamat <span class="text-red">*</span>
            </template>
          </v-textarea>
        </v-col>
      </v-row>

      <v-row>
        <v-col cols="12" md="2">
          <v-select
            v-model="localData.phoneCode"
            :items="phoneCodes"
            label="Kode"
            variant="outlined"
            density="compact"
            :rules="[rules.required]"
          >
            <template v-slot:label>
              Kode <span class="text-red">*</span>
            </template>
          </v-select>
        </v-col>

        <v-col cols="12" md="5">
          <v-text-field
            v-model="localData.phoneNumber"
            label="Nomor Telepon"
            variant="outlined"
            density="compact"
            placeholder="Nomor Telepon"
            :rules="[rules.required, rules.phone]"
          >
            <template v-slot:label>
              Nomor Telepon <span class="text-red">*</span>
            </template>
          </v-text-field>
        </v-col>

        <v-col cols="12" md="5">
          <v-text-field
            v-model="localData.email"
            label="Email"
            variant="outlined"
            density="compact"
            placeholder="Email"
            :rules="[rules.email]"
          />
        </v-col>
      </v-row>

      <v-row>
        <v-col cols="12" md="6">
          <v-select
            v-model="localData.identityType"
            :items="identityTypes"
            label="Jenis Identitas"
            variant="outlined"
            density="compact"
            placeholder="Pilih"
            :rules="[rules.required]"
            append-inner-icon="mdi-chevron-down"
          >
            <template v-slot:label>
              Jenis Identitas <span class="text-red">*</span>
            </template>
          </v-select>
        </v-col>

        <v-col cols="12" md="6">
          <v-text-field
            v-model="localData.identityNumber"
            label="Nomor Identitas"
            variant="outlined"
            density="compact"
            placeholder="Nomor Identitas"
            :rules="[rules.required]"
          >
            <template v-slot:label>
              Nomor Identitas <span class="text-red">*</span>
            </template>
          </v-text-field>
        </v-col>
      </v-row>
    </v-card-text>
  </v-card>
</template>

<script setup>
import { ref, watch } from "vue";

const props = defineProps({
  patientData: {
    type: Object,
    required: true
  }
});

const emit = defineEmits(["update:patientData", "update"]);

const localData = ref({ ...props.patientData });

const patientCategories = ["Umum", "BPJS", "Asuransi Lain"];

const genderOptions = [
  { title: "Laki-laki", value: "L" },
  { title: "Perempuan", value: "P" }
];

const phoneCodes = ["+62", "+65", "+60", "+1"];

const identityTypes = [
  { title: "KTP", value: "ktp" },
  { title: "SIM", value: "sim" },
  { title: "Paspor", value: "paspor" },
  { title: "Kartu Pelajar", value: "kartu_pelajar" }
];

const rules = {
  required: (value) => !!value || "Field ini wajib diisi",
  email: (value) => {
    const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return !value || pattern.test(value) || "Email tidak valid";
  },
  phone: (value) => {
    const pattern = /^[0-9]{8,15}$/;
    return pattern.test(value) || "Nomor telepon tidak valid";
  }
};

const resetSection = () => {
  localData.value = {
    name: "",
    medicalRecordNumber: "",
    category: "",
    birthDate: "",
    gender: "",
    address: "",
    phoneCode: "+62",
    phoneNumber: "",
    email: "",
    identityType: "",
    identityNumber: ""
  };
};

watch(
  localData,
  (newVal) => {
    emit("update:patientData", newVal);
    emit("update");
  },
  { deep: true }
);
</script>