Migrated MetaSeriesCard to composition API

Refs #156

source/demyo-vue-frontend/src/components/MetaSeriesCard.vue

@@ -52,44 +52,24 @@
 	</v-card>
 </template>
 
-<script>
-import paginatedTextMixin from '@/mixins/paginated-text'
+<script setup lang="ts">
+import { emitTypes, usePagination } from '@/composables/pagination'
 import { useReaderStore } from '@/stores/reader'
-import { mapState } from 'pinia'
 
-export default {
-	name: 'MetaSeriesCard',
-
-	mixins: [paginatedTextMixin],
-
-	props: {
-		meta: {
-			type: null,
-			required: true
-		}
-	},
-
-	computed: {
-		// Having these allows us to reuse the logic from paginated-text
-		itemsToPaginate() {
-			return this.meta.albums || []
-		},
-
-		...mapState(useReaderStore, {
-			itemsPerPage: store => store.currentReader.configuration.subItemsInCardIndex
-		}),
+interface Props {
+	meta: MetaSeries
+}
+const props = defineProps<Props>()
+const albums = computed(() => props.meta.albums || [])
+const cardLink = computed(() =>
+	props.meta.series ? `/series/${props.meta.series.id}/view` : `/albums/${props.meta.album.id}/view`)
 
-		cardLink() {
-			return this.meta.series
-				? `/series/${this.meta.series.id}/view` : `/albums/${this.meta.album.id}/view`
-		}
-	},
+const emit = defineEmits(emitTypes)
+const readerStore = useReaderStore()
+const itemsPerPage = computed(() => readerStore.currentReader.configuration.subItemsInCardIndex)
 
-	methods: {
-		// Having this allows us to reuse the logic from paginated-text
-		firstLetterExtractor: () => '#'
-	}
-}
+const { pageCount, paginatedItems, previousPage, nextPage, hasPreviousPage, hasNextPage }
+	= usePagination(albums, () => '#', emit, itemsPerPage)
 </script>
 
 <style lang="scss">

source/demyo-vue-frontend/src/composables/pagination.ts

@@ -19,7 +19,7 @@ function extractFirstLetter<T extends AbstractModel>(item: T, firstLetterExtract
 
 export const emitTypes = ['page-change']
 
-interface PaginationState {
+interface PaginationState<T> {
 	/** The current page number. */
 	currentPage: Ref<number>
 	/** The total page count. */
@@ -29,17 +29,17 @@ interface PaginationState {
 	/** Whether a next page is available. */
 	hasNextPage: Ref<boolean>
 	/** The items, paginated. */
-	paginatedItems: Ref<AbstractModel[]>
+	paginatedItems: Ref<T[]>
 	/** The items, paginated and grouped by first letter if relevant. */
-	groupedItems: Ref<Dictionary<AbstractModel[]>>
+	groupedItems: Ref<Dictionary<T[]>>
 	/** Navigate to the previous page if possible. */
 	previousPage: () => void
 	/** Navigate to the next page if possible. */
 	nextPage: () => void
 }
 
 export function usePagination<T extends AbstractModel>(items: Ref<T[]>, firstLetterExtractor: (item: T) => string,
-	emit: (evt: string) => void, itemsPerPage: Ref<number> | null): PaginationState {
+	emit: (evt: string) => void, itemsPerPage: Ref<number> | null): PaginationState<T> {
 	const currentPage = ref(1)
 
 	const readerStore = useReaderStore()

source/demyo-vue-frontend/src/pages/types/models.d.ts

@@ -1,10 +1,13 @@
+// TODO: generate part of this
 type HexColor = `#${string}`
 
 interface AbstractModel {
 	id?: number
 	identifyingName: string
 }
 
+interface AbstractPricedModel extends AbstractModel {}
+
 interface AbstractNamedModel extends AbstractModel {
 	name: string
 }
@@ -19,6 +22,11 @@ interface AbstractLegalEntity extends AbstractBasicLegalEntity {
 	logo: Image
 }
 
+interface Album extends AbstractPricedModel {
+	title: string
+	wishlist: boolean
+}
+
 interface Binding extends AbstractNamedModel {}
 
 interface Collection extends AbstractLegalEntity {
@@ -27,8 +35,16 @@ interface Collection extends AbstractLegalEntity {
 
 interface Image extends AbstractModel {}
 
+interface MetaSeries {
+	album: Album
+	series: Series
+	albums: Album[]
+}
+
 interface Publisher extends AbstractLegalEntity {}
 
+interface Series extends AbstractNamedModel {}
+
 interface ApplicationConfiguration {
 	currency: string
 	language: string