diff --git a/src/components/parameter-schema/ParameterSchemaDescriptionComponent.vue b/src/components/parameter-schema/ParameterSchemaDescriptionComponent.vue
index 79063a1285586e9679ba55d776e8a4510be72423..23b4866afae6ac39bafe0f9d061db784fd2a51ac 100644
--- a/src/components/parameter-schema/ParameterSchemaDescriptionComponent.vue
+++ b/src/components/parameter-schema/ParameterSchemaDescriptionComponent.vue
@@ -1,5 +1,5 @@
<script setup lang="ts">
-import { computed } from "vue";
+import { computed, ref } from "vue";
import ParameterGroupDescription from "@/components/parameter-schema/description-mode/ParameterGroupDescription.vue";
import FontAwesomeIcon from "@/components/FontAwesomeIcon.vue";
@@ -16,15 +16,28 @@ type ParameterGroup = {
icon?: string;
};
-const navParameterGroups = computed<ParameterGroup[]>(() =>
- Object.keys(parameterGroups.value).map((group) => {
+const showHidden = ref<boolean>(false);
+
+const navParameterGroups = computed<ParameterGroup[]>(() => {
+ let groups = Object.keys(parameterGroups.value).map((group) => {
return {
group: group,
title: parameterGroups.value[group]["title"],
icon: parameterGroups.value[group]["fa_icon"],
};
- }),
-);
+ });
+ if (!showHidden.value) {
+ groups = groups.filter(
+ // filter all groups that have only hidden parameters
+ (group) =>
+ Object.keys(parameterGroups.value[group.group]["properties"]).filter(
+ (key) =>
+ !parameterGroups.value[group.group]["properties"][key]["hidden"],
+ ).length > 0,
+ );
+ }
+ return groups;
+});
const parameterGroups = computed<Record<string, never>>(
() => props.schema["definitions"],
@@ -38,6 +51,7 @@ const parameterGroups = computed<Record<string, never>>(
<parameter-group-description
:parameter-group="group"
:parameter-group-name="groupName"
+ :show-hidden="showHidden"
/>
</div>
</div>
@@ -53,15 +67,31 @@ const parameterGroups = computed<Record<string, never>>(
v-for="group in navParameterGroups"
:key="group.group"
>
- <a :href="'#' + group.group"
- ><font-awesome-icon
+ <a :href="'#' + group.group">
+ <font-awesome-icon
:icon="group.icon"
v-if="group.icon"
class="me-2"
- />{{ group.title }}</a
+ />
+ {{ group.title }}</a
>
</li>
</ul>
+ <div class="mx-auto mb-3">
+ <input
+ type="checkbox"
+ class="btn-check ms-1"
+ id="btn-check-outlined"
+ v-model="showHidden"
+ autocomplete="off"
+ />
+ <label class="btn btn-outline-primary" for="btn-check-outlined">
+ <font-awesome-icon
+ :icon="showHidden ? 'fa-solid fa-eye' : 'fa-solid fa-eye-slash'"
+ />
+ Show hidden Parameters
+ </label>
+ </div>
</nav>
</nav>
</div>
diff --git a/src/components/parameter-schema/ParameterSchemaFormComponent.vue b/src/components/parameter-schema/ParameterSchemaFormComponent.vue
index 4dd82b93caac988eaa925c201c61d335546fad13..ae1a09d8a07e4f99cb4d865598e5c3876254d727 100644
--- a/src/components/parameter-schema/ParameterSchemaFormComponent.vue
+++ b/src/components/parameter-schema/ParameterSchemaFormComponent.vue
@@ -62,12 +62,14 @@ const formState = reactive<{
pipelineNotes: string;
report_bucket?: string;
errorType?: string;
+ showHidden: boolean;
}>({
formInput: {},
validated: false,
pipelineNotes: "",
report_bucket: undefined,
errorType: undefined,
+ showHidden: false,
});
// Computed Properties
@@ -77,15 +79,26 @@ const parameterGroups = computed<Record<string, never>>(
);
// Create a list with the names of all parameter groups
-const navParameterGroups = computed<ParameterGroup[]>(() =>
- Object.keys(parameterGroups.value).map((group) => {
+const navParameterGroups = computed<ParameterGroup[]>(() => {
+ let groups = Object.keys(parameterGroups.value).map((group) => {
return {
group: group,
title: parameterGroups.value[group]["title"],
icon: parameterGroups.value[group]["fa_icon"],
};
- }),
-);
+ });
+ if (!formState.showHidden) {
+ groups = groups.filter(
+ // filter all groups that have only hidden parameters
+ (group) =>
+ Object.keys(parameterGroups.value[group.group]["properties"]).filter(
+ (key) =>
+ !parameterGroups.value[group.group]["properties"][key]["hidden"],
+ ).length > 0,
+ );
+ }
+ return groups;
+});
// Watchers
// =============================================================================
@@ -117,6 +130,7 @@ function updateSchema(schema: Record<string, any>) {
]);
formState.formInput = Object.fromEntries(b);
}
+
/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars */
function startWorkflow() {
errorToast?.hide();
@@ -251,6 +265,7 @@ onMounted(() => {
v-if="formState.formInput[groupName]"
:parameter-group-name="groupName"
:parameter-group="group"
+ :showHidden="formState.showHidden"
/>
</template>
</form>
@@ -303,8 +318,8 @@ onMounted(() => {
<nav v-if="props.schema" class="nav">
<ul class="ps-0">
<li class="nav-link">
- <a href="#pipelineGeneralOptions"
- ><font-awesome-icon icon="fa-solid fa-gear" class="me-2" />
+ <a href="#pipelineGeneralOptions">
+ <font-awesome-icon icon="fa-solid fa-gear" class="me-2" />
General Pipeline Options
</a>
</li>
@@ -313,15 +328,35 @@ onMounted(() => {
v-for="group in navParameterGroups"
:key="group.group"
>
- <a :href="'#' + group.group"
- ><font-awesome-icon
+ <a :href="'#' + group.group">
+ <font-awesome-icon
:icon="group.icon"
v-if="group.icon"
class="me-2"
- />{{ group.title }}</a
+ />
+ {{ group.title }}</a
>
</li>
</ul>
+ <div class="mx-auto mb-3">
+ <input
+ type="checkbox"
+ class="btn-check ms-1"
+ id="btn-check-outlined"
+ v-model="formState.showHidden"
+ autocomplete="off"
+ />
+ <label class="btn btn-outline-primary" for="btn-check-outlined">
+ <font-awesome-icon
+ :icon="
+ formState.showHidden
+ ? 'fa-solid fa-eye'
+ : 'fa-solid fa-eye-slash'
+ "
+ />
+ Show hidden Parameters
+ </label>
+ </div>
</nav>
<!-- Loading nav links -->
<div v-else class="placeholder-glow ps-3 pt-3">
diff --git a/src/components/parameter-schema/description-mode/ParameterDescription.vue b/src/components/parameter-schema/description-mode/ParameterDescription.vue
index bace4110ccb3454541deb450e061f2161c353ebc..5769d9372eeace54a7c2c11394c6f750e0b65c52 100644
--- a/src/components/parameter-schema/description-mode/ParameterDescription.vue
+++ b/src/components/parameter-schema/description-mode/ParameterDescription.vue
@@ -16,6 +16,10 @@ const props = defineProps({
type: String,
required: true,
},
+ showHidden: {
+ type: Boolean,
+ default: false,
+ },
});
const randomIDSuffix = Math.random().toString(16).substring(2, 8);
@@ -32,7 +36,7 @@ const defaultValue = computed<string | undefined>(
const enumValues = computed<string[] | undefined>(
() => props.parameter["enum"]?.map((val: string) => val.toString()),
);
-// const hidden = computed<boolean>(() => props.parameter["hidden"] ?? false);
+const hidden = computed<boolean>(() => props.parameter["hidden"] ?? false);
const parameterPattern = computed<string | undefined>(
() => props.parameter["pattern"],
);
@@ -48,6 +52,7 @@ const showRightColum = computed<boolean>(
<template>
<div
class="row border-top border-bottom border-secondary align-items-start py-2"
+ v-if="showHidden || !hidden"
>
<div class="fs-6 col-3">
<font-awesome-icon :icon="icon" v-if="icon" class="me-2" />
diff --git a/src/components/parameter-schema/description-mode/ParameterGroupDescription.vue b/src/components/parameter-schema/description-mode/ParameterGroupDescription.vue
index 6ced29b2ce7be8ed1ab88d209acc12eca02c9e92..c229f8f51ab8d615af6ee06670886ed8074fcd45 100644
--- a/src/components/parameter-schema/description-mode/ParameterGroupDescription.vue
+++ b/src/components/parameter-schema/description-mode/ParameterGroupDescription.vue
@@ -15,12 +15,16 @@ const props = defineProps({
type: String,
required: true,
},
+ showHidden: {
+ type: Boolean,
+ default: false,
+ },
});
const title = computed<string>(() => props.parameterGroup["title"]);
const icon = computed<string>(() => props.parameterGroup["fa_icon"]);
const description = computed<string>(() => props.parameterGroup["description"]);
-/*
+
const groupHidden = computed<boolean>(() =>
Object.keys(parameters.value).reduce(
(acc: boolean, val: string) => acc && parameters.value[val]["hidden"],
@@ -28,14 +32,13 @@ const groupHidden = computed<boolean>(() =>
),
);
- */
const parameters = computed<Record<string, never>>(
() => props.parameterGroup["properties"],
);
</script>
<template>
- <div class="mb-5">
+ <div class="mb-5" v-if="props.showHidden || !groupHidden">
<div class="row">
<h2 :id="props.parameterGroupName">
<font-awesome-icon :icon="icon" class="me-3" v-if="icon" />{{ title }}
@@ -53,6 +56,7 @@ const parameters = computed<Record<string, never>>(
:required="
props.parameterGroup['required']?.includes(parameterName) ?? false
"
+ :show-hidden="showHidden"
/>
</template>
</div>
diff --git a/src/components/parameter-schema/form-mode/ParameterGroupForm.vue b/src/components/parameter-schema/form-mode/ParameterGroupForm.vue
index 4dae916a8f6d301e1b52adcafd4d31f558c99c36..e66ef66d0dfdaaa8468d303dd18325a22e7fafe5 100644
--- a/src/components/parameter-schema/form-mode/ParameterGroupForm.vue
+++ b/src/components/parameter-schema/form-mode/ParameterGroupForm.vue
@@ -23,6 +23,10 @@ const props = defineProps({
type: Object,
required: true,
},
+ showHidden: {
+ type: Boolean,
+ default: false,
+ },
});
const title = computed<string>(() => props.parameterGroup["title"]);
const icon = computed<string>(() => props.parameterGroup["fa_icon"]);
@@ -71,7 +75,7 @@ watch(
</script>
<template>
- <div class="card mb-3" :hidden="groupHidden">
+ <div class="card mb-3" :hidden="!showHidden && groupHidden">
<h2 class="card-header" :id="props.parameterGroupName">
<font-awesome-icon :icon="icon" class="me-2" v-if="icon" />
{{ title }}
@@ -82,7 +86,7 @@ watch(
v-for="(parameter, parameterName) in parameters"
:key="parameterName"
>
- <div :hidden="parameter['hidden']">
+ <div :hidden="!showHidden && parameter['hidden']">
<div class="input-group">
<span class="input-group-text" :id="parameterName + '-help'">
<font-awesome-icon