[setup] bootstrap setup wizard

setup/config.js

@@ -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'
+	}
+]

setup/index.js

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

www/dist/css/style.css

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

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;

yarn.lock

@@ -1486,9 +1486,13 @@ fragment-cache@^0.2.1:
   dependencies:
     map-cache "^0.2.2"
 
-"frappe-datatable@link:../datatable":
+frappe-datatable@^0.0.3:
-  version "0.0.0"
+  version "0.0.3"
-  uid ""
+  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"