update movement user view only
This commit is contained in:
parent
788ab1aa5a
commit
ebf8008b22
@ -15,6 +15,56 @@
|
||||
.table td img {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
|
||||
.text-true {
|
||||
color: green;
|
||||
}
|
||||
|
||||
.text-false {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: blue; /* Warna asal untuk 'Receive' */
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
color: orange; /* Warna oren untuk 'Return' */
|
||||
}
|
||||
|
||||
.fixed-label {
|
||||
margin-left:100px;
|
||||
font-weight: bold;
|
||||
min-width: 120px; /* Ensure labels have same width */
|
||||
}
|
||||
|
||||
.fixed-labelStatus {
|
||||
margin-left: 25px;
|
||||
font-weight: bold;
|
||||
min-width: 20px; /* Ensure labels have same width */
|
||||
}
|
||||
.fixed-value {
|
||||
min-width: 150px;
|
||||
margin-right:-20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.gap-4 {
|
||||
gap: 30px; /* Increase spacing between Send Date and Receive Date */
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 1rem !important; /* Ensure Status is closer to its value */
|
||||
}
|
||||
|
||||
.me-5 {
|
||||
margin-right: 2rem !important; /* Move Receive/Return further from Send Date */
|
||||
}
|
||||
|
||||
.ms-auto {
|
||||
margin-left: auto !important; /* Push Complete/Incomplete to right */
|
||||
}
|
||||
</style>
|
||||
@await Html.PartialAsync("~/Areas/Inventory/Views/_InventoryPartialUser.cshtml");
|
||||
|
||||
@ -49,40 +99,67 @@
|
||||
</div>
|
||||
|
||||
<div v-if="sortBy === 'item'">
|
||||
<div v-for="(group, itemId) in groupedByItem" :key="itemId" class="row card">
|
||||
<div v-for="(group, itemId) in getGroupedByItem()" :key="itemId" class="row card">
|
||||
<div class="card-header">
|
||||
<h2>Item Name: {{ group.productName }}</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div v-for="movement in group.movements" :key="movement.id" class="movement-row">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<strong>{{ movement.toOther === 'On Delivery' ? 'Receive' : 'Return' }}:</strong>
|
||||
| <strong>Send Date:</strong> {{ movement.sendDate }}
|
||||
| <strong>Receive Date:</strong> {{ movement.receiveDate || 'Not arrive' }}
|
||||
| <strong>Status:</strong> {{ movement.latestStatus || movement.toOther }}
|
||||
| <button class="btn btn-info btn-sm" v-on:click="toggleDetails(movement.id)">More Details</button>
|
||||
<div class="col-md-12 d-flex align-items-center flex-wrap">
|
||||
|
||||
<h3 :class="movement.toOther === 'On Delivery' ? 'text-primary' : 'text-warning'" class="me-5">
|
||||
{{ movement.toOther === 'On Delivery' ? 'Receive' : 'Return' }}
|
||||
</h3>
|
||||
|
||||
<div class="d-flex align-items-center gap-4">
|
||||
<h4 class="fixed-label">Send Date:</h4>
|
||||
<span class="fixed-value">{{ movement.sendDate }}</span>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center gap-4">
|
||||
<h4 class="fixed-label">Receive Date:</h4>
|
||||
<span class="fixed-value">{{ movement.receiveDate || 'Not arrive' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<h4 class="fixed-labelStatus">Action:</h4>
|
||||
<span class="fixed-value">{{ movement.action}}</span>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<h4 class="fixed-labelStatus">Status:</h4>
|
||||
<span class="fixed-value">{{ movement.latestStatus || movement.toOther }}</span>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-info btn-sm me-3" v-on:click="toggleDetails(movement.id)">More Details</button>
|
||||
|
||||
<h4 :class="movement.movementComplete == 1 ? 'text-success' : 'text-danger'" class="ms-auto">
|
||||
{{ movement.movementComplete == 1 ? 'Complete' : 'Incomplete' }}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Details Section -->
|
||||
<div v-if="movement.showDetails" class="details-row mt-2">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-4 text-center">
|
||||
<i class="fas fa-warehouse fa-2x"></i>
|
||||
<p>Information: {{ movement.toOther }}</p>
|
||||
<p>User: {{ movement.toUser }}</p>
|
||||
<p>Station: {{ movement.toStationName }}</p>
|
||||
<p>Store: {{ movement.toStoreName }}</p>
|
||||
<p><strong>Information:</strong> {{ movement.toOther }}</p>
|
||||
<p><strong>User:</strong> {{ movement.toUserName }}</p>
|
||||
<p><strong>Station:</strong> {{ movement.toStationName }}</p>
|
||||
<p><strong>Store:</strong> {{ movement.toStoreName }}</p>
|
||||
</div>
|
||||
<div class="col-md-4 text-center">
|
||||
<i class="fas fa-arrow-right fa-2x"></i>
|
||||
<p>{{ movement.latestStatus || movement.toOther }}</p>
|
||||
</div>
|
||||
<div class="col-md-4 text-center">
|
||||
<i class="fas fa-user fa-2x"></i>
|
||||
<p>Information: {{ movement.toOther }}</p>
|
||||
<p>User: {{ movement.lastUser }}</p>
|
||||
<p>Station: {{ movement.lastStationName }}</p>
|
||||
<p>Store: {{ movement.lastStoreName }}</p>
|
||||
<p><strong>Information:</strong> {{ movement.latestStatus }}</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>
|
||||
@ -90,6 +167,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -111,8 +189,12 @@
|
||||
sortBy: 'all', // Sorting option
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
groupedByItem() {
|
||||
mounted() {
|
||||
console.log("Vue app mounted!");
|
||||
this.fetchItemMovement();
|
||||
},
|
||||
methods: {
|
||||
getGroupedByItem() {
|
||||
return this.itemMovements.reduce((acc, movement) => {
|
||||
if (!acc[movement.itemId]) {
|
||||
acc[movement.itemId] = {
|
||||
@ -120,15 +202,10 @@
|
||||
movements: []
|
||||
};
|
||||
}
|
||||
acc[movement.itemId].movements.push({...movement, showDetails: false});
|
||||
acc[movement.itemId].movements.push(movement); // Jangan reset showDetails
|
||||
return acc;
|
||||
}, {});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.fetchItemMovement();
|
||||
},
|
||||
methods: {
|
||||
async fetchItemMovement() {
|
||||
try {
|
||||
const response = await fetch('/InvMainAPI/ItemMovementUser', {
|
||||
@ -155,7 +232,7 @@
|
||||
if (this.itemMovementCompleteDatatable) {
|
||||
this.itemMovementCompleteDatatable.clear().destroy();
|
||||
}
|
||||
|
||||
this.$forceUpdate();
|
||||
this.renderTables();
|
||||
}
|
||||
catch (error) {
|
||||
@ -234,12 +311,13 @@
|
||||
},
|
||||
|
||||
toggleDetails(id) {
|
||||
const movement = this.itemMovements.find(m => m.id === id);
|
||||
const movement = this.itemMovements.find(mov => mov.id === id);
|
||||
if (movement) {
|
||||
movement.showDetails = !movement.showDetails;
|
||||
movement.showDetails = !movement.showDetails; // Toggle value
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
resetForm() {
|
||||
this.itemMovement = '';
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user