Fix formatting
This commit is contained in:
@ -9,7 +9,6 @@
|
||||
<th class="p-2">Email</th>
|
||||
<th class="p-2">Date</th>
|
||||
<th class="p-2">Location</th>
|
||||
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -17,28 +16,33 @@
|
||||
<td class="p-2">{{ replay.id }}</td>
|
||||
<td class="p-2">{{ replay.user.email ?? replay.user.display_name }}</td>
|
||||
<td class="p-2">{{ replay.finished_at }}</td>
|
||||
<td class="p-2">{{ replay.user.geo ? `${replay.user.geo.city} ${replay.user.geo.subdivision}, ${replay.user.geo.region}` : 'unknown' }}</td>
|
||||
<td class="p-2">
|
||||
{{
|
||||
replay.user.geo
|
||||
? `${replay.user.geo.city} ${replay.user.geo.subdivision}, ${replay.user.geo.region}`
|
||||
: 'unknown'
|
||||
}}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="mt-4 flex flex-wrap items-center gap-2" v-if="data.meta && data.meta.links && data.meta.links.length > 1">
|
||||
<div
|
||||
class="mt-4 flex flex-wrap items-center gap-2"
|
||||
v-if="data.meta && data.meta.links && data.meta.links.length > 1"
|
||||
>
|
||||
<!-- First -->
|
||||
<Link
|
||||
v-if="firstPageUrl && !isFirstPage"
|
||||
:href="firstPageUrl"
|
||||
<Link
|
||||
v-if="firstPageUrl && !isFirstPage"
|
||||
:href="firstPageUrl"
|
||||
class="px-3 py-1 border rounded text-sm"
|
||||
>
|
||||
« First
|
||||
</Link>
|
||||
|
||||
<!-- Previous -->
|
||||
<Link
|
||||
v-if="prevPageUrl"
|
||||
:href="prevPageUrl"
|
||||
class="px-3 py-1 border rounded text-sm"
|
||||
>
|
||||
<Link v-if="prevPageUrl" :href="prevPageUrl" class="px-3 py-1 border rounded text-sm">
|
||||
‹ Prev
|
||||
</Link>
|
||||
|
||||
@ -48,9 +52,9 @@
|
||||
:is="link.url ? Link : 'span'"
|
||||
:href="link.url"
|
||||
class="px-3 py-1 border rounded text-sm"
|
||||
:class="{
|
||||
'font-bold bg-gray-300': link.active,
|
||||
'text-gray-400 cursor-not-allowed': !link.url
|
||||
:class="{
|
||||
'font-bold bg-gray-300': link.active,
|
||||
'text-gray-400 cursor-not-allowed': !link.url,
|
||||
}"
|
||||
>
|
||||
<span v-html="link.label" />
|
||||
@ -58,18 +62,14 @@
|
||||
</template>
|
||||
|
||||
<!-- Next -->
|
||||
<Link
|
||||
v-if="nextPageUrl"
|
||||
:href="nextPageUrl"
|
||||
class="px-3 py-1 border rounded text-sm"
|
||||
>
|
||||
<Link v-if="nextPageUrl" :href="nextPageUrl" class="px-3 py-1 border rounded text-sm">
|
||||
Next ›
|
||||
</Link>
|
||||
|
||||
<!-- Last -->
|
||||
<Link
|
||||
v-if="lastPageUrl && !isLastPage"
|
||||
:href="lastPageUrl"
|
||||
<Link
|
||||
v-if="lastPageUrl && !isLastPage"
|
||||
:href="lastPageUrl"
|
||||
class="px-3 py-1 border rounded text-sm"
|
||||
>
|
||||
Last »
|
||||
@ -83,12 +83,12 @@ import { computed } from 'vue'
|
||||
import { Link } from '@inertiajs/vue3'
|
||||
|
||||
const props = defineProps({
|
||||
data: Object
|
||||
data: Object,
|
||||
})
|
||||
|
||||
// Core pagination values
|
||||
const links = computed(() => props.data.meta.links || [])
|
||||
const currentIndex = computed(() => links.value.findIndex(link => link.active))
|
||||
const currentIndex = computed(() => links.value.findIndex((link) => link.active))
|
||||
|
||||
const maxVisible = 10
|
||||
const half = Math.floor(maxVisible / 2)
|
||||
@ -115,5 +115,7 @@ const nextPageUrl = computed(() => links.value[currentIndex.value + 1]?.url)
|
||||
const lastPageUrl = computed(() => links.value[links.value.length - 2]?.url) // last item is "Next »", second-last is last numbered
|
||||
|
||||
const isFirstPage = computed(() => links.value[currentIndex.value]?.label === '1')
|
||||
const isLastPage = computed(() => links.value[currentIndex.value]?.label === props.data.meta.last_page)
|
||||
const isLastPage = computed(
|
||||
() => links.value[currentIndex.value]?.label === props.data.meta.last_page
|
||||
)
|
||||
</script>
|
||||
|
Reference in New Issue
Block a user