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

<script setup>
import { ref, watch } from "vue";
import { useForm } 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,
  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 hydrate = () => {
  const id = props.id;
  if (id) {
    const a = (props.person.addresses || []).find((x) => x.id === id);
    if (a) {
      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 || "";
    }
  } else {
    resetForm();
  }
};

watch(
  () => props.id,
  () => hydrate(),
  { immediate: true }
);
watch(
  () => props.show,
  (v) => {
    if (v) hydrate();
  }
);

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;
      },
    }
  );
};
</script>

<template>
  <DialogModal :show="show" @close="close">
    <template #title>Spremeni naslov</template>
    <template #content>
      <form @submit.prevent="update">
        <SectionTitle class="border-b mb-4"
          ><template #title>Naslov</template></SectionTitle
        >

        <div class="col-span-6 sm:col-span-4">
          <InputLabel for="up_address" value="Naslov" />
          <TextInput
            id="up_address"
            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="up_country" value="Država" />
          <TextInput
            id="up_country"
            v-model="form.country"
            type="text"
            class="mt-1 block w-full"
            autocomplete="country"
          />
          <InputError
            v-if="errors.country !== undefined"
            v-for="err in errors.country"
            :message="err"
          />
        </div>

        <div class="col-span-6 sm:col-span-4">
          <InputLabel for="up_post_code" value="Poštna številka" />
          <TextInput
            id="up_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="up_city" value="Mesto" />
          <TextInput
            id="up_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="up_type" value="Tip" />
          <select
            id="up_type"
            v-model="form.type_id"
            class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
          >
            <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>

<style scoped></style>