refactor: set readonly

src/components/DialogForm.vue

@@ -21,6 +21,7 @@ defineProps<{
   edit?: boolean;
   hideFooter?: boolean;
   hideDelete?: boolean;
+  readonly?: boolean;
 
   saveAmount?: number;
   submitLabel?: string;
@@ -67,7 +68,7 @@ const currentTab = defineModel<string>('currentTab');
           }"
         >
           <div class="row items-center">
-            <div v-if="isEdit && edit" class="row">
+            <div v-if="!readonly && isEdit && edit" class="row">
               <q-btn
                 round
                 flat
@@ -81,7 +82,7 @@ const currentTab = defineModel<string>('currentTab');
               />
               <div style="width: 31.98px"></div>
             </div>
-            <div v-if="!isEdit && edit">
+            <div v-if="!readonly && !isEdit && edit">
               <q-btn
                 round
                 flat

src/components/TableComponents.vue

@@ -92,17 +92,13 @@ defineEmits<{
 
     <template v-slot:body-cell-action="props">
       <q-td>
-        <div
+        <div class="row items-center full-width justify-end no-wrap">
-          class="row items-center full-width justify-end no-wrap"
-          v-if="!readonly"
-        >
           <slot name="button" :props="props"></slot>
           <DeleteButton
             iconOnly
             v-if="buttonDelete"
             @click="$emit('delete', props.rowIndex)"
           />
-
           <q-btn
             v-if="!buttonDelete"
             icon="mdi-eye-outline"
@@ -124,7 +120,7 @@ defineEmits<{
           />
 
           <KebabAction
-            v-if="!buttonDelete"
+            v-if="!buttonDelete && !readonly"
             hide-toggle
             :id-name="props.row.code"
             :status="props.row.status"

src/components/upload-file/UploadFileGroup.vue

@@ -30,30 +30,33 @@ const currentIndex = ref<number>(-1);
 
 const statusOcr = ref<boolean>(false);
 
-const props = defineProps<{
+const props = withDefaults(
-  showTitle?: boolean;
+  defineProps<{
-  ocr?: (
+    readonly?: boolean;
-    group: any,
+    showTitle?: boolean;
-    file: File,
+    ocr?: (
-  ) => void | Promise<{
+      group: any,
-    status: boolean;
+      file: File,
-    group: string;
+    ) => void | Promise<{
-    meta: { name: string; value: string }[];
+      status: boolean;
-  }>;
+      group: string;
-  getFileList?: (group: any) => Promise<typeof obj.value>;
+      meta: { name: string; value: string }[];
-  deleteItem?: (obj: any) => void | Promise<boolean>;
+    }>;
-  download?: (obj: any) => void;
+    getFileList?: (group: any) => Promise<typeof obj.value>;
-  save?: (
+    deleteItem?: (obj: any) => void | Promise<boolean>;
-    group: any,
+    download?: (obj: any) => void;
-    meta: any,
+    save?: (
-    file: File | undefined,
+      group: any,
-  ) => void | Promise<boolean>;
+      meta: any,
-  autoSave?: boolean;
+      file: File | undefined,
-  readonly?: boolean;
+    ) => void | Promise<boolean>;
-  hideAction?: boolean;
+    autoSave?: boolean;
-  columns: QTableProps['columns'];
+    hideAction?: boolean;
-  menu?: { label: string; value: string; _meta?: Record<string, any> }[];
+    columns: QTableProps['columns'];
-}>();
+    menu?: { label: string; value: string; _meta?: Record<string, any> }[];
+  }>(),
+  {},
+);
 
 async function triggerDelete(item: any) {
   dialog({
@@ -272,6 +275,7 @@ defineEmits<{
           <div class="full-width q-pa-md">
             <TableComponents
               buttomDownload
+              :readonly="readonly"
               @download="
                 (index) => {
                   download?.(obj[index]);
@@ -331,6 +335,7 @@ defineEmits<{
     edit
     hideDelete
     :is-edit="isEdit"
+    :readonly="readonly"
     style="position: absolute"
     height="100vh"
     weight="90%"
@@ -359,7 +364,15 @@ defineEmits<{
     :submit="
       async () => {
         modalDialog = false;
+
+        $emit('submit', obj[currentIndex].group, allMeta);
         if (autoSave === true) {
+          if (obj[currentIndex].group === 'passport') {
+            delete obj[currentIndex]._meta?.firstName;
+            delete obj[currentIndex]._meta?.lastName;
+            delete obj[currentIndex]._meta?.gender;
+          }
+
           const statusSave = await save?.(
             obj[currentIndex].group,
             obj[currentIndex]._meta,
@@ -370,7 +383,6 @@ defineEmits<{
             fileList();
           }
         }
-        $emit('submit', obj[currentIndex].group, allMeta);
       }
     "
   >

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

@@ -2655,6 +2655,7 @@ const emptyCreateDialog = ref(false);
                 v-model:current-id="currentFromDataEmployee.id"
                 v-model="currentFromDataEmployee.file"
                 hide-action
+                :readonly="!employeeFormState.isEmployeeEdit"
                 :group-list="uploadFileListEmployee"
                 :menu="uploadFileListEmployee"
                 :columns="columnsAttachment"
@@ -4091,6 +4092,7 @@ const emptyCreateDialog = ref(false);
                 v-model:current-id="currentFromDataEmployee.id"
                 v-model="currentFromDataEmployee.file"
                 hide-action
+                :readonly="!employeeFormState.isEmployeeEdit"
                 :group-list="uploadFileListEmployee"
                 :menu="uploadFileListEmployee"
                 :columns="columnsAttachment"