From bd1472251fe3704fea3a38345d2ad41d89374ad6 Mon Sep 17 00:00:00 2001 From: Ryan Wang Date: Fri, 30 Sep 2022 11:12:18 +0800 Subject: [PATCH] feat: add plugin filters support (#629) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #### What type of PR is this? /kind feature /kind improvement /milestone 2.0 #### What this PR does / why we need it: 添加插件管理筛选的支持。适配 https://github.com/halo-dev/halo/pull/2489 #### Which issue(s) this PR fixes: Fixes https://github.com/halo-dev/halo/issues/2470 #### Special notes for your reviewer: /cc @halo-dev/sig-halo /cc @halo-dev/sig-halo-console 测试方式： 1. Halo 需要切换到 https://github.com/halo-dev/halo/pull/2489 PR 的分支。 2. Console 需要 `pnpm install` 3. 安装若干插件，测试筛选和排序。 #### Does this PR introduce a user-facing change? ```release-note 插件管理支持筛选 ``` --- package.json | 2 +- pnpm-lock.yaml | 8 +- src/modules/system/plugins/PluginList.vue | 238 ++++++++++++---------- 3 files changed, 139 insertions(+), 109 deletions(-) diff --git a/package.json b/package.json index c7041022..263abc23 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "@formkit/themes": "1.0.0-beta.10", "@formkit/vue": "1.0.0-beta.10", "@halo-dev/admin-shared": "workspace:*", - "@halo-dev/api-client": "^0.0.33", + "@halo-dev/api-client": "^0.0.34", "@halo-dev/components": "workspace:*", "@halo-dev/richtext-editor": "^0.0.0-alpha.7", "@tiptap/extension-character-count": "2.0.0-beta.31", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bd97acc8..f1aaf099 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -14,7 +14,7 @@ importers: '@formkit/themes': 1.0.0-beta.10 '@formkit/vue': 1.0.0-beta.10 '@halo-dev/admin-shared': workspace:* - '@halo-dev/api-client': ^0.0.33 + '@halo-dev/api-client': ^0.0.34 '@halo-dev/components': workspace:* '@halo-dev/richtext-editor': ^0.0.0-alpha.7 '@iconify-json/mdi': ^1.1.33 @@ -101,7 +101,7 @@ importers: '@formkit/themes': 1.0.0-beta.10_tailwindcss@3.1.8 '@formkit/vue': 1.0.0-beta.10_k5hp3txgeyj6le63abiyc7wx3u '@halo-dev/admin-shared': link:packages/shared - '@halo-dev/api-client': 0.0.33 + '@halo-dev/api-client': 0.0.34 '@halo-dev/components': link:packages/components '@halo-dev/richtext-editor': 0.0.0-alpha.7_vue@3.2.40 '@tiptap/extension-character-count': 2.0.0-beta.31 @@ -1886,8 +1886,8 @@ packages: - windicss dev: false - /@halo-dev/api-client/0.0.33: - resolution: {integrity: sha512-L0U11BO0rInJ49JjH/aynFFj28+vnBDXtDKDMNCnaZNo4ijweqdU8q4S6lUo6okGbznYlZ9fWDPDHvS7EKqHKA==} + /@halo-dev/api-client/0.0.34: + resolution: {integrity: sha512-WOEbyRjPSASH1tyQjQQU/RjXKtRPSD+L6erAWLUfy7BIsyCAMSBdkF3auBWaevUt08uyCBeI3ln+sP+VPyFM0A==} dev: false /@halo-dev/richtext-editor/0.0.0-alpha.7_vue@3.2.40: diff --git a/src/modules/system/plugins/PluginList.vue b/src/modules/system/plugins/PluginList.vue index bd0c025d..4f3f7db0 100644 --- a/src/modules/system/plugins/PluginList.vue +++ b/src/modules/system/plugins/PluginList.vue @@ -2,6 +2,7 @@ import { IconAddCircle, IconArrowDown, + IconCloseCircle, IconPlug, VButton, VCard, @@ -9,15 +10,23 @@ import { VPageHeader, VPagination, VSpace, - VTag, } from "@halo-dev/components"; import PluginListItem from "./components/PluginListItem.vue"; import PluginInstallModal from "./components/PluginInstallModal.vue"; -import { onMounted, ref, watch } from "vue"; +import { onMounted, ref } from "vue"; import { apiClient } from "@/utils/api-client"; -import type { Plugin } from "@halo-dev/api-client"; +import type { PluginList } from "@halo-dev/api-client"; -const plugins = ref([] as Plugin[]); +const plugins = ref({ + page: 1, + size: 20, + total: 0, + items: [], + first: true, + last: false, + hasNext: false, + hasPrevious: false, +}); const loading = ref(false); const pluginInstall = ref(false); const keyword = ref(""); @@ -26,34 +35,87 @@ const handleFetchPlugins = async () => { try { loading.value = true; - const fieldSelector: Array = []; + const { data } = await apiClient.plugin.listPlugins({ + page: plugins.value.page, + size: plugins.value.size, + keyword: keyword.value, + enabled: selectedEnabledItem.value?.value, + sort: [selectedSortItem.value?.value].filter( + (item) => !!item + ) as string[], + }); - if (keyword.value) { - fieldSelector.push(`name=${keyword.value}`); - } - - const { data } = - await apiClient.extension.plugin.listpluginHaloRunV1alpha1Plugin({ - page: 0, - size: 0, - fieldSelector, - }); - plugins.value = data.items; + plugins.value = data; } catch (e) { - console.error("Fail to fetch plugins", e); + console.error("Failed to fetch plugins", e); } finally { loading.value = false; } }; -watch( - () => keyword.value, - () => { - handleFetchPlugins(); - } -); +const handlePaginationChange = ({ + page, + size, +}: { + page: number; + size: number; +}) => { + plugins.value.page = page; + plugins.value.size = size; + handleFetchPlugins(); +}; onMounted(handleFetchPlugins); + +// Filters +interface EnabledItem { + label: string; + value?: boolean; +} + +interface SortItem { + label: string; + value: string; +} + +const EnabledItems: EnabledItem[] = [ + { + label: "全部", + value: undefined, + }, + { + label: "已启用", + value: true, + }, + { + label: "未启用", + value: false, + }, +]; + +const SortItems: SortItem[] = [ + { + label: "较近安装", + value: "creationTimestamp,desc", + }, + { + label: "较早安装", + value: "creationTimestamp,asc", + }, +]; + +const selectedEnabledItem = ref(); +const selectedSortItem = ref(); + +function handleEnabledItemChange(enabledItem: EnabledItem) { + selectedEnabledItem.value = enabledItem; + handleFetchPlugins(); +} + +function handleSortItemChange(sortItem?: SortItem) { + selectedSortItem.value = sortItem; + handleFetchPlugins(); +} -
- 类别 - - - -
- -
- 提供方 - - - -
- -
  • - 较近安装 -
    • -
  • - 较晚安装 + {{ sortItem.label }}
@@ -222,7 +246,7 @@ onMounted(handleFetchPlugins); @@ -248,14 +272,20 @@ onMounted(handleFetchPlugins); class="box-border h-full w-full divide-y divide-gray-100" role="list" > -
  • +