Decision now support auto mailing

resources/js/Components/EmailCreateForm.vue

@@ -1,12 +1,12 @@
 <script setup>
-import { ref, watch } from 'vue';
-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';
-import axios from 'axios';
+import { computed, watch } from "vue";
+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";
+import { useForm } from "@inertiajs/vue3";
 
 /*
   EmailCreateForm / Email editor
@@ -18,70 +18,77 @@ import axios from 'axios';
 const props = defineProps({
   show: { type: Boolean, default: false },
   person: { type: Object, required: true },
+  // kept for parity with other *CreateForm components; not used directly here
+  types: { type: Array, default: () => [] },
   edit: { type: Boolean, default: false },
   id: { type: Number, default: 0 },
+  // When true, force-show the auto mail opt-in even if person.client wasn't eager loaded
+  isClientContext: { type: Boolean, default: false },
 });
 
-const processing = ref(false);
-const errors = ref({});
+// Inertia useForm handles processing and errors for us
 
-const emit = defineEmits(['close']);
+const emit = defineEmits(["close"]);
 
 const close = () => {
-  emit('close');
-  setTimeout(() => { errors.value = {}; }, 300);
+  emit("close");
+  // Clear validation errors and reset minimal fields after closing so the form reopens cleanly
+  setTimeout(() => {
+    form.clearErrors();
+    form.reset("value", "label", "receive_auto_mails");
+  }, 0);
 };
 
-const form = ref({
-  value: '',
-  label: ''
+const form = useForm({
+  value: "",
+  label: "",
+  receive_auto_mails: false,
 });
 
 const resetForm = () => {
-  form.value = { value: '', label: '' };
+  form.reset("value", "label", "receive_auto_mails");
 };
 
 const create = async () => {
-  processing.value = true; errors.value = {};
-  try {
-  const { data } = await axios.post(route('person.email.create', props.person), form.value);
-    if (!Array.isArray(props.person.emails)) props.person.emails = [];
-    props.person.emails.push(data.email);
-    processing.value = false; close(); resetForm();
-  } catch (e) {
-    errors.value = e?.response?.data?.errors || {}; processing.value = false;
-  }
+  form.post(route("person.email.create", props.person), {
+    preserveScroll: true,
+    onSuccess: () => {
+      close();
+      resetForm();
+    },
+  });
 };
 
 const update = async () => {
-  processing.value = true; errors.value = {};
-  try {
-  const { data } = await axios.put(route('person.email.update', { person: props.person, email_id: props.id }), form.value);
-    if (!Array.isArray(props.person.emails)) props.person.emails = [];
-    const idx = props.person.emails.findIndex(e => e.id === data.email.id);
-    if (idx !== -1) props.person.emails[idx] = data.email;
-    processing.value = false; close(); resetForm();
-  } catch (e) {
-    errors.value = e?.response?.data?.errors || {}; processing.value = false;
-  }
+  form.put(route("person.email.update", { person: props.person, email_id: props.id }), {
+    preserveScroll: true,
+    onSuccess: () => {
+      close();
+      resetForm();
+    },
+  });
 };
 
 watch(
-  () => props.id,
-  (id) => {
-    if (props.edit && id) {
-      const current = (props.person.emails || []).find(e => e.id === id);
-      if (current) {
-        form.value = {
-          value: current.value || current.email || current.address || '',
-          label: current.label || ''
-        };
-        return;
-      }
+  () => props.show,
+  (newVal) => {
+    if (!newVal) {
+      return;
     }
-    resetForm();
-  },
-  { immediate: true }
+    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.value = email.value ?? email.email ?? email.address ?? "";
+        form.label = email.label ?? "";
+        form.receive_auto_mails = !!email.receive_auto_mails;
+      } else {
+        form.reset("value", "label", "receive_auto_mails");
+      }
+    } else {
+      form.reset("value", "label", "receive_auto_mails");
+    }
+  }
 );
 
 const submit = () => (props.edit ? update() : create());
@@ -101,18 +108,59 @@ const submit = () => (props.edit ? update() : create());
 
         <div class="col-span-6 sm:col-span-4">
           <InputLabel for="em_value" value="E-pošta" />
-          <TextInput id="em_value" v-model="form.value" type="email" class="mt-1 block w-full" autocomplete="email" />
-          <InputError v-if="errors.value" v-for="err in errors.value" :key="err" :message="err" />
+          <TextInput
+            id="em_value"
+            v-model="form.value"
+            type="email"
+            class="mt-1 block w-full"
+            autocomplete="email"
+          />
+          <InputError
+            v-if="form.errors.value"
+            v-for="err in [].concat(form.errors.value || [])"
+            :key="err"
+            :message="err"
+          />
         </div>
 
         <div class="col-span-6 sm:col-span-4">
           <InputLabel for="em_label" value="Oznaka (neobvezno)" />
-          <TextInput id="em_label" v-model="form.label" type="text" class="mt-1 block w-full" autocomplete="off" />
-          <InputError v-if="errors.label" v-for="err in errors.label" :key="err" :message="err" />
+          <TextInput
+            id="em_label"
+            v-model="form.label"
+            type="text"
+            class="mt-1 block w-full"
+            autocomplete="off"
+          />
+          <InputError
+            v-if="form.errors.label"
+            v-for="err in [].concat(form.errors.label || [])"
+            :key="err"
+            :message="err"
+          />
+        </div>
+
+        <div
+          v-if="props.person?.client || isClientContext"
+          class="mt-3 flex items-center gap-2"
+        >
+          <input
+            id="em_receive_auto_mails"
+            type="checkbox"
+            v-model="form.receive_auto_mails"
+            class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
+          />
+          <label for="em_receive_auto_mails" class="text-sm"
+            >Prejemaj samodejna e-sporočila</label
+          >
         </div>
 
         <div class="flex justify-end mt-4">
-          <PrimaryButton :class="{ 'opacity-25': processing }" :disabled="processing">Shrani</PrimaryButton>
+          <PrimaryButton
+            :class="{ 'opacity-25': form.processing }"
+            :disabled="form.processing"
+            >Shrani</PrimaryButton
+          >
         </div>
       </form>
     </template>

resources/js/Components/EmailUpdateForm.vue

@@ -1,15 +1,27 @@
 <script setup>
 // This component reuses EmailCreateForm's logic via props.edit=true
-import EmailCreateForm from './EmailCreateForm.vue';
+import EmailCreateForm from "./EmailCreateForm.vue";
 
 const props = defineProps({
   show: { type: Boolean, default: false },
   person: { type: Object, required: true },
   types: { type: Array, default: () => [] },
   id: { type: Number, default: 0 },
+  // Pass-through to show the auto-mail checkbox for clients
+  isClientContext: { type: Boolean, default: false },
 });
+
+const emit = defineEmits(["close"]);
 </script>
 
 <template>
-  <EmailCreateForm :show="show" :person="person" :types="types" :edit="true" :id="id" @close="$emit('close')" />
+  <EmailCreateForm
+    :show="show"
+    :person="person"
+    :types="types"
+    :edit="true"
+    :id="id"
+    :is-client-context="isClientContext"
+    @close="emit('close')"
+  />
 </template>

resources/js/Components/PersonInfoGrid.vue

@@ -350,6 +350,7 @@ const getTRRs = (p) => {
         @close="drawerAddEmail = false"
         :person="person"
         :types="types.email_types ?? []"
+        :is-client-context="!!person?.client"
     />
     <EmailUpdateForm
         :show="drawerAddEmail && editEmail"
@@ -357,6 +358,7 @@ const getTRRs = (p) => {
         :person="person"
         :types="types.email_types ?? []"
         :id="editEmailId"
+        :is-client-context="!!person?.client"
     />
 
     <!-- TRR dialogs -->