Fix pagination display

VedaWebProject · Jun 18, 2024 · 51b1e2e · 51b1e2e
1 parent 0121cd3
commit 51b1e2e
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 21 deletions.
diff --git a/Tekst-Web/src/views/CommunityView.vue b/Tekst-Web/src/views/CommunityView.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-const state = useStateStore();
-const [DefineTemplate, ReuseTemplate] = createReusableTemplate();
 import { computed } from 'vue';
 import { useUsersSearch } from '@/composables/fetchers';
 import { NListItem, NInput, NIcon, NFlex, NSpin, NPagination, NList } from 'naive-ui';
@@ -17,9 +15,11 @@ import UserAvatar from '@/components/user/UserAvatar.vue';
 import { RouterLink } from 'vue-router';
 import UserThingHeader from '@/components/user/UserThingHeader.vue';
 
+const state = useStateStore();
+const [DefineTemplate, ReuseTemplate] = createReusableTemplate();
+
 const defaultPage = 1;
 const paginationSlots = computed(() => (state.smallScreen ? 4 : 9));
-const paginationSize = computed(() => (state.smallScreen ? undefined : 'large'));
 
 const initialFilters = (): PublicUserSearchFilters => ({
   q: '',
@@ -44,13 +44,12 @@ function resetPagination() {
 
   <define-template>
     <!-- Pagination -->
-    <n-flex v-if="!!total" justify="end">
+    <n-flex v-if="!!total" justify="end" class="pagination-container">
       <n-pagination
         v-model:page="filters.pg"
         v-model:page-size="filters.pgs"
         :default-page-size="10"
         :page-slot="paginationSlots"
-        :size="paginationSize"
         :disabled="loading"
         :item-count="total"
         :page-sizes="[10, 25, 50]"
@@ -127,4 +126,11 @@ function resetPagination() {
   />
 </template>
 
-<style scoped></style>
+<style scoped>
+.pagination-container:first-child {
+  margin-bottom: var(--layout-gap);
+}
+.pagination-container:last-child {
+  margin-top: var(--layout-gap);
+}
+</style>
diff --git a/Tekst-Web/src/views/ResourcesView.vue b/Tekst-Web/src/views/ResourcesView.vue
@@ -32,11 +32,11 @@ import { useRouter } from 'vue-router';
 import { useResourcesStore } from '@/stores';
 import TransferResourceModal from '@/components/modals/TransferResourceModal.vue';
 import { saveDownload } from '@/api';
-
 import { SearchIcon, UndoIcon, ResourceIcon, AddIcon } from '@/icons';
 import LabelledSwitch from '@/components/LabelledSwitch.vue';
 import { useTasks } from '@/composables/tasks';
 import { pickTranslation } from '@/utils';
+import { createReusableTemplate } from '@vueuse/core';
 
 const state = useStateStore();
 const auth = useAuthStore();
@@ -45,6 +45,7 @@ const dialog = useDialog();
 const { message } = useMessages();
 const router = useRouter();
 const { addTask, startTasksPolling } = useTasks();
+const [DefineTemplate, ReuseTemplate] = createReusableTemplate();
 
 const actionsLoading = ref(false);
 const loading = computed(() => actionsLoading.value || resources.loading);
@@ -355,6 +356,20 @@ function handleFilterCollapseItemClick(data: { name: string; expanded: boolean }
     <help-button-widget help-key="resourcesView" />
   </icon-heading>
 
+  <define-template>
+    <!-- Pagination -->
+    <n-flex justify="end" class="pagination-container">
+      <n-pagination
+        v-model:page-size="pagination.pageSize"
+        v-model:page="pagination.page"
+        :page-sizes="[10, 20, 50, 100]"
+        :default-page-size="10"
+        :item-count="filteredData.length"
+        show-size-picker
+      />
+    </n-flex>
+  </define-template>
+
   <template v-if="resources.ofText && !resources.error && !loading">
     <!-- Filters -->
     <n-collapse
@@ -410,6 +425,8 @@ function handleFilterCollapseItemClick(data: { name: string; expanded: boolean }
     <!-- Resources List -->
     <div class="content-block">
       <template v-if="paginatedData.length > 0">
+        <!-- Pagination -->
+        <reuse-template />
         <n-list style="background-color: transparent">
           <resource-list-item
             v-for="item in paginatedData"
@@ -431,16 +448,7 @@ function handleFilterCollapseItemClick(data: { name: string; expanded: boolean }
           />
         </n-list>
         <!-- Pagination -->
-        <div style="display: flex; justify-content: flex-end; padding-top: 12px">
-          <n-pagination
-            v-model:page-size="pagination.pageSize"
-            v-model:page="pagination.page"
-            :page-sizes="[10, 20, 50, 100]"
-            :default-page-size="10"
-            :item-count="filteredData.length"
-            show-size-picker
-          />
-        </div>
+        <reuse-template />
       </template>
       <template v-else>
         {{ $t('search.nothingFound') }}
@@ -476,4 +484,11 @@ function handleFilterCollapseItemClick(data: { name: string; expanded: boolean }
   align-items: flex-end;
   max-width: 100%;
 }
+
+.pagination-container:first-child {
+  margin-bottom: var(--layout-gap);
+}
+.pagination-container:last-child {
+  margin-top: var(--layout-gap);
+}
 </style>
diff --git a/Tekst-Web/src/views/SearchResultsView.vue b/Tekst-Web/src/views/SearchResultsView.vue
@@ -34,7 +34,6 @@ const paginationDefaults = () => ({
 });
 const pagination = ref(paginationDefaults());
 const paginationSlots = computed(() => (state.smallScreen ? 4 : 9));
-const paginationSize = computed(() => (state.smallScreen ? undefined : 'large'));
 const paginationExtrasSize = computed(() => (state.smallScreen ? 'small' : undefined));
 const sortingPreset = ref<SortingPreset>();
 
@@ -174,7 +173,6 @@ onBeforeMount(() => processQuery());
         :page-slot="paginationSlots"
         :item-count="resultsData.totalHits"
         :disabled="loading"
-        :size="paginationSize"
         show-size-picker
         @update:page="() => execSearch()"
         @update:page-size="() => execSearch(true)"

diff --git a/Tekst-Web/src/views/admin/AdminSystemUsersView.vue b/Tekst-Web/src/views/admin/AdminSystemUsersView.vue
@@ -38,7 +38,6 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate();
 
 const defaultPage = 1;
 const paginationSlots = computed(() => (state.smallScreen ? 4 : 9));
-const paginationSize = computed(() => (state.smallScreen ? undefined : 'large'));
 
 const initialFilters = (): UserSearchFilters => ({
   q: '',
@@ -187,7 +186,6 @@ onMounted(() => {
         v-model:page-size="filters.pgs"
         :default-page-size="10"
         :page-slot="paginationSlots"
-        :size="paginationSize"
         :disabled="loading"
         :item-count="total"
         :page-sizes="[10, 25, 50]"