From 353e339d94a232ea7c441e88afe6ad0ce24645a2 Mon Sep 17 00:00:00 2001 From: Ryan Wang Date: Wed, 22 Feb 2023 17:43:51 +0800 Subject: [PATCH] refactor: use tanstack query to refactor attachments-related fetching --- src/components/editor/DefaultEditor.vue | 4 +- .../contents/attachments/AttachmentList.vue | 57 +++--- .../components/AttachmentDetailModal.vue | 15 +- .../components/AttachmentGroupList.vue | 8 +- .../components/AttachmentPoliciesModal.vue | 23 +-- .../components/AttachmentUploadModal.vue | 34 ++-- .../CoreSelectorProvider.vue | 23 ++- .../composables/use-attachment-group.ts | 59 ++----- .../composables/use-attachment-policy.ts | 97 +++------- .../attachments/composables/use-attachment.ts | 167 +++++++----------- 10 files changed, 177 insertions(+), 310 deletions(-) diff --git a/src/components/editor/DefaultEditor.vue b/src/components/editor/DefaultEditor.vue index a432d95c..879e7584 100644 --- a/src/components/editor/DefaultEditor.vue +++ b/src/components/editor/DefaultEditor.vue @@ -339,7 +339,7 @@ const editor = useEditor({ }); // image drag and paste upload -const { policies } = useFetchAttachmentPolicy({ fetchOnMounted: true }); +const { policies } = useFetchAttachmentPolicy(); type Task = { file: File; @@ -349,7 +349,7 @@ type Task = { const uploadQueue: queueAsPromised = fastq.promise(asyncWorker, 1); async function asyncWorker(arg: Task): Promise { - if (!policies.value.length) { + if (!policies.value?.length) { Toast.warning("目前没有可用的存储策略"); return; } diff --git a/src/modules/contents/attachments/AttachmentList.vue b/src/modules/contents/attachments/AttachmentList.vue index 17f61f44..8c772a3f 100644 --- a/src/modules/contents/attachments/AttachmentList.vue +++ b/src/modules/contents/attachments/AttachmentList.vue @@ -51,10 +51,8 @@ const policyVisible = ref(false); const uploadVisible = ref(false); const detailVisible = ref(false); -const { policies } = useFetchAttachmentPolicy({ fetchOnMounted: true }); -const { groups, handleFetchGroups } = useFetchAttachmentGroup({ - fetchOnMounted: true, -}); +const { policies } = useFetchAttachmentPolicy(); +const { groups, handleFetchGroups } = useFetchAttachmentGroup(); const selectedGroup = ref(); @@ -85,26 +83,24 @@ const SortItems: SortItem[] = [ const selectedPolicy = ref(); const selectedUser = ref(); -const keyword = ref(""); const selectedSortItem = ref(); - const selectedSortItemValue = computed(() => { return selectedSortItem.value?.value; }); function handleSelectPolicy(policy: Policy | undefined) { selectedPolicy.value = policy; - handleFetchAttachments({ page: 1 }); + page.value = 1; } function handleSelectUser(user: User | undefined) { selectedUser.value = user; - handleFetchAttachments({ page: 1 }); + page.value = 1; } function handleSortItemChange(sortItem?: SortItem) { selectedSortItem.value = sortItem; - handleFetchAttachments({ page: 1 }); + page.value = 1; } function handleKeywordChange() { @@ -112,12 +108,12 @@ function handleKeywordChange() { if (keywordNode) { keyword.value = keywordNode._value as string; } - handleFetchAttachments({ page: 1 }); + page.value = 1; } function handleClearKeyword() { keyword.value = ""; - handleFetchAttachments({ page: 1 }); + page.value = 1; } const hasFilters = computed(() => { @@ -134,19 +130,24 @@ function handleClearFilters() { selectedUser.value = undefined; selectedSortItem.value = undefined; keyword.value = ""; - handleFetchAttachments({ page: 1 }); + page.value = 1; } +const keyword = ref(""); +const page = ref(1); +const size = ref(20); + const { attachments, selectedAttachment, selectedAttachments, checkedAll, - loading, + isLoading, + isFetching, + total, handleFetchAttachments, handleSelectNext, handleSelectPrevious, - handlePaginationChange, handleDelete, handleDeleteInBatch, handleCheckAll, @@ -159,6 +160,8 @@ const { user: selectedUser, keyword: keyword, sort: selectedSortItemValue, + page: page, + size: size, }); const handleMove = async (group: Group) => { @@ -209,12 +212,12 @@ const onDetailModalClose = () => { selectedAttachment.value = undefined; nameQuery.value = undefined; nameQueryAttachment.value = undefined; - handleFetchAttachments({ mute: true }); + handleFetchAttachments(); }; const onUploadModalClose = () => { routeQueryAction.value = undefined; - handleFetchAttachments({ mute: true }); + handleFetchAttachments(); }; const onGroupChange = () => { @@ -223,7 +226,7 @@ const onGroupChange = () => { }; const getPolicyName = (name: string | undefined) => { - const policy = policies.value.find((p) => p.metadata.name === name); + const policy = policies.value?.find((p) => p.metadata.name === name); return policy?.spec.displayName; }; @@ -548,7 +551,7 @@ onMounted(() => { > @@ -568,9 +571,9 @@ onMounted(() => { /> - + - + { role="list" > -
  • +
  • diff --git a/src/modules/contents/attachments/components/AttachmentDetailModal.vue b/src/modules/contents/attachments/components/AttachmentDetailModal.vue index eb0b168b..a1164467 100644 --- a/src/modules/contents/attachments/components/AttachmentDetailModal.vue +++ b/src/modules/contents/attachments/components/AttachmentDetailModal.vue @@ -3,7 +3,7 @@ import { VButton, VModal, VSpace, VTag } from "@halo-dev/components"; import LazyImage from "@/components/image/LazyImage.vue"; import type { Attachment, Policy } from "@halo-dev/api-client"; import prettyBytes from "pretty-bytes"; -import { ref, watch, watchEffect } from "vue"; +import { ref, watchEffect } from "vue"; import { apiClient } from "@/utils/api-client"; import { isImage } from "@/utils/image"; import { formatDatetime } from "@/utils/date"; @@ -27,7 +27,7 @@ const emit = defineEmits<{ (event: "close"): void; }>(); -const { groups, handleFetchGroups } = useFetchAttachmentGroup(); +const { groups } = useFetchAttachmentGroup(); const policy = ref(); const onlyPreview = ref(false); @@ -46,17 +46,8 @@ watchEffect(async () => { } }); -watch( - () => props.visible, - (newValue) => { - if (newValue) { - handleFetchGroups(); - } - } -); - const getGroupName = (name: string | undefined) => { - const group = groups.value.find((group) => group.metadata.name === name); + const group = groups.value?.find((group) => group.metadata.name === name); return group?.spec.displayName || name; }; diff --git a/src/modules/contents/attachments/components/AttachmentGroupList.vue b/src/modules/contents/attachments/components/AttachmentGroupList.vue index a64e38f7..1f341967 100644 --- a/src/modules/contents/attachments/components/AttachmentGroupList.vue +++ b/src/modules/contents/attachments/components/AttachmentGroupList.vue @@ -163,9 +163,9 @@ const handleDeleteWithAttachments = (group: Group) => { }; watch( - () => groups.value.length, + () => groups.value?.length, () => { - const allGroups = [...defaultGroups, ...groups.value]; + const allGroups = [...defaultGroups, ...(groups.value || [])]; const groupIndex = allGroups.findIndex( (group) => group.metadata.name === routeQuery.value ); @@ -177,10 +177,8 @@ watch( ); onMounted(async () => { - await handleFetchGroups(); - if (routeQuery.value && !props.readonly) { - const allGroups = [...defaultGroups, ...groups.value]; + const allGroups = [...defaultGroups, ...(groups.value || [])]; const group = allGroups.find( (group) => group.metadata.name === routeQuery.value ); diff --git a/src/modules/contents/attachments/components/AttachmentPoliciesModal.vue b/src/modules/contents/attachments/components/AttachmentPoliciesModal.vue index d0b4cc98..8d88e852 100644 --- a/src/modules/contents/attachments/components/AttachmentPoliciesModal.vue +++ b/src/modules/contents/attachments/components/AttachmentPoliciesModal.vue @@ -12,7 +12,7 @@ import { Toast, } from "@halo-dev/components"; import AttachmentPolicyEditingModal from "./AttachmentPolicyEditingModal.vue"; -import { ref, watch } from "vue"; +import { ref } from "vue"; import type { Policy, PolicyTemplate } from "@halo-dev/api-client"; import { formatDatetime } from "@/utils/date"; import { @@ -21,7 +21,7 @@ import { } from "../composables/use-attachment-policy"; import { apiClient } from "@/utils/api-client"; -const props = withDefaults( +withDefaults( defineProps<{ visible: boolean; }>(), @@ -35,11 +35,8 @@ const emit = defineEmits<{ (event: "close"): void; }>(); -const { policies, loading, handleFetchPolicies } = useFetchAttachmentPolicy(); -const { policyTemplates, handleFetchPolicyTemplates } = - useFetchAttachmentPolicyTemplate({ - fetchOnMounted: false, - }); +const { policies, isLoading, handleFetchPolicies } = useFetchAttachmentPolicy(); +const { policyTemplates } = useFetchAttachmentPolicyTemplate(); const selectedPolicy = ref(); @@ -105,16 +102,6 @@ const onEditingModalClose = () => { selectedPolicy.value = undefined; handleFetchPolicies(); }; - -watch( - () => props.visible, - (visible) => { - if (visible) { - handleFetchPolicyTemplates(); - handleFetchPolicies(); - } - } -); diff --git a/src/modules/contents/attachments/components/AttachmentUploadModal.vue b/src/modules/contents/attachments/components/AttachmentUploadModal.vue index 4087f5cf..465aa057 100644 --- a/src/modules/contents/attachments/components/AttachmentUploadModal.vue +++ b/src/modules/contents/attachments/components/AttachmentUploadModal.vue @@ -25,14 +25,9 @@ const emit = defineEmits<{ (event: "close"): void; }>(); -const { groups, handleFetchGroups } = useFetchAttachmentGroup({ - fetchOnMounted: false, -}); -const { policies, handleFetchPolicies } = useFetchAttachmentPolicy({ - fetchOnMounted: false, -}); -const { policyTemplates, handleFetchPolicyTemplates } = - useFetchAttachmentPolicyTemplate(); +const { groups } = useFetchAttachmentGroup(); +const { policies, handleFetchPolicies } = useFetchAttachmentPolicy(); +const { policyTemplates } = useFetchAttachmentPolicyTemplate(); const selectedGroupName = useLocalStorage("attachment-upload-group", ""); const selectedPolicyName = useLocalStorage("attachment-upload-policy", ""); @@ -45,12 +40,13 @@ watch( () => { if (selectedGroupName.value === "") return; - const group = groups.value.find( + const group = groups.value?.find( (group) => group.metadata.name === selectedGroupName.value ); if (!group) { - selectedGroupName.value = - groups.value.length > 0 ? groups.value[0].metadata.name : ""; + selectedGroupName.value = groups.value?.length + ? groups.value[0].metadata.name + : ""; } } ); @@ -58,12 +54,13 @@ watch( watch( () => policies.value, () => { - const policy = policies.value.find( + const policy = policies.value?.find( (policy) => policy.metadata.name === selectedPolicyName.value ); if (!policy) { - selectedPolicyName.value = - policies.value.length > 0 ? policies.value[0].metadata.name : ""; + selectedPolicyName.value = policies.value?.length + ? policies.value[0].metadata.name + : ""; } } ); @@ -87,7 +84,7 @@ const handleOpenCreateNewPolicyModal = (policyTemplate: PolicyTemplate) => { const onEditingModalClose = async () => { await handleFetchPolicies(); - policyToCreate.value = policies.value[0]; + policyToCreate.value = policies.value?.[0]; }; const onVisibleChange = (visible: boolean) => { @@ -102,9 +99,6 @@ watch( () => props.visible, (newValue) => { if (newValue) { - handleFetchGroups(); - handleFetchPolicies(); - handleFetchPolicyTemplates(); uploadVisible.value = true; } else { const uploadVisibleTimer = setTimeout(() => { @@ -131,7 +125,7 @@ watch(
    +
    (); const selectedGroup = ref(); +const page = ref(1); +const size = ref(60); const { attachments, - loading, + isLoading, + total, selectedAttachment, selectedAttachments, handleFetchAttachments, - handlePaginationChange, handleSelect, handleSelectPrevious, handleSelectNext, handleReset, isChecked, -} = useAttachmentControl({ group: selectedGroup }); +} = useAttachmentControl({ group: selectedGroup, page, size }); const uploadVisible = ref(false); const detailVisible = ref(false); @@ -69,8 +71,6 @@ const onGroupChange = () => { handleReset(); handleFetchAttachments(); }; - -await handleFetchAttachments();