Merge branch '132-s3-metadata-update-endpoint' of https://github.com/…

…I-GUIDE/catalogapi into 132-s3-metadata-update-endpoint

frontend/src/components.d.ts

@@ -22,6 +22,7 @@ declare module 'vue' {
     'Cd.registerDataset': typeof import('./components/register/cd.register-dataset.vue')['default']
     'Cd.registerHydroshare': typeof import('./components/register/cd.register-hydroshare.vue')['default']
     'Cd.registerS3': typeof import('./components/register/cd.register-s3.vue')['default']
+    'Cd.registerS3Bucket': typeof import('./components/register/cd.register-s3-bucket.vue')['default']
     'Cd.registerS3Form': typeof import('./components/register/cd.register-s3-form.vue')['default']
     'Cd.search': typeof import('./components/search/cd.search.vue')['default']
     'Cd.searchResults': typeof import('./components/search-results/cd.search-results.vue')['default']

frontend/src/components/contribute/cd.contribute.vue

@@ -18,6 +18,8 @@
     <v-divider class="my-4" />
 
     <template v-if="!isLoading && wasLoaded">
+      <CdRegisterS3Bucket v-if="isS3" v-model="s3State" />
+
       <cz-form
         :schema="schema"
         :uischema="uiSchema"
@@ -59,12 +61,12 @@ import {
   useRoute,
   useRouter,
 } from "vue-router";
-
+import CdRegisterS3Bucket from "@/components/register/cd.register-s3-bucket.vue";
 const initialData = {};
 
 @Component({
   name: "cd-contribute",
-  components: { CzForm, CdFormActions },
+  components: { CzForm, CdFormActions, CdRegisterS3Bucket },
 })
 class CdContribute extends Vue {
   isValid = false;
@@ -73,7 +75,7 @@ class CdContribute extends Vue {
   wasLoaded = false;
   submissionId = "";
   errors: { title: string; message: string }[] = [];
-  data = initialData;
+  data: any = initialData;
   timesChanged = 0;
   isSaving = false;
   config = {
@@ -95,6 +97,11 @@ class CdContribute extends Vue {
       },
     },
   };
+  s3State = {
+    path: "",
+    bucket: "",
+    endpointUrl: "",
+  };
 
   route = useRoute();
   router = useRouter();
@@ -115,6 +122,10 @@ class CdContribute extends Vue {
     return User.$state.hasUnsavedChanges;
   }
 
+  get isS3() {
+    return this.data.submission_type === "S3";
+  }
+
   set hasUnsavedChanges(value: boolean) {
     User.commit((state) => {
       state.hasUnsavedChanges = value;
@@ -140,6 +151,8 @@ class CdContribute extends Vue {
       this.wasLoaded = !!data;
       if (data) {
         this.data = data;
+
+        // TODO: populate s3 metadata fields
       }
     } catch (e) {
       this.wasLoaded = false;

frontend/src/components/register/cd.register-s3-bucket.vue

@@ -0,0 +1,121 @@
+<template>
+  <v-card variant="elevated" class="mx-4">
+    <v-card-title class="text-overline"> S3 Bucket Information </v-card-title>
+    <v-divider></v-divider>
+    <v-card-text>
+      <v-form>
+        <v-row>
+          <v-col class="py-0" lg="6" cols="12">
+            <v-text-field
+              v-model.trim="modelValue.path"
+              :error-messages="form.path.$errors.map((e) => e.$message)"
+              @blur="form.path.$touch"
+              @input="form.path.$touch"
+              clearable
+              class="my-4"
+              label="Path*"
+              hide-details="auto"
+              variant="outlined"
+              density="compact"
+            >
+            </v-text-field>
+
+            <div
+              class="text-subtitle-1 text-medium-emphasis pl-3 mb-4 hint"
+              style="word-break: break-word"
+            >
+              {{ `e.g. 'data/.hs/dataset_metadata.json'` }}
+            </div>
+          </v-col>
+          <v-col class="py-0" lg="6" cols="12">
+            <v-text-field
+              v-model.trim="modelValue.bucket"
+              :error-messages="form.bucket.$errors.map((e) => e.$message)"
+              @blur="form.bucket.$touch"
+              @input="form.bucket.$touch"
+              clearable
+              class="my-4"
+              label="Bucket*"
+              type="url"
+              hide-details="auto"
+              variant="outlined"
+              density="compact"
+            >
+            </v-text-field>
+
+            <div
+              class="text-subtitle-1 text-medium-emphasis pl-3 mb-4 hint"
+              style="word-break: break-word"
+            >
+              {{ `e.g. 'iguide-catalog'` }}
+            </div>
+          </v-col>
+          <v-col class="py-0" cols="12">
+            <v-text-field
+              v-model.trim="modelValue.endpointUrl"
+              :error-messages="form.endpointUrl.$errors.map((e) => e.$message)"
+              @blur="form.endpointUrl.$touch"
+              @input="form.endpointUrl.$touch"
+              clearable
+              class="my-4"
+              label="Endpoint URL*"
+              type="url"
+              hide-details="auto"
+              variant="outlined"
+              density="compact"
+            >
+            </v-text-field>
+
+            <div
+              class="text-subtitle-1 text-medium-emphasis pl-3 mb-4 hint"
+              style="word-break: break-word"
+            >
+              {{ `e.g. 'https://iguide-catalog.s3.us-west-2.amazonaws.com/'` }}
+            </div>
+          </v-col>
+        </v-row>
+      </v-form>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, toNative } from "vue-facing-decorator";
+import { useVuelidate } from "@vuelidate/core";
+import { url, required, helpers } from "@vuelidate/validators";
+import { useRouter } from "vue-router";
+
+@Component({
+  name: "cd-register-s3-bucket",
+  components: {},
+})
+class CdRegisterS3Bucket extends Vue {
+  @Prop() modelValue!: { path: string; bucket: string; endpointUrl: string };
+
+  form: any = null;
+  isSaving = false;
+  router = useRouter();
+
+  created() {
+    this.form = useVuelidate(
+      {
+        path: { required: helpers.withMessage("required", required) },
+        bucket: { required: helpers.withMessage("required", required) },
+        endpointUrl: {
+          required: helpers.withMessage("required", required),
+          url: helpers.withMessage("not a valid URL address", url),
+        },
+      },
+      this.modelValue,
+    );
+    this.form.$validate();
+  }
+}
+export default toNative(CdRegisterS3Bucket);
+</script>
+
+<style lang="scss" scoped>
+.hint {
+  margin-top: -1rem;
+}
+</style>

frontend/src/components/register/cd.register-s3.vue

@@ -1,75 +1,10 @@
 <template>
-  <div class="d-flex align-center">
+  <div class="d-flex align-center mb-4">
     <v-badge color="primary" content="2" inline class="mr-2"></v-badge>
     <div>Where is the resource stored?</div>
   </div>
 
-  <v-form>
-    <v-text-field
-      v-model.trim="state.path"
-      :error-messages="form.path.$errors.map((e) => e.$message)"
-      @blur="form.path.$touch"
-      @input="form.path.$touch"
-      clearable
-      class="my-4"
-      label="Path*"
-      hide-details="auto"
-      persistent-hint
-      variant="outlined"
-    >
-    </v-text-field>
-
-    <div
-      class="text-subtitle-1 text-medium-emphasis pl-3 mb-4 mt-1"
-      style="word-break: break-word"
-    >
-      {{ `e.g. 'data/.hs/dataset_metadata.json'` }}
-    </div>
-
-    <v-text-field
-      v-model.trim="state.bucket"
-      :error-messages="form.bucket.$errors.map((e) => e.$message)"
-      @blur="form.bucket.$touch"
-      @input="form.bucket.$touch"
-      clearable
-      class="my-4"
-      label="Bucket*"
-      type="url"
-      hide-details="auto"
-      persistent-hint
-      variant="outlined"
-    >
-    </v-text-field>
-
-    <div
-      class="text-subtitle-1 text-medium-emphasis pl-3 mb-4 mt-1"
-      style="word-break: break-word"
-    >
-      {{ `e.g. 'iguide-catalog'` }}
-    </div>
-
-    <v-text-field
-      v-model.trim="state.endpointUrl"
-      :error-messages="form.endpointUrl.$errors.map((e) => e.$message)"
-      @blur="form.endpointUrl.$touch"
-      @input="form.endpointUrl.$touch"
-      clearable
-      class="my-4"
-      label="Endpoint URL*"
-      type="url"
-      hide-details="auto"
-      persistent-hint
-      variant="outlined"
-    >
-    </v-text-field>
-
-    <div
-      class="text-subtitle-1 text-medium-emphasis pl-3 mb-4 mt-1"
-      style="word-break: break-word"
-    >
-      {{ `e.g. 'https://iguide-catalog.s3.us-west-2.amazonaws.com/'` }}
-    </div>
-  </v-form>
+  <cd-register-s3-bucket v-model="s3State" />
 
   <div class="d-flex align-center mt-12">
     <v-badge color="primary" content="3" inline class="mr-2"></v-badge>
@@ -86,13 +21,14 @@ import CdRegisterS3Form from "@/components/register/cd.register-s3-form.vue";
 import User from "@/models/user.model";
 import { Notifications } from "@cznethub/cznet-vue-core";
 import { useRouter } from "vue-router";
+import CdRegisterS3Bucket from "./cd.register-s3-bucket.vue";
 
 @Component({
   name: "cd-register-s3",
-  components: { CdRegisterS3Form },
+  components: { CdRegisterS3Form, CdRegisterS3Bucket },
 })
 class CdRegisterS3 extends Vue {
-  state = {
+  s3State = {
     path: "",
     bucket: "",
     endpointUrl: "",
@@ -112,15 +48,15 @@ class CdRegisterS3 extends Vue {
           url: helpers.withMessage("not a valid URL address", url),
         },
       },
-      this.state,
+      this.s3State,
     );
     this.form.$validate();
   }
 
   async onSave(data: any) {
     try {
       this.isSaving = true;
-      const savedDatasetId = await User.submitS3(data, this.state);
+      const savedDatasetId = await User.submitS3(data, this.s3State);
       this.isSaving = false;
 
       if (savedDatasetId) {
@@ -147,35 +83,4 @@ class CdRegisterS3 extends Vue {
 export default toNative(CdRegisterS3);
 </script>
 
-<style lang="scss" scoped>
-.table-item {
-  padding: 1rem;
-
-  table {
-    width: 100%;
-
-    &.is-xs-small {
-      tr,
-      td,
-      th {
-        display: block;
-        text-align: left;
-      }
-
-      th {
-        padding-top: 1rem;
-      }
-    }
-
-    th {
-      text-align: right;
-      width: 11rem;
-      font-weight: normal;
-    }
-
-    td {
-      word-break: break-word;
-    }
-  }
-}
-</style>
+<style lang="scss" scoped></style>