Merge pull request #1691 from microbiomedata/issue-1689-unknown-doi-bug

Use `unknownDoi` state when determining if award DOI inputs are required

Author: pkalita-lbl

web/src/views/SubmissionPortal/Components/DoeFacility.vue

@@ -18,13 +18,9 @@ export default defineComponent({
       default: 'Data generated ',
     },
   },
+  emits: ['revalidate'],
 
   setup() {
-    const doiRequiredRules = () => [(v: string) => {
-      const valid = !!v || (!multiOmicsForm.facilityGenerated && multiOmicsForm.dataGenerated) || (multiOmicsForm.unknownDoi && !multiOmicsForm.dataGenerated);
-      return valid || 'An award DOI is required if data was or is going to be generated by a DOE facility.';
-    }];
-
     function facilityChange() {
       if (multiOmicsForm.awardDois === null || multiOmicsForm.awardDois.length < multiOmicsForm.facilities.length) {
         addAwardDoi();
@@ -36,7 +32,6 @@ export default defineComponent({
     return {
       facilityChange,
       Definitions,
-      doiRequiredRules,
       multiOmicsForm,
       templateHasData,
       checkJGITemplates,

web/src/views/SubmissionPortal/Components/MultiOmicsDataForm.vue

@@ -5,6 +5,7 @@ import {
   onMounted,
   watch,
   nextTick,
+  computed,
 } from '@vue/composition-api';
 
 import Definitions from '@/definitions';
@@ -63,14 +64,44 @@ export default defineComponent({
       return true;
     }];
 
-    const doiRequiredRules = () => [(v: string) => {
-      const valid = !!v || (!multiOmicsForm.facilityGenerated && multiOmicsForm.dataGenerated) || (multiOmicsForm.unknownDoi && !multiOmicsForm.dataGenerated);
-      return valid || 'An award DOI is required if data was or is going to be generated by a DOE facility.';
-    },
-    (v: string) => {
-      const valid = checkDoiFormat(v);
-      return valid || 'DOI must be in the correct format.';
-    }];
+    const doiRequired = computed(() => (
+      (multiOmicsForm.dataGenerated && multiOmicsForm.facilityGenerated)
+      || (!multiOmicsForm.dataGenerated && !multiOmicsForm.unknownDoi)
+    ));
+
+    const doiValueRules = (i: number) => (
+      [
+        (value: string) => {
+          const valid = !!value || !doiRequired.value;
+          return valid || 'An award DOI is required if data was or is going to be generated by a DOE facility.';
+        },
+        (value: string) => {
+          const hasProvider = multiOmicsForm.awardDois && multiOmicsForm.awardDois[i] && multiOmicsForm.awardDois[i].provider;
+          let valid = true;
+          if (hasProvider) {
+            valid = !!value;
+          }
+          return valid || 'DOI must be provided if a provider is selected.';
+        },
+        (value: string) => {
+          const valid = !value || checkDoiFormat(value);
+          return valid || 'DOI must be in the correct format.';
+        },
+      ]
+    );
+
+    const doiProviderRules = (i: number) => (
+      [
+        (provider: string) => {
+          const hasValue = multiOmicsForm.awardDois && multiOmicsForm.awardDois[i] && multiOmicsForm.awardDois[i].value !== '';
+          let valid = true;
+          if (hasValue || doiRequired.value) {
+            valid = !!provider;
+          }
+          return valid || 'A provider must be selected.';
+        },
+      ]
+    );
 
     const revalidate = () => {
       nextTick(() => formRef.value.validate());
@@ -113,7 +144,8 @@ export default defineComponent({
       removeAwardDoi,
       projectAwardValidationRules,
       otherAwardValidationRules,
-      doiRequiredRules,
+      doiValueRules,
+      doiProviderRules,
       revalidate,
       resetFields,
       formRef,
@@ -192,12 +224,15 @@ export default defineComponent({
       <div
         v-if="multiOmicsForm.dataGenerated === true && multiOmicsForm.facilityGenerated"
       >
-        <DoeFacility />
+        <DoeFacility
+          @revalidate="revalidate"
+        />
       </div>
       <v-radio-group
         v-if="multiOmicsForm.dataGenerated === false"
         v-model="multiOmicsForm.doe"
         label="Are you submitting samples to a DOE user facility (JGI, EMSL)? *"
+        :rules="[v => (v === true || v === false) || 'This field is required']"
         :disabled="checkJGITemplates() || templateHasData(HARMONIZER_TEMPLATES.emsl.sampleDataSlot)"
         @change="resetFields('doe')"
       >
@@ -341,50 +376,59 @@ export default defineComponent({
 
       <div
         v-if="multiOmicsForm.facilities.includes('EMSL') || multiOmicsForm.facilities.includes('JGI')"
-        class="d-flex flex-column grow my-4"
+        class="my-4"
       >
         <div
           v-for="_, i in multiOmicsForm.awardDois"
           :key="`awardDois${i}`"
           class="d-flex"
         >
-          <v-card class="d-flex flex-column grow pa-4 mb-4">
-            <div class="d-flex">
-              <v-text-field
-                v-if="multiOmicsForm.awardDois !== null"
-                v-model="multiOmicsForm.awardDois[i].value"
-                label="Award DOI *"
-                :hint="Definitions.doi"
-                :rules="doiRequiredRules()"
-                class="mb-2 mr-3"
-                persistent-hint
-                validate-on-blur
-                outlined
-                dense
-                @change="revalidate"
+          <v-card class="flex-grow-1 pa-4 mb-4">
+            <v-row>
+              <v-col
+                cols="12"
+                sm="8"
               >
-                <template #message="{ message }">
-                  <span v-html="message" />
-                </template>
-              </v-text-field>
-              <v-select
-                v-if="multiOmicsForm.awardDois !== null"
-                v-model="multiOmicsForm.awardDois[i].provider"
-                label="Award DOI Provider *"
-                :hint="Definitions.dataDoiProvider"
-                :items="doiProviderValues"
-                persistent-hint
-                outlined
-                dense
-                clearable
-                class="mb-2 mr-3"
-                :rules="multiOmicsForm.awardDois[i].provider ? undefined : ['A provider must be selected.']"
+                <v-text-field
+                  v-if="multiOmicsForm.awardDois !== null"
+                  v-model="multiOmicsForm.awardDois[i].value"
+                  label="Award DOI *"
+                  :hint="Definitions.doi"
+                  :rules="doiValueRules(i)"
+                  persistent-hint
+                  validate-on-blur
+                  outlined
+                  dense
+                  @change="revalidate"
+                >
+                  <template #message="{ message }">
+                    <span v-html="message" />
+                  </template>
+                </v-text-field>
+              </v-col>
+              <v-col
+                cols="12"
+                sm="4"
               >
-                <template #message="{ message }">
-                  <span v-html="message" />
-                </template>
-              </v-select>
-            </div>
+                <v-select
+                  v-if="multiOmicsForm.awardDois !== null"
+                  v-model="multiOmicsForm.awardDois[i].provider"
+                  label="Award DOI Provider *"
+                  :hint="Definitions.dataDoiProvider"
+                  :items="doiProviderValues"
+                  persistent-hint
+                  outlined
+                  dense
+                  clearable
+                  :rules="doiProviderRules(i)"
+                  @change="revalidate"
+                >
+                  <template #message="{ message }">
+                    <span v-html="message" />
+                  </template>
+                </v-select>
+              </v-col>
+            </v-row>
           </v-card>
           <v-btn
             v-if="(multiOmicsForm.dataGenerated || multiOmicsForm.facilities.includes('EMSL') || multiOmicsForm.facilities.includes('JGI')) && multiOmicsForm.awardDois !== null"
@@ -407,7 +451,7 @@ export default defineComponent({
         />
       </div>
       <v-btn
-        v-if="multiOmicsForm.dataGenerated || multiOmicsForm.facilities.includes('EMSL') || multiOmicsForm.facilities.includes('JGI')"
+        v-if="multiOmicsForm.facilities.includes('EMSL') || multiOmicsForm.facilities.includes('JGI')"
         class="mb-4"
         depressed
         @click="addAwardDoi"