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>