Read image marhun

public/themes/lara-light-blue/theme.css

@@ -5130,13 +5130,13 @@
   border-radius: 6px;
 }
 .p-inline-message.p-inline-message-info {
-  background: #eaf0f9;
-  border: solid #2f68c5;
+  background: #e9e9ff;
+  border: solid #696cff;
   border-width: 0px;
-  color: #2f68c5;
+  color: #696cff;
 }
 .p-inline-message.p-inline-message-info .p-inline-message-icon {
-  color: #2f68c5;
+  color: #696cff;
 }
 .p-inline-message.p-inline-message-success {
   background: #e4f8f0;

src/components/list/ItemMasterImage.vue

@@ -0,0 +1,33 @@
+<template>
+  <Image :src="dataUrl" alt="Gambar Marhun" width="250" preview>
+    <template #indicator> Preview Content </template>
+  </Image>
+</template>
+
+<script>
+export default {
+  props: {
+    gambarMain: "",
+  },
+  data() {
+    return {
+      image: "",
+    };
+  },
+  computed: {
+    dataUrl() {
+      this.image = this.gambarMain.filename;
+      return "data:image/jpeg;base64," + this.image;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.product-image {
+  min-height: 200px;
+  min-width: 200px;
+  max-height: 350px;
+  max-width: 350px;
+}
+</style>

src/components/list/ItemMultipleImage.vue

@@ -0,0 +1,163 @@
+<template>
+  <Galleria
+    ref="galleria"
+    :value="images"
+    v-model:activeIndex="activeIndex"
+    :numVisible="5"
+    containerStyle="max-width: 640px"
+    :containerClass="galleriaClass"
+    :showThumbnails="showThumbnails"
+    :showItemNavigators="true"
+    :showItemNavigatorsOnHover="true"
+    :circular="true"
+  >
+    <template #item="slotProps">
+      <div class="grid">
+        <img
+          :src="'data:image/jpeg;base64, ' + slotProps.item.filename"
+          :style="[
+            {
+              width: !fullScreen ? '100%' : '',
+              display: !fullScreen ? 'block' : '',
+            },
+          ]"
+        />
+        <!-- <div class="text-lg text-center">{{ slotProps.item.lelongbidmarhun_id }}</div> -->
+      </div>
+    </template>
+    <!-- <template #thumbnail="slotProps">
+      <div class="grid grid-nogutter justify-content-center">
+        <img
+          :src="slotProps.item.thumbnailImageSrc"
+          :alt="slotProps.item.alt"
+          style="display: block"
+        />
+      </div>
+    </template> -->
+    <!-- <template #footer>
+      <div class="custom-galleria-footer text-end">
+        <Button icon="pi pi-list" @click="onThumbnailButtonClick" />
+        <span v-if="images" class="title-container">
+          <span>{{ activeIndex + 1 }}/{{ images.length }}</span>
+          <span class="title">{{ images[activeIndex].title }}</span>
+          <span>{{ images[activeIndex].alt }}</span>
+        </span>
+        <Button
+          :icon="fullScreenIcon"
+          @click="toggleFullScreen"
+          class="fullscreen-button"
+        />
+      </div>
+    </template> -->
+  </Galleria>
+</template>
+
+<script>
+export default {
+  props: {
+    gambarMultiple: "",
+  },
+  data() {
+    return {
+      images: this.gambarMultiple,
+      activeIndex: 0,
+      showThumbnails: false,
+      fullScreen: false,
+    };
+  },
+  methods: {
+    toggleFullScreen() {
+      if (this.fullScreen) {
+        this.closeFullScreen();
+      } else {
+        this.openFullScreen();
+      }
+    },
+    onFullScreenChange() {
+      this.fullScreen = !this.fullScreen;
+    },
+    openFullScreen() {
+      let elem = this.$refs.galleria.$el;
+      if (elem.requestFullscreen) {
+        elem.requestFullscreen();
+      } else if (elem.mozRequestFullScreen) {
+        /* Firefox */
+        elem.mozRequestFullScreen();
+      } else if (elem.webkitRequestFullscreen) {
+        /* Chrome, Safari & Opera */
+        elem.webkitRequestFullscreen();
+      } else if (elem.msRequestFullscreen) {
+        /* IE/Edge */
+        elem.msRequestFullscreen();
+      }
+    },
+    closeFullScreen() {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen();
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+      }
+    },
+    bindDocumentListeners() {
+      document.addEventListener("fullscreenchange", this.onFullScreenChange);
+      document.addEventListener("mozfullscreenchange", this.onFullScreenChange);
+      document.addEventListener(
+        "webkitfullscreenchange",
+        this.onFullScreenChange
+      );
+      document.addEventListener("msfullscreenchange", this.onFullScreenChange);
+    },
+    unbindDocumentListeners() {
+      document.removeEventListener("fullscreenchange", this.onFullScreenChange);
+      document.removeEventListener(
+        "mozfullscreenchange",
+        this.onFullScreenChange
+      );
+      document.removeEventListener(
+        "webkitfullscreenchange",
+        this.onFullScreenChange
+      );
+      document.removeEventListener(
+        "msfullscreenchange",
+        this.onFullScreenChange
+      );
+    },
+  },
+  computed: {
+    // dataUrl() {
+    //   this.image = this.gambarMain.filename;
+    //   return "data:image/jpeg;base64," + this.image;
+    // },
+    galleriaClass() {
+      return ["custom-galleria", { fullscreen: this.fullScreen }];
+    },
+    fullScreenIcon() {
+      return `pi ${
+        this.fullScreen ? "pi-window-minimize" : "pi-window-maximize"
+      }`;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.product-image {
+  width: 450px;
+}
+
+@media screen and (max-width: 1199px) {
+  .product-image {
+    width: 280px;
+  }
+}
+
+@media screen and (max-width: 992px) {
+  .product-image {
+    width: 250px;
+  }
+}
+</style>

src/components/list/ListItem.vue

@@ -46,7 +46,16 @@
                       min-height: 250px;
                       min-width: 250px;
                     "
-                  ></div>
+                  >
+                    <!-- <img :src="dataUrl" class="product-image" /> -->
+                    <item-master-image
+                      v-if="sag.filemarhun"
+                      v-bind:gambarMain="sag.filemarhun[0]"
+                    ></item-master-image>
+                    <p v-else style="text-align: center; width: 100%">
+                      Image Unavailable
+                    </p>
+                  </div>
                 </div>
                 <div class="">
                   <div class="product_details">
@@ -179,20 +188,26 @@
 
         <div class="modal-body">
           <div class="grid">
-            <div
-              class="col-12 lg:col-6"
-              style="
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                border: 1px solid rgba(0, 0, 0, 0.125);
-                min-height: 300px;
-                min-width: 300px;
-                max-height: 600px;
-                max-width: 600px;
-              "
-            >
-              -gambar marhun-
+            <div class="col-12 lg:col-6" style="">
+              <item-multiple-image
+                v-if="filemarhun"
+                v-bind:gambarMultiple="filemarhun"
+                v-bind:key="reloadImageComponent"
+              ></item-multiple-image>
+              <p
+                v-else
+                style="
+                  text-align: center;
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                  border: 1px solid rgba(0, 0, 0, 0.125);
+                  min-width: 300px;
+                  max-width: 300px;
+                "
+              >
+                Image Unavailable
+              </p>
             </div>
             <div class="col-12 text-center lg:col-6">
               <div class="overflow-x-auto">
@@ -457,8 +472,15 @@ import axios from "axios";
 import useVuelidate from "@vuelidate/core";
 import { required, integer, numeric, minValue } from "@vuelidate/validators";
 import { mapGetters, mapActions } from "vuex";
+import { read } from "@popperjs/core";
+import ItemMasterImage from "./ItemMasterImage.vue";
+import ItemMultipleImage from "./ItemMultipleImage.vue";
 
 export default {
+  components: {
+    "item-master-image": ItemMasterImage,
+    "item-multiple-image": ItemMultipleImage,
+  },
   emits: ["reloadComponent"],
   props: {
     selectedCawangan: { type: String },
@@ -477,8 +499,11 @@ export default {
       sags: [],
       norujukan: "",
       marhuns: "",
+      filemarhun: "",
+      reloadImageComponent: 0,
       componentKey: 0,
       tambahan: "",
+      // image: "",
       form: {
         user_id: localStorage.getItem("id"),
         lelongbid_id: "",
@@ -500,6 +525,9 @@ export default {
         return this.sags.length;
       }
     },
+    dataUrl() {
+      // return "data:image/jpeg;base64," + this.image;
+    },
     ...mapGetters(["allCarts"]),
   },
   mounted: function () {
@@ -523,6 +551,9 @@ export default {
         .then((response) => {
           console.log(response);
           if (response.data.success == true) {
+            // let readImage = response.data.message.lelongbid[7].filemarhun[0].filename;
+            // this.image = readImage;
+            // console.log(this.image);
             this.status = true;
             this.lelong_details = response.data.message;
             this.response = response.data.message.lelongbid;
@@ -548,9 +579,10 @@ export default {
       //     // console.log("tiada");
       //   }
       // });
-
       this.norujukan = norujukan;
       this.marhuns = this.norujukan.lelongbidmarhun;
+      this.reloadImageComponent += 1;
+      this.filemarhun = this.norujukan.filemarhun;
       this.form.lelongbid_id = this.norujukan.id;
       this.tambahan = "";
       this.form.hargabida = "";
@@ -632,11 +664,4 @@ export default {
 .disabled-bg {
   background-color: rgb(233, 236, 239);
 }
-
-.product-image {
-  min-height: 200px;
-  min-width: 200px;
-  max-height: 350px;
-  max-width: 350px;
-}
 </style>

src/main.js

@@ -41,6 +41,8 @@ import Avatar from 'primevue/avatar';
 import TabView from 'primevue/tabview';
 import TabPanel from 'primevue/tabpanel';
 import Tag from 'primevue/tag';
+import Image from 'primevue/image';
+import Galleria from 'primevue/galleria';
 
 import TheTemplate from './components/layouts/TheTemplate.vue'
 import BaseCard from './components/base/BaseCard.vue'
@@ -77,6 +79,8 @@ app.component('Toolbar', Toolbar);
 app.component('TabView', TabView);
 app.component('TabPanel', TabPanel);
 app.component('Tag', Tag);
+app.component('Image', Image);
+app.component('Galleria', Galleria);
 
 app.use(router).use(store).use(PrimeVue).use(VueSweetalert2).use(ToastService).mount('#app');
 // app.use(router).use(store).use(PrimeVue).use(ToastService).mount('#app');