Resolve "Add UI for parameter translation layer"

Closes #105 (closed)

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>