Browse Source

fix: Added generic pagination

pull/6490/head
Muhammed Mustafa 1 year ago
parent
commit
1bdc1fa8cc
  1. 40
      packages/nc-gui/components/nc/Pagination.vue
  2. 30
      packages/nc-gui/components/smartsheet/Pagination.vue
  3. 5
      packages/nc-gui/components/smartsheet/grid/Table.vue
  4. 3
      packages/nc-gui/composables/useViewData.ts
  5. 6
      packages/nc-gui/store/views.ts
  6. 1
      packages/nc-gui/windi.config.ts

40
packages/nc-gui/components/nc/Pagination.vue

@ -0,0 +1,40 @@
<script setup lang="ts">
const props = defineProps<{
current: number
total: number
pageSize: number
}>()
const emits = defineEmits(['update:current', 'update:pageSize'])
const { total } = toRefs(props)
const current = useVModel(props, 'current', emits)
const pageSize = useVModel(props, 'pageSize', emits)
const totalPages = computed(() => Math.ceil(total.value / pageSize.value))
const { isMobileMode } = useGlobal()
const changePage = ({ increase }: { increase: boolean }) => {
if (increase && current.value < totalPages.value) {
current.value = current.value + 1
} else if (current.value > 0) {
current.value = current.value - 1
}
}
</script>
<template>
<div class="nc-pagination flex flex-row items-center gap-x-2">
<NcButton type="secondary" size="small" :disabled="current === 1" @click="changePage({ increase: false })">
<GeneralIcon icon="arrowLeft" />
</NcButton>
<div class="text-gray-600">{{ current }} {{ isMobileMode ? '/' : 'of' }} {{ totalPages }}</div>
<NcButton type="secondary" size="small" :disabled="current === totalPages" @click="changePage({ increase: true })">
<GeneralIcon icon="arrowRight" />
</NcButton>
</div>
</template>

30
packages/nc-gui/components/smartsheet/Pagination.vue

@ -33,7 +33,9 @@ const extraStyle = toRef(props, 'extraStyle')
const isGroupBy = inject(IsGroupByInj, ref(false))
const { isPaginationLoading } = storeToRefs(useViewsStore())
const { isViewDataLoading, isPaginationLoading } = storeToRefs(useViewsStore())
const { isLeftSidebarOpen } = storeToRefs(useSidebarStore())
const count = computed(() => vPaginationData.value?.totalRows ?? Infinity)
@ -42,13 +44,13 @@ const size = computed(() => vPaginationData.value?.pageSize ?? 25)
const page = computed({
get: () => vPaginationData?.value?.page ?? 1,
set: async (p) => {
isPaginationLoading.value = true
isViewDataLoading.value = true
try {
await changePage?.(p)
} catch (e) {
console.error(e)
} finally {
isPaginationLoading.value = false
isViewDataLoading.value = false
}
},
})
@ -75,17 +77,23 @@ const isRTLLanguage = computed(() => isRtlLang(locale.value as keyof typeof Lang
</span>
</div>
<template v-if="!hidePagination">
<a-pagination
v-if="count !== Infinity"
<div
v-if="!hidePagination"
class="transition-all duration-350"
:class="{
'-ml-17': isLeftSidebarOpen,
}"
>
<div v-if="isPaginationLoading" class="flex flex-row justify-center item-center min-h-10 min-w-42">
<a-skeleton :active="true" :title="true" :paragraph="false" class="-mt-1 max-w-60" />
</div>
<NcPagination
v-else-if="count !== Infinity"
v-model:current="page"
v-model:page-size="size"
size="small"
class="!text-xs !m-1 nc-pagination"
class="xs:(mr-2)"
:class="{ 'rtl-pagination': isRTLLanguage }"
:total="+count"
show-less-items
:show-size-changer="false"
/>
<div v-else class="mx-auto flex items-center mt-n1" style="max-width: 250px">
<span class="text-xs" style="white-space: nowrap"> Change page:</span>
@ -95,7 +103,7 @@ const isRTLLanguage = computed(() => isRtlLang(locale.value as keyof typeof Lang
</template>
</a-input>
</div>
</template>
</div>
<div v-if="!isMobileMode" class="flex-1 flex justify-end items-center">
<GeneralApiTiming v-if="isEeUI && props.showApiTiming" class="m-1" />
<div class="text-right">

5
packages/nc-gui/components/smartsheet/grid/Table.vue

@ -1590,11 +1590,8 @@ const expandAndLooseFocus = (row: Row, col: Record<string, any>) => {
</NcDropdown>
</div>
<div v-if="showSkeleton && headerOnly !== true" class="flex flex-row justify-center item-center min-h-10">
<a-skeleton :active="true" :title="true" :paragraph="false" class="-mt-1 max-w-60" />
</div>
<LazySmartsheetPagination
v-else-if="headerOnly !== true"
v-if="headerOnly !== true"
:key="isMobileMode"
v-model:pagination-data="paginationDataRef"
show-api-timing

3
packages/nc-gui/composables/useViewData.ts

@ -85,6 +85,8 @@ export function useViewData(
const routeQuery = computed(() => route.value.query as Record<string, string>)
const { isPaginationLoading } = storeToRefs(useViewsStore())
const paginationData = computed({
get: () => (isPublic.value ? sharedPaginationData.value : _paginationData.value),
set: (value) => {
@ -178,6 +180,7 @@ export function useViewData(
formattedData.value = formatData(response.list)
paginationData.value = response.pageInfo
isPaginationLoading.value = false
// to cater the case like when querying with a non-zero offset
// the result page may point to the target page where the actual returned data don't display on

6
packages/nc-gui/store/views.ts

@ -79,7 +79,7 @@ export const useViewsStore = defineStore('viewsStore', () => {
})
// Used for Grid View Pagination
const isPaginationLoading = ref(false)
const isPaginationLoading = ref(true)
const loadViews = async ({
tableId,
@ -183,6 +183,10 @@ export const useViewsStore = defineStore('viewsStore', () => {
}
}
watch(activeViewTitleOrId, () => {
isPaginationLoading.value = true
})
return {
isLockedView,
isViewsLoading,

1
packages/nc-gui/windi.config.ts

@ -60,6 +60,7 @@ export default defineConfig({
max: '480px',
},
sm: {
min: '480px',
max: '820px',
},
md: {

Loading…
Cancel
Save