fix ui admin item movement

This commit is contained in:
ameerulrasyid 2025-03-07 23:31:07 +08:00
parent 9ed5e6b6a5
commit 02197f4c1f

View File

@ -40,6 +40,10 @@
color: brown; color: brown;
} }
.text-weird {
color: purple;
}
.ms-auto { .ms-auto {
margin-left: auto !important; /* Push Complete/Incomplete to right */ margin-left: auto !important; /* Push Complete/Incomplete to right */
@ -143,10 +147,11 @@
<!-- Movement Type --> <!-- Movement Type -->
<h3 :class="{'text-primary': movement.toOther === 'On Delivery', 'text-warning': movement.toOther === 'Return', <h3 :class="{'text-primary': movement.toOther === 'On Delivery', 'text-warning': movement.toOther === 'Return',
'text-success': movement.toStation !== null, 'text-info': movement.action === 'Assign' && movement.toStation === null, 'text-success': movement.toStation !== null, 'text-info': movement.action === 'Assign' && movement.toStation === null,
'text-numb': movement.toOther === 'Faulty' || movement.toOther === 'Calibration' || movement.toOther === 'Repair'}" 'text-numb': movement.toOther === 'Faulty' || movement.toOther === 'Calibration' || movement.toOther === 'Repair',
'text-weird': movement.action === 'Register'}"
class="flex-shrink-0 text-nowrap" style="max-width:140px; min-width:90px;"> class="flex-shrink-0 text-nowrap" style="max-width:140px; min-width:90px;">
{{ movement.toOther === 'Return' ? 'Return' : (movement.toOther === 'On Delivery' ? 'Receive' : ( movement.toStation !== null ? 'Change' : ( movement.toOther == 'Faulty' || movement.toOther == 'Calibration' || movement.toOther == 'Repair' ? movement.toOther : 'Assign'))) }} {{ movement.toOther === 'Return' ? 'Return' : (movement.toOther === 'On Delivery' ? 'Receive' : ( movement.toStation !== null ? 'Change' : ( movement.toOther == 'Faulty' || movement.toOther == 'Calibration' || movement.toOther == 'Repair' ? movement.toOther : ( movement.action == 'Register' ? 'Register' : 'Assign')))) }}
</h3> </h3>
@ -180,9 +185,9 @@
</button> </button>
<!-- Completion Status --> <!-- Completion Status -->
<h4 :class="movement.movementComplete == 1 && movement.latestStatus !== 'Ready To Deploy' ? 'text-success' : movement.toOther === 'Repair' || movement.toOther === 'Calibration' && movement.latestStatus === 'Ready To Deploy' ? 'text-success' :'text-danger'" <h4 :class="movement.action == 'Register' ? 'text-success' : movement.movementComplete == 1 && movement.latestStatus !== 'Ready To Deploy' ? 'text-success' : movement.toOther === 'Repair' || movement.toOther === 'Calibration' && movement.latestStatus === 'Ready To Deploy' ? 'text-success' :'text-danger'"
class="text-nowrap ms-3"> class="text-nowrap ms-3">
{{ movement.movementComplete == 1 && movement.latestStatus !== 'Ready To Deploy' ? 'Complete' : ( movement.toOther === 'Repair' || movement.toOther === 'Calibration' && movement.latestStatus === 'Ready To Deploy' ? 'Complete' : (movement.latestStatus === 'Ready To Deploy' ? 'Canceled' : 'Incomplete')) }} {{ movement.action == 'Register' ? 'Complete' : (movement.movementComplete == 1 && movement.latestStatus !== 'Ready To Deploy' ? 'Complete' : ( movement.toOther === 'Repair' || movement.toOther === 'Calibration' && movement.latestStatus === 'Ready To Deploy' ? 'Complete' : (movement.latestStatus === 'Ready To Deploy' ? 'Canceled' : 'Incomplete'))) }}
</h4> </h4>
</div> </div>
@ -241,11 +246,11 @@
<!-- Movement Type --> <!-- Movement Type -->
<h3 :class="{'text-primary': movement.toOther === 'On Delivery', 'text-warning': movement.toOther === 'Return', <h3 :class="{'text-primary': movement.toOther === 'On Delivery', 'text-warning': movement.toOther === 'Return',
'text-success': movement.toStation !== null, 'text-info': movement.action === 'Assign' && movement.toStation === null, 'text-success': movement.toStation !== null, 'text-info': movement.action === 'Assign' && movement.toStation === null,
'text-numb': movement.toOther === 'Faulty' || movement.toOther === 'Calibration' || movement.toOther === 'Repair'}" 'text-numb': movement.toOther === 'Faulty' || movement.toOther === 'Calibration' || movement.toOther === 'Repair',
'text-weird': movement.action === 'Register'}"
class="flex-shrink-0 text-nowrap" style="max-width:140px; min-width:90px;"> class="flex-shrink-0 text-nowrap" style="max-width:140px; min-width:90px;">
{{ movement.toOther === 'Return' ? 'Return' : (movement.toOther === 'On Delivery' ? 'Receive' : ( movement.toStation !== null ? 'Change' : ( movement.toOther == 'Faulty' || movement.toOther == 'Calibration' || movement.toOther == 'Repair' ? movement.toOther : 'Assign'))) }} {{ movement.toOther === 'Return' ? 'Return' : (movement.toOther === 'On Delivery' ? 'Receive' : ( movement.toStation !== null ? 'Change' : ( movement.toOther == 'Faulty' || movement.toOther == 'Calibration' || movement.toOther == 'Repair' ? movement.toOther : ( movement.action == 'Register' ? 'Register' : 'Assign')))) }}
</h3> </h3>
<!-- Send Date --> <!-- Send Date -->
@ -278,9 +283,9 @@
</button> </button>
<!-- Completion Status --> <!-- Completion Status -->
<h4 :class="movement.movementComplete == 1 && movement.latestStatus !== 'Ready To Deploy' ? 'text-success' : movement.toOther === 'Repair' || movement.toOther === 'Calibration' && movement.latestStatus === 'Ready To Deploy' ? 'text-success' :'text-danger'" <h4 :class="movement.action == 'Register' ? 'text-success' : movement.movementComplete == 1 && movement.latestStatus !== 'Ready To Deploy' ? 'text-success' : movement.toOther === 'Repair' || movement.toOther === 'Calibration' && movement.latestStatus === 'Ready To Deploy' ? 'text-success' :'text-danger'"
class="text-nowrap ms-3"> class="text-nowrap ms-3">
{{ movement.movementComplete == 1 && movement.latestStatus !== 'Ready To Deploy' ? 'Complete' : ( movement.toOther === 'Repair' || movement.toOther === 'Calibration' && movement.latestStatus === 'Ready To Deploy' ? 'Complete' : (movement.latestStatus === 'Ready To Deploy' ? 'Canceled' : 'Incomplete')) }} {{ movement.action == 'Register' ? 'Complete' : (movement.movementComplete == 1 && movement.latestStatus !== 'Ready To Deploy' ? 'Complete' : ( movement.toOther === 'Repair' || movement.toOther === 'Calibration' && movement.latestStatus === 'Ready To Deploy' ? 'Complete' : (movement.latestStatus === 'Ready To Deploy' ? 'Canceled' : 'Incomplete'))) }}
</h4> </h4>
</div> </div>
@ -364,10 +369,11 @@
<div class="col-md-12 d-flex flex-wrap align-items-center gap-3 p-2 border-bottom"> <div class="col-md-12 d-flex flex-wrap align-items-center gap-3 p-2 border-bottom">
<h3 :class="{'text-primary': movement.toOther === 'On Delivery', 'text-warning': movement.toOther === 'Return', <h3 :class="{'text-primary': movement.toOther === 'On Delivery', 'text-warning': movement.toOther === 'Return',
'text-success': movement.toStation !== null, 'text-info': movement.action === 'Assign' && movement.toStation === null, 'text-success': movement.toStation !== null, 'text-info': movement.action === 'Assign' && movement.toStation === null,
'text-numb': movement.toOther === 'Faulty' || movement.toOther === 'Calibration' || movement.toOther === 'Repair'}" 'text-numb': movement.toOther === 'Faulty' || movement.toOther === 'Calibration' || movement.toOther === 'Repair',
'text-weird': movement.action === 'Register'}"
class="flex-shrink-0 text-nowrap" style="max-width:140px; min-width:90px;"> class="flex-shrink-0 text-nowrap" style="max-width:140px; min-width:90px;">
{{ movement.toOther === 'Return' ? 'Return' : (movement.toOther === 'On Delivery' ? 'Receive' : ( movement.toStation !== null ? 'Change' : ( movement.toOther == 'Faulty' || movement.toOther == 'Calibration' || movement.toOther == 'Repair' ? movement.toOther : 'Assign'))) }} {{ movement.toOther === 'Return' ? 'Return' : (movement.toOther === 'On Delivery' ? 'Receive' : ( movement.toStation !== null ? 'Change' : ( movement.toOther == 'Faulty' || movement.toOther == 'Calibration' || movement.toOther == 'Repair' ? movement.toOther : ( movement.action == 'Register' ? 'Register' : 'Assign')))) }}
</h3> </h3>
@ -401,9 +407,9 @@
</button> </button>
<!-- Completion Status --> <!-- Completion Status -->
<h4 :class="movement.movementComplete == 1 && movement.latestStatus !== 'Ready To Deploy' ? 'text-success' : movement.toOther === 'Repair' || movement.toOther === 'Calibration' && movement.latestStatus === 'Ready To Deploy' ? 'text-success' :'text-danger'" <h4 :class="movement.action == 'Register' ? 'text-success' : movement.movementComplete == 1 && movement.latestStatus !== 'Ready To Deploy' ? 'text-success' : movement.toOther === 'Repair' || movement.toOther === 'Calibration' && movement.latestStatus === 'Ready To Deploy' ? 'text-success' :'text-danger'"
class="text-nowrap ms-3"> class="text-nowrap ms-3">
{{ movement.movementComplete == 1 && movement.latestStatus !== 'Ready To Deploy' ? 'Complete' : ( movement.toOther === 'Repair' || movement.toOther === 'Calibration' && movement.latestStatus === 'Ready To Deploy' ? 'Complete' : (movement.latestStatus === 'Ready To Deploy' ? 'Canceled' : 'Incomplete')) }} {{ movement.action == 'Register' ? 'Complete' : (movement.movementComplete == 1 && movement.latestStatus !== 'Ready To Deploy' ? 'Complete' : ( movement.toOther === 'Repair' || movement.toOther === 'Calibration' && movement.latestStatus === 'Ready To Deploy' ? 'Complete' : (movement.latestStatus === 'Ready To Deploy' ? 'Canceled' : 'Incomplete'))) }}
</h4> </h4>
</div> </div>
@ -457,10 +463,11 @@
<!-- Movement Type --> <!-- Movement Type -->
<h3 :class="{'text-primary': movement.toOther === 'On Delivery', 'text-warning': movement.toOther === 'Return', <h3 :class="{'text-primary': movement.toOther === 'On Delivery', 'text-warning': movement.toOther === 'Return',
'text-success': movement.toStation !== null, 'text-info': movement.action === 'Assign' && movement.toStation === null, 'text-success': movement.toStation !== null, 'text-info': movement.action === 'Assign' && movement.toStation === null,
'text-numb': movement.toOther === 'Faulty' || movement.toOther === 'Calibration' || movement.toOther === 'Repair'}" 'text-numb': movement.toOther === 'Faulty' || movement.toOther === 'Calibration' || movement.toOther === 'Repair',
'text-weird': movement.action === 'Register'}"
class="flex-shrink-0 text-nowrap" style="max-width:140px; min-width:90px;"> class="flex-shrink-0 text-nowrap" style="max-width:140px; min-width:90px;">
{{ movement.toOther === 'Return' ? 'Return' : (movement.toOther === 'On Delivery' ? 'Receive' : ( movement.toStation !== null ? 'Change' : ( movement.toOther == 'Faulty' || movement.toOther == 'Calibration' || movement.toOther == 'Repair' ? movement.toOther : 'Assign'))) }} {{ movement.toOther === 'Return' ? 'Return' : (movement.toOther === 'On Delivery' ? 'Receive' : ( movement.toStation !== null ? 'Change' : ( movement.toOther == 'Faulty' || movement.toOther == 'Calibration' || movement.toOther == 'Repair' ? movement.toOther : ( movement.action == 'Register' ? 'Register' : 'Assign')))) }}
</h3> </h3>
@ -494,9 +501,9 @@
</button> </button>
<!-- Completion Status --> <!-- Completion Status -->
<h4 :class="movement.movementComplete == 1 && movement.latestStatus !== 'Ready To Deploy' ? 'text-success' : movement.toOther === 'Repair' || movement.toOther === 'Calibration' && movement.latestStatus === 'Ready To Deploy' ? 'text-success' :'text-danger'" <h4 :class="movement.action == 'Register' ? 'text-success' : movement.movementComplete == 1 && movement.latestStatus !== 'Ready To Deploy' ? 'text-success' : movement.toOther === 'Repair' || movement.toOther === 'Calibration' && movement.latestStatus === 'Ready To Deploy' ? 'text-success' :'text-danger'"
class="text-nowrap ms-3"> class="text-nowrap ms-3">
{{ movement.movementComplete == 1 && movement.latestStatus !== 'Ready To Deploy' ? 'Complete' : ( movement.toOther === 'Repair' || movement.toOther === 'Calibration' && movement.latestStatus === 'Ready To Deploy' ? 'Complete' : (movement.latestStatus === 'Ready To Deploy' ? 'Canceled' : 'Incomplete')) }} {{ movement.action == 'Register' ? 'Complete' : (movement.movementComplete == 1 && movement.latestStatus !== 'Ready To Deploy' ? 'Complete' : ( movement.toOther === 'Repair' || movement.toOther === 'Calibration' && movement.latestStatus === 'Ready To Deploy' ? 'Complete' : (movement.latestStatus === 'Ready To Deploy' ? 'Canceled' : 'Incomplete'))) }}
</h4> </h4>
</div> </div>
@ -642,7 +649,6 @@
}, },
mounted() { mounted() {
this.fetchItem(); this.fetchItem();
console.log("Filtered Station:", this.filteredStation);
}, },
computed: { computed: {
@ -658,6 +664,8 @@
return acc; return acc;
}, {}); }, {});
console.log(grouped);
// Sort items from newest to oldest & filter them // Sort items from newest to oldest & filter them
for (let itemId in grouped) { for (let itemId in grouped) {
let movements = grouped[itemId].movements let movements = grouped[itemId].movements
@ -689,120 +697,61 @@
}, },
groupedByStation() { groupedByStation() {
// let grouped = {};
// this.items.forEach((movement) => {
// if (movement.toStation !== null) { let groupedByItem = this.items.reduce((acc, movement) => {
// let station = movement.toStationName; if (!acc[movement.uniqueID]) {
// let itemId = movement.uniqueID; acc[movement.uniqueID] = {
uniqueID: movement.uniqueID,
movements: [],
};
}
acc[movement.uniqueID].movements.push(movement);
return acc;
}, {});
// if (!grouped[station]) { let groupedByStation = {};
// grouped[station] = {};
// }
// if (!grouped[station][itemId]) { Object.keys(groupedByItem).forEach(itemId => {
// grouped[station][itemId] = { uniqueID: itemId, movements: [] }; let movements = groupedByItem[itemId].movements
// } .sort((a, b) => b.id - a.id); // Newest → Oldest
// grouped[station][itemId].movements.push(movement); // Ensure at least 3 movements before stopping
// } let stopIndex = movements.slice(3).findIndex(m =>
m.toOther === 'Return' && m.movementComplete == 1
);
// if (movement.lastStation !== null) { // Remove older movements
// let station = movement.lastStationName; if (stopIndex !== -1) {
// let itemId = movement.uniqueID; stopIndex += 3; // Adjust index since we sliced after the first 3
movements = movements.slice(0, stopIndex);
}
// if (!grouped[station]) { if (movements.length > 0) {
// grouped[station] = {}; let latestMovement = movements[0];
// } let station = latestMovement.lastStationName || latestMovement.toStationName || "Not Assigned";
// if (!grouped[station][itemId]) { if (!groupedByStation[station]) {
// grouped[station][itemId] = { uniqueID: itemId, movements: [] }; groupedByStation[station] = {};
// } }
// grouped[station][itemId].movements.push(movement); groupedByStation[station][itemId] = { uniqueID: itemId, movements };
// } }
// if (movement.lastStation == null && movement.toStation == null) { });
// let station = "Self Assigned"; // 4⃣ **Sort stations & move 'Unassign Station' to last**
// let itemId = movement.uniqueID; let sortedKeys = Object.keys(groupedByStation).sort((a, b) => {
if (a === "Unassign Station") return 1;
if (b === "Unassign Station") return -1;
return a.localeCompare(b);
});
// if (!grouped[station]) { let sortedGrouped = {};
// grouped[station] = {}; sortedKeys.forEach(key => {
// } sortedGrouped[key] = groupedByStation[key];
});
// if (!grouped[station][itemId]) { return sortedGrouped;
// grouped[station][itemId] = { uniqueID: itemId, movements: [] };
// }
// grouped[station][itemId].movements.push(movement);
// }
// });
// Sort stations and move "Unassign Station" to the last position
// let sortedKeys = Object.keys(grouped).sort((a, b) => {
// if (a === "Unassign Station") return 1;
// if (b === "Unassign Station") return -1;
// return a.localeCompare(b);
// });
// let sortedGrouped = {};
// sortedKeys.forEach((key) => {
// sortedGrouped[key] = grouped[key];
// });
// return sortedGrouped;
// <----UPDATE RETURN ITEM ONCE ---->
let grouped = {};
// Process each movement and store only the latest assigned station
this.items.forEach((movement) => {
let station = null;
if (movement.lastStation !== null) {
station = movement.lastStationName;// Latest assigned station
} else if (movement.toStation !== null) {
station = movement.toStationName;// If no new station, use last known station
} else {
station = "Self Assigned";// No station history
}
let itemId = movement.uniqueID;
// Ensure only the latest assigned station keeps the item
if (!grouped[itemId]) {
grouped[itemId] = { uniqueID: itemId, station: station, movements: [] };
}
// Always update the latest station for this item
grouped[itemId].station = station;
grouped[itemId].movements.push(movement);
});
// Convert to station-based grouping
let stationGrouped = {};
Object.values(grouped).forEach(({ uniqueID, station, movements }) => {
if (!stationGrouped[station]) {
stationGrouped[station] = {};
}
stationGrouped[station][uniqueID] = { uniqueID, movements };
});
// Sort stations and move "Unassign Station" last
let sortedKeys = Object.keys(stationGrouped).sort((a, b) => {
if (a === "Unassign Station") return 1;
if (b === "Unassign Station") return -1;
return a.localeCompare(b);
});
let sortedGrouped = {};
sortedKeys.forEach((key) => {
sortedGrouped[key] = stationGrouped[key];
});
return sortedGrouped;
}, },
@ -995,7 +944,7 @@
if(this.currentRole == "Super Admin"){ if(this.currentRole == "Super Admin"){
this.items = await response.json(); this.items = await response.json();
// console.log(this.items); console.log(this.items);
this.initAllTables(); this.initAllTables();
} else { } else {
@ -1245,7 +1194,6 @@
// }, // },
handleSorting() { handleSorting() {
this.renderTables(); this.renderTables();
console.log(this.sortBy);
}, },
renderTables() { renderTables() {
// if (this.sortBy === "logs") { // if (this.sortBy === "logs") {
@ -1424,8 +1372,9 @@
this.historyVisible = {}; this.historyVisible = {};
}, },
toggleHistory(itemId) { toggleHistory(itemId) {
this.historyVisible = {};
this.historyVisible[itemId] = !this.historyVisible[itemId]; this.historyVisible[itemId] = !this.historyVisible[itemId];
// this.historyVisible = {};
}, },