mirror of
https://github.com/frappe/books.git
synced 2025-01-08 17:24:05 +00:00
[setup] bootstrap setup wizard
This commit is contained in:
Prateeksha Singh
parent
3b7182957a
commit
fa3a274df9
55
setup/config.js
Normal file
55
setup/config.js
Normal file
@ -0,0 +1,55 @@
|
||||
module.exports = [
|
||||
{
|
||||
fields: [
|
||||
{
|
||||
"fieldname": "country",
|
||||
"label": "Country",
|
||||
"fieldtype": "Data",
|
||||
"required": 1
|
||||
}
|
||||
],
|
||||
title: 'Select Country'
|
||||
},
|
||||
|
||||
{
|
||||
fields: [
|
||||
{
|
||||
"fieldname": "name",
|
||||
"label": "Name",
|
||||
"fieldtype": "Data",
|
||||
"required": 1
|
||||
},
|
||||
{
|
||||
"fieldname": "email",
|
||||
"label": "Email",
|
||||
"fieldtype": "Data",
|
||||
"required": 1
|
||||
}
|
||||
],
|
||||
title: 'Add a Profile'
|
||||
},
|
||||
|
||||
{
|
||||
fields: [
|
||||
{
|
||||
"fieldname": "companyName",
|
||||
"label": "Company Name",
|
||||
"fieldtype": "Data",
|
||||
"required": 1
|
||||
},
|
||||
{
|
||||
"fieldname": "abbreviation",
|
||||
"label": "Abbreviation",
|
||||
"fieldtype": "Data",
|
||||
"required": 1
|
||||
},
|
||||
{
|
||||
"fieldname": "bankName",
|
||||
"label": "Bank Name",
|
||||
"fieldtype": "Data",
|
||||
"required": 1
|
||||
}
|
||||
],
|
||||
title: 'Add your Company'
|
||||
}
|
||||
]
|
||||
128
setup/index.js
Normal file
128
setup/index.js
Normal file
@ -0,0 +1,128 @@
|
||||
const frappe = require('frappejs');
|
||||
const utils = require('frappejs/client/ui/utils');
|
||||
const slideConfigs = require('./config');
|
||||
const Tree = require('frappejs/client/ui/tree');
|
||||
const FormLayout = require('frappejs/client/view/formLayout');
|
||||
|
||||
module.exports = class SetupWizard {
|
||||
constructor({postSetup = () => {}}) {
|
||||
this.slideList = [];
|
||||
this.indicatorList = [];
|
||||
this.currentIndex = 0;
|
||||
this.footerLinks = {};
|
||||
this.data = {};
|
||||
|
||||
this.postSetup = postSetup;
|
||||
let body = document.querySelector('body');
|
||||
|
||||
// container
|
||||
this.container = frappe.ui.add('form', 'setup-container container', body);
|
||||
|
||||
// dots
|
||||
this.$indicators = frappe.ui.add('div', 'indicators vertical-margin align-center', this.container);
|
||||
|
||||
// make form
|
||||
slideConfigs.forEach(config => {
|
||||
this.formLayout = new FormLayout(config);
|
||||
this.slideList.push(this.formLayout);
|
||||
let form = this.formLayout.form;
|
||||
|
||||
let title = document.createElement('h3');
|
||||
title.innerHTML = config.title;
|
||||
title.classList.add('text-extra-muted');
|
||||
form.insertBefore(title, form.firstChild);
|
||||
this.container.appendChild(form);
|
||||
|
||||
let indicator = document.createElement('span');
|
||||
indicator.classList.add('indicator', 'gray');
|
||||
this.indicatorList.push(indicator);
|
||||
this.$indicators.appendChild(indicator);
|
||||
});
|
||||
|
||||
// make links
|
||||
this.linkArea = frappe.ui.add('div', 'setup-link-area align-right', this.container);
|
||||
let links = [
|
||||
{
|
||||
label: 'Prev',
|
||||
name: 'prev',
|
||||
action: () => {
|
||||
this.prevSlide();
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Next',
|
||||
name: 'next',
|
||||
action: () => {
|
||||
this.nextSlide();
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Complete',
|
||||
name: 'complete',
|
||||
action: (data) => {
|
||||
this.postSetup();
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
// this.formLayout.on('change', () => {
|
||||
// const show = this.doc._dirty && !this.doc.submitted;
|
||||
// this.saveButton.classList.toggle('hide', !show);
|
||||
// });
|
||||
|
||||
links.map(link => {
|
||||
let $link = utils.addLink(link.label, this.linkArea, () => {
|
||||
link.action(this.data);
|
||||
});
|
||||
this.footerLinks[link.name] = $link;
|
||||
})
|
||||
|
||||
this.showSlide(this.currentIndex);
|
||||
}
|
||||
|
||||
make() {
|
||||
//
|
||||
}
|
||||
|
||||
showSlide(index) {
|
||||
utils.activate(this.container, this.slideList[index].form, 'form-body', 'active');
|
||||
this.slideList[index].controlList[0].input.blur();
|
||||
this.activateIndicator(index);
|
||||
this.setFooterLinks(index);
|
||||
this.currentIndex = index;
|
||||
}
|
||||
|
||||
activateIndicator(index) {
|
||||
this.indicatorList.forEach(indicator => {indicator.classList.add('gray')});
|
||||
let indicator = this.indicatorList[index];
|
||||
utils.activate(this.$indicators, indicator, 'gray', 'blue', index);
|
||||
|
||||
frappe.ui.removeClass(indicator, 'gray');
|
||||
indicator.classList.remove('gray');
|
||||
}
|
||||
|
||||
prevSlide() {
|
||||
this.showSlide(this.currentIndex - 1);
|
||||
}
|
||||
|
||||
nextSlide() {
|
||||
this.showSlide(this.currentIndex + 1);
|
||||
}
|
||||
|
||||
setFooterLinks(index) {
|
||||
if(index === 0) {
|
||||
this.footerLinks.prev.classList.add('hide');
|
||||
this.footerLinks.next.classList.remove('hide');
|
||||
this.footerLinks.complete.classList.add('hide');
|
||||
} else if (index === this.slideList.length - 1) {
|
||||
this.footerLinks.prev.classList.remove('hide');
|
||||
this.footerLinks.next.classList.add('hide');
|
||||
this.footerLinks.complete.classList.remove('hide');
|
||||
} else {
|
||||
this.footerLinks.prev.classList.remove('hide');
|
||||
this.footerLinks.next.classList.remove('hide');
|
||||
this.footerLinks.complete.classList.add('hide');
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
22
www/dist/css/style.css
vendored
22
www/dist/css/style.css
vendored
@ -7486,3 +7486,25 @@ html {
|
||||
mark {
|
||||
padding: none;
|
||||
background: inherit; }
|
||||
.align-right {
|
||||
text-align: right; }
|
||||
.align-center {
|
||||
text-align: center; }
|
||||
.btn-sm, .btn-group-sm > .btn {
|
||||
margin: 0.25rem; }
|
||||
.vertical-margin {
|
||||
margin: 1rem 0px; }
|
||||
.setup-container {
|
||||
margin: 40px auto;
|
||||
padding: 20px 0px;
|
||||
width: 450px;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 4px; }
|
||||
.setup-container h3 {
|
||||
text-align: center; }
|
||||
.setup-container .form-body {
|
||||
display: none; }
|
||||
.setup-container .form-body.active {
|
||||
display: block; }
|
||||
.setup-container .setup-link-area {
|
||||
margin: 0.25rem 2rem; }
|
||||
|
||||
5222
www/dist/js/bundle.js
vendored
5222
www/dist/js/bundle.js
vendored
File diff suppressed because one or more lines are too long
14
www/index.js
14
www/index.js
@ -1,12 +1,20 @@
|
||||
const client = require('frappejs/client');
|
||||
const appClient = require('../client');
|
||||
const SetupWizard = require('../setup');
|
||||
|
||||
// start server
|
||||
client.start({
|
||||
columns: 3,
|
||||
server: 'localhost:8000'
|
||||
server: 'localhost:8000',
|
||||
makeDesk: 0
|
||||
}).then(() => {
|
||||
appClient.start();
|
||||
new SetupWizard({
|
||||
postSetup: async (data) => {
|
||||
client.makeDesk(3);
|
||||
appClient.start();
|
||||
|
||||
await frappe.router.setRoute('list', 'ToDo');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
module.exports = false;
|
||||
27
yarn.lock
27
yarn.lock
@ -1486,9 +1486,13 @@ fragment-cache@^0.2.1:
|
||||
dependencies:
|
||||
map-cache "^0.2.2"
|
||||
|
||||
"frappe-datatable@link:../datatable":
|
||||
version "0.0.0"
|
||||
uid ""
|
||||
frappe-datatable@^0.0.3:
|
||||
version "0.0.3"
|
||||
resolved "https://registry.yarnpkg.com/frappe-datatable/-/frappe-datatable-0.0.3.tgz#55d3fd7bafdf2a7380efab2ae2aaaa956624fca0"
|
||||
dependencies:
|
||||
clusterize.js "^0.18.0"
|
||||
lodash "^4.17.5"
|
||||
sortablejs "^1.7.0"
|
||||
|
||||
"frappejs@link:../frappejs":
|
||||
version "0.0.0"
|
||||
@ -2826,7 +2830,7 @@ oauth-sign@~0.8.1, oauth-sign@~0.8.2:
|
||||
version "0.8.2"
|
||||
resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
|
||||
|
||||
object-assign@^4.0.1, object-assign@^4.1.0:
|
||||
object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
|
||||
version "4.1.1"
|
||||
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
|
||||
|
||||
@ -2861,6 +2865,12 @@ object.pick@^1.3.0:
|
||||
dependencies:
|
||||
isobject "^3.0.1"
|
||||
|
||||
octicons@^7.2.0:
|
||||
version "7.2.0"
|
||||
resolved "https://registry.yarnpkg.com/octicons/-/octicons-7.2.0.tgz#a721635f73c774d7ffda56a83a29dbde03fc4b53"
|
||||
dependencies:
|
||||
object-assign "^4.1.1"
|
||||
|
||||
on-finished@~2.3.0:
|
||||
version "2.3.0"
|
||||
resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
|
||||
@ -3943,6 +3953,15 @@ rollup-plugin-sass@^0.5.3:
|
||||
node-sass ">= 3.8.0"
|
||||
rollup-pluginutils ">= 1.3.1"
|
||||
|
||||
rollup-plugin-sass@^0.6.0:
|
||||
version "0.6.0"
|
||||
resolved "https://registry.yarnpkg.com/rollup-plugin-sass/-/rollup-plugin-sass-0.6.0.tgz#7d490827f395db4b5252485c45cc1a39da88901b"
|
||||
dependencies:
|
||||
babel-runtime "^6.23.0"
|
||||
fs-extra "^0.30.0"
|
||||
node-sass ">= 3.8.0"
|
||||
rollup-pluginutils ">= 1.3.1"
|
||||
|
||||
"rollup-pluginutils@>= 1.3.1", rollup-pluginutils@^2.0.1:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.0.1.tgz#7ec95b3573f6543a46a6461bd9a7c544525d0fc0"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user