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

<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 { Switch } from "@/Components/ui/switch";

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>
              <Switch
                :model-value="value"
                @update:model-value="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>