fix table itemmovement master

This commit is contained in:
ameerulrasyid 2025-03-06 12:19:42 +08:00
parent 48636528b1
commit ea54070d54
2 changed files with 53 additions and 40 deletions

View File

@ -36,6 +36,11 @@
color: greenyellow; color: greenyellow;
} }
.text-numb {
color: brown;
}
.ms-auto { .ms-auto {
margin-left: auto !important; /* Push Complete/Incomplete to right */ margin-left: auto !important; /* Push Complete/Incomplete to right */
} }
@ -137,10 +142,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">
<!-- 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,
class="flex-shrink-0 text-nowrap" style="max-width:90px; min-width:90px;"> 'text-numb': movement.toOther === 'Faulty' || movement.toOther === 'Calibration' || movement.toOther === 'Repair'}"
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' : '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 : 'Assign'))) }}
</h3> </h3>
@ -174,9 +180,9 @@
</button> </button>
<!-- Completion Status --> <!-- Completion Status -->
<h4 :class="movement.movementComplete == 1 && movement.latestStatus !== 'Ready To Deploy' ? 'text-success' : 'text-danger'" <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'"
class="text-nowrap ms-3"> class="text-nowrap ms-3">
{{ movement.movementComplete == 1 && movement.latestStatus !== 'Ready To Deploy' ? 'Complete' : (movement.latestStatus === 'Ready To Deploy' ? 'Canceled' : 'Incomplete') }} {{ 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>
@ -210,12 +216,13 @@
</div> </div>
<div class="col-md-4 text-center"> <div class="col-md-4 text-center">
<!-- Conditionally render End Icon --> <!-- Conditionally render End Icon -->
<i v-if="movement.toOther !== 'On Delivery'" class="fas fa-warehouse fa-2x"></i> <i v-if="movement.lastStation" class="fas fa-map-marker-alt"></i>
<i v-else-if="movement.toOther !== 'On Delivery'" class="fas fa-warehouse fa-2x"></i>
<i v-else class="fas fa-user 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 v-if="movement.lastUser !== null"><strong>User:</strong> {{ movement.lastUserName }}</p>
<p><strong>Station:</strong> {{ movement.lastStationName }}</p> <p v-if="movement.lastStation !== null"><strong>Station:</strong> {{ movement.lastStationName }}</p>
<p><strong>Store:</strong> {{ movement.lastStoreName }}</p> <p v-if="movement.lastStore !== null"><strong>Store:</strong> {{ movement.lastStoreName }}</p>
</div> </div>
</div> </div>
</div> </div>
@ -233,10 +240,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">
<!-- 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,
class="flex-shrink-0 text-nowrap" style="max-width:90px; min-width:90px;"> 'text-numb': movement.toOther === 'Faulty' || movement.toOther === 'Calibration' || movement.toOther === 'Repair'}"
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' : '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 : 'Assign'))) }}
</h3> </h3>
@ -270,9 +278,9 @@
</button> </button>
<!-- Completion Status --> <!-- Completion Status -->
<h4 :class="movement.movementComplete == 1 && movement.latestStatus !== 'Ready To Deploy' ? 'text-success' : 'text-danger'" <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'"
class="text-nowrap ms-3"> class="text-nowrap ms-3">
{{ movement.movementComplete == 1 && movement.latestStatus !== 'Ready To Deploy' ? 'Complete' : (movement.latestStatus === 'Ready To Deploy' ? 'Canceled' : 'Incomplete') }} {{ 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>
@ -284,6 +292,7 @@
<!-- Conditionally render Start Icon --> <!-- Conditionally render Start Icon -->
<i v-if="movement.toStation" class="fas fa-map-marker-alt"></i> <i v-if="movement.toStation" class="fas fa-map-marker-alt"></i>
<i v-else-if="movement.toOther !== 'On Delivery'" class="fas fa-user fa-2x"></i> <i v-else-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>
@ -306,12 +315,13 @@
</div> </div>
<div class="col-md-4 text-center"> <div class="col-md-4 text-center">
<!-- Conditionally render End Icon --> <!-- Conditionally render End Icon -->
<i v-if="movement.toOther !== 'On Delivery'" class="fas fa-warehouse fa-2x"></i> <i v-if="movement.lastStation" class="fas fa-map-marker-alt"></i>
<i v-else-if="movement.toOther !== 'On Delivery'" class="fas fa-warehouse fa-2x"></i>
<i v-else class="fas fa-user 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 v-if="movement.lastUser !== null"><strong>User:</strong> {{ movement.lastUserName }}</p>
<p><strong>Station:</strong> {{ movement.lastStationName }}</p> <p v-if="movement.lastStation !== null"><strong>Station:</strong> {{ movement.lastStationName }}</p>
<p><strong>Store:</strong> {{ movement.lastStoreName }}</p> <p v-if="movement.lastStore !== null"><strong>Store:</strong> {{ movement.lastStoreName }}</p>
</div> </div>
</div> </div>
</div> </div>
@ -353,10 +363,11 @@
<strong>Latest Movement</strong> <strong>Latest Movement</strong>
<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,
class="flex-shrink-0 text-nowrap" style="max-width:90px; min-width:90px;"> 'text-numb': movement.toOther === 'Faulty' || movement.toOther === 'Calibration' || movement.toOther === 'Repair'}"
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' : '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 : 'Assign'))) }}
</h3> </h3>
@ -390,9 +401,9 @@
</button> </button>
<!-- Completion Status --> <!-- Completion Status -->
<h4 :class="movement.movementComplete == 1 && movement.latestStatus !== 'Ready To Deploy' ? 'text-success' : 'text-danger'" <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'"
class="text-nowrap ms-3"> class="text-nowrap ms-3">
{{ movement.movementComplete == 1 && movement.latestStatus !== 'Ready To Deploy' ? 'Complete' : (movement.latestStatus === 'Ready To Deploy' ? 'Canceled' : 'Incomplete') }} {{ 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>
@ -445,10 +456,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">
<!-- 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,
class="flex-shrink-0 text-nowrap" style="max-width:90px; min-width:90px;"> 'text-numb': movement.toOther === 'Faulty' || movement.toOther === 'Calibration' || movement.toOther === 'Repair'}"
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' : '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 : 'Assign'))) }}
</h3> </h3>
@ -482,9 +494,9 @@
</button> </button>
<!-- Completion Status --> <!-- Completion Status -->
<h4 :class="movement.movementComplete == 1 && movement.latestStatus !== 'Ready To Deploy' ? 'text-success' : 'text-danger'" <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'"
class="text-nowrap ms-3"> class="text-nowrap ms-3">
{{ movement.movementComplete == 1 && movement.latestStatus !== 'Ready To Deploy' ? 'Complete' : (movement.latestStatus === 'Ready To Deploy' ? 'Canceled' : 'Incomplete') }} {{ 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>
@ -680,7 +692,7 @@
grouped[station][itemId].movements.push(movement); grouped[station][itemId].movements.push(movement);
} }
else if (movement.lastStation == null || movement.toStation == null) { if (movement.lastStation == null && movement.toStation == null) {
let station = "Self Assigned"; let station = "Self Assigned";
let itemId = movement.uniqueID; let itemId = movement.uniqueID;

View File

@ -208,6 +208,7 @@
currentUser: null, currentUser: null,
currentRequestId: "", currentRequestId: "",
rejectremark: "", rejectremark: "",
approveremark: "",
} }
}, },
mounted() { mounted() {