From 2a16571c03d9bc30c89adf0434c1a0b3c9d0213a Mon Sep 17 00:00:00 2001
From: The4thLaw <The4thLaw@users.noreply.github.com>
Date: Sun, 15 Sep 2024 18:31:06 +0200
Subject: [PATCH] Finished migration of pagination to a composable

Refs #156
---
 .../src/components/MetaSeriesCard.vue         | 10 +--
 .../src/components/PublisherCard.vue          | 43 +++------
 .../src/components/TextIndex.vue              | 47 +++++-----
 .../src/composables/pagination.ts             |  4 +
 .../src/mixins/paginated-text.js              | 90 -------------------
 5 files changed, 41 insertions(+), 153 deletions(-)
 delete mode 100644 source/demyo-vue-frontend/src/mixins/paginated-text.js

diff --git a/source/demyo-vue-frontend/src/components/MetaSeriesCard.vue b/source/demyo-vue-frontend/src/components/MetaSeriesCard.vue
index a6aaa807..2d1fddaa 100644
--- a/source/demyo-vue-frontend/src/components/MetaSeriesCard.vue
+++ b/source/demyo-vue-frontend/src/components/MetaSeriesCard.vue
@@ -53,23 +53,21 @@
 </template>
 
 <script setup lang="ts">
-import { emitTypes, usePagination } from '@/composables/pagination'
+import { useBasicPagination } from '@/composables/pagination'
 import { useReaderStore } from '@/stores/reader'
 
-interface Props {
+const props = defineProps<{
 	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`)
 
-const emit = defineEmits(emitTypes)
 const readerStore = useReaderStore()
 const itemsPerPage = computed(() => readerStore.currentReader.configuration.subItemsInCardIndex)
 
 const { pageCount, paginatedItems, previousPage, nextPage, hasPreviousPage, hasNextPage }
-	= usePagination(albums, () => '#', emit, itemsPerPage)
+	= useBasicPagination(albums, itemsPerPage)
 </script>
 
 <style lang="scss">
diff --git a/source/demyo-vue-frontend/src/components/PublisherCard.vue b/source/demyo-vue-frontend/src/components/PublisherCard.vue
index fcf395a3..09299c4e 100644
--- a/source/demyo-vue-frontend/src/components/PublisherCard.vue
+++ b/source/demyo-vue-frontend/src/components/PublisherCard.vue
@@ -34,43 +34,22 @@
 	</v-card>
 </template>
 
-<script>
-import paginatedTextMixin from '@/mixins/paginated-text'
+<script setup lang="ts">
+import { useBasicPagination } from '@/composables/pagination'
 import { useReaderStore } from '@/stores/reader'
-import { mapState } from 'pinia'
 
-export default {
-	name: 'PublisherCard',
+const props = defineProps<{
+	publisher: Publisher
+}>()
 
-	mixins: [paginatedTextMixin],
+const collections = computed(() => props.publisher.collections)
+const hasCollections = computed(() => collections.value && collections.value.length)
 
-	props: {
-		publisher: {
-			type: null,
-			required: true
-		}
-	},
+const readerStore = useReaderStore()
+const itemsPerPage = computed(() => readerStore.currentReader.configuration.subItemsInCardIndex)
 
-	computed: {
-		// Having these allows us to reuse the logic from paginated-text
-		itemsToPaginate() {
-			return this.publisher.collections || []
-		},
-
-		...mapState(useReaderStore, {
-			itemsPerPage: store => store.currentReader.configuration.subItemsInCardIndex
-		}),
-
-		hasCollections() {
-			return this.publisher.collections && this.publisher.collections.length > 0
-		}
-	},
-
-	methods: {
-		// Having this allows us to reuse the logic from paginated-text
-		firstLetterExtractor: () => '#'
-	}
-}
+const { paginatedItems, pageCount, hasNextPage, hasPreviousPage, nextPage, previousPage }
+	= useBasicPagination(collections, itemsPerPage)
 </script>
 
 <style lang="scss">
diff --git a/source/demyo-vue-frontend/src/components/TextIndex.vue b/source/demyo-vue-frontend/src/components/TextIndex.vue
index 62964aca..a075f865 100644
--- a/source/demyo-vue-frontend/src/components/TextIndex.vue
+++ b/source/demyo-vue-frontend/src/components/TextIndex.vue
@@ -1,6 +1,6 @@
 <template>
 	<div
-		ref="keyTarget"
+		ref="key-target"
 		v-touch="{
 			left: nextPage,
 			right: previousPage
@@ -44,39 +44,36 @@
 			:length="pageCount"
 			total-visible="10"
 			class="my-2"
-			@update:modelValue="$emit('page-change')"
+			@update:modelValue="emit('page-change')"
 		/>
 	</div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { emitTypes, usePagination } from '@/composables/pagination'
 import { focusElement } from '@/helpers/dom'
-import paginatedTextMixin from '@/mixins/paginated-text'
+import { useTemplateRef } from 'vue'
 
-export default {
-	name: 'TextIndex',
+interface Props {
+	items?: AbstractModel[]
+	splitByFirstLetter?: boolean,
+	firstLetterExtractor: (item: AbstractModel) => string,
+	compact?: boolean
+}
+const props = withDefaults(defineProps<Props>(), {
+	items: () => [],
+	splitByFirstLetter: true,
+	firstLetterExtractor: () => '#',
+	compact: false
+})
 
-	mixins: [paginatedTextMixin],
+const keyTarget = useTemplateRef('key-target')
+onMounted(() => focusElement(keyTarget.value))
 
-	props: {
-		splitByFirstLetter: {
-			type: Boolean,
-			default: true
-		},
-		firstLetterExtractor: {
-			type: Function,
-			default: () => '#'
-		},
-		compact: {
-			type: Boolean,
-			default: false
-		}
-	},
+const emit = defineEmits(emitTypes)
 
-	mounted() {
-		focusElement(this.$refs.keyTarget)
-	}
-}
+const { pageCount, currentPage, paginatedItems, groupedItems, previousPage, nextPage }
+	= usePagination(toRef(() => props.items), props.firstLetterExtractor, emit, null)
 </script>
 
 <style lang="scss">
diff --git a/source/demyo-vue-frontend/src/composables/pagination.ts b/source/demyo-vue-frontend/src/composables/pagination.ts
index 1484a8bc..7d86442c 100644
--- a/source/demyo-vue-frontend/src/composables/pagination.ts
+++ b/source/demyo-vue-frontend/src/composables/pagination.ts
@@ -38,6 +38,10 @@ interface PaginationState<T extends AbstractModel> {
 	nextPage: () => void
 }
 
+export function useBasicPagination<T extends AbstractModel>(items: Ref<T[]>, itemsPerPage: Ref<number> | null = null): PaginationState<T> {
+	return usePagination(items, () => '#', () => {}, itemsPerPage)
+}
+
 export function usePagination<T extends AbstractModel>(items: Ref<T[]>, firstLetterExtractor: (item: T) => string,
 	emit: (evt: string) => void, itemsPerPage: Ref<number> | null): PaginationState<T> {
 	const currentPage = ref(1)
diff --git a/source/demyo-vue-frontend/src/mixins/paginated-text.js b/source/demyo-vue-frontend/src/mixins/paginated-text.js
deleted file mode 100644
index 1ad03661..00000000
--- a/source/demyo-vue-frontend/src/mixins/paginated-text.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import { useReaderStore } from '@/stores/reader'
-import deburr from 'lodash/deburr'
-import groupBy from 'lodash/groupBy'
-import { mapState } from 'pinia'
-
-/**
- * This mixin abstracts common features needed for splittable text pagination.
- *
- * The extractFirstLetter method must be defined by the component.
- */
-export default {
-	props: {
-		items: {
-			type: Array,
-			required: false,
-			default: null
-		}
-	},
-
-	mounted() {
-		if (!(this.items || this.itemsToPaginate)) {
-			console.error('This component has neither items nor itemsToPaginate')
-		}
-	},
-
-	data() {
-		return {
-			currentPage: 1
-		}
-	},
-
-	computed: {
-		...mapState(useReaderStore, {
-			itemsPerPage: store => store.currentReader.configuration.pageSizeForText
-		}),
-
-		// Allows overriding the list of items
-		itemsToPaginate() {
-			return this.items
-		},
-
-		paginatedItems() {
-			return this.itemsToPaginate.slice(
-				(this.currentPage - 1) * this.itemsPerPage, this.currentPage * this.itemsPerPage)
-		},
-
-		groupedItems() {
-			return groupBy(this.paginatedItems, (i) => this.extractFirstLetter(i))
-		},
-
-		pageCount() {
-			return Math.ceil(this.itemsToPaginate.length / this.itemsPerPage)
-		},
-
-		hasPreviousPage() {
-			return this.currentPage > 1
-		},
-
-		hasNextPage() {
-			return this.currentPage < this.pageCount
-		}
-	},
-
-	methods: {
-		previousPage() {
-			if (this.hasPreviousPage) {
-				this.currentPage--
-				this.$emit('page-change')
-			}
-		},
-
-		nextPage() {
-			if (this.hasNextPage) {
-				this.currentPage++
-				this.$emit('page-change')
-			}
-		},
-
-		extractFirstLetter(item) {
-			/** @type String */
-			const first = deburr(this.firstLetterExtractor(item)).toUpperCase()
-			if (first.match(/[A-Za-z]/)) {
-				return first
-			} else if (first.match(/[0-9]/)) {
-				return '0-9'
-			}
-			return '#'
-		}
-	}
-}