diff --git a/packages/frontend/editor-ui/src/views/WorkflowsView.vue b/packages/frontend/editor-ui/src/views/WorkflowsView.vue index 46540598ce..ad441e758c 100644 --- a/packages/frontend/editor-ui/src/views/WorkflowsView.vue +++ b/packages/frontend/editor-ui/src/views/WorkflowsView.vue @@ -62,6 +62,9 @@ import { useFoldersStore } from '@/stores/folders.store'; import { useFolders } from '@/composables/useFolders'; import { useUsageStore } from '@/stores/usage.store'; +const SEARCH_DEBOUNCE_TIME = 300; +const FILTERS_DEBOUNCE_TIME = 100; + interface Filters extends BaseFilters { status: string | boolean; tags: string[]; @@ -348,6 +351,13 @@ sourceControlStore.$onAction(({ name, after }) => { after(async () => await initialize()); }); +const onWorkflowDeleted = async () => { + await Promise.all([ + fetchWorkflows(), + foldersStore.fetchTotalWorkflowsAndFoldersCount(route.params.projectId as string | undefined), + ]); +}; + const onFolderDeleted = async (payload: { folderId: string; workflowCount: number; @@ -356,6 +366,9 @@ const onFolderDeleted = async (payload: { const folderInfo = foldersStore.getCachedFolder(payload.folderId); foldersStore.deleteFoldersFromCache([payload.folderId, folderInfo?.parentFolder ?? '']); // If the deleted folder is the current folder, navigate to the parent folder + await foldersStore.fetchTotalWorkflowsAndFoldersCount( + route.params.projectId as string | undefined, + ); if (currentFolderId.value === payload.folderId) { void router.push({ @@ -410,6 +423,7 @@ const initialize = async () => { fetchWorkflows(), workflowsStore.fetchActiveWorkflows(), usageStore.getLicenseInfo(), + foldersStore.fetchTotalWorkflowsAndFoldersCount(route.params.projectId as string | undefined), ]); breadcrumbsLoading.value = false; workflowsAndFolders.value = resourcesPage; @@ -428,6 +442,7 @@ const fetchWorkflows = async () => { const delayedLoading = debounce(() => { loading.value = true; }, 300); + const routeProjectId = route.params?.projectId as string | undefined; const homeProjectFilter = filters.value.homeProject || undefined; const parentFolder = (route.params?.folderId as string) || undefined; @@ -473,8 +488,6 @@ const fetchWorkflows = async () => { breadcrumbsLoading.value = false; } - await foldersStore.fetchTotalWorkflowsAndFoldersCount(routeProjectId); - workflowsAndFolders.value = fetchedResources; return fetchedResources; } catch (error) { @@ -507,14 +520,14 @@ const onSortUpdated = async (sort: string) => { const onFiltersUpdated = async () => { currentPage.value = 1; saveFiltersOnQueryString(); - await callDebounced(fetchWorkflows, { debounceTime: 100, trailing: true }); + await callDebounced(fetchWorkflows, { debounceTime: FILTERS_DEBOUNCE_TIME, trailing: true }); }; const onSearchUpdated = async (search: string) => { currentPage.value = 1; saveFiltersOnQueryString(); if (search) { - await callDebounced(fetchWorkflows, { debounceTime: 100, trailing: true }); + await callDebounced(fetchWorkflows, { debounceTime: SEARCH_DEBOUNCE_TIME, trailing: true }); } else { // No need to debounce when clearing search await fetchWorkflows(); @@ -523,12 +536,12 @@ const onSearchUpdated = async (search: string) => { const setCurrentPage = async (page: number) => { currentPage.value = page; - await callDebounced(fetchWorkflows, { debounceTime: 100, trailing: true }); + await callDebounced(fetchWorkflows, { debounceTime: FILTERS_DEBOUNCE_TIME, trailing: true }); }; const setPageSize = async (size: number) => { pageSize.value = size; - await callDebounced(fetchWorkflows, { debounceTime: 100, trailing: true }); + await callDebounced(fetchWorkflows, { debounceTime: FILTERS_DEBOUNCE_TIME, trailing: true }); }; const onClickTag = async (tagId: string) => { @@ -1300,7 +1313,7 @@ const onCreateWorkflowClick = () => { :workflow-list-event-bus="workflowListEventBus" :read-only="readOnlyEnv" @click:tag="onClickTag" - @workflow:deleted="fetchWorkflows" + @workflow:deleted="onWorkflowDeleted" @workflow:moved="fetchWorkflows" @workflow:duplicated="fetchWorkflows" @workflow:active-toggle="onWorkflowActiveToggle"