Employee profile: cap USB checkout history with a show-more toggle
Some checks failed
CI / backend (push) Successful in 1m39s
CI / naming (push) Successful in 2s
CI / frontend (push) Successful in 8s
CI / migrations-mysql (push) Failing after 8s

USB Checkout History rendered every record unbounded (long table for heavy
users), inconsistent with the recognitions list right above it. Add the same
limit (10) + "Show N more" / "Show less" toggle recognitions use. Client-side
only; no API change (per-user history is small at current scale).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
cproudlock
2026-07-13 13:49:33 -04:00
parent 6d843e46e1
commit a6ebec5118

View File

@@ -115,7 +115,7 @@
</tr>
</thead>
<tbody>
<tr v-for="record in checkoutHistory" :key="record.log_id">
<tr v-for="record in displayedHistory" :key="record.log_id">
<td>
<router-link :to="`/usb/${record.device_id}`">
{{ record.device_id }}
@@ -126,6 +126,20 @@
</tr>
</tbody>
</table>
<button
v-if="checkoutHistory.length > historyLimit && !showAllHistory"
class="btn btn-secondary show-more-btn"
@click="showAllHistory = true"
>
Show {{ checkoutHistory.length - historyLimit }} more
</button>
<button
v-if="showAllHistory && checkoutHistory.length > historyLimit"
class="btn btn-secondary show-more-btn"
@click="showAllHistory = false"
>
Show less
</button>
</div>
</div>
</template>
@@ -163,6 +177,16 @@ const displayedRecognitions = computed(() => {
return recognitions.value.slice(0, recognitionsLimit)
})
const historyLimit = 10
const showAllHistory = ref(false)
const displayedHistory = computed(() => {
if (showAllHistory.value) {
return checkoutHistory.value
}
return checkoutHistory.value.slice(0, historyLimit)
})
const fullName = computed(() => {
if (!employee.value) return ''
return `${employee.value.First_Name?.trim() || ''} ${employee.value.Last_Name?.trim() || ''}`.trim()