diff --git a/README.md b/README.md
index d822d1b43..8044bc151 100644
--- a/README.md
+++ b/README.md
@@ -7,8 +7,8 @@
-
-
+
+
diff --git a/web/components.d.ts b/web/components.d.ts
index e8e2e378f..88110bfc2 100644
--- a/web/components.d.ts
+++ b/web/components.d.ts
@@ -85,6 +85,7 @@ declare module 'vue' {
Navbar: typeof import('./src/components/layout/header/Navbar.vue')['default']
NumberField: typeof import('./src/components/form/NumberField.vue')['default']
OrgSecretsTab: typeof import('./src/components/org/settings/OrgSecretsTab.vue')['default']
+ Pagination: typeof import('./src/components/layout/Pagination.vue')['default']
Panel: typeof import('./src/components/layout/Panel.vue')['default']
PipelineFeedItem: typeof import('./src/components/pipeline-feed/PipelineFeedItem.vue')['default']
PipelineFeedSidebar: typeof import('./src/components/pipeline-feed/PipelineFeedSidebar.vue')['default']
diff --git a/web/src/components/layout/Pagination.vue b/web/src/components/layout/Pagination.vue
new file mode 100644
index 000000000..ef9fed1a8
--- /dev/null
+++ b/web/src/components/layout/Pagination.vue
@@ -0,0 +1,38 @@
+
+
+
loading ...
+
+
+
+
+
+
+
+
+
diff --git a/web/src/components/repo/settings/SecretsTab.vue b/web/src/components/repo/settings/SecretsTab.vue
index 30e801316..0f4afe5a7 100644
--- a/web/src/components/repo/settings/SecretsTab.vue
+++ b/web/src/components/repo/settings/SecretsTab.vue
@@ -14,14 +14,15 @@
-
+
+
+
!selectedSecret.value, {
+const secretsPagination = usePagination(loadSecrets, () => !selectedSecret.value, {
each: ['repo', 'org', 'global'],
+ scrollElement: null,
+ pageSize: 50,
});
+const { resetPage, data: _secrets } = secretsPagination;
const secrets = computed(() => {
const secretsList: Record = {};
diff --git a/web/src/compositions/usePaginate.ts b/web/src/compositions/usePaginate.ts
index d53052c25..d582e5f5f 100644
--- a/web/src/compositions/usePaginate.ts
+++ b/web/src/compositions/usePaginate.ts
@@ -18,11 +18,15 @@ export async function usePaginate(getSingle: (page: number) => Promise):
export function usePagination(
_loadData: (page: number, arg: S) => Promise,
isActive: () => boolean = () => true,
- { scrollElement: _scrollElement, each: _each }: { scrollElement?: Ref; each?: S[] } = {},
+ {
+ scrollElement: _scrollElement,
+ each: _each,
+ pageSize: _pageSize,
+ }: { scrollElement?: Ref | null; each?: S[]; pageSize?: number } = {},
) {
- const scrollElement = _scrollElement ?? ref(document.getElementById('scroll-component'));
+ const scrollElement = _scrollElement === null ? null : ref(document.getElementById('scroll-component'));
const page = ref(1);
- const pageSize = ref(0);
+ const pageSize = ref(_pageSize ?? 0);
const hasMore = ref(true);
const data = ref([]) as Ref;
const loading = ref(false);
@@ -33,8 +37,6 @@ export function usePagination(
return;
}
- console.log('loadData', page.value, each.value);
-
loading.value = true;
const newData = (await _loadData(page.value, each.value?.[0] as S)) ?? [];
hasMore.value = newData.length >= pageSize.value && newData.length > 0;
@@ -42,14 +44,14 @@ export function usePagination(
data.value.push(...newData);
}
- console.log('loadData1', page.value, hasMore.value, each.value);
+ console.log('loadData', each.value?.[0], page.value);
// last page and each has more
if (!hasMore.value && each.value.length > 0) {
// use next each element
each.value.shift();
page.value = 1;
- pageSize.value = 0;
+ pageSize.value = _pageSize ?? 0;
hasMore.value = each.value.length > 0;
if (hasMore.value) {
loading.value = false;
@@ -69,13 +71,15 @@ export function usePagination(
}
}
- useInfiniteScroll(scrollElement, nextPage, { distance: 10 });
+ if (scrollElement !== null) {
+ useInfiniteScroll(scrollElement, nextPage, { distance: 10 });
+ }
async function resetPage() {
const _page = page.value;
page.value = 1;
- pageSize.value = 0;
+ pageSize.value = _pageSize ?? 0;
hasMore.value = true;
data.value = [];
loading.value = false;
diff --git a/web/src/views/repo/RepoSettings.vue b/web/src/views/repo/RepoSettings.vue
index bdaed99c8..048229739 100644
--- a/web/src/views/repo/RepoSettings.vue
+++ b/web/src/views/repo/RepoSettings.vue
@@ -20,7 +20,7 @@
-
+