working now and blocking user if invalid data is present

internetofwater · Aug 14, 2024 · c4aa0e8 · c4aa0e8
1 parent c76a140
commit c4aa0e8
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 26 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -21,4 +21,8 @@ body {
   padding: 0;
 }
 
+h1, h2 {
+  color: #1b335f;
+}
+
 </style>
diff --git a/src/components/GeoconnexBackground.vue b/src/components/GeoconnexBackground.vue
@@ -1,4 +1,6 @@
 <template>
+              <h2 class="text-center">Geoconnex Background Info </h2>
+
   <p class="text-center pa-4">
     The <a href="https://geoconnex.us">geoconnex.us</a> project provides technical infrastructure
     and guidance for creating an open, community-contribution model for a knowledge graph linking

diff --git a/src/components/MetadataGenerator.vue b/src/components/MetadataGenerator.vue
@@ -4,14 +4,14 @@ import { fetchAllNamespaces } from '@/lib/helpers'
 
 <template>
 
-  <p class="text-center mx-15 pa-4 font-italic">
+  <p class="text-center pa-6 font-italic w-66 mx-auto">
     A namespace is a short name or alias for your organization. It will be created upon
     submission if it does not already exist. If the namespace already exists, your new
     CSV file will be added to the existing namespace
   </p>
 
-  <v-combobox label="Pick or create a new namespace" hint="Example: usgs" class="w-66 mx-auto"
-    persistent-hint required :items="existingNamespaces" v-model="namespace"></v-combobox>
+  <v-combobox label="Pick your organization if it exists, or create a new namespace" class="w-66 mx-auto" required
+    :items="existingNamespaces" v-model="namespace"></v-combobox>
   <v-checkbox class="d-flex justify-center mb-4"
     label="I already have a readme file uploaded to my namespace and do not wish to update my contribution info"
     v-model="readmeAlreadyUploaded">
@@ -41,7 +41,7 @@ import { fetchAllNamespaces } from '@/lib/helpers'
   </div>
 
   <v-alert type="error" class="w-50 mx-auto" v-if="!valid" icon="mdi-alert">
-    {{ error }} 
+    {{ error }}
   </v-alert>
 
 </template>
@@ -77,6 +77,11 @@ export default defineComponent({
     valid() {
       if (this.namespace.length == 0) {
         this.error = 'Namespace is required'
+        this.$emit('result', {
+          readme: null,
+          namespace: this.namespace,
+          blockNext: true
+        })
         return false
       }
 
@@ -93,6 +98,11 @@ export default defineComponent({
         for (const field of requiredReadmeFields) {
           if (field.body.length == 0) {
             this.error = `${field.sectionName} is required`
+            this.$emit('result', {
+              readme: null,
+              namespace: this.namespace,
+              blockNext: true
+            })
             return false
           }
         }
@@ -102,16 +112,21 @@ export default defineComponent({
         this.error = ''
         this.$emit('result', {
           readme: this.file,
-          namespace: this.namespace
+          namespace: this.namespace,
+          blockNext: false
         })
       }
-      else{
+      // If the user didn't add a readme, just return the namespace
+      else {
         this.$emit('result', {
           readme: null,
-          namespace: this.namespace
+          namespace: this.namespace,
+          blockNext: false
         })
       }
 
+      // after handling all emit logic, make sure the form is not in an invalid state
+      // since we didn't return early, we know it is true
       this.error = ''
       return true
     }

diff --git a/src/components/PageHeader.vue b/src/components/PageHeader.vue
@@ -5,21 +5,25 @@
         <img src="@/assets/logo-geoconnex.png" alt="Geoconnex Logo" title="geoconnex.us" class="logo-geoconnex" />
       </a>
     </div>
-    <v-icon @click="toggleTheme" icon="mdi-theme-light-dark" class="theme-toggle-icon"></v-icon>
+
+    <!-- TODO: Dark mode is implemented by the icons in the footer do not look good with it
+        work for future sprint 
+    -->
+    <!-- <v-icon @click="toggleTheme" icon="mdi-theme-light-dark" class="theme-toggle-icon"></v-icon> -->
   </div>
 
 </template>
 
 
-<script setup lang="ts">
+<!-- <script setup lang="ts">
 import { useTheme } from 'vuetify'
 
 const theme = useTheme()
 
 function toggleTheme() {
   theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
 }
-</script>
+</script> -->
 
 
 <style scoped>

diff --git a/src/components/URLCheckSummary.vue b/src/components/URLCheckSummary.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="crawlErrors && crawlErrors.length > 0">
+  <div v-if="crawlErrors && crawlErrors.length > 0 && !progress.running">
     <v-data-table :items="crawlErrors"> </v-data-table>
   </div>
 

diff --git a/src/components/UploadForm.vue b/src/components/UploadForm.vue
@@ -24,24 +24,30 @@ import MetadataGenerator from '@/components/MetadataGenerator.vue'
           <template v-slot:item.2>
             <h2 class="text-center">Upload your CSV Mapping</h2>
 
+            <p class=" pa-4 text-center mx-auto w-66">
+               Geoconnex will use your CSV to map your data resources Geoconnex ids. It will use the target URL you supply to access each feature for the purpose of constructing the Geoconnex knowledge graph. 
+          </p>
+
             <CSVReference class="mt-4" />
 
 
             <v-file-input v-model="csv" label="CSV Mapping" accept=".csv" required show-size variant="outlined"
               @change="checkCSV" class="w-50 mx-auto" />
 
+
             <URLCheckSummary :crawlErrors="crawlErrors" :progress="progress" class="mt-4"></URLCheckSummary>
 
             <v-fade-transition class="mx-auto w-66">
               <v-alert :color="checkError.level || 'error'" :icon="`$${checkError.level || 'error'}`"
                 :title="checkError.type" :text="checkError.text" v-if="checkError.type && !progress.running">
               </v-alert>
-              <v-alert color="success" icon="$success" title="Data Links Submitted" :text="result"
+              <v-alert color="success" icon="$success" title="Data mapping submitted" :text="result"
                 v-if="checkError.type == null && result && !progress.running"></v-alert>
             </v-fade-transition>
 
 
-            <v-btn v-if="checkError.type === 'Issues Checking CSV'" @click="overrideError" class="mt-6 d-flex mx-auto ignoreButton">
+            <v-btn v-if="checkError.type === 'Issues Checking CSV' && !progress.running" @click="overrideError"
+              class="mt-6 d-flex mx-auto ignoreButton">
               Ignore warning and override
             </v-btn>
           </template>
@@ -54,7 +60,11 @@ import MetadataGenerator from '@/components/MetadataGenerator.vue'
           </template>
 
           <template v-slot:item.4>
-            <h2 class="text-center">Upload your CSV Mapping</h2>
+            <h2 class="text-center">Submit your Data Mapping</h2>
+            <p class="text-center mx-auto w-66 pa-4">
+              Your data will be submitted to the <a href="https://github.com/internetofwater/geoconnex.us"
+                target="_blank">Geoconnex URI registry</a> on GitHub. Once submitted, you will be able to view the request to add your data to Geoconnex.
+            </p>
 
             <v-col cols="12" class="text-center">
               <div class="justify-center" v-if="progress.running">
@@ -70,12 +80,12 @@ import MetadataGenerator from '@/components/MetadataGenerator.vue'
                 :title="checkError.type" :text="checkError.text"
                 v-if="checkError.type != 'Checked CSV without errors' && checkError.type && !progress.running">
               </v-alert>
-              <v-alert color="success" icon="$success" title="Data Links Submitted" :text="result"
+              <v-alert color="success" icon="$success" title="Data Submitted" :text="result"
                 v-if="checkError.type == null && result && !progress.running"></v-alert>
             </v-fade-transition>
 
             <v-col cols="12" class="text-center mt-8">
-              <v-btn type="submit" @click="submitForm"> Submit </v-btn>
+              <v-btn type="submit" @click="submitForm" class="bg-accent"> Submit </v-btn>
             </v-col>
           </template>
         </v-stepper>
@@ -107,26 +117,27 @@ export default defineComponent({
       progress: { running: false, action: '' },
       crawlErrors: [] as ValidationReport['crawlErrors'],
       existingNamespaces: [] as string[],
+      blockNext: false
     }
   },
   computed: {
     hideNext() {
-      return this.checkError.type === 'Issues Checking CSV' || this.progress.running 
+      return this.checkError.type === 'Issues Checking CSV' || this.progress.running || this.blockNext
     },
   },
 
   methods: {
     async checkCSV() {
       this.progress = { running: true, action: 'Validating your CSV data. This may take a minute...' }
-      
+
       if (!this.csv) {
         return
       }
       const { valid, errorSummary, crawlErrors } = await validGeoconnexCSV(this.csv)
+      this.crawlErrors = crawlErrors
 
       if (!valid) {
         if (this.crawlErrors !== undefined) {
-          this.crawlErrors = crawlErrors as { url: string; error: string }[]
           this.progress = { running: false, action: '' }
           this.checkError = {
             type: 'Issues Checking CSV',
@@ -162,19 +173,22 @@ export default defineComponent({
       this.checkError = { type: undefined, text: '' }
       this.crawlErrors = []
     },
-    setMetadata(metadata: { readme: File | null, namespace: string }) {
-      const { readme, namespace } = metadata
+    setMetadata(metadata: { readme: File | null, namespace: string, blockNext?: boolean }) {
+      const { readme, namespace, blockNext } = metadata
       this.namespace = namespace
       this.readme = readme
+      this.blockNext = blockNext || false
     },
 
+
     async submitForm() {
 
+      // reset stored form state at the start of the submission before validating
       this.result = ''
       this.progress = { running: false, action: '' }
 
       if (!this.csv) {
-        this.checkError = { type: 'Error submitting data', text: 'File is required' }
+        this.checkError = { type: 'Error submitting data', text: 'CSV file is required' }
         return
       }
 
@@ -197,7 +211,6 @@ export default defineComponent({
 </script>
 
 <style scoped>
-
 .ignoreButton {
   background-color: rgb(var(--v-theme-secondary));
 }

diff --git a/src/main.ts b/src/main.ts
@@ -14,8 +14,10 @@ const buttonColor = "#00A087"
 const customLightTheme: ThemeDefinition = {
   dark: false,
   colors: {
-    primary: colors.grey.lighten4,
-    secondary: "#e5e9f0",
+    primary: colors.grey.lighten4, // lightest grey
+    secondary: "#e5e9f0", // light grey
+    accent: buttonColor, // turquoise
+    header: "#1b335f" // dark blue for geoconnex
   },
 }
 
@@ -37,7 +39,7 @@ const vuetify = createVuetify({
     defaultTheme: 'light',
     themes: {
       dark: customDarkTheme,
-      light: customLightTheme
+      light: customLightTheme,
     }
   }
 })