Resolve "Add help for creating clomw_info.json"

Closes #95 (closed)

src/components/parameter-schema/form-mode/ParameterStringInput.vue

@@ -10,8 +10,6 @@ const s3objectRepository = useS3ObjectStore();
 const resourceRepository = useResourceStore();
 const randomIDSuffix = Math.random().toString(16).substring(2, 8);
 
-const model = defineModel<string | undefined>({ required: true });
-
 const props = defineProps({
   parameter: {
     type: Object,
@@ -25,6 +23,9 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  modelValue: {
+    type: String,
+  },
   helpId: {
     type: String,
   },
@@ -38,6 +39,10 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits<{
+  (e: "update:modelValue", value?: string): void;
+}>();
+
 const s3Path = reactive<{
   bucket: string;
   key?: string;
@@ -56,8 +61,10 @@ const selectedResource = reactive<{
 
 const formState = reactive<{
   advancedInput: boolean;
+  stringVal?: string;
 }>({
   advancedInput: false,
+  stringVal: undefined,
 });
 
 const stringInput = ref<HTMLInputElement | undefined>(undefined);
@@ -124,17 +131,22 @@ watch(
   },
 );
 
+watch(() => formState.stringVal, updateValue);
 watch(selectedResource, () => {
   if (clowmResource.value && !formState.advancedInput) {
     updateStringFromResource();
   }
 });
 
-watch(model, (newVal, oldVal) => {
-  if (newVal && newVal !== oldVal) {
-    formState.advancedInput = true;
-  }
-});
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (formState.stringVal != newVal) {
+      formState.stringVal = newVal;
+      formState.advancedInput = true;
+    }
+  },
+);
 
 watch(
   () => formState.advancedInput,
@@ -149,14 +161,18 @@ watch(
   },
 );
 
+function updateValue() {
+  emit("update:modelValue", formState.stringVal);
+}
+
 function updateStringFromS3() {
-  model.value = !s3Path.bucket
+  formState.stringVal = !s3Path.bucket
     ? undefined
     : `s3://${s3Path.bucket}${s3Path.key ? "/" + s3Path.key : ""}`;
 }
 
 function updateStringFromResource() {
-  model.value =
+  formState.stringVal =
     resourceRepository.resourceMapping[selectedResource.resourceId]?.versions[
       selectedResource.resourceVersionIndex
     ]?.cluster_path ?? undefined;
@@ -172,7 +188,8 @@ function updateKeysInBucket(bucketName?: string) {
 }
 
 onMounted(() => {
-  if (model.value) {
+  formState.stringVal = props.modelValue;
+  if (formState.stringVal) {
     formState.advancedInput = true;
   }
 });
@@ -248,7 +265,7 @@ onMounted(() => {
       class="form-control border border-secondary"
       :class="{ 'rounded-end': props.removeAdvanced && !helpTextPresent }"
       type="text"
-      v-model="model"
+      v-model="formState.stringVal"
       :required="props.required"
       :aria-describedby="props.helpId"
       :pattern="pattern"