refactor: edit ui show qrcode

src/components/01_branch-management/FormBank.vue

@@ -8,10 +8,11 @@ import { QSelect } from 'quasar';
 import { AddButton, DeleteButton } from 'components/button';
 import ToggleButton from '../button/ToggleButton.vue';
 
+import ImageHover from '../ImageHover.vue';
+
 const optionStore = useOptionStore();
 
 const bankBookList = defineModel<BankBook[]>('bankBookList', { default: [] });
-const baseUrl = ref<string>(import.meta.env.VITE_API_BASE_URL);
 
 const bankQrUrl = ref<string[]>([]);
 const listIndex = ref(0);
@@ -37,6 +38,11 @@ defineProps<{
   view?: boolean;
 }>();
 
+defineEmits<{
+  (e: 'viewQr', index: number): void;
+  (e: 'editQr', index: number): void;
+}>();
+
 const bankBookOptions = ref<Record<string, unknown>[]>([]);
 let bankBoookFilter: (
   value: string,
@@ -168,51 +174,19 @@ watch(
       <div
         class="bordered q-mr-sm rounded"
         :class="{ 'cursor-pointer': !readonly }"
-        style="width: 12vw; height: 12vw; overflow: hidden"
-        @click="
-          () => {
-            readonly ? '' : inputFile?.click(), (listIndex = i);
-          }
-        "
       >
-        <q-img
-          v-if="bankQrUrl[i]"
-          fit="contain"
-          :ratio="1"
-          :src="bankQrUrl[i]"
+        <ImageHover
+          :img="book.bankUrl"
+          @view="() => $emit('viewQr', i)"
+          @edit="
+            () => () => {
+              readonly ? '' : inputFile?.click(), (listIndex = i);
+            }
+          "
+          icon="mdi-qrcode"
+          color="gray"
+          bg-color="white"
         />
-        <q-img
-          v-else
-          fit="contain"
-          :ratio="1"
-          :src="baseUrl + `/branch/${book.branchId}/bank-qr/${book.id}`"
-        >
-          <template #error>
-            <span
-              class="full-width full-height column items-center justify-center app-text-muted"
-            >
-              <q-icon name="mdi-qrcode" size="4vw" />
-              <span class="q-mt-sm">{{ $t('general.upload') }} QR code</span>
-            </span>
-          </template>
-        </q-img>
-
-        <!-- <q-img v-if="bankQrUrl[i]" fit="cover" :src="bankQrUrl[i]">
-          <template #error>
-            <div class="full-width full-height">
-              <q-icon name="mdi-qrcode" size="4vw" />
-              <span class="q-mt-sm">{{ $t('general.upload') }} QR code</span>
-            </div>
-          </template>
-        </q-img>
-
-        <div
-          v-else
-          class="full-width full-height column items-center justify-center app-text-muted bank-qr"
-        >
-          <q-icon name="mdi-qrcode" size="4vw" />
-          <span class="q-mt-sm">{{ $t('general.upload') }} QR code</span>
-        </div> -->
       </div>
       <div class="col">
         <div class="row q-col-gutter-sm">

src/components/01_branch-management/FormQr.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Icon } from '@iconify/vue';
+import ImageHover from '../ImageHover.vue';
 
 const qr = defineModel<string | null>('qr');
 
@@ -13,6 +13,8 @@ defineProps<{
 
 defineEmits<{
   (e: 'upload'): void;
+  (e: 'viewQr'): void;
+  (e: 'editQr'): void;
 }>();
 </script>
 <template>
@@ -35,47 +37,14 @@ defineEmits<{
       }"
       class="col-12 row branch-form-show-qr-code"
     >
-      <div class="col-12 column flex-center q-py-md">
-        <q-img
-          v-if="qr"
-          :src="qr as string"
-          style="width: 150px; height: 150px"
-        >
-          <template #error>
-            <div
-              style="background: none"
-              class="full-width full-height items-center justify-center flex"
-            >
-              <q-img src="/no-data.png" width="5rem" />
-            </div>
-          </template>
-        </q-img>
-
-        <q-btn
-          v-else
-          @click="$emit('upload')"
-          class="branch-form-btn-qr-code q-mb-md"
-          :class="{ 'dark-form-btn-qr-code': $q.dark.isActive }"
-          unelevated
-          :color="$q.dark.isActive ? 'black' : 'grey-2'"
-          :text-color="$q.dark.isActive ? 'white' : 'grey-5'"
-        >
-          <Icon icon="teenyicons:add-outline" width="30px" height="50px" />
-        </q-btn>
-
-        <q-btn
-          v-if="!readonly"
-          :text-color="$q.dark.isActive ? 'black' : 'white'"
-          style="
-            background: var(--blue-5);
-            color: var(--blue-0);
-            font-size: 12px;
-          "
-          unelevated
-          rounded
-          :label="$t('general.upload')"
-          @click="$emit('upload')"
-          id="btn-upload-qr-code"
+      <div class="col-12 column flex-center text-center q-py-md">
+        <ImageHover
+          :img="qr"
+          @view="() => $emit('viewQr')"
+          @edit="() => $emit('editQr')"
+          icon="mdi-qrcode"
+          color="gray"
+          bg-color="white"
         />
       </div>
     </div>