feat: also display pagination at the top bayang#183

rluetzner · Jan 22, 2025 · 4d14bf6 · 4d14bf6
1 parent 04e0bfe
commit 4d14bf6
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 18 deletions.
diff --git a/src/jelu-ui/src/components/AuthorBooks.vue b/src/jelu-ui/src/components/AuthorBooks.vue
@@ -35,7 +35,7 @@ const author: Ref<Author> = ref({name: ""})
 const authorBooks: Ref<Array<Book>> = ref([]);
 const authorEdit: Ref<boolean> = ref(false)
 
-const { total, page, pageAsNumber, perPage, updatePage, getPageIsLoading, updatePageLoading } = usePagination()
+const { total, page, pageAsNumber, perPage, updatePage, getPageIsLoading, updatePageLoading, pageCount } = usePagination()
 
 const { sortQuery, sortOrder, sortBy, sortOrderUpdated } = useSort('title,asc')
 
@@ -163,8 +163,8 @@ getBooks()
         >
           {{ t('sorting.series') }}
         </o-radio>
-    </div>
-    <div class="field">
+      </div>
+      <div class="field">
         <o-radio
           v-model="sortBy"
           native-value="publishedDate"
@@ -338,7 +338,7 @@ getBooks()
       </div>
     </div>
   </div>
-  <div class="flex flex-row justify-between mt-4">
+  <div class="flex flex-row justify-between mt-4 mb-2">
     <o-button
       variant="success"
       outlined
@@ -357,7 +357,15 @@ getBooks()
     </h2>
     <div />
   </div>
-  <div class="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 gap-2 justify-center justify-items-center justify-self-center">
+  <o-pagination
+    v-if="pageCount > 1"
+    v-model:current="pageAsNumber"
+    :total="total"
+    order="centered"
+    :per-page="perPage"
+    @change="updatePage"
+  />
+  <div class="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 gap-2 justify-center justify-items-center justify-self-center mt-2">
     <div
       v-for="book in convertedBooks"
       :key="book.book.id"

diff --git a/src/jelu-ui/src/components/BookList.vue b/src/jelu-ui/src/components/BookList.vue
@@ -21,7 +21,7 @@ useTitle('Jelu | ' + t('nav.my_books'))
 
 const books: Ref<Array<UserBook>> = ref([]);
 
-const { total, page, pageAsNumber, perPage, updatePage, getPageIsLoading, updatePageLoading } = usePagination()
+const { total, page, pageAsNumber, perPage, updatePage, getPageIsLoading, updatePageLoading, pageCount } = usePagination()
 
 const { sortQuery, sortOrder, sortBy, sortOrderUpdated } = useSort('lastReadingEventDate,desc')
 
@@ -339,7 +339,7 @@ try {
       </div>
     </template>
   </sort-filter-bar-vue>
-  <div class="flex flex-row justify-between">
+  <div class="flex flex-row justify-between mb-2">
     <div class="flex flex-row gap-1 order-last sm:order-first">
       <o-button
         variant="success"
@@ -388,9 +388,17 @@ try {
     </h2>
     <div />
   </div>
+  <o-pagination
+    v-if="books.length > 0 && pageCount > 1"
+    :current="pageAsNumber"
+    :total="total"
+    order="centered"
+    :per-page="perPage"
+    @change="updatePage"
+  />
   <div
     v-if="books.length > 0"
-    class="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 gap-0 my-3 shrink-0 grow-0"
+    class="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 gap-0 my-3 shrink-0 grow-0 mt-2"
   >
     <TransitionGroup name="list">
       <div

diff --git a/src/jelu-ui/src/components/History.vue b/src/jelu-ui/src/components/History.vue
@@ -18,7 +18,7 @@ useTitle('Jelu | ' + t('nav.history'))
 
 dayjs.extend(localizedFormat)
 
-const { total, page, pageAsNumber, perPage, updatePage, getPageIsLoading, updatePageLoading } = usePagination()
+const { total, page, pageAsNumber, perPage, updatePage, getPageIsLoading, updatePageLoading, pageCount } = usePagination()
 
 const nonCurrentlyReadingEvents: Array<ReadingEventType> = [ReadingEventType.DROPPED, ReadingEventType.FINISHED]
 
@@ -137,9 +137,18 @@ getYears()
           {{ year }}
         </option>
       </select>
+      <o-pagination
+        v-if="yearEvents.length > 0 && pageCount > 1"
+        :current="pageAsNumber"
+        :total="total"
+        order="centered"
+        :per-page="perPage"
+        @change="updatePage"
+      />
       <div
         v-for="[month, ev] in eventsByMonth"
         :key="month"
+        class="mt-2"
       >
         <div class="flex items-center mx-2">
           <svg

diff --git a/src/jelu-ui/src/components/SearchResultsDisplay.vue b/src/jelu-ui/src/components/SearchResultsDisplay.vue
@@ -25,7 +25,7 @@ const searchQuery: Ref<string|undefined> = useRouteQuery('q', undefined)
 
 const books: Ref<Array<Book>> = ref([]);
 
-const { total, page, pageAsNumber, perPage, updatePage, getPageIsLoading, updatePageLoading } = usePagination()
+const { total, page, pageAsNumber, perPage, updatePage, getPageIsLoading, updatePageLoading, pageCount } = usePagination()
 
 const { sortQuery, sortOrder, sortBy, sortOrderUpdated } = useSort('title,asc')
 
@@ -359,7 +359,7 @@ if (searchQuery.value != null) {
     <div />
   </div>
   <div
-    class="flex flex-row justify-center justify-items-center"
+    class="flex flex-row justify-center justify-items-center mb-2"
   >
     <div class="basis-full sm:basis-5/12">
       <div class="basis-full">
@@ -451,6 +451,14 @@ if (searchQuery.value != null) {
       <button>close</button>
     </form>
   </dialog>
+  <o-pagination
+    v-if="pageCount > 1"
+    v-model:current="pageAsNumber"
+    :total="total"
+    order="centered"
+    :per-page="perPage"
+    @change="updatePage"
+  />
   <div class="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 gap-1 my-4">
     <div
       v-for="book in convertedBooks"

diff --git a/src/jelu-ui/src/components/SeriesBooks.vue b/src/jelu-ui/src/components/SeriesBooks.vue
@@ -25,7 +25,7 @@ const { t } = useI18n({
 const route = useRoute()
 const oruga = useOruga();
 
-const { total, page, pageAsNumber, perPage, updatePage, getPageIsLoading, updatePageLoading } = usePagination()
+const { total, page, pageAsNumber, perPage, updatePage, getPageIsLoading, updatePageLoading, pageCount } = usePagination()
 
 const { sortQuery, sortOrder, sortBy, sortOrderUpdated } = useSort('numberInSeries,asc')
 
@@ -254,7 +254,7 @@ getBooks()
     </h2>
     <div />
   </div>
-  <div>
+  <div class="mb-2">
     <div class="flex justify-center">
       <v-md-preview
         v-if="series.description != null"
@@ -281,6 +281,14 @@ getBooks()
       :animated="true"
     />
   </div>
+  <o-pagination
+    v-if="pageCount > 1"
+    v-model:current="pageAsNumber"
+    :total="total"
+    order="centered"
+    :per-page="perPage"
+    @change="updatePage"
+  />
   <div class="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 gap-1 my-3">
     <div
       v-for="book in convertedBooks"

diff --git a/src/jelu-ui/src/components/TagBooks.vue b/src/jelu-ui/src/components/TagBooks.vue
@@ -26,7 +26,7 @@ const route = useRoute()
 const tag: Ref<Tag> = ref({name: ""})
 const tagBooks: Ref<Array<Book>> = ref([]);
 
-const { total, page, pageAsNumber, perPage, updatePage, getPageIsLoading, updatePageLoading } = usePagination()
+const { total, page, pageAsNumber, perPage, updatePage, getPageIsLoading, updatePageLoading, pageCount } = usePagination()
 
 const { sortQuery, sortOrder, sortBy, sortOrderUpdated } = useSort('title,asc')
 
@@ -203,7 +203,7 @@ getBooks()
       </div>
     </template>
   </sort-filter-bar-vue>
-  <div class="flex flex-row justify-between">
+  <div class="flex flex-row justify-between mb-2">
     <div class="flex flex-row gap-1 order-last sm:order-first">
       <o-button
         variant="success"
@@ -267,6 +267,14 @@ getBooks()
       :animated="true"
     />
   </div>
+  <o-pagination
+    v-if="pageCount > 1"
+    v-model:current="pageAsNumber"
+    :total="total"
+    order="centered"
+    :per-page="perPage"
+    @change="updatePage"
+  />
   <div class="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 gap-1 my-3">
     <div
       v-for="book in convertedBooks"

diff --git a/src/jelu-ui/src/components/ToReadList.vue b/src/jelu-ui/src/components/ToReadList.vue
@@ -21,7 +21,7 @@ useTitle('Jelu | ' + t('nav.to_read'))
 
 const books: Ref<Array<UserBook>> = ref([]);
 
-const { total, page, pageAsNumber, perPage, updatePage, getPageIsLoading, updatePageLoading } = usePagination()
+const { total, page, pageAsNumber, perPage, updatePage, getPageIsLoading, updatePageLoading, pageCount } = usePagination()
 
 const { sortQuery, sortOrder, sortBy, sortOrderUpdated } = useSort('creationDate,desc')
 
@@ -243,7 +243,7 @@ getToRead()
       </div>
     </template>
   </sort-filter-bar-vue>
-  <div class="flex flex-row justify-between">
+  <div class="flex flex-row justify-between mb-2">
     <div class="flex flex-row gap-1 order-last sm:order-first">
       <o-button
         variant="success"
@@ -289,6 +289,14 @@ getToRead()
     </h2>
     <div />
   </div>
+  <o-pagination
+    v-if="books.length > 0 && pageCount > 1"
+    v-model:current="pageAsNumber"
+    :total="total"
+    order="centered"
+    :per-page="perPage"
+    @change="updatePage"
+  />
   <div
     v-if="books.length > 0"
     class="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-8 gap-0 my-3"

diff --git a/src/jelu-ui/src/composables/pagination.ts b/src/jelu-ui/src/composables/pagination.ts
@@ -51,6 +51,7 @@ export default function usePagination(pageSize = 24) {
         perPage,
         updatePage,
         getPageIsLoading,
-        updatePageLoading
+        updatePageLoading,
+        pageCount
     }
 }