Qr and movment UI/UX
This commit is contained in:
parent
0ff7592b01
commit
e1cf4fc885
@ -136,12 +136,12 @@
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div v-show="detailsVisible[movement.id]" class="col-md-12 mt-2">
|
||||
<div class="row">
|
||||
<div class="col-md-4 text-center">
|
||||
<i class="fas fa-warehouse fa-2x"></i>
|
||||
<!-- Conditionally render Start Icon -->
|
||||
<i v-if="movement.toOther !== 'On Delivery'" class="fas fa-user fa-2x"></i>
|
||||
<i v-else class="fas fa-warehouse fa-2x"></i>
|
||||
<p><strong>Start</strong></p>
|
||||
<p><strong>User:</strong> {{ movement.toUserName }}</p>
|
||||
<p><strong>Station:</strong> {{ movement.toStationName }}</p>
|
||||
@ -151,16 +151,29 @@
|
||||
<p></p>
|
||||
<i class="fas fa-arrow-right fa-2x"></i>
|
||||
<p>{{ movement.latestStatus || movement.toOther }}</p>
|
||||
<p>
|
||||
<button class="btn btn-info btn-sm ms-auto" v-on:click="remark(movement.remark)" v-if="movement.toOther !== 'On Delivery'">
|
||||
Remark
|
||||
</button>
|
||||
</p>
|
||||
<p>
|
||||
<button class="btn btn-info btn-sm ms-auto" v-on:click="consignmentNote(movement.consignmentNote)" v-if="movement.toOther !== 'On Delivery'">
|
||||
Consignment Note
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-4 text-center">
|
||||
<i class="fas fa-user fa-2x"></i>
|
||||
<p><strong>End</strong> {{ movement.latestStatus }}</p>
|
||||
<!-- Conditionally render End Icon -->
|
||||
<i v-if="movement.toOther !== 'On Delivery'" class="fas fa-warehouse fa-2x"></i>
|
||||
<i v-else class="fas fa-user fa-2x"></i>
|
||||
<p><strong>End</strong></p>
|
||||
<p><strong>User:</strong> {{ movement.lastUserName }}</p>
|
||||
<p><strong>Station:</strong> {{ movement.lastStationName }}</p>
|
||||
<p><strong>Store:</strong> {{ movement.lastStoreName }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -197,9 +210,9 @@
|
||||
</div>
|
||||
|
||||
<!-- Status -->
|
||||
<div class="d-flex flex-wrap align-items-center gap-2 flex-grow-1" style="max-width:150px; min-width:150px;">
|
||||
<div class="d-flex flex-wrap align-items-center gap-2 flex-grow-1" style="max-width:160px; min-width:160px;">
|
||||
<h4 class="fixed-labelStatus m-0 text-nowrap">Status:</h4>
|
||||
<span class="fixed-value text-truncate" style="max-width:120px;">{{ movement.latestStatus || movement.toOther }}</span>
|
||||
<span class="fixed-value text-truncate" style="max-width:90px;">{{ movement.latestStatus || movement.toOther }}</span>
|
||||
</div>
|
||||
|
||||
<!-- More Details Button -->
|
||||
@ -218,7 +231,9 @@
|
||||
<div v-show="detailsVisible[movement.id]" class="col-md-12 mt-2">
|
||||
<div class="row">
|
||||
<div class="col-md-4 text-center">
|
||||
<i class="fas fa-warehouse fa-2x"></i>
|
||||
<!-- Conditionally render Start Icon -->
|
||||
<i v-if="movement.toOther !== 'On Delivery'" class="fas fa-user fa-2x"></i>
|
||||
<i v-else class="fas fa-warehouse fa-2x"></i>
|
||||
<p><strong>Start</strong></p>
|
||||
<p><strong>User:</strong> {{ movement.toUserName }}</p>
|
||||
<p><strong>Station:</strong> {{ movement.toStationName }}</p>
|
||||
@ -228,9 +243,21 @@
|
||||
<p></p>
|
||||
<i class="fas fa-arrow-right fa-2x"></i>
|
||||
<p>{{ movement.latestStatus || movement.toOther }}</p>
|
||||
<p>
|
||||
<button class="btn btn-info btn-sm ms-auto" v-on:click="remark(movement.remark)" v-if="movement.toOther !== 'On Delivery'">
|
||||
Remark
|
||||
</button>
|
||||
</p>
|
||||
<p>
|
||||
<button class="btn btn-info btn-sm ms-auto" v-on:click="consignmentNote(movement.consignmentNote)" v-if="movement.toOther !== 'On Delivery'">
|
||||
Consignment Note
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-4 text-center">
|
||||
<i class="fas fa-user fa-2x"></i>
|
||||
<!-- Conditionally render End Icon -->
|
||||
<i v-if="movement.toOther !== 'On Delivery'" class="fas fa-warehouse fa-2x"></i>
|
||||
<i v-else class="fas fa-user fa-2x"></i>
|
||||
<p><strong>End</strong></p>
|
||||
<p><strong>User:</strong> {{ movement.lastUserName }}</p>
|
||||
<p><strong>Station:</strong> {{ movement.lastStationName }}</p>
|
||||
@ -238,12 +265,44 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="remarkModal" tabindex="-1" aria-labelledby="remarkModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="remarkModalLabel">Remark</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body" id="remarkContent">
|
||||
<!-- Remark Content Here -->
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal fade" id="consignmentModal" tabindex="-1" aria-labelledby="consignmentModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="consignmentModalLabel">Consignment Note</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body text-center">
|
||||
<img v-if="/\.(jpeg|jpg|png|gif)$/i.test(consignmentNoteUrl)" :src="consignmentNoteUrl" class="img-fluid" alt="Consignment Note Image">
|
||||
<iframe v-else-if="/\.pdf$/i.test(consignmentNoteUrl)" :src="consignmentNoteUrl" style="width:100%; height: 80vh;"></iframe>
|
||||
<a v-else class="btn btn-primary">There's no Folder or Picture</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -268,6 +327,7 @@
|
||||
historyVisible: {},
|
||||
detailsVisible: {},
|
||||
categoryVisible: {},
|
||||
consignmentNoteUrl: "",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -296,10 +356,32 @@
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
console.log("Vue app mounted!");
|
||||
this.fetchItemMovement();
|
||||
},
|
||||
methods: {
|
||||
remark(remark) {
|
||||
document.getElementById("remarkContent").innerText = remark || "No remark message provide.";
|
||||
let modal = new bootstrap.Modal(document.getElementById("remarkModal"));
|
||||
modal.show();
|
||||
},
|
||||
|
||||
consignmentNote(consignmentNote) {
|
||||
if (!consignmentNote) {
|
||||
this.consignmentNoteUrl = "No consignment note available.";
|
||||
new bootstrap.Modal(document.getElementById('consignmentModal')).show();
|
||||
return;
|
||||
}
|
||||
|
||||
// Pastikan URL betul
|
||||
this.consignmentNoteUrl = consignmentNote;
|
||||
|
||||
// Tunggu Vue update sebelum buka modal
|
||||
this.$nextTick(() => {
|
||||
new bootstrap.Modal(document.getElementById('consignmentModal')).show();
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
async fetchItemMovement() {
|
||||
try {
|
||||
const response = await fetch("/InvMainAPI/ItemMovementUser", {
|
||||
|
||||
@ -516,11 +516,11 @@
|
||||
method: 'POST',
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
if (response.ok) {
|
||||
this.thisItem = await response.json();
|
||||
|
||||
if (this.thisItem.movementId != null && this.thisItem.toOther === "On Delivery" && this.thisItem.latestStatus == null && this.thisItem.currentUserId == this.currentUserId && this.movementComplete == 0) {
|
||||
if (this.thisItem.movementId != null && this.thisItem.toOther === "On Delivery" && this.thisItem.latestStatus == null && this.thisItem.currentUserId == this.currentUserId && this.thisItem.movementComplete == 0) {
|
||||
this.displayStatus = "arrived";
|
||||
} else if (this.thisItem.movementId != null && this.thisItem.toOther === "On Delivery" && this.thisItem.latestStatus != null && this.thisItem.currentUserId == this.currentUserId && this.thisItem.latestStatus != "Ready To Deploy") {
|
||||
this.displayStatus = "return";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user