2
0
mirror of https://github.com/frappe/books.git synced 2024-12-31 22:11:48 +00:00

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
This commit is contained in:
Faris Ansari 2019-12-16 19:22:14 +05:30
parent 0277b7c0e7
commit beb3105e9b
10 changed files with 115 additions and 63 deletions

View File

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

View File

@ -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)
}
]
};

View File

@ -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
};
}
}
};

View File

@ -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"

View File

@ -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 [
this.inputClass,
let classes = [
{
'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() {
this.$refs.input.focus();
if (this.$refs.input && this.$refs.input.focus) {
this.$refs.input.focus();
}
},
triggerChange(value) {
value = this.parse(value);

View File

@ -1,8 +1,6 @@
<template>
<div>
<label
class="flex items-center"
>
<label 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([]);
}
}
};

View File

@ -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'

View File

@ -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.companyName = (await frappe.getSingle(
'AccountingSettings'
)).companyName;
this.doc = frappe.SystemSettings;
this.companyName = frappe.AccountingSettings.companyName;
},
methods: {
async newDatabase() {
@ -71,4 +77,3 @@ export default {
}
};
</script>

View File

@ -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">
{{ _('Next') }}
<Button
@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');
}
}
};

View File

@ -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',