Fix tnc, login, photo marhun in cart

public/index.html

@@ -11,7 +11,7 @@
     @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
   </style>
   <!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
-  <title>ArrahnBid</title>
+  <title>ArrahnBid - Lelongan Atas Talian</title>
 </head>
 
 <body>

src/components/authentication/TermsAndConditions.vue

@@ -25,74 +25,56 @@
         <div class="modal-body">
           <div class="row">
             <div class="col-12 lg:col-6 paragraph-align">
+              <p>
+                Para pembida yang dihargai, anda dinasihatkan untuk memahami
+                segala terma dan syarat bidaan sebelum membuat sebarang bidaan
+                secara atas talian.
+              </p>
               <ol class="pr-3">
-                <li>Daftar secara atas talian.</li>
-                <li>Berumur 18 tahun ke atas.</li>
+                <li>Pendaftaran adalah secara atas talian.</li>
                 <li>
-                  Marhun lelongan boleh dilihat dalam sistem untuk dibida.
+                  Bidaan terbuka kepada semua warganegara berumur 18 tahun ke
+                  atas dan syarikat/koperasi yang berdaftar di Malaysia.
                 </li>
                 <li>
-                  Harga yang disenaraikan dalam web kami adalah
-                  <strong>muktamad</strong> dan tidak boleh dirunding.
+                  Nilai bidaan hendaklah genap dan penggunaan nilaian sen adalah
+                  tidak dibenarkan.
                 </li>
                 <li>
-                  Harga <strong>minimum bidaan</strong> adalah
-                  <strong>RM1.00</strong> dari Harga Asas.
+                  Waktu tamat bidaan adalah pada jam 2 petang (bergantung kepada
+                  perubahan dari masa ke semasa).
                 </li>
                 <li>
-                  <strong>Nilai bidaan hendaklah genap</strong> dan penggunaan
-                  <strong>nilaian sen adalah tidak dibenarkan.</strong>
-                </li>
-                <li>
-                  Waktu <strong>tamat lelongan</strong> adalah
-                  <strong>2 jam</strong> selepas waktu dibuka.
-                </li>
-                <li>
-                  Sebelum meningggalkan premis, sila semak dan pastikan marhun
-                  yang <strong>diterima adalah betul.</strong> Sekiranya
-                  terdapat kekurangan dan masalah
-                  <strong>setelah marhun dibawa keluar</strong> dari premis,
-                  pihak Permodalan Kelantan Berhad
-                  <strong
-                    >tidak akan bertanggungjawab dan marhun tidak boleh
-                    dikembalikan</strong
-                  >.
+                  Pembida berjaya hendaklah menyelesaikan keseluruhan amaun
+                  bidaan dan mengambil marhun pada/sebelum jam 4.00 petang.
                 </li>
                 <li>
                   Setiap bidaan atas talian yang telah dihantar tidak boleh
-                  diubah, sila pastikan nombor siri dan harga yang dibida diisi
-                  secara atas talian adalah betul, pihak kami tidak akan
-                  bertanggungjawab atas kesilapan pelanggan mengisi harga bidaan
-                  atas talian.
+                  diubah. Sila pastikan nombor siri dan harga bidaan adalah
+                  betul. Pihak kami tidak akan bertanggungjawab di atas
+                  kesilapan pelanggan mengisi harga bidaan.
                 </li>
               </ol>
             </div>
             <div class="col-12 lg:col-6 paragraph-align">
-              <ol class="pr-3" start="10">
-                <li style="text-transform: uppercase">
-                  <strong
-                    >Kaedah pembayaran melalui perbankan atas talian (Online
-                    Banking).</strong
-                  >
+              <ol class="pr-3" start="7">
+                <li>
+                  Kaedah pembayaran adalah melalui perbankan atas talian (Online
+                  Banking) jika nilaian bidaan kurang daripada RM30,000.00 dan
+                  melalui kaunter bank jika nilaian bidaan melebihi RM30,000.00.
                 </li>
                 <li>
-                  Pembayaran bidaan hendaklah diselesaikan
-                  <strong>sebelum jam 4.00</strong>
-                  petang pada hari lelongan.
-                </li>
-                <li>
-                  Sila serahkan bukti pembayaran semasa menuntut marhun lelongan
+                  Sila serahkan bukti pembayaran semasa menuntut marhun bidaan
                   (di kaunter atau melalui media elektronik sama ada emel atau
-                  whatsapp dan marhun lelong hendaklah dituntut sebelum jam 4.00
-                  petang).
+                  Whatsapp).
                 </li>
                 <li>
                   Pembida yang menang di dalam bidaan tetapi gagal melakukan
-                  pembayaran pada hari lelongan akan
-                  <strong>disenarai hitamkan.</strong>
+                  pembayaran pada masa yang telah ditetapkan akan disenarai
+                  hitamkan.
                 </li>
                 <li>
-                  Semua terma dan syarat di atas adalah tertakluk kepada pindaan
+                  Semua Terma & Syarat diatas adalah tertakluk kepada pindaan
                   dan boleh diubah dari masa ke semasa tanpa dimaklumkan kepada
                   pembida.
                 </li>
@@ -101,7 +83,11 @@
           </div>
         </div>
         <div class="modal-footer">
-          <Button data-bs-dismiss="modal" class="p-button-sm" label="Kembali"></Button>
+          <Button
+            data-bs-dismiss="modal"
+            class="p-button-sm"
+            label="Kembali"
+          ></Button>
         </div>
       </div>
     </div>

src/components/authentication/TheLogin.vue

@@ -20,6 +20,7 @@
         md:w-10
         lg:w-8
         xl:w-7
+        content-bg
       "
     >
       <div class="text-center mb-5">
@@ -211,10 +212,16 @@ export default {
     #9599e2 100%
   ),
   url("/src/assets/background_arrahn.jpg"); */
+  /* background: url("/src/assets/bg1.jpg"); */
+  background: url("/src/assets/bg2.jpg");
   background-position: center;
   background-size: cover;
 }
 
+.content-bg {
+  background: #fff9f9eb !important;
+}
+
 .logo-img {
   width: 84px;
   height: 44px;

src/components/authentication/TheRegister.vue

@@ -1,13 +1,13 @@
 <template>
   <Toast :breakpoints="{ '767px': { width: '100%', right: '0', left: '0' } }" />
+  <div class="main-container">
   <div
     class="
       flex
-      main-container
       min-h-screen
       align-items-center
       justify-content-center
-      m-5
+      p-5
     "
   >
     <div
@@ -315,6 +315,7 @@
       </div>
     </div>
   </div>
+  </div>
   <!-- <div class="container-fluid p-2">
     <div class="row justify-content-center p-5 rounded">
       <h1 class="mb-5 text-primary">Sistem Lelong</h1>
@@ -542,6 +543,12 @@ export default {
 </script>
 
 <style scoped>
+.main-container {
+  background: url("/src/assets/bg2.jpg");
+  background-position: center;
+  background-size: cover;
+}
+
 .logo-img {
   width: 84px;
   height: 44px;

src/components/layouts/TheFooter.vue

@@ -51,7 +51,7 @@
   </footer> -->
   <div class="layout-footer">
     <div class="layout-footer-left">
-      <span>Sistem ArrahnBid</span>
+      <span>ArrahnBid</span>
     </div>
 
     <div class="layout-footer-right">

src/components/list/ItemMasterImage.vue

@@ -1,23 +1,56 @@
 <template>
-  <Image :src="dataUrl" alt="Gambar Marhun" width="250" preview>
-    <template #indicator> Preview Content </template>
+  <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="250" preview>
+    <template #indicator> Lihat Gambar </template>
   </Image>
 </template>
 
 <script>
+import axios from "axios";
+
 export default {
   props: {
-    gambarMain: "",
+    norujukan: "",
+    filemarhun_id: "",
   },
   data() {
     return {
       image: "",
+      isLoading: false,
+      componentKey: 0
     };
   },
   computed: {
     dataUrl() {
-      this.image = this.gambarMain.filename;
-      return "data:image/jpeg;base64," + this.image;
+      return "data:image/png;base64, " + this.image;
+    },
+  },
+  mounted: function () {
+    this.getPhotoMarhun();
+  },
+  methods: {
+    getPhotoMarhun() {
+      this.isLoading = true;
+      axios
+        .get("/photoMarhun", {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("token"),
+          },
+          params: {
+            norujukan: this.norujukan,
+            filemarhun_id: this.filemarhun_id,
+          },
+        })
+        .then((response) => {
+          this.isLoading = false;
+          this.image = response.data;
+        })
+        .catch((error) => {
+          console.log(error);
+          this.isLoading = false;
+        });
     },
   },
 };

src/components/list/ItemMasterImageModal.vue

@@ -0,0 +1,68 @@
+<template>
+  <div v-if="isLoading" class="spinner-border" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <div v-else style="overflow-x:auto">
+    <Image :src="dataUrl" alt="Gambar Marhun" width="400" preview>
+      <template #indicator> Lihat Gambar </template>
+    </Image>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  props: {
+    norujukan: "",
+    filemarhun_id: "",
+  },
+  data() {
+    return {
+      image: "",
+      isLoading: false,
+      componentKey: 0,
+    };
+  },
+  computed: {
+    dataUrl() {
+      return "data:image/png;base64, " + this.image;
+    },
+  },
+  mounted: function () {
+    this.getPhotoMarhun();
+  },
+  methods: {
+    getPhotoMarhun() {
+      this.isLoading = true;
+      axios
+        .get("/photoMarhun", {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("token"),
+          },
+          params: {
+            norujukan: this.norujukan,
+            filemarhun_id: this.filemarhun_id,
+          },
+        })
+        .then((response) => {
+          this.isLoading = false;
+          this.image = response.data;
+        })
+        .catch((error) => {
+          console.log(error);
+          this.isLoading = false;
+        });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.product-image {
+  min-height: 200px;
+  min-width: 200px;
+  max-height: 350px;
+  max-width: 350px;
+}
+</style>

src/components/list/ListItem.vue

@@ -33,29 +33,24 @@
           :key="sag.id"
           class="col-10 sm:col-8 md:col-6 lg:col-4"
         >
-          <Card>
+          <Card class="style-card">
             <template #content>
               <div class="overflow-x-auto">
-                <div class="flex justify-content-center">
-                  <div
-                    class="flex align-items-center"
-                    style="
-                      border: 1px solid rgba(0, 0, 0, 0.125);
-                      height: 250px;
-                      width: 250px;
-                      min-height: 250px;
-                      min-width: 250px;
-                    "
-                  >
-                    <!-- <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 class="style-photo-div">
+                  <!-- <div
+                    class=""
+                    style="min-height: 180px; min-width: 255px"
+                  > -->
+                  <!-- <img :src="dataUrl" class="product-image" /> -->
+                  <item-master-image
+                    v-if="sag.filemarhun"
+                    v-bind:norujukan="sag.norujukan"
+                    v-bind:filemarhun_id="sag.filemarhun[0].id"
+                  ></item-master-image>
+                  <p v-else style="text-align: center; width: 100%">
+                    Image Unavailable
+                  </p>
+                  <!-- </div> -->
                 </div>
                 <div class="">
                   <div class="product_details">
@@ -188,12 +183,18 @@
 
         <div class="modal-body">
           <div class="grid">
-            <div class="col-12 lg:col-6" style="">
-              <item-multiple-image
+            <div class="col-12 lg:col-6 style-photo-div p-2">
+              <!-- <item-multiple-image
                 v-if="filemarhun"
                 v-bind:gambarMultiple="filemarhun"
                 v-bind:key="reloadImageComponent"
-              ></item-multiple-image>
+              ></item-multiple-image> -->
+              <item-master-image-modal
+                v-if="filemarhun"
+                v-bind:key="reloadImageComponent"
+                v-bind:norujukan="norujukan.norujukan"
+                v-bind:filemarhun_id="norujukan.filemarhun[0].id"
+              ></item-master-image-modal>
               <p
                 v-else
                 style="
@@ -477,11 +478,13 @@ import { mapGetters, mapActions } from "vuex";
 import { read } from "@popperjs/core";
 import ItemMasterImage from "./ItemMasterImage.vue";
 import ItemMultipleImage from "./ItemMultipleImage.vue";
+import ItemMasterImageModal from "./ItemMasterImageModal.vue";
 
 export default {
   components: {
     "item-master-image": ItemMasterImage,
     "item-multiple-image": ItemMultipleImage,
+    "item-master-image-modal": ItemMasterImageModal,
   },
   emits: ["reloadComponent"],
   props: {
@@ -666,4 +669,12 @@ export default {
 .disabled-bg {
   background-color: rgb(233, 236, 239);
 }
+
+.style-photo-div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 180px;
+  min-width: 255px;
+}
 </style>