Add status semak at galeri marhun

resources/js/components/pengurusangambar/marhun/DisplayLelongBid.vue.vue

@@ -1,8 +1,14 @@
 <template>
-    <div v-for="lelongBid in allLelongBid" v-bind:key="lelongBid">
-        <div class="item-wrapper">
-            <div class="item-main">
-                <MarhunImage v-bind:lelongBidProp="lelongBid" />
+    <div>
+        <h6>Jumlah Surat: {{ jumlahSurat }}</h6>
+        <h4 class="text-danger blink" v-if="belumSemak != 0">Belum Semak: {{ belumSemak }}</h4>
+    </div>
+    <div class="row justify-content-center">
+        <div v-for="lelongBid in allLelongBid" v-bind:key="lelongBid">
+            <div class="item-wrapper">
+                <div class="item-main" :class="{ unchecked: lelongBid.status_semak == 0 }">
+                    <MarhunImage v-bind:lelongBidProp="lelongBid" />
+                </div>
             </div>
         </div>
     </div>
@@ -19,6 +25,8 @@ const props = defineProps({
 })
 
 const allLelongBid = ref();
+const jumlahSurat = ref();
+const belumSemak = ref();
 
 function getListLelongBid() {
     axios.get("/listLelongBid", {
@@ -27,7 +35,9 @@ function getListLelongBid() {
             caw_id: props.selectedIdCawangan,
         },
     }).then((response) => {
-        allLelongBid.value = response.data;
+        allLelongBid.value = response.data.lelong_bid;
+        jumlahSurat.value = response.data.jumlah_surat;
+        belumSemak.value = response.data.belum_semak;
     }).catch((error) => { alert(error); });
 }
 
@@ -49,4 +59,18 @@ onMounted(() => {
     border-start-start-radius: 8px;
     border-start-end-radius: 8px;
 }
+
+.unchecked {
+    border: 1px solid red !important;
+}
+
+.blink {
+  animation: blinker 0.6s linear infinite;
+}
+
+@keyframes blinker {
+  50% {
+    opacity: 0;
+  }
+}
 </style>

resources/js/components/pengurusangambar/marhun/SelectBatchLelongCawangan.vue

@@ -8,7 +8,7 @@
         </select>
         <button class="btn btn-primary d-flex" @click="reloadComponent()">Kemaskini <span class="material-symbols-rounded">refresh</span></button>
     </div>
-    <div class="mt-3 row justify-content-center">
+    <div class="mt-3">
         <DisplayLelongBid v-if="pilihLelong != 'Batch Lelong'" v-bind:key="componentKeySecond"
             v-bind:selectedIdCawangan="pilihIdCawangan" v-bind:selectedBatchLelong="pilihLelong" />
     </div>

resources/js/components/pengurusangambar/marhun/SelectCawangan.vue

@@ -1,10 +1,14 @@
 <template>
     <label>Pilih Cawangan</label>
-    <select class="custom-select" @change="pilihCawangan($event)">
-        <option selected>Cawangan</option>
-        <option v-for="val in listCawangan" :key="val" v-bind:value="val.caw_id">{{ val.caw_name }}</option>
-    </select>
-    <div class="mt-3 row justify-content-center">
+    <div class="d-flex">
+        <select class="custom-select" @change="pilihCawangan($event)">
+            <option selected>Cawangan</option>
+            <option v-for="val in listCawangan" :key="val" v-bind:value="val.caw_id">{{ val.caw_name }}</option>
+        </select>
+        <button class="btn btn-primary d-flex text-nowrap" @click="reloadComponent()">Kemaskini Data Cawangan <span
+                class="material-symbols-rounded">refresh</span></button>
+    </div>
+    <div class="mt-3">
         <DisplayLelongBid v-if="pilihIdCawangan != 'Cawangan'" v-bind:key="componentKeySecond"
             v-bind:selectedIdCawangan="pilihIdCawangan" v-bind:selectedBatchLelong="props.selectedLelong" />
     </div>
@@ -39,7 +43,11 @@ function pilihCawangan(e) {
     componentKeySecond.value += 1;
 };
 
+function reloadComponent() {
+    componentKeySecond.value += 1;
+}
+
 onMounted(() => {
     getListCawangan();
 });
-</script>
+</script>