catalyx/PSTW_CentralizeSystem
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Qr and movment UI/UX

Browse Source
This commit is contained in:
ArifHilmi 2025-02-27 22:12:45 +08:00
parent 0ff7592b01
commit e1cf4fc885
2 changed files with 94 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
Areas/Inventory/Views/ItemMovement/ItemMovementUser.cshtml
View File

@ -136,12 +136,12 @@
</h4> </h4>
</div> </div>
<div v-show="detailsVisible[movement.id]" class="col-md-12 mt-2"> <div v-show="detailsVisible[movement.id]" class="col-md-12 mt-2">
<div class="row"> <div class="row">
<div class="col-md-4 text-center"> <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>Start</strong></p>
<p><strong>User:</strong> {{ movement.toUserName }}</p> <p><strong>User:</strong> {{ movement.toUserName }}</p>
<p><strong>Station:</strong> {{ movement.toStationName }}</p> <p><strong>Station:</strong> {{ movement.toStationName }}</p>
@ -151,16 +151,29 @@
<p></p> <p></p>
<i class="fas fa-arrow-right fa-2x"></i> <i class="fas fa-arrow-right fa-2x"></i>
<p>{{ movement.latestStatus || movement.toOther }}</p> <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>
<div class="col-md-4 text-center"> <div class="col-md-4 text-center">
<i class="fas fa-user fa-2x"></i> <!-- Conditionally render End Icon -->
<p><strong>End</strong> {{ movement.latestStatus }}</p> <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>User:</strong> {{ movement.lastUserName }}</p>
<p><strong>Station:</strong> {{ movement.lastStationName }}</p> <p><strong>Station:</strong> {{ movement.lastStationName }}</p>
<p><strong>Store:</strong> {{ movement.lastStoreName }}</p> <p><strong>Store:</strong> {{ movement.lastStoreName }}</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@ -197,9 +210,9 @@
</div> </div>
<!-- Status --> <!-- 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> <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> </div>
<!-- More Details Button --> <!-- More Details Button -->
@ -218,7 +231,9 @@
<div v-show="detailsVisible[movement.id]" class="col-md-12 mt-2"> <div v-show="detailsVisible[movement.id]" class="col-md-12 mt-2">
<div class="row"> <div class="row">
<div class="col-md-4 text-center"> <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>Start</strong></p>
<p><strong>User:</strong> {{ movement.toUserName }}</p> <p><strong>User:</strong> {{ movement.toUserName }}</p>
<p><strong>Station:</strong> {{ movement.toStationName }}</p> <p><strong>Station:</strong> {{ movement.toStationName }}</p>
@ -228,9 +243,21 @@
<p></p> <p></p>
<i class="fas fa-arrow-right fa-2x"></i> <i class="fas fa-arrow-right fa-2x"></i>
<p>{{ movement.latestStatus || movement.toOther }}</p> <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>
<div class="col-md-4 text-center"> <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>End</strong></p>
<p><strong>User:</strong> {{ movement.lastUserName }}</p> <p><strong>User:</strong> {{ movement.lastUserName }}</p>
<p><strong>Station:</strong> {{ movement.lastStationName }}</p> <p><strong>Station:</strong> {{ movement.lastStationName }}</p>
@ -238,12 +265,44 @@
</div> </div>
</div> </div>
</div> </div>
</div> </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> </div>
@ -268,6 +327,7 @@
historyVisible: {}, historyVisible: {},
detailsVisible: {}, detailsVisible: {},
categoryVisible: {}, categoryVisible: {},
consignmentNoteUrl: "",
}; };
}, },
computed: { computed: {
@ -296,10 +356,32 @@
}, },
}, },
mounted() { mounted() {
console.log("Vue app mounted!");
this.fetchItemMovement(); this.fetchItemMovement();
}, },
methods: { 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() { async fetchItemMovement() {
try { try {
const response = await fetch("/InvMainAPI/ItemMovementUser", { const response = await fetch("/InvMainAPI/ItemMovementUser", {

2
Areas/Inventory/Views/ItemMovement/QrUser.cshtml
View File

@ -520,7 +520,7 @@
if (response.ok) { if (response.ok) {
this.thisItem = await response.json(); 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"; 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") { } 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"; this.displayStatus = "return";