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>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr v-for="record in checkoutHistory" :key="record.log_id">
|
<tr v-for="record in displayedHistory" :key="record.log_id">
|
||||||
<td>
|
<td>
|
||||||
<router-link :to="`/usb/${record.device_id}`">
|
<router-link :to="`/usb/${record.device_id}`">
|
||||||
{{ record.device_id }}
|
{{ record.device_id }}
|
||||||
@@ -126,6 +126,20 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -163,6 +177,16 @@ const displayedRecognitions = computed(() => {
|
|||||||
return recognitions.value.slice(0, recognitionsLimit)
|
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(() => {
|
const fullName = computed(() => {
|
||||||
if (!employee.value) return ''
|
if (!employee.value) return ''
|
||||||
return `${employee.value.First_Name?.trim() || ''} ${employee.value.Last_Name?.trim() || ''}`.trim()
|
return `${employee.value.First_Name?.trim() || ''} ${employee.value.Last_Name?.trim() || ''}`.trim()
|
||||||
|
|||||||
Reference in New Issue
Block a user