Skip to content
Snippets Groups Projects
Verified Commit 4cfe079e authored by Daniel Göbel's avatar Daniel Göbel
Browse files

Allow switch between raw and parsed parameters 

#105
parent d1f15a21
No related branches found
No related tags found
1 merge request!102Resolve "Add UI for parameter translation layer"
Hide whitespace changes
Inline Side-by-side
Showing
with 102 additions and 24 deletions
src/components/parameter-schema/form-mode/ParameterFileInput.vue
+ 21
− 6
View file @ 4cfe079e
......@@ -5,7 +5,7 @@ import { useBucketStore } from "@/stores/buckets";
import type { SizeModifierType } from "@/types/PropTypes";
const model = defineModel<string | undefined>({ required: true });
const s3Regex = /s3:\/\/(\S*)\/(\S*)/g;
const s3Regex = /s3:\/\/([^\s/]*)(\/\S*)?/g;
const props = defineProps({
parameter: {
......@@ -23,8 +23,13 @@ const props = defineProps({
type: String as PropType<SizeModifierType>,
},
border: Boolean,
allowRaw: Boolean,
});
const emit = defineEmits<{
(e: "switch-to-raw"): void;
}>();
const s3ObjectRepository = useS3ObjectStore();
const bucketRepository = useBucketStore();
const randomIDSuffix = Math.random().toString(16).substring(2, 8);
......@@ -45,7 +50,7 @@ const inputDynamicClass = computed<string[]>(() => {
if (props.sizeModifier) {
cssClasses.push(`form-control-${props.sizeModifier}`);
}
if (!helpTextPresent.value) {
if (!helpTextPresent.value && !props.allowRaw) {
cssClasses.push("rounded-end");
}
return cssClasses;
......@@ -61,7 +66,7 @@ watch(model, (newVal, oldVal) => {
});
function parseModel(val?: string) {
if (val == undefined) {
if (val == undefined || val.length === 0) {
s3Path.bucket = "";
s3Path.key = undefined;
return;
......@@ -69,12 +74,14 @@ function parseModel(val?: string) {
const match = s3Regex.exec(val ?? "");
if (match) {
s3Path.bucket = match[1];
s3Path.key = match[2];
s3Path.key = match[2]?.slice(1);
if (bucketRepository.bucketMapping[s3Path.bucket] == undefined) {
console.log("Missing bucket");
// Missing bucket
emit("switch-to-raw");
}
} else {
console.log("Not S3 Path");
// Not S3 Path
emit("switch-to-raw");
}
}
......@@ -186,6 +193,14 @@ onMounted(() => {
<datalist :id="'keys-options-' + randomIDSuffix">
<option v-for="obj in keyDataList" :value="obj" :key="obj" />
</datalist>
<button
v-if="allowRaw"
type="button"
class="btn btn-outline-secondary"
@click="emit('switch-to-raw')"
>
Advanced
</button>
</template>
<style scoped></style>
src/components/parameter-schema/form-mode/ParameterGroupForm.vue
+ 1
− 0
View file @ 4cfe079e
......@@ -108,6 +108,7 @@ function parameterId(parameterName: string): string {
:required="parameterRequired(parameterGroup, parameterName)"
border
:resource-parameter="resourceParameters?.includes(parameterName)"
:allow-raw="showOptional"
/>
<span
class="input-group-text cursor-pointer px-2 border border-secondary"
......
src/components/parameter-schema/form-mode/ParameterInput.vue
+ 13
− 5
View file @ 4cfe079e
<script setup lang="ts">
import { computed } from "vue";
import { computed, ref } from "vue";
import ParameterResourceInput from "@/components/parameter-schema/form-mode/ParameterResourceInput.vue";
import ParameterNumberInput from "@/components/parameter-schema/form-mode/ParameterNumberInput.vue";
import ParameterBooleanInput from "@/components/parameter-schema/form-mode/ParameterBooleanInput.vue";
......@@ -15,15 +15,17 @@ const model = defineModel<
required: true,
});
const rawInput = ref<boolean>(false);
const props = defineProps<{
// eslint-disable-next-line @typescript-eslint/no-explicit-any
parameter: Record<string, any>;
required?: boolean;
resourceParameter?: boolean;
advanced?: boolean;
rawModel?: boolean;
sizeModifier?: SizeModifierType;
border?: boolean;
allowRaw?: boolean;
}>();
const parameterType = computed<string>(
......@@ -56,22 +58,25 @@ const parameterType = computed<string>(
/>
<template v-else>
<parameter-resource-input
v-if="resourceParameter && !advanced"
v-if="resourceParameter && !rawInput"
:parameter="parameter"
:required="required"
v-model="model as ResourcePath_Input"
:rawModel="rawModel"
:size-modifier="sizeModifier"
:border="border"
@switch-to-raw="rawInput = true"
:allow-raw="allowRaw"
/>
<parameter-file-input
v-else-if="parameter['format'] && !advanced"
class="border border-secondary"
v-else-if="parameter['format'] && !rawInput"
:required="required"
:parameter="parameter"
v-model="model as string"
:size-modifier="sizeModifier"
:border="border"
@switch-to-raw="rawInput = true"
:allow-raw="allowRaw"
/>
<parameter-string-input
v-else
......@@ -80,6 +85,9 @@ const parameterType = computed<string>(
v-model="model as string"
:size-modifier="sizeModifier"
:border="border"
:resource-parameter="resourceParameter"
:allow-switch="allowRaw"
@disable-raw="rawInput = false"
/>
</template>
</template>
......
src/components/parameter-schema/form-mode/ParameterResourceInput.vue
+ 43
− 7
View file @ 4cfe079e
......@@ -18,6 +18,11 @@ const props = defineProps<{
rawModel?: boolean;
sizeModifier?: SizeModifierType;
border?: boolean;
allowRaw?: boolean;
}>();
const emit = defineEmits<{
(e: "switch-to-raw"): void;
}>();
const resourceRepository = useResourceStore();
......@@ -29,6 +34,8 @@ const resource = reactive<ResourcePath_Input>({
suffix: undefined,
});
const helpTextPresent = computed<boolean>(() => props.parameter["help_text"]);
const baseDynamicClass = computed<string[]>(() =>
props.border ? ["border", "border-secondary"] : [],
);
......@@ -45,6 +52,9 @@ const inputDynamicClass = computed<string[]>(() => {
if (props.sizeModifier) {
cssClasses.push(`form-control-${props.sizeModifier}`);
}
if (!helpTextPresent.value && !props.allowRaw) {
cssClasses.push("rounded-end");
}
return cssClasses;
});
......@@ -67,7 +77,7 @@ watch(model, (newVal, oldVal) => {
});
function parseModel(val?: string | ResourcePath_Input) {
if (val == undefined) {
if (val == undefined || (typeof val === "string" && val.length === 0)) {
Object.assign(resource, {
resource_id: "",
resource_version_id: "",
......@@ -76,9 +86,13 @@ function parseModel(val?: string | ResourcePath_Input) {
} else if (typeof val === "string") {
const match = resourceRegex.exec(val);
if (match) {
resource.resource_id = hexToUUID(match[1]);
resource.suffix = match[3];
resource.resource_version_id =
const tempResource: ResourcePath_Input = {
resource_id: "",
resource_version_id: "",
};
tempResource.resource_id = hexToUUID(match[1]);
tempResource.suffix = match[3];
tempResource.resource_version_id =
match[2].length === 32
? hexToUUID(match[2])
: resourceRepository.getLatestVersion(resource.resource_id);
......@@ -87,12 +101,26 @@ function parseModel(val?: string | ResourcePath_Input) {
resourceRepository.versionMapping[resource.resource_version_id] ==
undefined
) {
console.log("Missing resource");
// Missing resource
emit("switch-to-raw");
return;
}
Object.assign(resource, tempResource);
} else {
console.log("Not resource Path");
// Not resource path
emit("switch-to-raw");
}
} else {
if (
(val.resource_id.length > 0 &&
resourceRepository.resourceMapping[val.resource_id] == undefined) ||
(val.resource_version_id.length > 0 &&
resourceRepository.versionMapping[val.resource_version_id] == undefined)
) {
// Missing resource
emit("switch-to-raw");
return;
}
Object.assign(resource, JSON.parse(JSON.stringify(val)));
}
}
......@@ -178,7 +206,7 @@ onMounted(() => {
</select>
<input
type="text"
class="form-control rounded-end"
class="form-control"
:class="inputDynamicClass"
placeholder="/optional/path/in/resource/..."
minlength="2"
......@@ -196,6 +224,14 @@ onMounted(() => {
:key="file"
/>
</datalist>
<button
v-if="allowRaw"
type="button"
class="btn btn-outline-secondary"
@click="emit('switch-to-raw')"
>
Advanced
</button>
</template>
<style scoped></style>
src/components/parameter-schema/form-mode/ParameterStringInput.vue
+ 22
− 2
View file @ 4cfe079e
......@@ -8,7 +8,7 @@ const props = defineProps({
type: Object,
required: true,
validator(value: Record<string, never>) {
return "string" === value["type"] && value["enum"];
return "string" === value["type"];
},
},
required: Boolean,
......@@ -19,6 +19,18 @@ const props = defineProps({
type: String as PropType<SizeModifierType>,
},
border: Boolean,
resourceParameter: Boolean,
allowSwitch: Boolean,
});
const emit = defineEmits<{
(e: "disable-raw"): void;
}>();
const fileOrResource = computed<boolean>(() => {
return (
(props.resourceParameter || props.parameter["format"]) && props.allowSwitch
);
});
const dynamicCssClass = computed<string[]>(() => {
......@@ -26,7 +38,7 @@ const dynamicCssClass = computed<string[]>(() => {
if (props.sizeModifier) {
cssClasses.push(`form-control-${props.sizeModifier}`);
}
if (!helpTextPresent.value) {
if (!helpTextPresent.value && !fileOrResource.value) {
cssClasses.push("rounded-end");
}
if (props.border) {
......@@ -51,6 +63,14 @@ const helpTextPresent = computed<boolean>(() => props.parameter["help_text"]);
:aria-describedby="props.helpId"
:pattern="pattern"
/>
<button
v-if="fileOrResource"
type="button"
class="btn btn-secondary"
@click="emit('disable-raw')"
>
Advanced
</button>
</template>
<style scoped></style>
src/components/workflows/WorkflowWithVersionsCard.vue
+ 2
− 3
View file @ 4cfe079e
......@@ -128,7 +128,7 @@ onMounted(() => {
<div class="btn-group">
<button
type="button"
class="btn btn-success"
class="btn btn-outline-success"
:class="{ disabled: props.loading }"
@click="emit('workflow-update-click', props.workflow)"
data-bs-toggle="modal"
......@@ -138,8 +138,7 @@ onMounted(() => {
</button>
<button
type="button"
class="btn btn-success dropdown-toggle dropdown-toggle-split"
style="filter: brightness(85%)"
class="btn btn-outline-success dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-expanded="false"
>
......
src/views/workflows/StartWorkflowView.vue
+ 0
− 1
View file @ 4cfe079e
......@@ -128,7 +128,6 @@ onMounted(() => {
</template>
</bootstrap-toast>
<parameter-schema-form-component
:workflow-version-id="versionId"
:schema="versionState.parameterSchema"
:loading="versionState.loading"
allow-notes
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment