refactor: เพิ่ม icon เพศ

src/pages/03_customer-management/MainPage.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, watch, toRaw } from 'vue';
 import type { QTableProps } from 'quasar';
+import { Status } from 'src/stores/types';
 
 import useCustomerStore from 'src/stores/customer';
 import useEmployeeStore from 'src/stores/employee';
@@ -8,8 +9,6 @@ import useOptionStore from 'src/stores/options';
 import useMyBranchStore from 'src/stores/my-branch';
 import useUserStore from 'src/stores/user';
 
-import { Status } from 'src/stores/types';
-
 import ButtonAddComponent from 'src/components/ButtonAddCompoent.vue';
 import PersonCard from 'components/home/PersonCard.vue';
 import UsersDetailCardComponent from 'src/components/UsersDetailCardComponent.vue';
@@ -666,8 +665,7 @@ function onCloseBranch() {
 }
 
 function clearForm() {
-
+  profileFile.value = undefined;
-profileFile.value = undefined;
 
   dialogInputForm.value = false;
   formData.value = {
@@ -961,9 +959,7 @@ async function toggleStatusCustomer(id: string, status: boolean) {
 }
 
 async function onSubmitEdit(id: string) {
-
   if (selectorLabel.value === 'EMPLOYER') {
-    
     if (!formData.value) return;
 
     const tempValue: CustomerUpdate = {
@@ -975,15 +971,11 @@ async function onSubmitEdit(id: string) {
       customerBranch: formData.value.customerBranch,
       taxNo: formData.value.taxNo,
       personName: formData.value.personName,
-      image:  profileFile.value ,
+      image: profileFile.value,
     };
-     
-    
 
     if (tempValue.status === 'CREATED') delete tempValue['status'];
 
-
-   
     await editById(id, tempValue);
     infoDrawer.value = false;
     fetchListCustomer();
@@ -1885,7 +1877,6 @@ watch([inputSearch, currentStatus], async () => {
                           <q-td v-if="fieldSelected.includes('customerName')">
                             <div class="row items-center">
                               <div
-                                :class="{}"
                                 style="
                                   width: 50px;
                                   display: flex;
@@ -2128,8 +2119,8 @@ watch([inputSearch, currentStatus], async () => {
                                   ? `${props.row.customerName} `.trim()
                                   : `${props.row.customerNameEN} `.trim(),
                               img: props.row.imageUrl,
-                              male: props.row.gender === 'male',
+                              male: undefined,
-                              female: props.row.gender === 'female',
+                              female: undefined,
                               detail: [
                                 {
                                   icon: 'mdi-cellphone',
@@ -2141,6 +2132,20 @@ watch([inputSearch, currentStatus], async () => {
                                 },
                               ],
                             }"
+                            :tag="[
+                              {
+                                color:
+                                  {
+                                    CORP: 'purple',
+                                    PERS: 'green',
+                                  }[props.row.customerType as string] || 'CORP',
+                                value: $t(
+                                  props.row.customerType === 'CORP'
+                                    ? 'customerLegalEntity'
+                                    : 'customerNaturalPerson',
+                                ),
+                              },
+                            ]"
                             :disabled="props.row.status === 'INACTIVE'"
                             @history="openHistory(props.row.id)"
                             @update-card="
@@ -2335,12 +2340,6 @@ watch([inputSearch, currentStatus], async () => {
                                     </template>
                                   </q-img>
                                 </q-avatar>
-
-                                <!-- <q-icon
-                                    size="md"
-                                    style="scale: 0.8"
-                                    :name="props.row.imageUrl"
-                                  /> -->
                               </div>
                             </div>
                             <div class="col">
@@ -2349,6 +2348,19 @@ watch([inputSearch, currentStatus], async () => {
                                   `${props.row.firstName} ${props.row.lastName}` ||
                                   '-'
                                 }}
+
+                                <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">
                                 {{
@@ -2360,7 +2372,7 @@ watch([inputSearch, currentStatus], async () => {
                           </div>
                         </q-td>
                         <q-td v-if="fieldSelected.includes('type')">
-                          <span class="tags tags__parimary">
+                          <span class="tags tags__pink">
                             {{ $t('EMPLOYEE') }}
                           </span>
                         </q-td>
@@ -2569,6 +2581,12 @@ watch([inputSearch, currentStatus], async () => {
                               },
                             ],
                           }"
+                          :tag="[
+                            {
+                              color: 'pink',
+                              value: $t('EMPLOYEE'),
+                            },
+                          ]"
                           :disabled="props.row.status === 'INACTIVE'"
                           @history="openHistory(props.row.id)"
                           @update-card="
@@ -3994,8 +4012,8 @@ watch([inputSearch, currentStatus], async () => {
   padding-inline: var(--size-2);
 }
 
-.tags__parimary {
+.tags__pink {
-  --_color: var(--blue-6-hsl);
+  --_color: var(--pink-6-hsl);
 }
 
 .tags__purple {
@@ -4006,10 +4024,6 @@ watch([inputSearch, currentStatus], async () => {
   --_color: var(--teal-10-hsl);
 }
 
-.dark .tags__parimary {
-  --_color: var(--blue-12-hsl);
-}
-
 .dark .tags__purple {
   --_color: var(--violet-10-hsl);
 }
@@ -4054,4 +4068,16 @@ watch([inputSearch, currentStatus], async () => {
     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>