Fix formatting

This commit is contained in:
Mike Conrad
2025-05-21 16:36:54 -04:00
parent f5aceea6fa
commit 47a520e945
13 changed files with 129 additions and 125 deletions

View File

@ -4,10 +4,10 @@
import '../css/app.css'
import { createSSRApp, h } from 'vue'
import type { DefineComponent } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import { createInertiaApp, Link } from '@inertiajs/vue3'
import { resolvePageComponent } from '@adonisjs/inertia/helpers'
const appName = import.meta.env.VITE_APP_NAME || 'AdonisJS'
Vue.component('inertia-link', Link)
createInertiaApp({
progress: { color: '#5468FF' },

View File

@ -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>