app-test-nuxt/components/apps/registration/form/AppointmentSchedule.vue

<template>
  <v-card>
    <v-card-title class="d-flex justify-space-between align-center">
      <span class="text-h6">NAKES & JADWAL</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" md="6">
          <v-select
            v-model="localData.paymentMethod"
            :items="paymentMethods"
            label="Pembiayaan"
            variant="outlined"
            density="compact"
            :rules="[rules.required]"
            append-inner-icon="mdi-chevron-down"
          >
            <template v-slot:label>
              Pembiayaan <span class="text-red">*</span>
            </template>
          </v-select>
        </v-col>

        <v-col cols="12" md="6">
          <v-text-field
            v-model="localData.referralNumber"
            label="Nomor Rujukan (Opsional)"
            variant="outlined"
            density="compact"
            placeholder="Nomor Rujukan"
          />
        </v-col>
      </v-row>

      <v-row>
        <v-col cols="12">
          <v-select
            v-model="localData.polyclinicName"
            :items="polyclinics"
            label="Nama Poliklinik"
            variant="outlined"
            density="compact"
            placeholder="Pilih"
            :rules="[rules.required]"
            @update:modelValue="onPolyclinicChange"
            append-inner-icon="mdi-chevron-down"
          />
        </v-col>
      </v-row>

      <v-row>
        <v-col cols="12">
          <v-select
            v-model="localData.doctorName"
            :items="doctors"
            label="Nama Nakes"
            variant="outlined"
            density="compact"
            placeholder="Pilih"
            :rules="[rules.required]"
            :disabled="!localData.polyclinicName"
            @update:modelValue="onDoctorChange"
            append-inner-icon="mdi-chevron-down"
          />
        </v-col>
      </v-row>

      <v-row>
        <v-col cols="12" md="6">
          <v-text-field
            v-model="localData.consultationDate"
            label="Tanggal Konsultasi"
            variant="outlined"
            density="compact"
            type="date"
            :rules="[rules.required]"
            :min="minDate"
          >
            <template v-slot:label>
              Tanggal Konsultasi <span class="text-red">*</span>
            </template>
          </v-text-field>
        </v-col>

        <v-col cols="12" md="6">
          <v-select
            v-model="localData.consultationTime"
            :items="timeSlots"
            label="Jam Konsultasi"
            variant="outlined"
            density="compact"
            placeholder="Pilih Jam Konsultasi"
            :rules="[rules.required]"
            :disabled="!localData.consultationDate || !localData.doctorName"
            append-inner-icon="mdi-clock-outline"
          >
            <template v-slot:label>
              Jam Konsultasi <span class="text-red">*</span>
            </template>
          </v-select>
        </v-col>
      </v-row>

      <v-row v-if="localData.doctorName && localData.consultationDate">
        <v-col cols="12">
          <v-alert type="info" variant="tonal" density="compact">
            Slot Nakes: {{ availableSlots }} slot tersedia
          </v-alert>
        </v-col>
      </v-row>
    </v-card-text>
  </v-card>
</template>

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

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

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

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

const paymentMethods = ["Pribadi", "BPJS", "Asuransi Swasta", "Perusahaan"];

const polyclinics = [
  "Poli Umum",
  "Poli Gigi",
  "Poli Anak",
  "Poli Kandungan",
  "Poli Penyakit Dalam",
  "Poli THT"
];

const doctors = ref([]);
const timeSlots = ref([]);
const availableSlots = ref(0);

const minDate = computed(() => {
  const today = new Date();
  return today.toISOString().split("T")[0];
});

const rules = {
  required: (value) => !!value || "Field ini wajib diisi"
};

const onPolyclinicChange = (value) => {
  // Reset doctor and time when polyclinic changes
  localData.value.doctorName = "";
  localData.value.consultationTime = "";

  // Simulate loading doctors based on polyclinic
  if (value) {
    doctors.value = [
      "dr. Ahmad Subhan, Sp.A",
      "dr. Siti Nurhaliza",
      "dr. Budi Santoso, Sp.PD",
      "dr. Maria Christina"
    ];
  }
};

const onDoctorChange = (value) => {
  // Reset time when doctor changes
  localData.value.consultationTime = "";

  // Simulate loading time slots
  if (value && localData.value.consultationDate) {
    loadTimeSlots();
  }
};

const loadTimeSlots = () => {
  // Simulate available time slots
  timeSlots.value = [
    { title: "08:00 - 08:30", value: "08:00" },
    { title: "08:30 - 09:00", value: "08:30" },
    { title: "09:00 - 09:30", value: "09:00" },
    { title: "09:30 - 10:00", value: "09:30" },
    { title: "10:00 - 10:30", value: "10:00" },
    { title: "10:30 - 11:00", value: "10:30" }
  ];
  availableSlots.value = 6;
};

const resetSection = () => {
  localData.value = {
    paymentMethod: "Pribadi",
    referralNumber: "",
    polyclinicName: "",
    doctorName: "",
    consultationDate: "",
    consultationTime: "",
    slotAvailable: true
  };
  doctors.value = [];
  timeSlots.value = [];
};

watch(
  localData,
  (newVal) => {
    emit("update:scheduleData", newVal);
    emit("update");
  },
  { deep: true }
);

watch(
  () => localData.value.consultationDate,
  (newVal) => {
    if (newVal && localData.value.doctorName) {
      loadTimeSlots();
    }
  }
);
</script>