Employee profile: cap USB checkout history with a show-more toggle
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:
@@ -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()
|
||||
|
||||
Reference in New Issue
Block a user