fix(04): group & type readonly state

src/pages/04_product-service/MainPage.vue

@@ -31,6 +31,7 @@ import TreeCompoent from 'src/components/TreeCompoent.vue';
 import DialogForm from 'src/components/DialogForm.vue';
 import ProfileBanner from 'src/components/ProfileBanner.vue';
 import SideMenu from 'src/components/SideMenu.vue';
+import ImageUploadDialog from 'src/components/ImageUploadDialog.vue';
 
 import useFlowStore from 'src/stores/flow';
 import useMyBranchStore from 'src/stores/my-branch';
@@ -145,6 +146,7 @@ const { t } = useI18n();
 const baseUrl = ref<string>(import.meta.env.VITE_API_BASE_URL);
 
 const holdDialog = ref(false);
+const imageDialog = ref(false);
 const currentNode = ref<ProductGroup>();
 const expandedTree = ref<string[]>([]);
 const editByTree = ref<'group' | 'type' | undefined>();
@@ -182,6 +184,7 @@ const treeProductTypeAndGroup = computed(() => {
 
   return tempValue;
 });
+const profileFileImg = ref<File | null>(null);
 
 const inputSearch = ref('');
 const inputSearchProductAndService = ref('');
@@ -3359,6 +3362,7 @@ watch(
               : '--violet-11'
         }-hsl)/0.1)`"
         v-model:toggle-status="currentStatusGroupType"
+        @view="imageDialog = true"
         @update:toggle-status="
           () => {
             currentStatusGroupType =
@@ -3464,6 +3468,7 @@ watch(
           :active="currentStatusGroupType !== 'INACTIVE'"
           hideFade
           useToggle
+          :readonly="!isEdit"
           :icon="productMode === 'group' ? 'mdi-folder' : 'mdi-folder-table'"
           :fallbackCover="`/images/product-service-${productMode}-banner.png`"
           v-model:toggle-status="currentStatusGroupType"
@@ -3491,6 +3496,7 @@ watch(
               bgColor: 'var(--surface-1)',
             },
           ]"
+          @view="imageDialog = true"
           @update:toggle-status="
             async (v) => {
               await triggerChangeStatus(currentIdGroupType, v, productMode);
@@ -4219,6 +4225,40 @@ watch(
       </q-list>
     </div>
   </q-dialog>
+
+  <ImageUploadDialog
+    ref="refImageUpload"
+    v-model:dialogState="imageDialog"
+    v-model:file="profileFileImg"
+    clearButton
+  >
+    <template #error>
+      <div class="full-height full-width" style="background: white">
+        <div
+          class="full-height full-width flex justify-center items-center"
+          :style="`background: hsla(var(${
+            productMode === 'group'
+              ? '--pink-6'
+              : $q.dark.isActive
+                ? '--violet-10'
+                : '--violet-11'
+          }-hsl)/0.1)`"
+        >
+          <q-icon
+            size="15rem"
+            :name="productMode === 'group' ? 'mdi-folder' : 'mdi-folder-table'"
+            :style="`color: hsla(var(${
+              productMode === 'group'
+                ? '--pink-6'
+                : $q.dark.isActive
+                  ? '--violet-10'
+                  : '--violet-11'
+            }-hsl)/1)`"
+          ></q-icon>
+        </div>
+      </div>
+    </template>
+  </ImageUploadDialog>
 </template>
 
 <style scoped>