Small form updates (#19)

* Delegate CSV link information to docs.geoconnex.us * Use consistent theme in form * Use consistent theme for form * Switch metadata and CSV step - Make form behavior consistent across steps * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Update spacing around <a> elements * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Format links to satisfy precommit * Update styling on metadata form * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * Add bottom spacing to override button * Update src/components/CSVReference.vue Co-authored-by: Colton Loftus <[email protected]> --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: Colton Loftus <[email protected]>
internetofwater · Aug 14, 2024 · 4c53292 · 4c53292
1 parent 70b38ec
commit 4c53292
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 93 deletions.
diff --git a/src/components/CSVReference.vue b/src/components/CSVReference.vue
@@ -36,21 +36,7 @@
           </div>
 
           <br />
-          <v-btn
-            class="flex ma-2"
-            target="_blank"
-            append-icon="mdi-open-in-new"
-            href="https://github.com/internetofwater/geoconnex.us/blob/master/namespaces/iow/demo.csv"
-            >1:1 example</v-btn
-          >
-          <v-btn
-            target="_blank"
-            append-icon="mdi-open-in-new"
-            href="https://github.com/internetofwater/geoconnex.us/blob/master/namespaces/usgs/monitoring-location/monitoring-location.csv"
-            >1:N example</v-btn
-          >
-          <br />
-          For more detailed info regarding the format of your CSV, see the
+          For more detailed info regarding the format of your CSV and examples, see the
           <a href="https://docs.geoconnex.us/reference/data-formats/csv-submissions/">
             CSV formatting documentation</a
           >

diff --git a/src/components/GeoconnexBackground.vue b/src/components/GeoconnexBackground.vue
@@ -14,14 +14,19 @@
     locations within a namespace. The features you link to must already exist online and have their
     own web page.
   </p>
-  <v-alert color="info" class="mb-2" icon="$info" variant="flat" title="Additional details ">
+  <v-alert
+    color="primary--text"
+    class="mb-2"
+    icon="$info"
+    variant="flat"
+    title="Additional details "
+  >
     For more details, the
     <a href="https://docs.geoconnex.us/">geoconnex documentation</a> provides a general overview of
     geoconnex and a tutorial for how to:
     <ol>
       <li>
-        1.
-        <a href="https://docs.geoconnex.us/contributing/step-1/idscheme"> Prepare your data</a>
+        1. <a href="https://docs.geoconnex.us/contributing/step-1/idscheme">Prepare your data</a>
         with the proper metadata context
       </li>
       <li>
@@ -30,7 +35,7 @@
         that can be linked to as the "target" column in your uploaded CSV
       </li>
       <li>
-        3.<a href="https://docs.geoconnex.us/contributing/step-3/minting"> Submit your CSV data</a>,
+        3. <a href="https://docs.geoconnex.us/contributing/step-3/minting">Submit your CSV data</a>,
         either here or Github, after checking it is
         <a href="https://docs.geoconnex.us/reference/data-formats/csv-submissions/">
           properly formatted</a

diff --git a/src/components/MetadataGenerator.vue b/src/components/MetadataGenerator.vue
@@ -14,75 +14,91 @@ import { fetchAllNamespaces } from '@/lib/helpers'
     class="w-66 mx-auto"
     required
     :items="existingNamespaces"
+    variant="outlined"
     v-model="namespace"
-  ></v-combobox>
-  <v-checkbox
+  />
+
+  <v-switch
     class="d-flex justify-center mb-4"
+    color="accent"
     label="I already have a readme file uploaded to my namespace and do not wish to update my contribution info"
     v-model="readmeAlreadyUploaded"
-  >
-  </v-checkbox>
+  />
 
   <div v-if="!readmeAlreadyUploaded">
-    <v-text-field
-      v-model="homepage"
-      label="Homepage for where redirects will point to"
-      type="url"
-      required
-      variant="outlined"
-      hint="Example: https://waterdata.usgs.gov"
-      persistent-hint
-      class="pb-4"
-    ></v-text-field>
-
-    <v-textarea
-      v-model="description"
-      label="Description of data"
-      required
-      variant="outlined"
-      hint="Example: All monitoring locations used by the USGS Waterdata system"
-      persistent-hint
-      class="pb-4"
-    ></v-textarea>
-
-    <v-text-field
-      v-model="example_pid"
-      label="Example PID"
-      required
-      variant="outlined"
-      hint="Example: https://geoconnex.us/usgs/monitoring-location/08383500"
-      persistent-hint
-      class="pb-4"
-    ></v-text-field>
-
-    <v-text-field
-      v-model="example_redirect_target"
-      label="Example redirect target url"
-      type="url"
-      variant="outlined"
-      hint="Example: https://waterdata.usgs.gov/monitoring-location/08383500"
-      persistent-hint
-      class="pb-4"
-    ></v-text-field>
-
-    <v-text-field
-      v-model="contact_name"
-      label="Contact name"
-      hint="Example: John Smith"
-      required
-      variant="outlined"
-      class="pb-4"
-    ></v-text-field>
-
-    <v-text-field
-      v-model="contact_email"
-      label="Contact email"
-      append-inner-icon="mdi-email"
-      required
-      variant="outlined"
-      type="email"
-      hint="Example: [email protected]"
-    ></v-text-field>
+    <v-row>
+      <v-col cols="10" offset="1">
+        <v-text-field
+          v-model="homepage"
+          label="Homepage for where redirects will point to"
+          type="url"
+          required
+          variant="outlined"
+          hint="Example: https://waterdata.usgs.gov"
+          persistent-hint
+          class="pb-4"
+        />
+      </v-col>
+
+      <v-col cols="5" offset="1">
+        <v-text-field
+          v-model="example_pid"
+          label="Example PID"
+          required
+          variant="outlined"
+          hint="Example: https://geoconnex.us/usgs/monitoring-location/08383500"
+          persistent-hint
+          class="pb-4"
+        />
+      </v-col>
+
+      <v-col cols="5">
+        <v-text-field
+          v-model="example_redirect_target"
+          label="Example redirect target url"
+          type="url"
+          variant="outlined"
+          hint="Example: https://waterdata.usgs.gov/monitoring-location/08383500"
+          persistent-hint
+          class="pb-4"
+        />
+      </v-col>
+
+      <v-col cols="10" offset="1">
+        <v-textarea
+          v-model="description"
+          label="Description of data"
+          required
+          variant="outlined"
+          hint="Example: All monitoring locations used by the USGS Waterdata system"
+          persistent-hint
+          class="pb-4"
+        />
+      </v-col>
+
+      <v-col cols="5" offset="1">
+        <v-text-field
+          v-model="contact_name"
+          label="Contact name"
+          hint="Example: John Smith"
+          required
+          variant="outlined"
+          class="pb-4"
+        />
+      </v-col>
+
+      <v-col cols="5">
+        <v-text-field
+          v-model="contact_email"
+          label="Contact email"
+          append-inner-icon="mdi-email"
+          required
+          variant="outlined"
+          type="email"
+          hint="Example: [email protected]"
+        />
+      </v-col>
+    </v-row>
   </div>
 
   <v-alert type="error" class="w-50 mx-auto" v-if="!valid" icon="mdi-alert">

diff --git a/src/components/UploadForm.vue b/src/components/UploadForm.vue
@@ -13,17 +13,24 @@ import MetadataGenerator from '@/components/MetadataGenerator.vue'
         <v-stepper
           :items="[
             'Step 1: Review Background',
-            'Step 2: Add CSV',
-            'Step 3: Add Metadata',
+            'Step 2: Add Metadata',
+            'Step 3: Add CSV',
             'Step 4: Submit'
           ]"
           :hide-actions="hideNext"
+          color="header"
         >
           <template v-slot:item.1>
             <GeoconnexBackground />
           </template>
 
           <template v-slot:item.2>
+            <h2 class="mb-4 text-center">Add Metadata for your CSV Contribution</h2>
+
+            <MetadataGenerator :namespace="namespace" @result="setMetadata" />
+          </template>
+
+          <template v-slot:item.3>
             <h2 class="text-center">Upload your CSV Mapping</h2>
 
             <p class="pa-4 text-center mx-auto w-66">
@@ -32,8 +39,6 @@ import MetadataGenerator from '@/components/MetadataGenerator.vue'
               constructing the Geoconnex knowledge graph.
             </p>
 
-            <CSVReference class="mt-4" />
-
             <v-file-input
               v-model="csv"
               label="CSV Mapping"
@@ -45,6 +50,8 @@ import MetadataGenerator from '@/components/MetadataGenerator.vue'
               class="w-50 mx-auto"
             />
 
+            <CSVReference class="mt-4" />
+
             <URLCheckSummary
               :crawlErrors="crawlErrors"
               :progress="progress"
@@ -72,18 +79,12 @@ import MetadataGenerator from '@/components/MetadataGenerator.vue'
             <v-btn
               v-if="checkError.type === 'Issues Checking CSV' && !progress.running"
               @click="overrideError"
-              class="mt-6 d-flex mx-auto ignoreButton"
+              class="my-6 d-flex mx-auto ignoreButton"
             >
               Ignore warning and override
             </v-btn>
           </template>
 
-          <template v-slot:item.3>
-            <h2 class="mb-4 text-center">Add Metadata for your CSV Contribution</h2>
-
-            <MetadataGenerator :namespace="namespace" @result="setMetadata" />
-          </template>
-
           <template v-slot:item.4>
             <h2 class="text-center">Submit your Data Mapping</h2>
             <p class="text-center mx-auto w-66 pa-4">