app-test-nuxt/components/apps/patient/form/AlamatSection.vue

<template>
  <div>
    <!-- Alamat Identitas -->
    <v-card-subtitle
      class="bg-grey-lighten-4 text-subtitle-2 font-weight-medium py-2"
    >
      ALAMAT IDENTITAS
    </v-card-subtitle>

    <v-card-text>
      <v-row>
        <!-- Desa/Kelurahan -->
        <v-col cols="12">
          <v-text-field
            v-model="localAlamatIdentitas.desa"
            label="Desa/Kelurahan"
            placeholder="Cari desa atau kelurahan..."
            variant="outlined"
            density="compact"
            prepend-inner-icon="mdi-magnify"
          />
        </v-col>

        <!-- Alamat Lengkap -->
        <v-col cols="12">
          <v-textarea
            v-model="localAlamatIdentitas.alamatLengkap"
            label="Alamat Lengkap"
            placeholder="Alamat"
            variant="outlined"
            density="compact"
            rows="3"
            :rules="[rules.required]"
            required
          />
        </v-col>

        <!-- RT -->
        <v-col cols="12" md="4">
          <v-text-field
            v-model="localAlamatIdentitas.rt"
            label="RT"
            placeholder="RT"
            variant="outlined"
            density="compact"
            counter="3"
            maxlength="3"
          />
        </v-col>

        <!-- RW -->
        <v-col cols="12" md="4">
          <v-text-field
            v-model="localAlamatIdentitas.rw"
            label="RW"
            placeholder="RW"
            variant="outlined"
            density="compact"
            counter="3"
            maxlength="3"
          />
        </v-col>

        <!-- Kode Pos -->
        <v-col cols="12" md="4">
          <v-text-field
            v-model="localAlamatIdentitas.kodePos"
            label="Kode Pos"
            placeholder="Kode Pos"
            variant="outlined"
            density="compact"
            counter="5"
            maxlength="5"
          />
        </v-col>
      </v-row>
    </v-card-text>

    <!-- Alamat Domisili -->
    <v-card-subtitle
      class="bg-grey-lighten-4 text-subtitle-2 font-weight-medium py-2"
    >
      ALAMAT DOMISILI
    </v-card-subtitle>

    <v-card-text>
      <!-- Checkbox Samakan dengan alamat identitas -->
      <v-row>
        <v-col cols="12">
          <v-checkbox
            v-model="samaDenganIdentitas"
            label="Samakan dengan alamat identitas"
            density="compact"
            @change="handleSamaDenganIdentitas"
          />
        </v-col>
      </v-row>

      <v-row v-if="!samaDenganIdentitas">
        <!-- Desa/Kelurahan -->
        <v-col cols="12">
          <v-text-field
            v-model="localAlamatDomisili.desa"
            label="Desa/Kelurahan"
            placeholder="Cari desa atau kelurahan..."
            variant="outlined"
            density="compact"
            prepend-inner-icon="mdi-magnify"
          />
        </v-col>

        <!-- Alamat Lengkap -->
        <v-col cols="12">
          <v-textarea
            v-model="localAlamatDomisili.alamatLengkap"
            label="Alamat Lengkap"
            placeholder="Alamat"
            variant="outlined"
            density="compact"
            rows="3"
          />
        </v-col>

        <!-- RT -->
        <v-col cols="12" md="4">
          <v-text-field
            v-model="localAlamatDomisili.rt"
            label="RT"
            placeholder="RT"
            variant="outlined"
            density="compact"
            counter="3"
            maxlength="3"
          />
        </v-col>

        <!-- RW -->
        <v-col cols="12" md="4">
          <v-text-field
            v-model="localAlamatDomisili.rw"
            label="RW"
            placeholder="RW"
            variant="outlined"
            density="compact"
            counter="3"
            maxlength="3"
          />
        </v-col>

        <!-- Kode Pos -->
        <v-col cols="12" md="4">
          <v-text-field
            v-model="localAlamatDomisili.kodePos"
            label="Kode Pos"
            placeholder="Kode Pos"
            variant="outlined"
            density="compact"
            counter="5"
            maxlength="5"
          />
        </v-col>
      </v-row>
    </v-card-text>
  </div>
</template>

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

const props = defineProps({
  alamatIdentitas: {
    type: Object,
    required: true
  },
  alamatDomisili: {
    type: Object,
    required: true
  },
  samaDenganIdentitas: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits([
  "update:alamatIdentitas",
  "update:alamatDomisili",
  "update:samaDenganIdentitas"
]);

const localAlamatIdentitas = ref({ ...props.alamatIdentitas });
const localAlamatDomisili = ref({ ...props.alamatDomisili });
const samaDenganIdentitas = ref(props.samaDenganIdentitas);

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

const handleSamaDenganIdentitas = () => {
  if (samaDenganIdentitas.value) {
    localAlamatDomisili.value = { ...localAlamatIdentitas.value };
  } else {
    localAlamatDomisili.value = {
      desa: "",
      alamatLengkap: "",
      rt: "",
      rw: "",
      kodePos: ""
    };
  }
};

// Watch for changes
watch(
  localAlamatIdentitas,
  (newVal) => {
    emit("update:alamatIdentitas", newVal);
    if (samaDenganIdentitas.value) {
      localAlamatDomisili.value = { ...newVal };
    }
  },
  { deep: true }
);

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

watch(samaDenganIdentitas, (newVal) => {
  emit("update:samaDenganIdentitas", newVal);
});
</script>