refactor: add contact information fields to agency forms and update data models

src/components/07_agencies-management/FormBasicInfoAgencies.vue

@@ -14,6 +14,9 @@ defineProps<{
 const group = defineModel('group', { default: '' });
 const name = defineModel('name', { default: '' });
 const nameEn = defineModel('nameEn', { default: '' });
+const contactName = defineModel('contactName', { default: '' });
+const email = defineModel('email', { default: '' });
+const contactTel = defineModel('contactTel', { default: '' });
 
 type Options = { label: string; value: string };
 </script>
@@ -35,7 +38,7 @@ type Options = { label: string; value: string };
 
     <div class="col-12 row q-col-gutter-sm">
       <SelectInput
-        :class="{ col: $q.screen.lt.md }"
+        class="col"
         :disable="!readonly && onDrawer"
         :readonly="readonly"
         for="input-agencies-code"
@@ -62,7 +65,7 @@ type Options = { label: string; value: string };
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-md col-12"
+        class="col-md-4 col-12"
         :label="$t('agencies.name')"
         v-model="name"
         :rules="[(val: string) => !!val || $t('form.error.required')]"
@@ -73,10 +76,78 @@ type Options = { label: string; value: string };
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-md col-12"
+        class="col-md-4 col-12"
         :label="'Agencies Name'"
         v-model="nameEn"
       />
+
+      <q-input
+        for="input-agencies-contact-name"
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-md-4 col-12"
+        :label="$t('agencies.contactName')"
+        :model-value="readonly ? contactName || '-' : contactName"
+        @update:model-value="
+          (v) => (typeof v === 'string' ? (contactName = v) : '')
+        "
+      />
+      <q-input
+        for="input-agencies-email"
+        dense
+        outlined
+        hide-bottom-space
+        :readonly="readonly"
+        :label="$t('form.email')"
+        :rules="
+          readonly
+            ? undefined
+            : [
+                (v: string) =>
+                  !v ||
+                  /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g.test(v) ||
+                  $t('form.error.invalid'),
+              ]
+        "
+        class="col-md-4 col-12"
+        :model-value="readonly ? email || '-' : email"
+        @update:model-value="(v) => (typeof v === 'string' ? (email = v) : '')"
+        @clear="email = ''"
+      >
+        <template #prepend>
+          <q-icon
+            size="xs"
+            name="mdi-email-outline"
+            class="cursor-pointer"
+            color="primary"
+          />
+        </template>
+      </q-input>
+      <q-input
+        for="input-agencies-contact-tel"
+        id="input-agencies-contact-tel"
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-md-4 col-12"
+        :label="$t('form.telephone')"
+        :model-value="readonly ? contactTel || '-' : contactTel"
+        @update:model-value="
+          (v) => (typeof v === 'string' ? (contactTel = v) : '')
+        "
+      >
+        <template #prepend>
+          <q-icon
+            size="xs"
+            name="mdi-phone-outline"
+            class="cursor-pointer"
+            color="primary"
+          />
+        </template>
+      </q-input>
     </div>
   </div>
 </template>