From 4b6587c806b9c38257f2c252b9f3da8fd838fd52 Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Fri, 24 Jan 2025 14:16:04 +0700
Subject: [PATCH] refactor: img gender

---
 .../03_customer-management/TableEmployee.vue  | 361 ------------------
 .../03_customer-management/TableEmpoloyee.vue |  32 +-
 2 files changed, 23 insertions(+), 370 deletions(-)
 delete mode 100644 src/components/03_customer-management/TableEmployee.vue

diff --git a/src/components/03_customer-management/TableEmployee.vue b/src/components/03_customer-management/TableEmployee.vue
deleted file mode 100644
index 70fdf78f..00000000
--- a/src/components/03_customer-management/TableEmployee.vue
+++ /dev/null
@@ -1,361 +0,0 @@
-<script setup lang="ts">
-import { calculateAge, dateFormat } from 'src/utils/datetime';
-import { calculateDaysUntilExpire } from 'stores/utils';
-import { baseUrl } from 'src/stores/utils';
-import useOptionStore from 'stores/options';
-import { columnsEmployee as columns } from './customer';
-
-import PersonCard from 'components/shared/PersonCard.vue';
-import KebabAction from '../shared/KebabAction.vue';
-import ExpirationDate from 'components/03_customer-management/ExpirationDate.vue';
-import { AddButton } from 'components/button';
-
-const optionStore = useOptionStore();
-const pageSize = defineModel<number>('pageSize', { default: 30 });
-const currentPage = defineModel<number>('currentPage', { default: 1 });
-
-withDefaults(
-  defineProps<{
-    gridView?: boolean;
-    listEmployee: any[];
-    columnsEmployee?: any[];
-    fieldSelected?: string[];
-    inTable?: boolean;
-    addButton?: boolean;
-    prefixId?: string;
-  }>(),
-  {
-    gridView: false,
-    fieldSelected: () => [
-      'orderNumber',
-      'firstName',
-      'general.age',
-      'formDialogInputNationality',
-      'formDialogInputPassportNo',
-      'passportExpiryDate',
-      'visaExpireDate',
-      'beDue',
-      'branchLabel',
-      'action',
-    ],
-  },
-);
-
-defineEmits<{
-  (e: 'add'): void;
-  (e: 'view', data: any): void;
-  (e: 'edit', data: any): void;
-  (e: 'delete', data: any): void;
-  (e: 'history', data: any): void;
-  (e: 'toggleStatus', data: any): void;
-}>();
-</script>
-
-<template>
-  <q-table
-    flat
-    bordered
-    :grid="gridView"
-    :rows="listEmployee"
-    :columns="columnsEmployee || columns"
-    class="full-width"
-    card-container-class="q-col-gutter-md"
-    row-key="name"
-    :rows-per-page-options="[0]"
-    hide-pagination
-    :visible-columns="fieldSelected"
-    :no-data-label="$t('general.noDataTable')"
-  >
-    <template v-slot:header="props">
-      <q-tr
-        :style="`background-color:  ${inTable ? 'hsla(var(--green-4-hsl) / 0.07)' : 'hsla(var(--info-bg) / 0.07'} `"
-        :props="props"
-      >
-        <q-th v-for="col in props.cols" :key="col.name" :props="props">
-          <span v-if="col.label === 'nameEmployee'">
-            {{ $t('fullname') }}
-          </span>
-          <span v-if="col.label === '' && !!addButton">
-            <AddButton
-              :id="`${prefixId || 'default'}-btn-add-employee`"
-              icon-only
-              @click.stop="() => $emit('add')"
-            />
-          </span>
-          <span v-if="col.label !== ''">
-            {{ $t(col.label) }}
-          </span>
-        </q-th>
-      </q-tr>
-    </template>
-
-    <template v-slot:body="props">
-      <q-tr
-        :class="{
-          'app-text-muted': props.row.status === 'INACTIVE',
-          'status-active': props.row.status !== 'INACTIVE',
-          'status-inactive': props.row.status === 'INACTIVE',
-        }"
-        :props="props"
-        :id="`row-table-${props.row.firstNameEN}`"
-        @click="
-          () => {
-            // employeeFormState.drawerModal = true;
-            // employeeFormStore.assignFormDataEmployee(
-            //   props.row.id,
-            // );
-            // $router.push(`/customer-management/${props.row.id}/branch`);
-            // openDialogInputForm('INFO', props.row.id);
-          }
-        "
-      >
-        <q-td class="text-center" v-if="fieldSelected.includes('orderNumber')">
-          {{ (currentPage - 1) * pageSize + props.rowIndex + 1 }}
-        </q-td>
-
-        <q-td v-if="fieldSelected.includes('firstName')">
-          <div class="row items-center" style="flex-wrap: nowrap">
-            <div
-              style="width: 50px; display: flex; margin-bottom: var(--size-2)"
-            >
-              <div
-                style="
-                  border-radius: 50%;
-                  border-style: solid;
-                  border-width: 2px;
-                  border-color: hsl(var(--pink-6-hsl));
-                  padding: 3px;
-                "
-              >
-                <div class="full-width full-height">
-                  <q-avatar size="md">
-                    <q-img
-                      :src="
-                        `${baseUrl}/employee/${props.row.id}/image/${props.row.selectedImage}` ||
-                        '/images/employee-avatar.png'
-                      "
-                      class="text-center"
-                      :ratio="1"
-                    >
-                      <template #error>
-                        <span>
-                          <q-img
-                            class="text-center"
-                            :ratio="1"
-                            src="/images/employee-avatar.png"
-                          />
-                        </span>
-                      </template>
-                    </q-img>
-
-                    <q-badge
-                      class="absolute-bottom-right no-padding"
-                      style="
-                        border-radius: 50%;
-                        min-width: 8px;
-                        min-height: 8px;
-                      "
-                      :style="{
-                        background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
-                      }"
-                    ></q-badge>
-                  </q-avatar>
-                </div>
-              </div>
-            </div>
-
-            <div class="col text-left">
-              <div class="col">
-                {{ `${props.row.firstNameEN} ${props.row.lastNameEN}` || '-' }}
-
-                <q-icon
-                  class="q-pl-xs"
-                  :class="{
-                    'symbol-gender': props.row.gender,
-                    'symbol-gender__male': props.row.gender === 'male',
-                    'symbol-gender__female': props.row.gender === 'female',
-                  }"
-                  :name="`mdi-gender-${props.row.gender === 'male' ? 'male' : 'female'}`"
-                  width="24px"
-                />
-              </div>
-              <div class="col app-text-muted">
-                {{ `${props.row.firstName} ${props.row.lastName}` || '-' }}
-              </div>
-            </div>
-          </div>
-        </q-td>
-
-        <q-td v-if="fieldSelected.includes('general.age')">
-          {{ calculateAge(props.row.dateOfBirth) || '-' }}
-        </q-td>
-
-        <q-td v-if="fieldSelected.includes('formDialogInputNationality')">
-          {{ optionStore.mapOption(props.row.nationality || '-') }}
-        </q-td>
-
-        <q-td v-if="fieldSelected.includes('formDialogInputPassportNo')">
-          {{
-            props.row.employeePassport[0]
-              ? props.row.employeePassport[0].number
-              : '-'
-          }}
-        </q-td>
-
-        <q-td v-if="fieldSelected.includes('passportExpiryDate')">
-          {{
-            props.row.employeePassport[0]
-              ? dateFormat(props.row.employeePassport[0].expireDate) || '-'
-              : '-'
-          }}
-        </q-td>
-
-        <q-td v-if="fieldSelected.includes('visaExpireDate')">
-          {{
-            props.row.employeeVisa[0]
-              ? dateFormat(props.row.employeeVisa[0].expireDate) || '-'
-              : '-'
-          }}
-        </q-td>
-
-        <q-td v-if="fieldSelected.includes('beDue')">
-          <ExpirationDate
-            show-all-day
-            :expiration-date="
-              props.row.employeeVisa[0]
-                ? props.row.employeeVisa[0].expireDate || undefined
-                : undefined
-            "
-          />
-        </q-td>
-
-        <q-td v-if="fieldSelected.includes('branchLabel')">
-          <div class="row items-center" v-if="props.row.customerBranch">
-            <div class="col text-left">
-              <div class="col">
-                {{ props.row.customerBranch.code || '-' }}
-              </div>
-              <div class="col app-text-muted">
-                {{
-                  $i18n.locale === 'eng'
-                    ? `${props.row.customerBranch.registerNameEN || ''}`
-                    : `${props.row.customerBranch.registerName || ''}`
-                }}
-              </div>
-            </div>
-          </div>
-        </q-td>
-
-        <q-td>
-          <q-btn
-            :id="`btn-eye-${props.row.firstName}`"
-            icon="mdi-eye-outline"
-            size="sm"
-            dense
-            round
-            flat
-            @click.stop="$emit('view', props.row)"
-          />
-          <KebabAction
-            v-if="!inTable"
-            :id-name="props.row.firstName"
-            :status="props.row.status"
-            @view="$emit('view', props.row)"
-            @edit="$emit('edit', props.row)"
-            @delete="$emit('delete', props.row)"
-            @change-status="$emit('toggleStatus', props.row)"
-          />
-        </q-td>
-      </q-tr>
-    </template>
-
-    <template v-slot:item="props">
-      <div class="col-12 col-md-3 col-sm-6">
-        <PersonCard
-          :id="`card-${props.row.firstNameEN}`"
-          :field-selected="fieldSelected"
-          history
-          :prefix-id="props.row.firstNameEN ?? props.rowIndex"
-          :data="{
-            code: props.row.code,
-            name:
-              $i18n.locale === 'eng'
-                ? `${props.row.firstNameEN} ${props.row.lastNameEN} `.trim()
-                : `${props.row.firstName} ${props.row.lastName} `.trim(),
-            img:
-              `${baseUrl}/employee/${props.row.id}/image/${props.row.selectedImage}` ||
-              '/images/employee-avatar.png',
-            fallbackImg: '/images/employee-avatar.png',
-            male: props.row.gender === 'male',
-            female: props.row.gender === 'female',
-            detail: [
-              {
-                icon: 'mdi-passport',
-                value: optionStore.mapOption(props.row.nationality),
-              },
-
-              {
-                icon: 'mdi-clock-outline',
-                value: props.row.dateOfBirth
-                  ? (calculateAge(props.row.dateOfBirth) ?? '')
-                  : '',
-              },
-            ],
-          }"
-          :tag="[
-            {
-              color: 'pink',
-              value: $t('customer.employee'),
-            },
-          ]"
-          :disabled="props.row.status === 'INACTIVE'"
-          @history="() => $emit('history', props.row)"
-          @update-card="() => $emit('edit', props.row)"
-          @enter-card="() => $emit('view', props.row)"
-          @delete-card="() => $emit('delete', props.row)"
-          @toggle-status="() => $emit('toggleStatus', props.row)"
-        />
-      </div>
-    </template>
-  </q-table>
-</template>
-
-<style scoped>
-.branch-card__icon {
-  background-color: hsla(var(--_branch-card-bg) / 0.15);
-  border-radius: 50%;
-  padding: var(--size-1);
-  position: relative;
-  transform: rotate(45deg);
-
-  &::after {
-    content: ' ';
-    display: block;
-    block-size: 0.5rem;
-    aspect-ratio: 1;
-    position: absolute;
-    border-radius: 50%;
-    right: -0.1rem;
-    top: calc(50% - 0.25rem);
-    bottom: calc(50% - 0.25rem);
-    background-color: hsla(var(--_branch-status-color) / 1);
-  }
-
-  & :deep(.q-avatar) {
-    transform: rotate(-45deg);
-    color: hsla(var(--_branch-card-bg) / 1);
-  }
-}
-
-& .symbol-gender {
-  color: hsla(var(--_fg));
-
-  &.symbol-gender__male {
-    --_fg: var(--gender-male);
-  }
-
-  &.symbol-gender__female {
-    --_fg: var(--gender-female);
-  }
-}
-</style>
diff --git a/src/components/03_customer-management/TableEmpoloyee.vue b/src/components/03_customer-management/TableEmpoloyee.vue
index cb156e44..36bb2d6c 100644
--- a/src/components/03_customer-management/TableEmpoloyee.vue
+++ b/src/components/03_customer-management/TableEmpoloyee.vue
@@ -125,20 +125,18 @@ defineEmits<{
               style="width: 50px; display: flex; margin-bottom: var(--size-2)"
             >
               <div
-                style="
-                  border-radius: 50%;
-                  border-style: solid;
-                  border-width: 2px;
-                  border-color: hsl(var(--pink-6-hsl));
-                  padding: 3px;
-                "
+                :class="{
+                  'border-gender': props.row.gender,
+                  'border-gender__male': props.row.gender === 'male',
+                  'border-gender__female': props.row.gender === 'female',
+                }"
               >
                 <div class="full-width full-height">
                   <q-avatar size="md">
                     <q-img
                       :src="
                         `${baseUrl}/employee/${props.row.id}/image/${props.row.selectedImage}` ||
-                        '/images/employee-avatar.png'
+                        `/images/employee-avatar-${props.row.gender}.png`
                       "
                       class="text-center"
                       :ratio="1"
@@ -148,7 +146,7 @@ defineEmits<{
                           <q-img
                             class="text-center"
                             :ratio="1"
-                            src="/images/employee-avatar.png"
+                            :src="`/images/employee-avatar-${props.row.gender}.png`"
                           />
                         </span>
                       </template>
@@ -365,6 +363,22 @@ defineEmits<{
   }
 }
 
+.border-gender {
+  border-radius: 50%;
+  border-style: solid;
+  border-width: 2px;
+  border-color: hsl(var(--_fg));
+  padding: 3px;
+
+  &.border-gender__male {
+    --_fg: var(--gender-male);
+  }
+
+  &.border-gender__female {
+    --_fg: var(--gender-female);
+  }
+}
+
 .status-active {
   --_branch-status-color: var(--green-6-hsl);
 }