refactor: remove the pagination feature of plugin management (#4473)

#### What type of PR is this?

/area console
/kind improvement
/milestone 2.9.x

#### What this PR does / why we need it:

移除插件管理列表的分页功能,默认列表出所有安装的插件。

#### Which issue(s) this PR fixes:

Fixes #4469 

#### Does this PR introduce a user-facing change?

```release-note
移除 Console 端插件管理列表的分页功能,默认列表出所有安装的插件。
```
pull/4482/head^2
Ryan Wang 2023-08-25 10:42:14 -05:00 committed by GitHub
parent 401c3c79ce
commit 138ffde7e2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 3 additions and 40 deletions

View File

@ -7,7 +7,6 @@ import {
VCard, VCard,
VEmpty, VEmpty,
VPageHeader, VPageHeader,
VPagination,
VSpace, VSpace,
VLoading, VLoading,
Dialog, Dialog,
@ -21,10 +20,8 @@ import { useQuery } from "@tanstack/vue-query";
import type { Plugin } from "@halo-dev/api-client"; import type { Plugin } from "@halo-dev/api-client";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { useRouteQuery } from "@vueuse/router"; import { useRouteQuery } from "@vueuse/router";
import { watch } from "vue";
const { t } = useI18n(); const { t } = useI18n();
const { currentUserHasPermission } = usePermission(); const { currentUserHasPermission } = usePermission();
const pluginInstallationModal = ref(false); const pluginInstallationModal = ref(false);
@ -36,9 +33,6 @@ function handleOpenUploadModal(plugin?: Plugin) {
} }
const keyword = ref(""); const keyword = ref("");
const page = ref(1);
const size = ref(20);
const total = ref(0);
const selectedEnabledValue = ref(); const selectedEnabledValue = ref();
const selectedSortValue = ref(); const selectedSortValue = ref();
@ -52,33 +46,16 @@ function handleClearFilters() {
selectedEnabledValue.value = undefined; selectedEnabledValue.value = undefined;
} }
watch(
() => [selectedEnabledValue.value, selectedSortValue.value, keyword.value],
() => {
page.value = 1;
}
);
const { data, isLoading, isFetching, refetch } = useQuery<Plugin[]>({ const { data, isLoading, isFetching, refetch } = useQuery<Plugin[]>({
queryKey: [ queryKey: ["plugins", keyword, selectedEnabledValue, selectedSortValue],
"plugins",
page,
size,
keyword,
selectedEnabledValue,
selectedSortValue,
],
queryFn: async () => { queryFn: async () => {
const { data } = await apiClient.plugin.listPlugins({ const { data } = await apiClient.plugin.listPlugins({
page: page.value, page: 0,
size: size.value, size: 0,
keyword: keyword.value, keyword: keyword.value,
enabled: selectedEnabledValue.value, enabled: selectedEnabledValue.value,
sort: [selectedSortValue.value].filter(Boolean) as string[], sort: [selectedSortValue.value].filter(Boolean) as string[],
}); });
total.value = data.total;
return data.items; return data.items;
}, },
keepPreviousData: true, keepPreviousData: true,
@ -251,20 +228,6 @@ onMounted(() => {
</li> </li>
</ul> </ul>
</Transition> </Transition>
<template #footer>
<VPagination
v-model:page="page"
v-model:size="size"
:page-label="$t('core.components.pagination.page_label')"
:size-label="$t('core.components.pagination.size_label')"
:total-label="
$t('core.components.pagination.total_label', { total: total })
"
:total="total"
:size-options="[10, 20, 30, 50, 100]"
/>
</template>
</VCard> </VCard>
</div> </div>
</template> </template>