Load and parse injected params for resources and files

#105

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

 <script setup lang="ts">
-import { computed, type PropType, reactive, watch } from "vue";
+import { computed, onMounted, type PropType, reactive, watch } from "vue";
 import { useS3ObjectStore } from "@/stores/s3objects";
 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 props = defineProps({
   parameter: {
@@ -50,6 +51,33 @@ const inputDynamicClass = computed<string[]>(() => {
   return cssClasses;
 });
 
+watch(model, (newVal, oldVal) => {
+  if (
+    newVal != oldVal &&
+    newVal !== translateToModel(s3Path.bucket, s3Path.key)
+  ) {
+    parseModel(newVal);
+  }
+});
+
+function parseModel(val?: string) {
+  if (val == undefined) {
+    s3Path.bucket = "";
+    s3Path.key = undefined;
+    return;
+  }
+  const match = s3Regex.exec(val ?? "");
+  if (match) {
+    s3Path.bucket = match[1];
+    s3Path.key = match[2];
+    if (bucketRepository.bucketMapping[s3Path.bucket] == undefined) {
+      console.log("Missing bucket");
+    }
+  } else {
+    console.log("Not S3 Path");
+  }
+}
+
 const s3Path = reactive<{
   bucket: string;
   key?: string;
@@ -104,23 +132,27 @@ watch(
   () => s3Path.key,
   (newVal, oldVal) => {
     if (newVal !== oldVal) {
-      updateModel(s3Path.bucket, newVal);
+      model.value = translateToModel(s3Path.bucket, newVal);
     }
   },
 );
 
 function updateBucket(bucket: string) {
   s3Path.bucket = bucket;
-  updateModel(bucket, s3Path.key);
+  model.value = translateToModel(bucket, s3Path.key);
   s3ObjectRepository.fetchS3Objects(
     bucket,
     bucketRepository.ownPermissions[bucket]?.file_prefix ?? undefined,
   );
 }
 
-function updateModel(bucket: string, key?: string) {
-  model.value = !bucket ? undefined : `s3://${bucket}${key ? "/" + key : ""}`;
+function translateToModel(bucket: string, key?: string): string | undefined {
+  return !bucket ? undefined : `s3://${bucket}${key ? "/" + key : ""}`;
 }
+
+onMounted(() => {
+  parseModel(model.value);
+});
 </script>
 
 <template>

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

@@ -107,6 +107,7 @@ function parameterId(parameterName: string): string {
               v-model="model[parameterName]"
               :required="parameterRequired(parameterGroup, parameterName)"
               border
+              :resource-parameter="resourceParameters?.includes(parameterName)"
             />
             <span
               class="input-group-text cursor-pointer px-2 border border-secondary"

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

 <script setup lang="ts">
 import type { ResourcePath_Input } from "@/client/workflow";
 import { Status } from "@/client/resource";
-import { computed, reactive, watch } from "vue";
+import { computed, onMounted, reactive, watch } from "vue";
 import { useResourceStore } from "@/stores/resources";
 import type { SizeModifierType } from "@/types/PropTypes";
 
-const model = defineModel<string | ResourcePath_Input>({
+const model = defineModel<string | ResourcePath_Input | undefined>({
   required: true,
 });
 
+const resourceRegex = /CLDB-([\da-f]{32})\/(latest|[\da-f]{32})([/\S]*)/g;
+
 const props = defineProps<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   parameter: Record<string, any>;
   required?: boolean;
-  helpId?: string;
   rawModel?: boolean;
   sizeModifier?: SizeModifierType;
   border?: boolean;
@@ -50,32 +51,74 @@ const inputDynamicClass = computed<string[]>(() => {
 function updateResourceId(rid: string) {
   resource.resource_id = rid;
   resource.resource_version_id = "";
-  updateModel();
+  model.value = translateToModel();
 }
 
 function updateResourceVersionId(rvid: string) {
   resource.resource_version_id = rvid;
-  updateModel();
+  model.value = translateToModel();
   resourceRepository.fetchResourceTree(resource.resource_id, rvid);
 }
 
+watch(model, (newVal, oldVal) => {
+  if (newVal != oldVal && newVal !== translateToModel()) {
+    parseModel(newVal);
+  }
+});
+
+function parseModel(val?: string | ResourcePath_Input) {
+  if (val == undefined) {
+    Object.assign(resource, {
+      resource_id: "",
+      resource_version_id: "",
+      suffix: undefined,
+    });
+  } 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 =
+        match[2].length === 32
+          ? hexToUUID(match[2])
+          : resourceRepository.getLatestVersion(resource.resource_id);
+      if (
+        resourceRepository.resourceMapping[resource.resource_id] == undefined ||
+        resourceRepository.versionMapping[resource.resource_version_id] ==
+          undefined
+      ) {
+        console.log("Missing resource");
+      }
+    } else {
+      console.log("Not resource Path");
+    }
+  } else {
+    Object.assign(resource, JSON.parse(JSON.stringify(val)));
+  }
+}
+
+function hexToUUID(hex?: string): string {
+  if (hex) {
+    return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20, 32)}`;
+  }
+  return "";
+}
+
 watch(
   () => resource.suffix,
   (newVal, oldVal) => {
     if (newVal !== oldVal) {
-      updateModel();
+      model.value = translateToModel();
     }
   },
 );
 
-function updateModel() {
+function translateToModel(): string | ResourcePath_Input {
   if (props.rawModel) {
-    model.value = resource;
-    return;
+    return resource;
   }
   if (resource.resource_version_id.length === 0) {
-    model.value = "";
-    return;
+    return "";
   }
   let val =
     resourceRepository.versionMapping[resource.resource_version_id]
@@ -83,8 +126,12 @@ function updateModel() {
   if (resource.suffix != undefined && val.length > 0) {
     val = val + resource.suffix;
   }
-  model.value = val;
+  return val;
 }
+
+onMounted(() => {
+  parseModel(model.value);
+});
 </script>
 
 <template>

src/stores/resources.ts

@@ -65,6 +65,17 @@ export const useResourceStore = defineStore({
       }
       return mapping;
     },
+    getLatestVersion(): (resource_id: string) => string {
+      return (resource_id) => {
+        for (const version of this.resourceMapping[resource_id]?.versions ??
+          []) {
+          if (version.status === Status.LATEST) {
+            return version.resource_version_id;
+          }
+        }
+        return "";
+      };
+    },
     ownResources(): ResourceOut[] {
       return Object.values(this.ownResourceMapping);
     },