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:
parent
0277b7c0e7
commit
beb3105e9b
@ -43,7 +43,7 @@ module.exports = {
|
||||
fieldname: 'gstin',
|
||||
label: 'GSTIN',
|
||||
fieldtype: 'Data',
|
||||
placeholder: '27AAAAA0000A1Z5',
|
||||
placeholder: '27AAAAA0000A1Z5'
|
||||
},
|
||||
{
|
||||
fieldname: 'template',
|
||||
|
@ -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)
|
||||
}
|
||||
]
|
||||
};
|
||||
|
@ -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
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
@ -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"
|
||||
|
@ -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);
|
||||
|
@ -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([]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
10
src/main.js
10
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'
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
@ -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',
|
||||
|
Loading…
Reference in New Issue
Block a user