Add v-viewer, fix list lelong ui, use v-viewer for every photo display

package.json

@@ -12,9 +12,8 @@
     "@vuelidate/validators": "^2.0.0-alpha.29",
     "autoprefixer": "^10",
     "axios": "^0.26.1",
-    "bootstrap": "^5.2.3",
+    "bootstrap": "^5.1.3",
     "bootstrap-icons": "^1.8.1",
-    "bootstrap-vue": "^2.23.1",
     "core-js": "^3.8.3",
     "html2canvas": "^1.4.1",
     "jspdf": "^2.5.1",
@@ -27,11 +26,10 @@
     "primeflex": "^3.2.1",
     "primeicons": "^6.0.1",
     "primevue": "^3.17.0",
-    "v-viewer": "^1.6.4",
+    "v-viewer": "^3.0.11",
     "vue": "^3.2.13",
     "vue-html2pdf": "^1.8.0",
     "vue-router": "^4.0.14",
-    "vue-sidebar-menu-akahon": "^0.1.4",
     "vue-sweetalert2": "^5.0.5",
     "vue3-youtube": "^0.1.9"
   },

src/components/list/ItemMasterImage.vue

@@ -1,8 +1,8 @@
 <template>
-  <Skeleton v-if="isLoading" height="10rem" width="20rem"></Skeleton>
+  <Skeleton v-if="isLoading" height="165px" width="20rem"></Skeleton>
-  <Image v-else :src="dataUrl" alt="Gambar Marhun" width="250" preview>
+  <div v-else class="images" v-viewer>
-    <template #indicator> Lihat Gambar </template>
+    <img :src="dataUrl" class="photo-style">
-  </Image>
+  </div>
 </template>
 
 <script>
@@ -61,4 +61,11 @@ export default {
   max-height: 350px;
   max-width: 350px;
 }
+
+.photo-style {
+  width: 298px;
+  border-start-start-radius: 8px;
+  border-start-end-radius: 8px;
+  cursor: pointer;
+}
 </style>

src/components/list/ItemMasterImageModal.vue

@@ -2,10 +2,8 @@
   <div v-if="isLoading" class="spinner-border" role="status">
     <span class="visually-hidden">Loading...</span>
   </div>
-  <div v-else style="overflow-x:auto">
+  <div v-else style="overflow-x: auto;" class="images" v-viewer>
-    <Image :src="dataUrl" alt="Gambar Marhun" width="400" preview>
+    <img :src="dataUrl" class="photo-style">
-      <template #indicator> Lihat Gambar </template>
-    </Image>
   </div>
 </template>
 
@@ -65,4 +63,11 @@ export default {
   max-height: 350px;
   max-width: 350px;
 }
+
+.photo-style {
+  width: 298px;
+  border-radius: 8px;
+  cursor: pointer;
+  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+}
 </style>

src/components/list/ListItem.vue

@@ -25,31 +25,26 @@
         <div
           v-for="sag in sags"
           :key="sag.id"
-          class="col-10 sm:col-8 md:col-6 lg:col-4"
+          class="col-10 sm:col-8 md:col-6 lg:col-4 box-style"
         >
-          <Card class="style-card">
+          <div class="item-main">
-            <template #content>
+            <div class="image-card">
-              <div class="overflow-x-auto">
+              <item-master-image
-                <div class="style-photo-div">
+                v-if="sag.filemarhun"
-                  <!-- <div
+                v-bind:norujukan="sag.norujukan"
-                    class=""
+                v-bind:filemarhun_id="sag.filemarhun[0].id"
-                    style="min-height: 180px; min-width: 255px"
+                style="width: 100%;"
-                  > -->
+              ></item-master-image>
-                  <!-- <img :src="dataUrl" class="product-image" /> -->
+              <div v-else class="text-secondary">
-                  <item-master-image
+                Image Unavailable
-                    v-if="sag.filemarhun"
+              </div>
-                    v-bind:norujukan="sag.norujukan"
+            </div>
-                    v-bind:filemarhun_id="sag.filemarhun[0].id"
+            <div class="card-arrahnbid">
-                  ></item-master-image>
+              <div class="card-content-arrahnbid">
-                  <p v-else style="text-align: center; width: 100%">
+                <div>
-                    Image Unavailable
-                  </p>
-                  <!-- </div> -->
-                </div>
-                <div class="">
                   <div class="product_details">
                     <div class="grid text-center">
-                      <div class="col-12 mt-2 pb-0 text-primary">
+                      <div class="col-12 pb-0 text-primary">
                         {{ sag.norujukan }}
                       </div>
                       <div class="col-12 pt-0">{{ sag.berat }}g</div>
@@ -62,7 +57,6 @@
                             .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
                         }}
                       </div>
-
                       <Button
                         data-bs-toggle="modal"
                         data-bs-target="#bidaModal"
@@ -74,8 +68,8 @@
                   </div>
                 </div>
               </div>
-            </template>
+            </div>
-          </Card>
+          </div>
         </div>
       </div>
     </div>
@@ -100,68 +94,6 @@
             </div>
           </div>
         </div>
-        <div class="grid justify-content-center" style="visibility:hidden">
-          <div class="col-12 p-3 lg:col-4">
-            <div class="card p-2">
-              <div class="field">
-                <div class="custom-skeleton">
-                  <div class="flex mb-3"></div>
-                  <Skeleton width="100%" height="1px"></Skeleton>
-                  <div class="flex justify-content-center">
-                    <Skeleton width="10rem"></Skeleton>
-                  </div>
-                  <div class="flex justify-content-center">
-                    <Skeleton width="10rem"></Skeleton>
-                  </div>
-                  <div class="flex justify-content-between">
-                    <Skeleton width="4rem" height="2rem"></Skeleton>
-                    <Skeleton width="4rem" height="2rem"></Skeleton>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-12 p-3 lg:col-4">
-            <div class="card p-2">
-              <div class="field">
-                <div class="custom-skeleton">
-                  <div class="flex mb-3"></div>
-                  <Skeleton width="100%" height="1px"></Skeleton>
-                  <div class="flex justify-content-center">
-                    <Skeleton width="10rem"></Skeleton>
-                  </div>
-                  <div class="flex justify-content-center">
-                    <Skeleton width="10rem"></Skeleton>
-                  </div>
-                  <div class="flex justify-content-between">
-                    <Skeleton width="4rem" height="2rem"></Skeleton>
-                    <Skeleton width="4rem" height="2rem"></Skeleton>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-12 p-3 lg:col-4">
-            <div class="card p-2">
-              <div class="field">
-                <div class="custom-skeleton">
-                  <div class="flex mb-3"></div>
-                  <Skeleton width="100%" height="1px"></Skeleton>
-                  <div class="flex justify-content-center">
-                    <Skeleton width="10rem"></Skeleton>
-                  </div>
-                  <div class="flex justify-content-center">
-                    <Skeleton width="10rem"></Skeleton>
-                  </div>
-                  <div class="flex justify-content-between">
-                    <Skeleton width="4rem" height="2rem"></Skeleton>
-                    <Skeleton width="4rem" height="2rem"></Skeleton>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
       </div>
     </div>
   </div>
@@ -687,4 +619,38 @@ export default {
 .container-height {
   min-height: 70vh;
 }
+
+.item-main {
+    border: 1px solid #00000026;
+    text-align: center;
+    margin: 10px;
+    border-start-start-radius: 8px;
+    border-start-end-radius: 8px;
+    width: 300px;
+    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+}
+
+.box-style {
+  display: grid;
+  justify-content: center;
+}
+
+.image-card {
+  height: 165px;
+  display: grid;
+  align-content: center;
+  background: #dfe3e7;
+  border-start-start-radius: 7px;
+  border-start-end-radius: 7px;
+}
+
+.card-arrahnbid {
+  background: #ffffff;
+  color: #495057;
+  /* border-radius: 6px; */
+}
+
+.card-content-arrahnbid {
+  padding: 1.25rem 20px;
+}
 </style>

src/components/pay/ReceiptImage.vue

@@ -2,9 +2,9 @@
   <div v-if="isLoading" class="spinner-border" role="status">
     <span class="visually-hidden">Loading...</span>
   </div>
-  <Image v-else :src="dataUrl" alt="Gambar Marhun" width="100" preview>
+  <div v-else class="images" v-viewer>
-    <template #indicator> Lihat Gambar </template>
+    <img :src="dataUrl" class="photo-style">
-  </Image>
+  </div>
 </template>
 
 <script>
@@ -53,3 +53,12 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.photo-style {
+  width: 100px;
+  /* border-radius: 8px; */
+  cursor: pointer;
+  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+}
+</style>

src/components/result/ResultMain.vue

@@ -92,7 +92,7 @@
       >
         <div class="grid justify-content-center">
           <div class="col-12 mb-4 text-center">
-            <i class="pi pi-slack text-8xl text-400"></i>
+            <i class="pi pi-info-circle text-8xl text-400"></i>
           </div>
           <div class="col-12 text-center">
             <span class="text-400">Tiada Data Dalam Keputusan.</span>

src/main.js

@@ -102,15 +102,13 @@ app.component('Textarea', Textarea);
 app.directive('tooltip', Tooltip);
 app.component('ScrollTop', ScrollTop);
 
-
 app.component('MazPhoneNumberInput', MazPhoneNumberInput)
 
 app.component('YouTube', YouTube)
 
-app.use(router).use(pinia).use(PrimeVue).use(VueSweetalert2).use(ToastService).mount('#app');
+app.use(router).use(pinia).use(PrimeVue).use(VueSweetalert2).use(ToastService).use(VueViewer).mount('#app');
 // app.use(router).use(store).use(PrimeVue).use(ToastService).mount('#app');
 
 // createApp(App).use(router).use(store).mount('#app')
 // createApp(Master).use(router).use(store).mount('#app')
 // createApp(App).use(router).use(store).use(useVuelidate).mount('#app')
-