Dev branch

resources/js/Components/PersonInfo/AddressUpdateForm.vue

@@ -0,0 +1,217 @@
+<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>