Require all fields but tags, fix Submit button validation (#4080)

Netflix · Dec 5, 2023 · 15d7c8c · 15d7c8c
1 parent d9a736b
commit 15d7c8c
Showing 1 changed file with 82 additions and 48 deletions.
diff --git a/src/dispatch/static/dispatch/src/case/ReportSubmissionCard.vue b/src/dispatch/static/dispatch/src/case/ReportSubmissionCard.vue
@@ -1,11 +1,10 @@
 <template>
-  <v-form @submit.prevent v-slot="{ isValid }">
+  <v-form ref="form" @submit.prevent>
     <v-card
       class="mx-auto ma-4"
       max-width="600"
       variant="outlined"
-      title="          Open a Case
-"
+      title="          Open a Case"
       :loading="loading"
     >
       <template #append>
@@ -32,50 +31,48 @@
             <v-icon size="small">mdi-open-in-new</v-icon>
           </a>
         </p>
-        <v-form>
-          <v-container>
-            <v-row>
-              <v-col cols="12">
-                <v-textarea
-                  v-model="title"
-                  label="Title"
-                  hint="A brief explanatory title. You can change this later."
-                  clearable
-                  auto-grow
-                  rows="2"
-                  required
-                  name="Title"
-                  :rules="[rules.required]"
-                />
-              </v-col>
-              <v-col cols="12">
-                <v-textarea
-                  v-model="description"
-                  label="Description"
-                  hint="A summary of what you know so far. It's all right if this is incomplete."
-                  clearable
-                  auto-grow
-                  rows="3"
-                  required
-                  name="Description"
-                  :rules="[rules.required]"
-                />
-              </v-col>
-              <v-col cols="12">
-                <project-select v-model="project" />
-              </v-col>
-              <v-col cols="12">
-                <case-type-select :project="project" v-model="case_type" />
-              </v-col>
-              <v-col cols="12">
-                <case-priority-select :project="project" v-model="case_priority" />
-              </v-col>
-              <v-col cols="12">
-                <tag-filter-auto-complete :project="project" v-model="tags" label="Tags" />
-              </v-col>
-            </v-row>
-          </v-container>
-        </v-form>
+        <v-container>
+          <v-row>
+            <v-col cols="12">
+              <v-textarea
+                v-model="title"
+                label="Title"
+                hint="A brief explanatory title. You can change this later."
+                clearable
+                auto-grow
+                rows="2"
+                required
+                name="Title"
+                :rules="[rules.required]"
+              />
+            </v-col>
+            <v-col cols="12">
+              <v-textarea
+                v-model="description"
+                label="Description"
+                hint="A summary of what you know so far. It's all right if this is incomplete."
+                clearable
+                auto-grow
+                rows="3"
+                required
+                name="Description"
+                :rules="[rules.required]"
+              />
+            </v-col>
+            <v-col cols="12">
+              <project-select v-model="project" />
+            </v-col>
+            <v-col cols="12">
+              <case-type-select :project="project" v-model="case_type" />
+            </v-col>
+            <v-col cols="12">
+              <case-priority-select :project="project" v-model="case_priority" />
+            </v-col>
+            <v-col cols="12">
+              <tag-filter-auto-complete :project="project" v-model="tags" label="Tags" />
+            </v-col>
+          </v-row>
+        </v-container>
       </v-card-text>
       <v-card-actions>
         <v-spacer />
@@ -84,7 +81,7 @@
           variant="flat"
           block
           :loading="loading"
-          :disabled="!isValid.value"
+          :disabled="!formIsValid"
           @click="report()"
         >
           Submit
@@ -128,6 +125,12 @@ export default {
     return {
       isSubmitted: false,
       project_faq: null,
+      formIsValid: false,
+      titleValid: false,
+      descriptionValid: false,
+      projectValid: false,
+      caseTypeValid: false,
+      casePriorityValid: false,
     }
   },
 
@@ -148,6 +151,29 @@ export default {
     ]),
   },
 
+  watch: {
+    title() {
+      this.titleValid = !!this.title
+      this.checkFormValidity()
+    },
+    description() {
+      this.descriptionValid = !!this.description
+      this.checkFormValidity()
+    },
+    project() {
+      this.projectValid = !!this.project
+      this.checkFormValidity()
+    },
+    case_type() {
+      this.caseTypeValid = !!this.case_type
+      this.checkFormValidity()
+    },
+    case_priority() {
+      this.casePriorityValid = !!this.case_priority
+      this.checkFormValidity()
+    },
+  },
+
   methods: {
     getFAQ() {
       if (this.project) {
@@ -198,6 +224,14 @@ export default {
         }
       )
     },
+    checkFormValidity() {
+      this.formIsValid =
+        this.titleValid &&
+        this.descriptionValid &&
+        this.projectValid &&
+        this.caseTypeValid &&
+        this.casePriorityValid
+    },
     ...mapActions("case_management", ["report", "get", "resetSelected"]),
   },