fix: Disable Next button until values are filled

src/pages/SetupWizard/SetupWizard.vue

@@ -6,19 +6,19 @@
         {{ _('These settings can be changed later') }}
       </p>
     </div>
-    <div class="px-8 mt-5 window-no-drag">
+    <div class="px-8 mt-5 window-no-drag" v-if="doc">
       <div class="flex items-center border bg-brand rounded-xl px-6 py-5 mb-4">
         <FormControl
           :df="meta.getField('companyLogo')"
           :value="doc.companyLogo"
-          @change="value => doc.set('companyLogo', value)"
+          @change="value => setValue('companyLogo', value)"
         />
         <div class="ml-2">
           <FormControl
             ref="companyField"
             :df="meta.getField('companyName')"
             :value="doc.companyName"
-            @change="value => doc.set('companyName', value)"
+            @change="value => setValue('companyName', value)"
             :input-class="
               classes => [
                 'bg-transparent font-semibold text-xl text-white placeholder-blue-200 focus:outline-none focus:bg-blue-600 px-3 rounded py-1'
@@ -29,7 +29,7 @@
           <FormControl
             :df="meta.getField('email')"
             :value="doc.email"
-            @change="value => doc.set('email', value)"
+            @change="value => setValue('email', value)"
             :input-class="
               classes => [
                 'text-base bg-transparent text-white placeholder-blue-200 focus:bg-blue-600 focus:outline-none rounded px-3 py-1'
@@ -45,7 +45,7 @@
         @click="submit"
         type="primary"
         class="text-white text-sm"
-        :disabled="loading"
+        :disabled="!valuesFilled || loading"
       >
         {{ buttonText }}
       </Button>
@@ -56,16 +56,16 @@
 import frappe from 'frappejs';
 import TwoColumnForm from '@/components/TwoColumnForm';
 import FormControl from '@/components/Controls/FormControl';
-
 import Button from '@/components/Button';
+import { handleErrorWithDialog, showMessageDialog } from '@/utils';
 
 export default {
   name: 'SetupWizard',
   data() {
     return {
-      meta: frappe.getMeta('SetupWizard'),
+      doc: null,
       loading: false,
-      doc: {}
+      valuesFilled: false
     };
   },
   provide() {
@@ -79,11 +79,29 @@ export default {
     FormControl,
     Button
   },
-  async beforeMount() {
+  async mounted() {
     this.doc = await frappe.newDoc({ doctype: 'SetupWizard' });
+    this.doc.on('change', () => {
+      this.valuesFilled = this.allValuesFilled();
+    });
   },
   methods: {
+    setValue(fieldname, value) {
+      this.doc
+        .set(fieldname, value)
+        .catch(e => handleErrorWithDialog(e, this.doc));
+    },
+    allValuesFilled() {
+      let values = this.meta.quickEditFields.map(
+        fieldname => this.doc[fieldname]
+      );
+      return values.every(Boolean);
+    },
     async submit() {
+      if (!this.allValuesFilled()) {
+        showMessageDialog({ message: this._('Please fill all values') });
+        return;
+      }
       try {
         this.loading = true;
         frappe.events.trigger('SetupWizard:setup-complete', this.doc);
@@ -94,6 +112,9 @@ export default {
     }
   },
   computed: {
+    meta() {
+      return frappe.getMeta('SetupWizard');
+    },
     fields() {
       return this.meta.getQuickEditFields();
     },