117 lines
3.5 KiB
Vue
117 lines
3.5 KiB
Vue
<template>
|
|
<CardSetImportModal
|
|
:visible="importModalVisible"
|
|
@update:visible="args => importModalVisible = args"
|
|
/>
|
|
<DataTable
|
|
tableStyle="min-width: 50rem"
|
|
dataKey="id"
|
|
paginator
|
|
lazy
|
|
selectionMode="single"
|
|
:value="sets"
|
|
:loading="loading"
|
|
:first="first"
|
|
:rows="5"
|
|
:rowsPerPageOptions="[5, 10, 20, 50]"
|
|
:totalRecords="totalRecords"
|
|
paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
|
|
currentPageReportTemplate="{first} to {last} of {totalPages} page(s)"
|
|
@page="handlePaging"
|
|
@sort="handleSorting"
|
|
>
|
|
<template #header>
|
|
<div class="flex justify-end">
|
|
<Button type="button" size="small" label="Import" icon="pi pi-download" @click="importModalVisible = true"/>
|
|
</div>
|
|
</template>
|
|
<Column header="Image">
|
|
<template #body>
|
|
<Image alt="Image" preview class="h-64">
|
|
<template #previewicon>
|
|
<i class="pi pi-search"></i>
|
|
</template>
|
|
<template #image>
|
|
<div class="overflow-hidden">
|
|
<img
|
|
src="https://comicbook.com/wp-content/uploads/sites/4/2024/11/YuGiOh-Early-Days-Collection.png?resize=2000,1125"
|
|
alt="image" width="650" height="650"/>
|
|
</div>
|
|
</template>
|
|
<template #preview="slotProps">
|
|
<!--suppress TypeScriptUnresolvedReference -->
|
|
<img
|
|
src="https://comicbook.com/wp-content/uploads/sites/4/2024/11/YuGiOh-Early-Days-Collection.png?resize=2000,1125"
|
|
alt="preview"
|
|
:style="slotProps.style"
|
|
/>
|
|
</template>
|
|
</Image>
|
|
</template>
|
|
</Column>
|
|
<Column field="name" header="Name">
|
|
<template #body="slotProps">
|
|
<p class="font-bold">
|
|
{{ slotProps.data.name }}
|
|
</p>
|
|
</template>
|
|
</Column>
|
|
<Column header="No. of Regional Sets">
|
|
<template #body>
|
|
N/A
|
|
</template>
|
|
</Column>
|
|
<template #footer> In total there are {{ sets ? sets.length : 0 }} Card Sets</template>
|
|
</DataTable>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {type SetDto, SetService} from "@/api/openapi";
|
|
import {inject, onMounted, ref, type Ref} from "vue";
|
|
import {SetServiceKey} from "@/main.ts";
|
|
import type {DataTablePageEvent, DataTableSortEvent} from "primevue";
|
|
|
|
const importModalVisible: Ref<boolean> = ref(false);
|
|
const setService: SetService = inject(SetServiceKey) as SetService;
|
|
const loading: Ref<boolean> = ref(true);
|
|
const sets: Ref<SetDto[]> = ref([])
|
|
const page: Ref<number> = ref(0);
|
|
const pageSize = ref(10);
|
|
const pageCount: Ref<number> = ref(0);
|
|
const totalRecords: Ref<number> = ref(0);
|
|
const first = ref(0);
|
|
|
|
|
|
const fetchCardSetPage = async (page: number, pageSize: number): Promise<void> => {
|
|
loading.value = true;
|
|
const setPage = (await setService.getCardSetPage({
|
|
name: null,
|
|
page: page,
|
|
pageSize: pageSize
|
|
}
|
|
)).data
|
|
|
|
sets.value = setPage.content
|
|
pageCount.value = setPage.totalPages!!
|
|
totalRecords.value = setPage.totalRecords!!
|
|
loading.value = false;
|
|
}
|
|
|
|
const handlePaging = async (e: DataTablePageEvent) => {
|
|
page.value = e.page;
|
|
pageSize.value = e.rows
|
|
await fetchCardSetPage(page.value, pageSize.value)
|
|
}
|
|
|
|
const handleSorting = (_: DataTableSortEvent) => {
|
|
console.log('sort')
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await fetchCardSetPage(page.value, pageSize.value)
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |