Dev branch

resources/js/Components/PersonInfo/EmailCreateForm.vue

@@ -0,0 +1,234 @@
+<script setup>
+import { computed, 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 CreateDialog from "../Dialogs/CreateDialog.vue";
+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 { Checkbox } from "@/Components/ui/checkbox";
+
+const props = defineProps({
+  show: { type: Boolean, default: false },
+  person: { type: Object, required: true },
+  types: { type: Array, default: () => [] },
+  edit: { type: Boolean, default: false },
+  id: { type: Number, default: 0 },
+  isClientContext: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(["close"]);
+
+// Zod schema for form validation
+const formSchema = toTypedSchema(
+  z.object({
+    value: z.string().email("E-pošta mora biti veljavna.").min(1, "E-pošta je obvezna."),
+    label: z.string().optional(),
+    receive_auto_mails: z.boolean().optional(),
+  })
+);
+
+// VeeValidate form
+const form = useForm({
+  validationSchema: formSchema,
+  initialValues: {
+    value: "",
+    label: "",
+    receive_auto_mails: false,
+  },
+});
+
+const processing = ref(false);
+
+const close = () => {
+  emit("close");
+  setTimeout(() => {
+    form.resetForm();
+    processing.value = false;
+  }, 0);
+};
+
+const resetForm = () => {
+  form.resetForm({
+    values: {
+      value: "",
+      label: "",
+      receive_auto_mails: false,
+    },
+  });
+};
+
+const create = async () => {
+  processing.value = true;
+  const { values } = form;
+  
+  router.post(
+    route("person.email.create", props.person),
+    values,
+    {
+      preserveScroll: true,
+      onSuccess: () => {
+        close();
+        resetForm();
+      },
+      onError: (errors) => {
+        // Map Inertia errors to VeeValidate field 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 update = async () => {
+  processing.value = true;
+  const { values } = form;
+  
+  router.put(
+    route("person.email.update", { person: props.person, email_id: props.id }),
+    values,
+    {
+      preserveScroll: true,
+      onSuccess: () => {
+        close();
+        resetForm();
+      },
+      onError: (errors) => {
+        // Map Inertia errors to VeeValidate field 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;
+      },
+    }
+  );
+};
+
+watch(
+  () => props.show,
+  (newVal) => {
+    if (!newVal) {
+      return;
+    }
+    if (props.edit && props.id) {
+      const list = Array.isArray(props.person?.emails) ? props.person.emails : [];
+      const email = list.find((e) => e.id === props.id);
+      if (email) {
+        form.setValues({
+          value: email.value ?? email.email ?? email.address ?? "",
+          label: email.label ?? "",
+          receive_auto_mails: !!email.receive_auto_mails,
+        });
+      } else {
+        resetForm();
+      }
+    } else {
+      resetForm();
+    }
+  }
+);
+
+const onSubmit = form.handleSubmit((values) => {
+  if (props.edit) {
+    update();
+  } else {
+    create();
+  }
+});
+
+const onConfirm = () => {
+  onSubmit();
+};
+</script>
+
+<template>
+  <component
+    :is="edit ? UpdateDialog : CreateDialog"
+    :show="show"
+    :title="edit ? 'Spremeni email' : 'Dodaj email'"
+    confirm-text="Shrani"
+    :processing="processing"
+    @close="close"
+    @confirm="onConfirm"
+  >
+    <form @submit.prevent="onSubmit">
+      <SectionTitle class="border-b mb-4">
+        <template #title>Email</template>
+      </SectionTitle>
+
+      <div class="space-y-4">
+        <FormField v-slot="{ componentField }" name="value">
+          <FormItem>
+            <FormLabel>E-pošta</FormLabel>
+            <FormControl>
+              <Input
+                type="email"
+                placeholder="example@example.com"
+                autocomplete="email"
+                v-bind="componentField"
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{ componentField }" name="label">
+          <FormItem>
+            <FormLabel>Oznaka (neobvezno)</FormLabel>
+            <FormControl>
+              <Input
+                type="text"
+                placeholder="Oznaka"
+                autocomplete="off"
+                v-bind="componentField"
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField
+          v-if="props.person?.client || isClientContext"
+          v-slot="{ value, handleChange }"
+          name="receive_auto_mails"
+        >
+          <FormItem class="flex flex-row items-start space-x-3 space-y-0">
+            <FormControl>
+              <Checkbox
+                :checked="value"
+                @update:checked="handleChange"
+              />
+            </FormControl>
+            <div class="space-y-1 leading-none">
+              <FormLabel class="cursor-pointer">
+                Prejemaj samodejna e-sporočila
+              </FormLabel>
+            </div>
+          </FormItem>
+        </FormField>
+      </div>
+    </form>
+  </component>
+</template>