add: observer input & tooltips

src/components/FormLoadModal.vue

@@ -17,6 +17,7 @@
     import { useI18n } from 'vue-i18n';
     import { computed } from 'vue';
     import {getDateTime } from '../helpers/date_formats';
+import { validateEmail } from '../helpers/validations';
 
 
     const loadStore = useLoadsStore();
@@ -43,6 +44,8 @@
     const locationDownloadSelected = ref(null)
     const originRef = ref('')
     const destinationRef = ref('')
+    const emails = ref([]);
+    const emailInput = ref('');
 
     const errors = ref({
         segment: null,
@@ -362,6 +365,31 @@
         ? t('loads.create')
         : t('loads.edit')
     )
+
+    const addObserver = () => {
+      const trimmedEmail = emailInput.value.trim()
+  
+        if (trimmedEmail && validateEmail(trimmedEmail)) {
+            if(emails.value.includes(trimmedEmail)) {
+                Swal.fire({
+                    title: t('errors.emailExist'),
+                    icon: 'error'
+                })
+                return
+            }
+            emails.value.push(trimmedEmail)
+            emailInput.value = ''
+        } else if (trimmedEmail) {
+            Swal.fire({
+                title: t('errors.email'),
+                icon: 'error'
+            })
+        }
+    }
+
+    const removeObserver = (email) => {
+      emails.value = emails.value.filter((e) => e !== email)
+    }
 </script>
 
 <template>
@@ -425,14 +453,14 @@
                                 :error="(submited && !formLoad.weight) ? t('errors.weight') : null"
                                 v-model:field="formLoad.weight"
                             />
-                        </div>
-                        <div class="form-section">
                             <div class="mb-4 mt-3">
                                 <label class="custom-label">{{ t('loads.product') }}</label>
                                 <Products
                                     v-model="formLoad.terms" 
                                 />
                             </div>
+                        </div>
+                        <div class="form-section">
                             <Custominput
                                 :label="t('loads.labelPrice')"
                                 type="Number"
@@ -455,6 +483,41 @@
                                 name="owner"
                                 v-model:field="formLoad.owner"
                             />
+                            <div class="box-observers mt-4">
+                                <div class="box-input">
+                                    <div class="input-observer">
+                                        <Custominput
+                                            label="Agregar cliente observador"
+                                            name="email"
+                                            type="email"
+                                            v-model:field="emailInput"
+                                            :filled="false"
+                                            :tooltip="t('messages.observerClient')"
+                                        />
+                                    </div>
+                                    <button 
+                                        type="button"
+                                        @click="addObserver" 
+                                        class="btn btn-dark"
+                                    >
+                                        Agregar
+                                    </button>
+                                </div>
+                                <h5 v-if="emails.length > 0">Lista de observadores:</h5>
+                                <div class="box-emails" v-if="emails.length > 0">
+                                    <div 
+                                        v-for="(email, index) in emails" 
+                                        :key="email"
+                                        class="observer-email"
+                                    >
+                                        <span>{{ email }}</span>
+                                            <i 
+                                                @click="removeObserver(email)"
+                                                class="fa-solid fa-xmark icon-delete">
+                                            </i>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                     </div>
                     <div class="form-box">