Resolve "Show toast when updating parameter visibility"

Closes #170 (closed)

src/views/workflows/EditParameterVisibilityView.vue

@@ -11,7 +11,8 @@ import Sortable from "sortablejs";
 import ParameterSchemaDescriptionComponent from "@/components/parameter-schema/ParameterSchemaDescriptionComponent.vue";
 import { useNameStore } from "@/stores/names.ts";
 import type { ClowmInfo } from "@/types/ClowmInfo.ts";
-import { Tooltip } from "bootstrap";
+import { Toast, Tooltip } from "bootstrap";
+import BootstrapToast from "@/components/BootstrapToast.vue";
 
 const props = defineProps<{
   versionId: string;
@@ -25,11 +26,13 @@ const formState = reactive<{
   clowmInfo?: ClowmInfo;
   parameterVisibility: ParameterVisibilityMapping;
   loadSchema: boolean;
+  deleted: boolean;
 }>({
   schema: {},
   parameterVisibility: {},
   loadSchema: true,
   clowmInfo: undefined,
+  deleted: false,
 });
 
 const workflowRepository = useWorkflowStore();
@@ -48,6 +51,7 @@ const simpleListElement = ref<HTMLUListElement | undefined>(undefined);
 const advancedListElement = ref<HTMLUListElement | undefined>(undefined);
 const expertListElement = ref<HTMLUListElement | undefined>(undefined);
 const invisibleListElement = ref<HTMLUListElement | undefined>(undefined);
+let successToast: Toast | undefined = undefined;
 
 const parameters = computed<string[]>(() => {
   const a = Object.keys(formState.schema["properties"] ?? {});
@@ -75,20 +79,23 @@ function deleteVisibilityMapping() {
       parameter_visibility: undefined,
     })
     .then(() => {
+      formState.deleted = true;
       formState.parameterVisibility = computeInitialMapping(formState.schema);
+      successToast?.show();
     });
 }
 
 function saveVisibilityMapping() {
-  workflowRepository.updateWorkflowExtension(
-    props.workflowId,
-    props.versionId,
-    {
+  workflowRepository
+    .updateWorkflowExtension(props.workflowId, props.versionId, {
       ...(workflowRepository.versionMapping[props.versionId]
         .parameter_extension ?? {}),
       parameter_visibility: formState.parameterVisibility,
-    },
-  );
+    })
+    .then(() => {
+      formState.deleted = false;
+      successToast?.show();
+    });
 }
 
 function computeInitialMapping(
@@ -138,6 +145,7 @@ function computeInitialMapping(
 
 onMounted(() => {
   formState.loadSchema = true;
+  successToast = Toast.getOrCreateInstance("#edit-visibility-toast");
   workflowRepository
     .fetchWorkflowDocumentation(
       props.workflowId,
@@ -233,6 +241,12 @@ onMounted(() => {
 </script>
 
 <template>
+  <bootstrap-toast toast-id="edit-visibility-toast"
+    >Successfully
+    <template v-if="formState.deleted">deleted</template>
+    <template v-else>edited</template>
+    parameter visibility.
+  </bootstrap-toast>
   <div class="d-flex justify-content-between border-bottom mb-4 pb-2">
     <h2 class="w-fit">
       Edit parameter visibility of