Teren-app/resources/js/Components/AddressCreateForm.vue

<script setup>
import { ref, watch } from "vue";
import { useForm, router, usePage } from "@inertiajs/vue3";
import DialogModal from "./DialogModal.vue";
import InputLabel from "./InputLabel.vue";
import SectionTitle from "./SectionTitle.vue";
import TextInput from "./TextInput.vue";
import InputError from "./InputError.vue";
import PrimaryButton from "./PrimaryButton.vue";

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  person: Object,
  types: Array,
  edit: {
    type: Boolean,
    default: false,
  },
  id: {
    type: Number,
    default: 0,
  },
});

const processing = ref(false);
const errors = ref({});

const emit = defineEmits(["close"]);

const close = () => {
  emit("close");
  setTimeout(() => {
    errors.value = {};
    try {
      form.clearErrors && form.clearErrors();
    } catch {}
  }, 300);
};

const form = useForm({
  address: "",
  country: "",
  post_code: "",
  city: "",
  type_id: props.types?.[0]?.id ?? null,
  description: "",
});

const resetForm = () => {
  form.address = "";
  form.country = "";
  form.post_code = "";
  form.city = "";
  form.type_id = props.types?.[0]?.id ?? null;
  form.description = "";
};

const create = async () => {
  processing.value = true;
  errors.value = {};

  form.post(route("person.address.create", props.person), {
    preserveScroll: true,
    onSuccess: () => {
      // Optimistically append from last created record in DB by refetch or expose via flash if needed.
      // For now, trigger a lightweight reload of person's addresses via a GET if you have an endpoint, else trust parent reactivity.
      processing.value = false;
      close();
      form.reset();
    },
    onError: (e) => {
      errors.value = e || {};
      processing.value = false;
    },
  });
};

const update = async () => {
  processing.value = true;
  errors.value = {};

  form.put(
    route("person.address.update", { person: props.person, address_id: props.id }),
    {
      preserveScroll: true,
      onSuccess: () => {
        processing.value = false;
        close();
        form.reset();
      },
      onError: (e) => {
        errors.value = e || {};
        processing.value = false;
      },
    }
  );
};

watch(
  () => props.id,
  (id) => {
    if (props.edit && id !== 0) {
      console.log(props.edit);
      props.person.addresses.filter((a) => {
        if (a.id === props.id) {
          form.address = a.address;
          form.country = a.country;
          form.post_code = a.post_code || a.postal_code || "";
          form.city = a.city || "";
          form.type_id = a.type_id;
          form.description = a.description;
        }
      });
      return;
    }
    resetForm();
  }
);

const callSubmit = () => {
  if (props.edit) {
    update();
  } else {
    create();
  }
};
</script>

<template>
  <DialogModal :show="show" @close="close">
    <template #title>
      <span v-if="edit">Spremeni naslov</span>
      <span v-else>Dodaj novi naslov</span>
    </template>
    <template #content>
      <form @submit.prevent="callSubmit">
        <SectionTitle class="border-b mb-4">
          <template #title> Naslov </template>
        </SectionTitle>

        <div class="col-span-6 sm:col-span-4">
          <InputLabel for="cr_address" value="Naslov" />
          <TextInput
            id="cr_address"
            ref="cr_addressInput"
            v-model="form.address"
            type="text"
            class="mt-1 block w-full"
            autocomplete="address"
          />

          <InputError
            v-if="errors.address !== undefined"
            v-for="err in errors.address"
            :message="err"
          />
        </div>
        <div class="col-span-6 sm:col-span-4">
          <InputLabel for="cr_country" value="Država" />
          <TextInput
            id="cr_country"
            ref="cr_countryInput"
            v-model="form.country"
            type="text"
            class="mt-1 block w-full"
            autocomplete="country"
          />

          <InputError
            v-if="errors.address !== undefined"
            v-for="err in errors.address"
            :message="err"
          />
        </div>
        <div class="col-span-6 sm:col-span-4">
          <InputLabel for="cr_post_code" value="Poštna številka" />
          <TextInput
            id="cr_post_code"
            v-model="form.post_code"
            type="text"
            class="mt-1 block w-full"
            autocomplete="postal-code"
          />
          <InputError
            v-if="errors.post_code !== undefined"
            v-for="err in errors.post_code"
            :message="err"
          />
        </div>
        <div class="col-span-6 sm:col-span-4">
          <InputLabel for="cr_city" value="Mesto" />
          <TextInput
            id="cr_city"
            v-model="form.city"
            type="text"
            class="mt-1 block w-full"
            autocomplete="address-level2"
          />
          <InputError
            v-if="errors.city !== undefined"
            v-for="err in errors.city"
            :message="err"
          />
        </div>
        <div class="col-span-6 sm:col-span-4">
          <InputLabel for="cr_type" value="Tip" />
          <select
            class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
            id="cr_type"
            v-model="form.type_id"
          >
            <option v-for="type in types" :key="type.id" :value="type.id">
              {{ type.name }}
            </option>
          </select>
        </div>
        <div class="flex justify-end mt-4">
          <PrimaryButton :class="{ 'opacity-25': processing }" :disabled="processing">
            Shrani
          </PrimaryButton>
        </div>
      </form>
    </template>
  </DialogModal>
</template>