app-test-nuxt/pages/apps/patient/create.vue

<template>
  <v-container fluid>
    <v-row>
      <v-col cols="12">
        <!-- Breadcrumb -->
        <v-breadcrumbs :items="breadcrumbs" class="pa-0 mb-4">
          <template v-slot:prepend>
            <v-icon icon="mdi-home" size="small"></v-icon>
          </template>
        </v-breadcrumbs>

        <!-- Form Container -->
        <v-card elevation="2">
          <v-form ref="form" v-model="valid" @submit.prevent="submitForm">
            <!-- Header Section -->
            <v-card-title class="bg-grey-lighten-3 py-3">
              <span class="text-subtitle-1 font-weight-medium"
                >DATA PASIEN</span
              >
            </v-card-title>

            <!-- Data Diri Section -->
            <DataDiriSection
              v-model:formData="formData.dataDiri"
              v-model:isBayiBaru="formData.isBayiBaru"
            />

            <!-- Alamat Section -->
            <AlamatSection
              v-model:alamatIdentitas="formData.alamatIdentitas"
              v-model:alamatDomisili="formData.alamatDomisili"
              v-model:samaDenganIdentitas="formData.samaDenganIdentitas"
            />

            <!-- Kesehatan Section -->
            <KesehatanSection v-model:formData="formData.kesehatan" />

            <!-- Pembayaran Section -->
            <PembayaranSection v-model:formData="formData.pembayaran" />

            <!-- Sosial Section -->
            <SosialSection v-model:formData="formData.sosial" />

            <!-- Penanggung Jawab Section -->
            <PenanggungJawabSection
              v-model:formData="formData.penanggungJawab"
              v-model:samaDenganPasien="formData.samaDenganPasien"
              :alamatPasien="formData.alamatDomisili"
            />

            <!-- Action Buttons -->
            <v-card-actions class="pa-4 bg-grey-lighten-4">
              <v-spacer></v-spacer>
              <v-btn variant="outlined" color="grey" @click="resetForm">
                Reset
              </v-btn>
              <v-btn
                type="submit"
                variant="flat"
                color="primary"
                :loading="loading"
                :disabled="!valid"
              >
                Simpan Pasien
              </v-btn>
            </v-card-actions>
          </v-form>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import DataDiriSection from "~/components/apps/patient/form/DataDiriSection.vue";
import AlamatSection from "~/components/apps/patient/form/AlamatSection.vue";
import KesehatanSection from "~/components/apps/patient/form/KesehatanSection.vue";
import PembayaranSection from "~/components/apps/patient/form/PembayaranSection.vue";
import SosialSection from "~/components/apps/patient/form/SosialSection.vue";
import PenanggungJawabSection from "~/components/apps/patient/form/PenanggungJawabSection.vue";

const router = useRouter();
const form = ref();
const valid = ref(false);
const loading = ref(false);

const breadcrumbs = [
  {
    title: "Pasien",
    disabled: false,
    href: "/patient"
  },
  {
    title: "Buat Pasien",
    disabled: true,
    href: "/patient/create"
  }
];

const formData = reactive({
  isBayiBaru: false,
  samaDenganIdentitas: false,
  samaDenganPasien: false,
  dataDiri: {
    photo: null,
    namaLengkap: "",
    nomorTeleponSelular: "",
    nomorTeleponRumah: "",
    email: "",
    jenisKelamin: "",
    tempatLahir: "",
    tanggalLahir: "",
    jenisIdentitas: "",
    nomorIdentitas: "",
    namaIbuKandung: "",
    nomorRekamMedis: ""
  },
  alamatIdentitas: {
    desa: "",
    alamatLengkap: "",
    rt: "",
    rw: "",
    kodePos: ""
  },
  alamatDomisili: {
    desa: "",
    alamatLengkap: "",
    rt: "",
    rw: "",
    kodePos: ""
  },
  kesehatan: {
    golonganDarah: "",
    statusPerokok: "",
    jenisPenyakit: ""
  },
  pembayaran: {
    jenisPembayaran: ""
  },
  sosial: {
    agama: "",
    statusPernikahan: "",
    pendidikanTerakhir: "",
    pekerjaan: "",
    bahasaDikuasai: "",
    sukuEtnis: ""
  },
  penanggungJawab: {
    namaLengkap: "",
    jenisKelamin: "",
    hubunganDenganPasien: "",
    nomorTelepon: "",
    pekerjaan: "",
    alamat: ""
  }
});

const submitForm = async () => {
  const validation = await form.value.validate();
  if (!validation.valid) return;

  loading.value = true;
  try {
    // Simulasi API call
    await new Promise((resolve) => setTimeout(resolve, 2000));

    console.log("Submitting form data:", formData);

    // Redirect ke halaman list pasien
    router.push("/patient");
  } catch (error) {
    console.error("Error saving patient:", error);
  } finally {
    loading.value = false;
  }
};

const resetForm = () => {
  form.value.reset();
};
</script>