Use tool section instead of panel to avoid confusion

This commit is contained in:
guerler
2025-03-03 10:54:11 -05:00
parent bdfc61090e
commit 378b7f99b4
3 changed files with 22 additions and 20 deletions
+2 -2
View File
@@ -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(
+4 -3
View File
@@ -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();
</b-badge>
</div>
</div>
<b-alert v-else-if="currentPanel" class="m-2" variant="info" show>
<b-alert v-else-if="currentToolSections" class="m-2" variant="info" show>
<LoadingSpan message="Loading Toolbox" />
</b-alert>
</template>
+16 -15
View File
@@ -77,15 +77,15 @@ export const useToolStore = defineStore("toolStore", () => {
const currentPanelView: Ref<string> = useUserLocalStorage("tool-store-view", "");
const defaultPanelView: Ref<string> = ref("");
const loading = ref(false);
const panel = ref<Record<string, Record<string, Tool | ToolSection>>>({});
const panels = ref<Record<string, Panel>>({});
const searchWorker = ref<Worker | undefined>(undefined);
const toolsById = shallowRef<Record<string, Tool>>({});
const toolResults = ref<Record<string, string[]>>({});
const toolSections = ref<Record<string, Record<string, Tool | ToolSection>>>({});
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<string, Tool>);
}
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,
};
});