feat: edit profile on drawer

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

@@ -269,6 +269,12 @@ const inputFile = (() => {
   const reader = new FileReader();
   reader.addEventListener('load', () => {
     if (typeof reader.result === 'string') profileUrl.value = reader.result;
+
+    if (infoDrawerEdit.value && currentCustomer.value)
+      currentCustomer.value.imageUrl = profileUrl.value as string;
+
+    if (infoDrawerEmployeeEdit.value)
+      infoEmployeePersonCard.value[0].img = profileUrl.value;
   });
 
   element.addEventListener('change', () => {
@@ -977,6 +983,7 @@ async function assignFormDataEmployee(id: string) {
 
     currentEmployeeCode.value = foundEmployee.code;
     currentEmployee.value = foundEmployee;
+
     profileUrl.value = foundEmployee.profileImageUrl;
 
     foundEmployee.profileImageUrl
@@ -1041,6 +1048,10 @@ async function assignFormDataEmployee(id: string) {
     } else {
       formDataEmployeeSameAddr.value = false;
     }
+
+    if (infoEmployeePersonCard.value) {
+      infoEmployeePersonCard.value[0].img = foundEmployee.profileImageUrl;
+    }
   }
   flowStore.rotate();
 }
@@ -2302,6 +2313,9 @@ watch(selectorLabel, async () => {
     "
     v-model:drawer-open="infoDrawer"
     :badgeLabel="currentCustomer?.code"
+    :badgeClass="
+      currentCustomer?.customerType === 'CORP' ? 'app-bg-corp' : 'app-bg-pers'
+    "
     :undo="() => undo()"
     :isEdit="infoDrawerEdit"
     :close="() => onClose()"
@@ -2317,8 +2331,9 @@ watch(selectorLabel, async () => {
       <InfoForm>
         <template #person-card>
           <div class="q-ma-md">
-            <AppBox class="surface-1" style="padding: 0">
+            <AppBox class="surface-1 bordered-b" style="padding: 0">
               <UsersDetailCardComponent
+                :can-edit-profile="infoDrawerEdit"
                 :hideButton="true"
                 v-if="!!currentCustomer"
                 no-bg
@@ -2339,6 +2354,11 @@ watch(selectorLabel, async () => {
                   status: currentCustomer.status,
                   code: 'HQ006',
                 }"
+                @edit-profile="
+                  () => {
+                    inputFile.click();
+                  }
+                "
               />
             </AppBox>
           </div>
@@ -2497,7 +2517,9 @@ watch(selectorLabel, async () => {
     :title="$t('formTitleBranch', { msg: currentBranch.name })"
     v-model:drawer-open="infoDrawerBranch"
     :badgeLabel="currentBranch.code"
-    badgeClass="app-bg-pers"
+    :badgeClass="
+      currentCustomer?.customerType === 'CORP' ? 'app-bg-corp' : 'app-bg-pers'
+    "
     :undo="
       () => {
         cloneData();
@@ -2752,12 +2774,18 @@ watch(selectorLabel, async () => {
         <div class="q-ma-md">
           <AppBox class="surface-1" style="padding: 0">
             <PersonCard
+              :can-edit-profile="infoDrawerEmployeeEdit"
               no-hover
               no-action
               no-detail
               no-bg
               :list="infoEmployeePersonCard"
               :gridColumns="1"
+              @edit-profile="
+                () => {
+                  inputFile.click();
+                }
+              "
             />
           </AppBox>
         </div>