feat: customer employee form (basic info & checkup)

src/components/FormDialog.vue

@@ -15,6 +15,8 @@ defineProps<{
   noFooter?: boolean;
   noAppBox?: boolean;
   maxWidth?: number;
+  employee?: boolean;
+  noAddress?: boolean;
   submit?: (...args: unknown[]) => void;
   close?: (...args: unknown[]) => void;
 }>();
@@ -26,6 +28,9 @@ const provinceId = defineModel<string | null | undefined>('provinceId');
 const districtId = defineModel<string | null | undefined>('districtId');
 const subDistrictId = defineModel<string | null | undefined>('subDistrictId');
 const zipCode = defineModel<string>('zipCode', { default: '' });
+const sameWithEmployer = defineModel<boolean>('sameWithEmployer');
+const employeeTab = defineModel<string>('employeeTab');
+const tabsList = defineModel<{ name: string; label: string }[]>('tabsList');
 </script>
 <template>
   <q-dialog v-model="modal" @hide="close">
@@ -79,8 +84,35 @@ const zipCode = defineModel<string>('zipCode', { default: '' });
 
         <!-- body -->
         <div
-          class="row form-body q-pa-lg"
-          :class="{ dark: $q.dark.isActive }"
+          v-if="tabsList && tabsList.length > 0"
+          class="row surface-2 q-px-md q-pt-md full-width"
+          style="border-bottom: 1px solid var(--brand-1)"
+        >
+          <q-tabs
+            dense
+            class="app-text-muted cancel-overflow"
+            v-model="employeeTab"
+            content-class="content-tab"
+            active-class="active-tab"
+            indicator-color="transparent"
+          >
+            <q-tab
+              v-for="tab in tabsList"
+              v-bind:key="tab.name"
+              class="content-tab text-capitalize"
+              :name="tab.name"
+              :label="$t(tab.label)"
+              style="z-index: 999"
+            />
+          </q-tabs>
+        </div>
+        <div
+          class="row q-pa-lg"
+          :class="{
+            dark: $q.dark.isActive,
+            'surface-2': !employee,
+            'surface-tab': employee,
+          }"
           :style="$q.screen.gt.sm ? '' : 'overflow-y: auto; max-height: 75vh'"
         >
           <!-- prepend -->
@@ -96,6 +128,8 @@ const zipCode = defineModel<string>('zipCode', { default: '' });
             <slot name="body"></slot>
           </div>
 
+          <slot></slot>
+
           <!-- center -->
           <AppBox
             v-if="!noAppBox"
@@ -114,6 +148,7 @@ const zipCode = defineModel<string>('zipCode', { default: '' });
                 <FormAddress
                   dense
                   outlined
+                  :employee="employee"
                   :title="titleFormAddress"
                   :separator="addressSeparator"
                   v-model:address="address"
@@ -122,9 +157,10 @@ const zipCode = defineModel<string>('zipCode', { default: '' });
                   v-model:districtId="districtId"
                   v-model:subDistrictId="subDistrictId"
                   v-model:zipCode="zipCode"
+                  v-model:same-with-employer="sameWithEmployer"
                   :addressTitle="addressTitle || ''"
                   :addressTitleEN="addressTitleEN || ''"
-                  v-if="!$slots.address"
+                  v-if="!$slots.address && !noAddress"
                 />
               </slot>
               <slot name="qr-code"></slot>
@@ -145,27 +181,32 @@ const zipCode = defineModel<string>('zipCode', { default: '' });
         <!-- footer -->
         <div
           v-if="!noFooter"
-          class="form-footer q-py-sm q-pr-lg text-right q-gutter-x-lg"
+          class="form-footer q-py-sm row items-center full-width justify-between q-px-md"
         >
-          <q-btn
-            dense
-            outline
-            unelevated
-            id="cancelBtn"
-            class="q-px-md app-text-negative"
-            :label="$t('cancel')"
-            @click="close"
-            v-close-popup
-          />
-          <q-btn
-            dense
-            unelevated
-            id="submitBtn"
-            type="submit"
-            color="primary"
-            class="q-px-md"
-            :label="$t('save')"
-          />
+          <div>
+            <slot name="footer"></slot>
+          </div>
+          <div class="row flex justify-end q-gutter-x-md">
+            <q-btn
+              dense
+              outline
+              unelevated
+              id="cancelBtn"
+              class="q-px-md app-text-negative"
+              :label="$t('cancel')"
+              @click="close"
+              v-close-popup
+            />
+            <q-btn
+              dense
+              unelevated
+              id="submitBtn"
+              type="submit"
+              color="primary"
+              class="q-px-md"
+              :label="$t('save')"
+            />
+          </div>
         </div>
       </q-form>
     </AppBox>
@@ -215,4 +256,26 @@ const zipCode = defineModel<string>('zipCode', { default: '' });
     --_var-filter: grayscale(0%);
   }
 }
+
+.active-tab {
+  color: var(--brand-1);
+  background-color: var(--surface-tab);
+  border-top: 1px solid var(--brand-1);
+  border-left: 1px solid var(--brand-1);
+  border-right: 1px solid var(--brand-1);
+  border-top-left-radius: var(--radius-2);
+  border-top-right-radius: var(--radius-2);
+  margin-bottom: -1.5px;
+  border-bottom: 3px solid var(--surface-tab);
+}
+
+.content-tab {
+  border-top-left-radius: var(--radius-2);
+  border-top-right-radius: var(--radius-2);
+  position: relative;
+}
+
+:deep(.q-tabs__content) {
+  overflow: visible;
+}
 </style>