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

<script setup>
import { ref, watch } from "vue";
import { useForm, Field as FormField } from "vee-validate";
import { toTypedSchema } from "@vee-validate/zod";
import * as z from "zod";
import { router } from "@inertiajs/vue3";
import UpdateDialog from "../Dialogs/UpdateDialog.vue";
import SectionTitle from "../SectionTitle.vue";
import {
  FormControl,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/Components/ui/form";
import { Input } from "@/Components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/Components/ui/select";

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

const processing = ref(false);
const emit = defineEmits(["close"]);

const formSchema = toTypedSchema(
  z.object({
    address: z.string().min(1, "Naslov je obvezen."),
    country: z.string().optional(),
    post_code: z.string().optional(),
    city: z.string().optional(),
    type_id: z.number().nullable(),
    description: z.string().optional(),
  })
);

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

const close = () => {
  emit("close");
  setTimeout(() => {
    form.resetForm();
    processing.value = false;
  }, 300);
};

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

const hydrate = () => {
  const id = props.id;
  if (id) {
    const a = (props.person.addresses || []).find((x) => x.id === id);
    if (a) {
      form.setValues({
        address: a.address || "",
        country: a.country || "",
        post_code: a.post_code || a.postal_code || "",
        city: a.city || "",
        type_id: a.type_id ?? (props.types?.[0]?.id ?? null),
        description: a.description || "",
      });
      return;
    }
  }
  resetForm();
};

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

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

  router.put(
    route("person.address.update", { person: props.person, address_id: props.id }),
    values,
    {
      preserveScroll: true,
      onSuccess: () => {
        processing.value = false;
        close();
        resetForm();
      },
      onError: (errors) => {
        Object.keys(errors).forEach((field) => {
          const errorMessages = Array.isArray(errors[field])
            ? errors[field]
            : [errors[field]];
          form.setFieldError(field, errorMessages[0]);
        });
        processing.value = false;
      },
      onFinish: () => {
        processing.value = false;
      },
    }
  );
};

const onSubmit = form.handleSubmit(() => {
  update();
});

const onConfirm = () => {
  onSubmit();
};
</script>

<template>
  <UpdateDialog
    :show="show"
    title="Spremeni naslov"
    confirm-text="Shrani"
    :processing="processing"
    @close="close"
    @confirm="onConfirm"
  >
    <form @submit.prevent="onSubmit">
      <SectionTitle class="border-b mb-4">
        <template #title>Naslov</template>
      </SectionTitle>

      <div class="space-y-4">
        <FormField v-slot="{ componentField }" name="address">
          <FormItem>
            <FormLabel>Naslov</FormLabel>
            <FormControl>
              <Input type="text" placeholder="Naslov" autocomplete="street-address" v-bind="componentField" />
            </FormControl>
            <FormMessage />
          </FormItem>
        </FormField>

        <FormField v-slot="{ componentField }" name="country">
          <FormItem>
            <FormLabel>Država</FormLabel>
            <FormControl>
              <Input type="text" placeholder="Država" autocomplete="country" v-bind="componentField" />
            </FormControl>
            <FormMessage />
          </FormItem>
        </FormField>

        <FormField v-slot="{ componentField }" name="post_code">
          <FormItem>
            <FormLabel>Poštna številka</FormLabel>
            <FormControl>
              <Input type="text" placeholder="Poštna številka" autocomplete="postal-code" v-bind="componentField" />
            </FormControl>
            <FormMessage />
          </FormItem>
        </FormField>

        <FormField v-slot="{ componentField }" name="city">
          <FormItem>
            <FormLabel>Mesto</FormLabel>
            <FormControl>
              <Input type="text" placeholder="Mesto" autocomplete="address-level2" v-bind="componentField" />
            </FormControl>
            <FormMessage />
          </FormItem>
        </FormField>

        <FormField v-slot="{ value, handleChange }" name="type_id">
          <FormItem>
            <FormLabel>Tip</FormLabel>
            <Select :model-value="value" @update:model-value="handleChange">
              <FormControl>
                <SelectTrigger>
                  <SelectValue placeholder="Izberi tip" />
                </SelectTrigger>
              </FormControl>
              <SelectContent>
                <SelectItem v-for="type in types" :key="type.id" :value="type.id">
                  {{ type.name }}
                </SelectItem>
              </SelectContent>
            </Select>
            <FormMessage />
          </FormItem>
        </FormField>
      </div>
    </form>
  </UpdateDialog>
</template>