refactor: responsive

src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue

@@ -179,7 +179,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
       />
     </div>
 
-    <div class="col-12 row">
+    <div class="col-12 row q-col-gutter-sm">
       <q-select
         outlined
         clearable
@@ -190,7 +190,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
         hide-selected
         hide-bottom-space
         dense
-        class="col-12 col-md-9"
+        class="col-12 col-md-7"
         option-value="id"
         input-debounce="0"
         option-label="name"
@@ -239,7 +239,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
         option-value="value"
         lazy-rules="ondemand"
         hide-dropdown-icon
-        class="col-1"
+        class="col-12 col-md-2"
         dense
         :readonly="readonly"
         :options="prefixNameOptions"
@@ -269,7 +269,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-12 col-md-4"
+        class="col-12 col-md-5"
         :label="$t('customer.form.firstName')"
         for="input-first-name"
         v-model="firstName"
@@ -280,7 +280,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-12 col-md-4"
+        class="col-12 col-md-5"
         :label="$t('customer.form.lastName')"
         for="input-last-name"
         v-model="lastName"
@@ -295,7 +295,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
         disable
         :readonly="readonly"
         hide-bottom-space
-        class="col-12 col-md-1"
+        class="col-12 col-md-2"
         :label="$t('customer.form.prefixName')"
         for="input-prefix-name"
         :model-value="
@@ -309,7 +309,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-12 col-md-4"
+        class="col-12 col-md-5"
         :label="$t('customer.form.firstNameEN')"
         for="input-first-name-en"
         v-model="firstNameEN"
@@ -320,7 +320,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-12 col-md-4"
+        class="col-12 col-md-5"
         :label="$t('customer.form.lastNameEN')"
         for="input-last-name-en"
         v-model="lastNameEN"
@@ -340,7 +340,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
         option-label="label"
         option-value="value"
         lazy-rules="ondemand"
-        class="col-2"
+        class="col-12 col-md-2"
         dense
         :readonly="readonly"
         :options="genderOptions"
@@ -373,7 +373,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
         :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
         :enableTimePicker="false"
         :disabled="readonly"
-        class="col-2"
+        class="col-12 col-md-3"
       >
         <template #year="{ value }">
           {{ $i18n.locale === 'th-th' ? value + 543 : value }}
@@ -431,7 +431,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
         outlined
         :readonly="readonly"
         :label="$t('formDialogInputAge')"
-        class="col-2"
+        class="col-12 col-md-2"
         :model-value="
           birthDate?.toString() === 'Invalid Date' ||
           birthDate?.toString() === undefined
@@ -440,126 +440,5 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
         "
       />
     </div>
-
-    <!-- <q-select
-        outlined
-        clearable
-        use-input
-        fill-input
-        emit-value
-        map-options
-      hide-selected
-      hide-bottom-space
-      dense
-      class="col-12 col-md-4"
-      option-value="id"
-      input-debounce="0"
-      option-label="name"
-      lazy-rules="ondemand"
-      v-model="registeredBranchId"
-      :readonly="readonly"
-      :options="filteredBranchOptions"
-      :hide-dropdown-icon="readonly"
-      :label="$t('registeredBranch')"
-      :for="`${prefixId}-input-source-nationality`"
-      :rules="[
-        (val) => {
-          const roles = getRole() || [];
-          return (
-            ['admin', 'system', 'head_of_admin'].some((v) =>
-              roles.includes(v),
-            ) ||
-            !!val ||
-            $t('form.error.required')
-          );
-        },
-      ]"
-      @filter="branchFilter"
-    >
-      <template v-slot:no-option>
-        <q-item>
-          <q-item-section class="text-grey">
-            {{ $t('noResults') }}
-          </q-item-section>
-        </q-item>
-      </template>
-    </q-select>
-    <q-input
-      lazy-rules="ondemand"
-      dense
-      outlined
-      :disable="!readonly && !create"
-      :readonly="readonly"
-      hide-bottom-space
-      class="col-12 col-md-4"
-      :label="$t('customer.form.codeAbbrev')"
-      for="input-abbreviation"
-      :model-value="!create ? formatCode(code, 'code') : code"
-      :rules="[
-        (val: string) =>
-          (val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
-          $t('formDialogInputHqAbbreviation'),
-      ]"
-      @update:model-value="(v: string) => (code = v)"
-    />
-    <q-input
-      lazy-rules="ondemand"
-      dense
-      outlined
-      readonly
-      :disable="!readonly"
-      hide-bottom-space
-      class="col-12 col-md-4"
-      :label="$t('customer.form.codeNumber')"
-      for="input-code"
-      :model-value="!create ? formatCode(code, 'number') : ''"
-      @update:model-value="(v: string) => (code = v)"
-    />
-    <q-input
-      lazy-rules="ondemand"
-      dense
-      outlined
-      hide-bottom-space
-      :label="$t('customer.form.customerName')"
-      v-model="customerName"
-      class="col-12 col-md-4"
-      :readonly="readonly"
-      :for="`${prefixId}-input-company-name`"
-    />
-    <q-input
-      lazy-rules="ondemand"
-      dense
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      :label="$t('customer.form.customerNameEN')"
-      v-model="customerNameEN"
-      :for="`${prefixId}-input-company-name-en`"
-      class="col-12 col-md-4"
-    />
-    <q-input
-      lazy-rules="ondemand"
-      dense
-      outlined
-      :readonly="readonly"
-      hide-bottom-space
-      v-model="personName"
-      :label="$t('customer.form.personName')"
-      :for="`${prefixId}-input-person-name`"
-      :rules="[(v: string) => !!v || $t('form.error.required')]"
-      class="col-12 col-md-4"
-    />
-    <q-input
-      lazy-rules="ondemand"
-      dense
-      outlined
-      v-if="customerType === 'PERS'"
-      :readonly="readonly"
-      hide-bottom-space
-      :label="$t('customer.form.taxIdentificationNumber')"
-      v-model="taxNo"
-      :for="`${prefixId}-input-tax-no`"
-      class="col-12 col-md-4"
-    /> -->
   </div>
 </template>