fix: (02) edit layout Upload profile

src/pages/02_personnel-management/MainPage.vue

@@ -175,10 +175,39 @@ const formData = ref<UserCreate>({
   status: 'CREATED',
 });
 
+const profileUrl = ref<string | null>('');
 const profileFile = ref<File | undefined>(undefined);
-const inputFile = document.createElement('input');
-inputFile.type = 'file';
-inputFile.accept = 'image/*';
+
+const inputFile = (() => {
+  const element = document.createElement('input');
+  element.type = 'file';
+  element.accept = 'image/*';
+
+  const reader = new FileReader();
+  reader.addEventListener('load', () => {
+    if (typeof reader.result === 'string') profileUrl.value = reader.result;
+
+    if (infoDrawerEdit.value && currentUser.value)
+      currentUser.value.profileImageUrl = profileUrl.value as string;
+    // profileUrl.value = currentUser.value?.profileImageUrl as string;
+
+    // if (infoDrawerEmployeeEdit.value && infoEmployeePersonCard.value)
+    //   infoEmployeePersonCard.value[0].img = profileUrl.value as string;
+  });
+
+  element.addEventListener('change', () => {
+    profileFile.value = element.files?.[0];
+    if (profileFile.value) {
+      reader.readAsDataURL(profileFile.value);
+    }
+  });
+
+  return element;
+})();
+
+// const inputFile = document.createElement('input');
+// inputFile.type = 'file';
+// inputFile.accept = 'image/*';
 
 const reader = new FileReader();
 
@@ -471,6 +500,7 @@ async function assignFormData(idEdit: string) {
   if (foundUser) {
     currentUser.value = foundUser;
     infoPersonId.value = currentUser.value.id;
+    profileUrl.value = currentUser.value.profileImageUrl;
     formData.value = {
       branchId: foundUser.branch[0]?.id,
       provinceId: foundUser.provinceId,
@@ -1280,67 +1310,6 @@ watch(
               </div>
             </template>
           </q-table>
-
-          <!-- <div
-            v-for="v in userData?.result.filter((v) => {
-              if (statusFilter === 'statusACTIVE' && v.status === 'INACTIVE') {
-                return false;
-              }
-
-              if (
-                statusFilter === 'statusINACTIVE' &&
-                v.status !== 'INACTIVE'
-              ) {
-                return false;
-              }
-
-              return true;
-            })"
-            :key="v.id"
-            class="col-3"
-          >
-            <PersonCard
-              :data="{
-                code: v.code,
-                name:
-                  $i18n.locale === 'en-US'
-                    ? `${v.firstNameEN} ${v.lastNameEN}`.trim()
-                    : `${v.firstName} ${v.lastName}`.trim(),
-                img: v.profileImageUrl,
-                male: v.gender === 'male',
-                female: v.gender === 'female',
-                detail: [
-                  {
-                    icon: 'mdi-phone',
-                    value: v.telephoneNo,
-                  },
-                  {
-                    icon: 'mdi-clock-outline',
-                    value: (v.birthDate && calculateAge(v.birthDate)) || '-',
-                  },
-                ],
-              }"
-              :tag="[
-                {
-                  color:
-                    (
-                      {
-                        USER: 'cyan',
-                        MESSENGER: 'yellow',
-                        DELEGATE: 'red',
-                        AGENCY: 'magenta',
-                      } as const
-                    )[v.userType] || 'pink',
-                  value: $t(v.userType),
-                },
-              ]"
-              :disabled="v.status === 'INACTIVE'"
-              @update-card="(a, b) => openDialog(a, v.id, b)"
-              @delete-card="onDelete(v.id)"
-              @enter-card="(a) => openDialog(a, v.id)"
-              @toggle-status="toggleStatus(v.id)"
-            />
-          </div> -->
         </div>
 
         <div
@@ -1472,7 +1441,15 @@ watch(
       >
         <template #person-card>
           <div class="q-ma-md">
-            <AppBox class="surface-1" style="padding: 0">
+            <ProfileUpload
+              v-model:url-profile="profileUrl"
+              v-model:status-toggle="statusToggle"
+              v-model:profile-submit="profileSubmit"
+              @input-file="inputFile.click()"
+              @cancel-file="inputFile.value = ''"
+            />
+
+            <!-- <AppBox class="surface-1" style="padding: 0">
               <PersonCard
                 :can-edit-profile="infoDrawerEdit"
                 :data="{
@@ -1490,7 +1467,7 @@ watch(
                 no-bg
                 @edit-profile="inputFile.click()"
               />
-            </AppBox>
+            </AppBox> -->
           </div>
         </template>
         <template #information>