83caaa7b7c
- Fix equipment badge barcode not rendering (loading race condition) - Fix printer QR code not rendering on initial load (same race condition) - Add model image to equipment badge via imageurl from Model table - Fix white-on-white machine number text on badge, tighten barcode spacing - Add PaginationBar component used across all list pages - Split monolithic router into per-plugin route modules - Fix 25 GET API endpoints returning 401 (jwt_required -> optional=True) - Align list page columns across Equipment, PCs, and Network pages - Add print views: EquipmentBadge, PrinterQRSingle, PrinterQRBatch, USBLabelBatch - Add PC Relationships report, migration docs, and CLAUDE.md project guide - Various plugin model, API, and frontend refinements Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
84 lines
1.9 KiB
Vue
84 lines
1.9 KiB
Vue
<template>
|
|
<div class="pagination-bar" v-if="totalPages > 1 || showPerPage">
|
|
<div class="pagination-info">
|
|
<select
|
|
v-if="showPerPage"
|
|
:value="perPage"
|
|
class="perpage-select"
|
|
@change="$emit('update:perPage', Number($event.target.value))"
|
|
>
|
|
<option v-for="opt in perPageOptions" :key="opt" :value="opt">
|
|
{{ opt }} per page
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="pagination" v-if="totalPages > 1">
|
|
<button :disabled="page === 1" @click="$emit('update:page', page - 1)">
|
|
Prev
|
|
</button>
|
|
|
|
<button
|
|
v-for="p in visiblePages"
|
|
:key="p"
|
|
:class="{ active: p === page, ellipsis: p === '...' }"
|
|
:disabled="p === '...'"
|
|
@click="p !== '...' && $emit('update:page', p)"
|
|
>
|
|
{{ p }}
|
|
</button>
|
|
|
|
<button :disabled="page === totalPages" @click="$emit('update:page', page + 1)">
|
|
Next
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps({
|
|
page: { type: Number, required: true },
|
|
totalPages: { type: Number, required: true },
|
|
perPage: { type: Number, default: 20 },
|
|
showPerPage: { type: Boolean, default: true }
|
|
})
|
|
|
|
defineEmits(['update:page', 'update:perPage'])
|
|
|
|
const perPageOptions = [10, 20, 50, 100]
|
|
|
|
const visiblePages = computed(() => {
|
|
const total = props.totalPages
|
|
const current = props.page
|
|
const pages = []
|
|
|
|
if (total <= 7) {
|
|
for (let i = 1; i <= total; i++) pages.push(i)
|
|
return pages
|
|
}
|
|
|
|
pages.push(1)
|
|
|
|
if (current > 3) {
|
|
pages.push('...')
|
|
}
|
|
|
|
const start = Math.max(2, current - 1)
|
|
const end = Math.min(total - 1, current + 1)
|
|
|
|
for (let i = start; i <= end; i++) {
|
|
pages.push(i)
|
|
}
|
|
|
|
if (current < total - 2) {
|
|
pages.push('...')
|
|
}
|
|
|
|
pages.push(total)
|
|
|
|
return pages
|
|
})
|
|
</script>
|