open tool edit dialog for tools with custom params

src/components/external-tools/configuration/ContextExternalToolConfigurator.vue

@@ -2,6 +2,7 @@
 	<external-tool-configurator
 		:templates="availableTools"
 		:configuration="configuration"
+		:isPreferredTool="isPreferredTool"
 		:error="apiError"
 		:loading="loading"
 		:display-settings-title="displaySettingsTitle"
@@ -25,9 +26,12 @@
 
 <script setup lang="ts">
 import ExternalToolConfigurator from "@/components/external-tools/configuration/ExternalToolConfigurator.vue";
+import { useCardRestApi } from "@/modules/data/board/cardActions/cardRestApi.composable";
 import { ToolContextType } from "@/serverApi/v3";
 import { ToolParameterEntry } from "@/store/external-tool";
+import SchoolExternalToolsModule from "@/store/school-external-tools";
 import { BusinessError } from "@/store/types/commons";
+import { injectStrict, SCHOOL_EXTERNAL_TOOLS_MODULE_KEY } from "@/utils/inject";
 import {
 	ContextExternalTool,
 	ContextExternalToolConfigurationTemplate,
@@ -86,6 +90,17 @@ const apiError: ComputedRef<BusinessError | undefined> = computed(
 	() => configError.value || templateError.value
 );
 
+const schoolExternalToolsModule: SchoolExternalToolsModule = injectStrict(
+	SCHOOL_EXTERNAL_TOOLS_MODULE_KEY
+);
+
+const { preferredToolConfigurationTemplate } = useCardRestApi();
+
+const preferredToolFromStore =
+	schoolExternalToolsModule.getContextExternalToolConfigurationTemplate;
+
+const isPreferredTool: Ref<boolean> = ref(false);
+
 const onCancel = async () => {
 	emit("cancel");
 };
@@ -129,11 +144,23 @@ const fetchData = async () => {
 
 		await fetchContextExternalTool(props.configId);
 		displayName.value = configuration.value?.displayName;
+	} else if (preferredToolFromStore) {
+		availableTools.value = [preferredToolFromStore];
+		isPreferredTool.value = true;
+		schoolExternalToolsModule.setContextExternalToolConfigurationTemplate(
+			undefined
+		);
+		console.log("available tools = ", availableTools.value);
 	} else {
 		await fetchAvailableToolConfigurationsForContext(
 			props.contextId,
 			props.contextType
 		);
+		console.log("wrong fetch");
+		console.log(
+			"is preferrd tool already set? ",
+			preferredToolConfigurationTemplate.value
+		);
 	}
 
 	hasData.value = true;

src/components/external-tools/configuration/ExternalToolConfigurator.vue

@@ -100,7 +100,6 @@
 
 <script setup lang="ts">
 import ExternalToolConfigSettings from "@/components/external-tools/configuration/ExternalToolConfigSettings.vue";
-import { mdiAlertCircle, mdiContentPaste } from "@icons/material";
 import { useExternalToolMappings } from "@/composables/external-tool-mappings.composable";
 import {
 	SchoolExternalTool,
@@ -114,6 +113,7 @@ import {
 	ContextExternalTool,
 	ExternalToolConfigurationTemplate,
 } from "@data-external-tool";
+import { mdiAlertCircle, mdiContentPaste } from "@icons/material";
 import {
 	computed,
 	ComputedRef,
@@ -145,6 +145,9 @@ const props = defineProps({
 	configuration: {
 		type: Object as PropType<ConfigurationTypes>,
 	},
+	isPreferredTool: {
+		type: Boolean,
+	},
 	error: {
 		type: Object as PropType<BusinessError>,
 	},
@@ -364,4 +367,10 @@ const filterToolNameOrUrl = (
 
 	return isMatchItemName || isMatchItemUrl;
 };
+
+watch(configurationTemplates, () => {
+	if (props.isPreferredTool) {
+		selectedTemplate.value = props.templates[0];
+	}
+});
 </script>

src/modules/data/board/cardActions/cardRestApi.composable.ts

@@ -10,15 +10,18 @@ import {
 	PreferredToolInfo,
 	ToolContextType,
 } from "@/serverApi/v3";
+import SchoolExternalToolsModule from "@/store/school-external-tools";
 import { AnyContentElement } from "@/types/board/ContentElement";
 import { delay } from "@/utils/helpers";
+import { injectStrict, SCHOOL_EXTERNAL_TOOLS_MODULE_KEY } from "@/utils/inject";
 import { useBoardStore } from "@data-board";
 import {
 	ContextExternalTool,
 	ContextExternalToolConfigurationTemplate,
 	ContextExternalToolSave,
 	useContextExternalToolApi,
 } from "@data-external-tool";
+import { ref, Ref } from "vue";
 import { useBoardApi } from "../BoardApi.composable";
 import { useCardStore } from "../Card.store";
 import { useSharedCardRequestPool } from "../CardRequestPool.composable";
@@ -57,6 +60,18 @@ export const useCardRestApi = () => {
 
 	const { setEditModeId } = useSharedEditMode();
 
+	const schoolExternalToolsModule: SchoolExternalToolsModule = injectStrict(
+		SCHOOL_EXTERNAL_TOOLS_MODULE_KEY
+	);
+
+	const preferredToolConfigurationTemplate: Ref<
+		ContextExternalToolConfigurationTemplate | undefined
+	> = ref();
+
+	const getPreferredToolConfigurationTemplate = () => {
+		return preferredToolConfigurationTemplate;
+	};
+
 	const createElementRequest = async (
 		payload: CreateElementRequestPayload
 	): Promise<AnyContentElement | undefined> => {
@@ -108,6 +123,7 @@ export const useCardRestApi = () => {
 					(availableTool) =>
 						availableTool.schoolExternalToolId === tool.schoolExternalToolId
 				);
+				console.log("found template for tool: ", preferredTool);
 
 				if (!preferredTool?.parameters.length) {
 					const contextExternalToolSave: ContextExternalToolSave = {
@@ -117,8 +133,6 @@ export const useCardRestApi = () => {
 						parameters: [],
 					};
 
-					// get external tool -> get context params (see contextConfig dialog => get context params from schoolToolId)
-
 					const contextExternalTool: ContextExternalTool =
 						await createContextExternalToolCall(contextExternalToolSave);
 					console.log("Tool gespeichert mit id: ", contextExternalTool.id);
@@ -135,6 +149,20 @@ export const useCardRestApi = () => {
 					}
 
 					await updateElementCall(newElement.data);
+				} else {
+					schoolExternalToolsModule.setContextExternalToolConfigurationTemplate(
+						preferredTool
+					);
+					console.log(
+						"preferred tool is set in store: ",
+						schoolExternalToolsModule.getContextExternalToolConfigurationTemplate
+					);
+
+					preferredToolConfigurationTemplate.value = preferredTool;
+					console.log(
+						"preferred tool is set: ",
+						preferredToolConfigurationTemplate.value
+					);
 				}
 			}
 
@@ -288,6 +316,8 @@ export const useCardRestApi = () => {
 	const disconnectSocketRequest = (): void => {};
 
 	return {
+		preferredToolConfigurationTemplate,
+		getPreferredToolConfigurationTemplate,
 		createElementRequest,
 		createPreferredElement,
 		getPreferredTools,

src/store/school-external-tools.ts

@@ -7,7 +7,10 @@ import {
 	ToolApiInterface,
 } from "@/serverApi/v3";
 import { $axios, mapAxiosErrorToResponseError } from "@/utils/api";
-import { SchoolExternalToolConfigurationTemplate } from "@data-external-tool";
+import {
+	ContextExternalToolConfigurationTemplate,
+	SchoolExternalToolConfigurationTemplate,
+} from "@data-external-tool";
 import { AxiosResponse } from "axios";
 import { Action, Module, Mutation, VuexModule } from "vuex-module-decorators";
 import { SchoolExternalTool, SchoolExternalToolSave } from "./external-tool";
@@ -25,6 +28,10 @@ export default class SchoolExternalToolsModule extends VuexModule {
 	private schoolExternalToolConfigurationTemplates: SchoolExternalToolConfigurationTemplate[] =
 		[];
 
+	private contextExternalToolConfigurationTemplate:
+		| ContextExternalToolConfigurationTemplate
+		| undefined;
+
 	private loading = false;
 
 	private businessError: BusinessError = {
@@ -45,6 +52,12 @@ export default class SchoolExternalToolsModule extends VuexModule {
 		return this.schoolExternalToolConfigurationTemplates;
 	}
 
+	get getContextExternalToolConfigurationTemplate():
+		| ContextExternalToolConfigurationTemplate
+		| undefined {
+		return this.contextExternalToolConfigurationTemplate;
+	}
+
 	get getLoading(): boolean {
 		return this.loading;
 	}
@@ -72,6 +85,13 @@ export default class SchoolExternalToolsModule extends VuexModule {
 		this.schoolExternalToolConfigurationTemplates = [...toolConfigurations];
 	}
 
+	@Mutation
+	setContextExternalToolConfigurationTemplate(
+		toolConfiguration: ContextExternalToolConfigurationTemplate | undefined
+	): void {
+		this.contextExternalToolConfigurationTemplate = toolConfiguration;
+	}
+
 	@Mutation
 	setLoading(loading: boolean): void {
 		this.loading = loading;