diff --git a/client/src/components/Panels/ToolBox.vue b/client/src/components/Panels/ToolBox.vue index e0d339660b6..5765e8a1bb9 100644 --- a/client/src/components/Panels/ToolBox.vue +++ b/client/src/components/Panels/ToolBox.vue @@ -66,7 +66,7 @@ const query = computed({ }, }); -const { currentPanel, currentPanelView } = storeToRefs(toolStore); +const { currentPanelView, currentToolSections } = storeToRefs(toolStore); const hasResults = computed(() => results.value.length > 0); const queryTooShort = computed(() => query.value && query.value.length < 3); const queryFinished = computed(() => query.value && queryPending.value != true); @@ -99,7 +99,7 @@ const localSectionsById = computed(() => { const validToolIdsInCurrentView = Object.keys(localToolsById.value); // Looking within each `ToolSection`, and filtering on child elements - const sectionEntries = getValidToolsInEachSection(validToolIdsInCurrentView, currentPanel.value); + const sectionEntries = getValidToolsInEachSection(validToolIdsInCurrentView, currentToolSections.value); // Looking at each item in the panel now (not within each child) return getValidPanelItems( diff --git a/client/src/components/Panels/ToolPanel.vue b/client/src/components/Panels/ToolPanel.vue index c1bbfc0bd5d..a5ebb0ecedb 100644 --- a/client/src/components/Panels/ToolPanel.vue +++ b/client/src/components/Panels/ToolPanel.vue @@ -32,7 +32,8 @@ const emit = defineEmits<{ (e: "onInsertWorkflowSteps", workflowId: string, workflowStepCount: number | undefined): void; }>(); -const { currentPanel, currentPanelView, isPanelPopulated, loading, panel, panels } = storeToRefs(toolStore); +const { currentPanelView, currentToolSections, isPanelPopulated, loading, panels, toolSections } = + storeToRefs(toolStore); const errorMessage = ref(""); const panelName = ref(""); @@ -129,7 +130,7 @@ watch( () => currentPanelView.value, async (newVal) => { query.value = ""; - if ((!newVal || !panel.value[newVal]) && panelsFetched.value) { + if ((!newVal || !toolSections.value[newVal]) && panelsFetched.value) { await initializePanel(); } } @@ -202,7 +203,7 @@ initializePanel(); - + diff --git a/client/src/stores/toolStore.ts b/client/src/stores/toolStore.ts index 8743da99643..d5c712a7614 100644 --- a/client/src/stores/toolStore.ts +++ b/client/src/stores/toolStore.ts @@ -77,15 +77,15 @@ export const useToolStore = defineStore("toolStore", () => { const currentPanelView: Ref = useUserLocalStorage("tool-store-view", ""); const defaultPanelView: Ref = ref(""); const loading = ref(false); - const panel = ref>>({}); const panels = ref>({}); const searchWorker = ref(undefined); const toolsById = shallowRef>({}); const toolResults = ref>({}); + const toolSections = ref>>({}); - const currentPanel = computed(() => { + const currentToolSections = computed(() => { const effectiveView = currentPanelView.value; - return panel.value[effectiveView] || {}; + return toolSections.value[effectiveView] || {}; }); const getToolsById = computed(() => { @@ -111,7 +111,7 @@ export const useToolStore = defineStore("toolStore", () => { }); const isPanelPopulated = computed(() => { - return Object.keys(toolsById.value).length > 0 && Object.keys(currentPanel.value).length > 0; + return Object.keys(toolsById.value).length > 0 && Object.keys(currentToolSections.value).length > 0; }); /** These are filtered tool sections (`ToolSection[]`) for the `currentPanel`; @@ -121,7 +121,7 @@ export const useToolStore = defineStore("toolStore", () => { */ const panelSections = computed(() => { return (panelView: string) => { - return Object.values(panel.value[panelView] || {}).filter((section) => { + return Object.values(toolSections.value[panelView] || {}).filter((section) => { const sec = section as ToolSection; return ( sec.tools && @@ -142,11 +142,11 @@ export const useToolStore = defineStore("toolStore", () => { }; }); - async function fetchPanel(panelView: string) { + async function fetchToolSections(panelView: string) { try { loading.value = true; const { data } = await axios.get(`${getAppRoot()}api/tool_panels/${panelView}`); - savePanel(panelView, data); + saveToolSections(panelView, data); } catch (e) { rethrowSimple(e); } finally { @@ -201,6 +201,7 @@ export const useToolStore = defineStore("toolStore", () => { async function initializePanel() { try { + currentPanelView.value = currentPanelView.value || defaultPanelView.value; await setPanel(currentPanelView.value); } catch (e) { await setPanel(defaultPanelView.value); @@ -214,8 +215,8 @@ export const useToolStore = defineStore("toolStore", () => { }, {} as Record); } - function savePanel(panelView: string, newPanel: { [id: string]: ToolSection | Tool }) { - Vue.set(panel.value, panelView, newPanel); + function saveToolSections(panelView: string, newPanel: { [id: string]: ToolSection | Tool }) { + Vue.set(toolSections.value, panelView, newPanel); } function saveToolForId(toolId: string, toolData: Tool) { @@ -228,8 +229,8 @@ export const useToolStore = defineStore("toolStore", () => { async function setPanel(panelView: string) { try { - if (!panel.value[panelView]) { - await fetchPanel(panelView); + if (!toolSections.value[panelView]) { + await fetchToolSections(panelView); } currentPanelView.value = panelView; } catch (e) { @@ -238,10 +239,10 @@ export const useToolStore = defineStore("toolStore", () => { } return { - currentPanel, currentPanelView, + currentToolSections, defaultPanelView, - fetchPanel, + fetchToolSections, fetchPanels, fetchToolForId, fetchTools, @@ -251,15 +252,15 @@ export const useToolStore = defineStore("toolStore", () => { getToolForId, getToolNameById, getToolsById, - panel, panels, saveAllTools, - savePanel, saveToolForId, saveToolResults, + saveToolSections, searchWorker, sectionDatalist, setPanel, toolsById, + toolSections, }; });