From 2ade57184c132433ae4ce6125ec99f2a69e43c7d Mon Sep 17 00:00:00 2001 From: Ryan Wang Date: Wed, 19 Jul 2023 19:46:17 +0800 Subject: [PATCH] feat: record the single page query conditions in the route query parameters (#4208) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #### What type of PR is this? /area console /kind feature /milestone 2.8.x #### What this PR does / why we need it: 在页面数据管理列表页面路由中记录查询条件，包括分页信息、筛选信息等。可以保证在刷新浏览器窗口或者从编辑页面返回时保留之前的查询状态。 image #### Special notes for your reviewer: 需要测试： 1. 页面管理列表的所有筛选项是否可以正常工作。 2. 尝试设置部分筛选，然后刷新页面，观察筛选条件是否正常保留。 3. 尝试设置部分筛选，然后选择任意一个页面进行编辑，观察发布之后是否正常返回到管理列表，并正确设置了查询参数。 #### Does this PR introduce a user-facing change? ```release-note Console 端的页面管理列表支持在地址栏记录筛选条件。 ``` --- .../components/filter/UserFilterDropdown.vue | 3 +- .../contents/pages/SinglePageEditor.vue | 2 +- .../modules/contents/pages/SinglePageList.vue | 37 +++++++++++-------- .../src/modules/contents/posts/PostEditor.vue | 2 +- 4 files changed, 25 insertions(+), 19 deletions(-) diff --git a/console/src/components/filter/UserFilterDropdown.vue b/console/src/components/filter/UserFilterDropdown.vue index a54f76845..3163df4af 100644 --- a/console/src/components/filter/UserFilterDropdown.vue +++ b/console/src/components/filter/UserFilterDropdown.vue @@ -26,7 +26,7 @@ const emit = defineEmits<{ (event: "update:modelValue", value?: string): void; }>(); -const { users, handleFetchUsers } = useUserFetch(); +const { users } = useUserFetch({ fetchOnMounted: true }); const dropdown = ref(); @@ -41,7 +41,6 @@ const handleSelect = (user: User) => { }; function onDropdownShow() { - handleFetchUsers(); setTimeout(() => { setFocus("userFilterDropdownInput"); }, 200); diff --git a/console/src/modules/contents/pages/SinglePageEditor.vue b/console/src/modules/contents/pages/SinglePageEditor.vue index 614fffdf1..6992e3688 100644 --- a/console/src/modules/contents/pages/SinglePageEditor.vue +++ b/console/src/modules/contents/pages/SinglePageEditor.vue @@ -188,7 +188,7 @@ const handlePublish = async () => { if (returnToView.value && permalink) { window.location.href = permalink; } else { - router.push({ name: "SinglePages" }); + router.back(); } } else { formState.value.page.spec.publish = true; diff --git a/console/src/modules/contents/pages/SinglePageList.vue b/console/src/modules/contents/pages/SinglePageList.vue index faf50675a..900d185fe 100644 --- a/console/src/modules/contents/pages/SinglePageList.vue +++ b/console/src/modules/contents/pages/SinglePageList.vue @@ -36,6 +36,7 @@ import { singlePageLabels } from "@/constants/labels"; import { useMutation, useQuery } from "@tanstack/vue-query"; import { useI18n } from "vue-i18n"; import UserFilterDropdown from "@/components/filter/UserFilterDropdown.vue"; +import { useRouteQuery } from "@vueuse/router"; const { currentUserHasPermission } = usePermission(); const { t } = useI18n(); @@ -46,18 +47,20 @@ const selectedPageNames = ref([]); const checkedAll = ref(false); // Filters -const selectedContributor = ref(); -const selectedVisible = ref(); -const selectedPublishStatus = ref(); -const selectedSortValue = ref(); -const keyword = ref(""); +const selectedContributor = useRouteQuery("contributor"); +const selectedVisible = useRouteQuery< + "PUBLIC" | "INTERNAL" | "PRIVATE" | undefined +>("visible"); +const selectedPublishStatus = useRouteQuery("status"); +const selectedSort = useRouteQuery("sort"); +const keyword = useRouteQuery("keyword", ""); watch( () => [ selectedContributor.value, selectedVisible.value, selectedPublishStatus.value, - selectedSortValue.value, + selectedSort.value, keyword.value, ], () => { @@ -70,7 +73,7 @@ const hasFilters = computed(() => { selectedContributor.value || selectedVisible.value || selectedPublishStatus.value !== undefined || - selectedSortValue.value + selectedSort.value ); }); @@ -78,11 +81,15 @@ function handleClearFilters() { selectedContributor.value = undefined; selectedVisible.value = undefined; selectedPublishStatus.value = undefined; - selectedSortValue.value = undefined; + selectedSort.value = undefined; } -const page = ref(1); -const size = ref(20); +const page = useRouteQuery("page", 1, { + transform: Number, +}); +const size = useRouteQuery("size", 20, { + transform: Number, +}); const total = ref(0); const hasNext = ref(false); const hasPrevious = ref(false); @@ -100,7 +107,7 @@ const { page, size, selectedVisible, - selectedSortValue, + selectedSort, keyword, ], queryFn: async () => { @@ -122,7 +129,7 @@ const { page: page.value, size: size.value, visible: selectedVisible.value, - sort: [selectedSortValue.value].filter(Boolean) as string[], + sort: [selectedSort.value].filter(Boolean) as string[], keyword: keyword.value, contributor: contributors, }); @@ -429,11 +436,11 @@ const getExternalUrl = (singlePage: SinglePage) => { }, { label: t('core.page.filters.status.items.published'), - value: true, + value: 'true', }, { label: t('core.page.filters.status.items.draft'), - value: false, + value: 'false', }, ]" /> @@ -460,7 +467,7 @@ const getExternalUrl = (singlePage: SinglePage) => { :label="$t('core.page.filters.author.label')" />