fix: Setup Wizard fixes

- Company Logo and Name section
- Disable next button on click
- Set company logo in PrintSettings

Other
- Add brand color to tailwind config
- Disabled button
- Override inputClass using a function

models/doctype/PrintSettings/PrintSettings.js

@@ -43,7 +43,7 @@ module.exports = {
       fieldname: 'gstin',
       label: 'GSTIN',
       fieldtype: 'Data',
-      placeholder: '27AAAAA0000A1Z5',
+      placeholder: '27AAAAA0000A1Z5'
     },
     {
       fieldname: 'template',

models/doctype/SetupWizard/SetupWizard.js

@@ -10,6 +10,11 @@ module.exports = {
   settings: null,
   keywordFields: [],
   fields: [
+    {
+      fieldname: 'companyLogo',
+      label: 'Company Logo',
+      fieldtype: 'AttachImage'
+    },
     {
       fieldname: 'country',
       label: 'Country',
@@ -21,7 +26,7 @@ module.exports = {
 
     {
       fieldname: 'fullname',
-      label: 'Name',
+      label: 'Your Name',
       fieldtype: 'Data',
       placeholder: 'John Doe',
       required: 1
@@ -39,7 +44,7 @@ module.exports = {
     {
       fieldname: 'companyName',
       label: 'Company Name',
-      placeholder: 'Acme Inc',
+      placeholder: 'Company Name',
       fieldtype: 'Data',
       required: 1
     },
@@ -107,50 +112,10 @@ module.exports = {
   ],
   quickEditFields: [
     'fullname',
-    'email',
-    'companyName',
     'bankName',
     'country',
     'currency',
     'fiscalYearStart',
     'fiscalYearEnd'
-  ],
-
-  layout: {
-    paginated: true,
-    sections: [
-      {
-        title: 'Select Country',
-        columns: [
-          {
-            fields: ['country']
-          }
   ]
-      },
-
-      {
-        title: 'Add a Profile',
-        columns: [
-          {
-            fields: ['fullname', 'email']
-          }
-        ]
-      },
-
-      {
-        title: 'Add your Company',
-        columns: [
-          {
-            fields: [
-              'companyName',
-              'bankName',
-              'currency',
-              'fiscalYearStart',
-              'fiscalYearEnd'
-            ]
-          }
-        ]
-      }
-    ].filter(Boolean)
-  }
 };

src/components/Button.vue

@@ -2,6 +2,7 @@
   <button
     class="focus:outline-none rounded-md shadow-button"
     :style="style"
+    :class="_class"
     v-bind="$attrs"
     v-on="$listeners"
   >
@@ -19,6 +20,10 @@ export default {
     icon: {
       type: Boolean,
       default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
@@ -30,6 +35,11 @@ export default {
             ? 'linear-gradient(180deg, #2C9AF1 0%, #2490EF 100%)'
             : 'linear-gradient(180deg, #F9F9FA 0%, #F4F4F6 100%)'
       };
+    },
+    _class() {
+      return {
+        'opacity-50 cursor-not-allowed pointer-events-none': this.disabled
+      };
     }
   }
 };

src/components/Controls/AttachImage.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="relative border rounded-full flex-center overflow-hidden cursor-pointer"
+    class="relative bg-white border rounded-full flex-center overflow-hidden cursor-pointer"
     :class="{ 'w-20 h-20': size !== 'small', 'w-16 h-16': size === 'small' }"
     @mouseover="showEdit = true"
     @mouseleave="showEdit = false"

src/components/Controls/Base.vue

@@ -28,7 +28,8 @@ export default {
     'size',
     'showLabel',
     'readOnly',
-    'background'
+    'background',
+    'autofocus'
   ],
   inject: {
     doctype: {
@@ -41,13 +42,17 @@ export default {
       default: null
     }
   },
+  mounted() {
+    if (this.autofocus) {
+      this.focus();
+    }
+  },
   computed: {
     inputType() {
       return 'text';
     },
     inputClasses() {
-      return [
+      let classes = [
-        this.inputClass,
         {
           'px-3 py-2': this.size !== 'small',
           'px-2 py-1': this.size === 'small',
@@ -55,6 +60,8 @@ export default {
         },
         'focus:outline-none focus:bg-gray-200 rounded w-full text-gray-900'
       ];
+
+      return this.getInputClassesFromProp(classes);
     },
     inputPlaceholder() {
       return this.placeholder || this.df.placeholder;
@@ -64,8 +71,20 @@ export default {
     }
   },
   methods: {
+    getInputClassesFromProp(classes) {
+      if (this.inputClass) {
+        if (typeof this.inputClass === 'function') {
+          classes = this.inputClass(classes);
+        } else {
+          classes.push(this.inputClass);
+        }
+      }
+      return classes;
+    },
     focus() {
+      if (this.$refs.input && this.$refs.input.focus) {
         this.$refs.input.focus();
+      }
     },
     triggerChange(value) {
       value = this.parse(value);

src/components/Controls/Check.vue

@@ -1,8 +1,6 @@
 <template>
   <div>
-    <label
+    <label class="flex items-center">
-      class="flex items-center"
-    >
       <input
         ref="input"
         type="checkbox"
@@ -26,7 +24,7 @@ export default {
   extends: Base,
   computed: {
     inputClasses() {
-      return [this.inputClass];
+      return this.getInputClassesFromProp([]);
     }
   }
 };

src/main.js

@@ -64,6 +64,7 @@ import router from './router';
   frappe.events.on('SetupWizard:setup-complete', async setupWizardValues => {
     const countryList = require('../fixtures/countryInfo.json');
     const {
+      companyLogo,
       companyName,
       country,
       name,
@@ -89,6 +90,15 @@ import router from './router';
 
     await doc.update();
 
+    const printSettings = await frappe.getSingle('PrintSettings');
+    printSettings.set({
+      logo: companyLogo,
+      companyName,
+      email,
+      displayLogo: companyLogo ? 1 : 0
+    });
+    await printSettings.update();
+
     const systemSettings = await frappe.getSingle('SystemSettings');
     await systemSettings.set({
       dateFormat: countryList[country]['date_format'] || 'yyyy-MM-dd'

src/pages/Settings/TabSystem.vue

@@ -15,9 +15,17 @@
     </div>
     <div class="mt-4 text-sm">
       <Button @click="newDatabase">{{ _('Create New') }}</Button>
-      <Button @click="existingDatabase">{{ _('Browse File') }}</Button>
+      <Button class="ml-2" @click="existingDatabase">{{
+        _('Browse File')
+      }}</Button>
     </div>
-    <TwoColumnForm class="mt-6" v-if="doc" :doc="doc" :fields="fields" :autosave="true" />
+    <TwoColumnForm
+      class="mt-6"
+      v-if="doc"
+      :doc="doc"
+      :fields="fields"
+      :autosave="true"
+    />
   </div>
 </template>
 
@@ -41,10 +49,8 @@ export default {
     };
   },
   async mounted() {
-    this.doc = await frappe.getSingle('SystemSettings');
+    this.doc = frappe.SystemSettings;
-    this.companyName = (await frappe.getSingle(
+    this.companyName = frappe.AccountingSettings.companyName;
-      'AccountingSettings'
-    )).companyName;
   },
   methods: {
     async newDatabase() {
@@ -71,4 +77,3 @@ export default {
   }
 };
 </script>
-

src/pages/SetupWizard/SetupWizard.vue

@@ -7,11 +7,47 @@
       </p>
     </div>
     <div class="px-8 mt-5 window-no-drag">
+      <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)"
+        />
+        <div class="ml-2">
+          <FormControl
+            ref="companyField"
+            :df="meta.getField('companyName')"
+            :value="doc.companyName"
+            @change="value => doc.set('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'
+              ]
+            "
+            :autofocus="true"
+          />
+          <FormControl
+            :df="meta.getField('email')"
+            :value="doc.email"
+            @change="value => doc.set('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'
+              ]
+            "
+          />
+        </div>
+      </div>
       <TwoColumnForm :fields="fields" :doc="doc" />
     </div>
     <div class="px-8 flex justify-end mt-5 window-no-drag">
-      <Button @click="submit" type="primary" class="text-white text-sm">
+      <Button
-        {{ _('Next') }}
+        @click="submit"
+        type="primary"
+        class="text-white text-sm"
+        :disabled="loading"
+      >
+        {{ buttonText }}
       </Button>
     </div>
   </div>
@@ -19,6 +55,8 @@
 <script>
 import frappe from 'frappejs';
 import TwoColumnForm from '@/components/TwoColumnForm';
+import FormControl from '@/components/Controls/FormControl';
+
 import Button from '@/components/Button';
 
 export default {
@@ -26,6 +64,7 @@ export default {
   data() {
     return {
       meta: frappe.getMeta('SetupWizard'),
+      loading: false,
       doc: {}
     };
   },
@@ -37,6 +76,7 @@ export default {
   },
   components: {
     TwoColumnForm,
+    FormControl,
     Button
   },
   async beforeMount() {
@@ -45,8 +85,10 @@ export default {
   methods: {
     async submit() {
       try {
+        this.loading = true;
         frappe.events.trigger('SetupWizard:setup-complete', this.doc);
       } catch (e) {
+        this.loading = false;
         console.error(e);
       }
     }
@@ -54,6 +96,9 @@ export default {
   computed: {
     fields() {
       return this.meta.getQuickEditFields();
+    },
+    buttonText() {
+      return this.loading ? this._('Setting Up...') : this._('Next');
     }
   }
 };

tailwind.config.js

@@ -19,7 +19,6 @@ module.exports = {
       },
       minWidth: {
         '40': '10rem',
-        '56': '14rem',
         '56': '14rem'
       },
       maxWidth: {
@@ -47,6 +46,7 @@ module.exports = {
         xl: '0.75rem' // 12px
       },
       colors: {
+        brand: '#2490EF',
         black: '#112B42',
         gray: {
           '100': '#f4f4f6',