From 14e0373d62481efb8aa9da777ee7399781d450b9 Mon Sep 17 00:00:00 2001 From: smartapant Date: Mon, 11 Jan 2016 12:59:32 +0300 Subject: [PATCH] Wizard to theme --- src/app/pages/form/form.module.js | 2 +- .../form/inputs/widgets/select/select.html | 8 +- src/app/pages/form/wizard/wizard.html | 121 +++++++++++++++--- src/app/pages/form/wizard/wizardPage.html | 106 --------------- src/app/pages/form/wizard/wizrdCtrl.js | 113 +--------------- .../components/baWizard/baWizard.directive.js | 17 +++ .../theme/components/baWizard/baWizard.html | 22 ++++ .../theme/components/baWizard/baWizardCtrl.js | 54 ++++++++ .../baWizard/baWizardStep.directive.js | 58 +++++++++ .../components/baWizard/baWizardStep.html} | 0 .../theme/components/sidebar/SidebarCtrl.js | 2 +- 11 files changed, 260 insertions(+), 243 deletions(-) delete mode 100644 src/app/pages/form/wizard/wizardPage.html create mode 100644 src/app/theme/components/baWizard/baWizard.directive.js create mode 100644 src/app/theme/components/baWizard/baWizard.html create mode 100644 src/app/theme/components/baWizard/baWizardCtrl.js create mode 100644 src/app/theme/components/baWizard/baWizardStep.directive.js rename src/app/{pages/form/wizard/tab.html => theme/components/baWizard/baWizardStep.html} (100%) diff --git a/src/app/pages/form/form.module.js b/src/app/pages/form/form.module.js index fa16785..fe236df 100644 --- a/src/app/pages/form/form.module.js +++ b/src/app/pages/form/form.module.js @@ -22,7 +22,7 @@ .state('form-wizard', { url: '/form-wizard', - templateUrl: 'app/pages/form/wizard/wizardPage.html', + templateUrl: 'app/pages/form/wizard/wizard.html', controller: 'WizardCtrl', controllerAs: 'vm' }) diff --git a/src/app/pages/form/inputs/widgets/select/select.html b/src/app/pages/form/inputs/widgets/select/select.html index f057197..9328985 100644 --- a/src/app/pages/form/inputs/widgets/select/select.html +++ b/src/app/pages/form/inputs/widgets/select/select.html @@ -1,5 +1,5 @@
- @@ -7,7 +7,7 @@
- @@ -15,7 +15,7 @@
- @@ -23,7 +23,7 @@
- diff --git a/src/app/pages/form/wizard/wizard.html b/src/app/pages/form/wizard/wizard.html index 1056be1..9c63a7f 100644 --- a/src/app/pages/form/wizard/wizard.html +++ b/src/app/pages/form/wizard/wizard.html @@ -1,23 +1,106 @@ -
-
-
- {{t.title}} -
-
+
- -
-
+
+
+
+ + +
+
+
+
+ + + Required +
+
+ + + Proper email required +
+
+
+
+ + + Required +
+
+ + + Passwords should match +
+
+
+
+ + +
+
+
+
+ + + Required +
+
+ + + Required +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + + Required +
+
+
+
+ + +
+
+
+
+ +
+
+ + +
+ Congratulations! You have successfully filled the form! +
+ + +
-
- - -
+
\ No newline at end of file diff --git a/src/app/pages/form/wizard/wizardPage.html b/src/app/pages/form/wizard/wizardPage.html deleted file mode 100644 index 811fb04..0000000 --- a/src/app/pages/form/wizard/wizardPage.html +++ /dev/null @@ -1,106 +0,0 @@ -
- -
-
-
- - -
-
-
-
- - - Required -
-
- - - Proper email required -
-
-
-
- - - Required -
-
- - - Passwords should match -
-
-
-
- - -
-
-
-
- - - Required -
-
- - - Required -
-
-
-
- - -
-
-
-
- - -
-
-
-
- - - Required -
-
-
-
- - -
-
-
-
- -
-
- - -
- Congratulations! You have successfully filled the form! -
- - -
-
-
- -
\ No newline at end of file diff --git a/src/app/pages/form/wizard/wizrdCtrl.js b/src/app/pages/form/wizard/wizrdCtrl.js index a17e068..5c607c6 100644 --- a/src/app/pages/form/wizard/wizrdCtrl.js +++ b/src/app/pages/form/wizard/wizrdCtrl.js @@ -2,9 +2,7 @@ 'use strict'; angular.module('BlurAdmin.pages.form') - .controller('WizardCtrl', WizardCtrl) - .directive('baWizard', baWizard) - .directive('baWizardTab', baWizardTab); + .controller('WizardCtrl', WizardCtrl); /** @ngInject */ function WizardCtrl($scope) { @@ -17,115 +15,6 @@ vm.arePersonalInfoPasswordsEqual = function () { return vm.personalInfo.confirmPassword && vm.personalInfo.password == vm.personalInfo.confirmPassword; }; - - setInterval(function() { - console.log(vm.productInfo) - }, 5000) - } - - function baWizard() { - return { - restrict: 'E', - transclude: true, - templateUrl: 'app/pages/form/wizard/wizard.html', - controllerAs: '$baWizardController', - controller: function ($scope) { - var vm = this; - vm.tabs = []; - - vm.tabNum = 0; - vm.progress = 0; - - vm.addTab = function(tab) { - tab.setPrev(vm.tabs[vm.tabs.length - 1]); - vm.tabs.push(tab); - vm.selectTab(0); - }; - - $scope.$watch(angular.bind(vm, function () {return vm.tabNum;}), calcProgress); - - vm.selectTab = function (tabNum) { - vm.tabs[vm.tabNum].submit(); - if (vm.tabs[tabNum].isAvailiable()) { - vm.tabNum = tabNum; - vm.tabs.forEach(function (t, tIndex) { - tIndex == vm.tabNum ? t.select(true) : t.select(false); - }); - } - }; - - vm.isFirstTab = function () { - return vm.tabNum == 0; - }; - - vm.isLastTab = function () { - return vm.tabNum == vm.tabs.length - 1 ; - }; - - vm.nextTab = function () { - vm.selectTab(vm.tabNum + 1) - }; - - vm.previousTab = function () { - vm.selectTab(vm.tabNum - 1) - }; - - function calcProgress() { - vm.progress = ((vm.tabNum + 1) / vm.tabs.length) * 100; - } - } - } - } - - function baWizardTab() { - return { - restrict: 'E', - transclude: true, - require: '^baWizard', - scope: { - form: '=' - }, - templateUrl: 'app/pages/form/wizard/tab.html', - link: function($scope, $element, $attrs, wizard) { - $scope.selected = true; - - var tab = { - title: $attrs.title, - select: select, - submit: submit, - isComplete: isComplete, - isAvailiable: isAvailiable, - prevTab: undefined, - setPrev: setPrev - }; - - wizard.addTab(tab); - - function select(isSelected) { - if (isSelected) { - $scope.selected = true; - } else { - $scope.selected = false; - } - } - - function submit() { - $scope.form && $scope.form.$setSubmitted(true); - } - - function isComplete() { - return $scope.form ? $scope.form.$valid : true; - } - - function isAvailiable() { - return tab.prevTab ? tab.prevTab.isComplete() : true; - } - - function setPrev(pTab) { - tab.prevTab = pTab; - } - } - }; } })(); diff --git a/src/app/theme/components/baWizard/baWizard.directive.js b/src/app/theme/components/baWizard/baWizard.directive.js new file mode 100644 index 0000000..8f74d3b --- /dev/null +++ b/src/app/theme/components/baWizard/baWizard.directive.js @@ -0,0 +1,17 @@ +(function() { + 'use strict'; + + angular.module('BlurAdmin.theme.components') + .directive('baWizard', baWizard); + + /** @ngInject */ + function baWizard() { + return { + restrict: 'E', + transclude: true, + templateUrl: 'app/theme/components/baWizard/baWizard.html', + controllerAs: '$baWizardController', + controller: 'baWizardCtrl' + } + } +})(); diff --git a/src/app/theme/components/baWizard/baWizard.html b/src/app/theme/components/baWizard/baWizard.html new file mode 100644 index 0000000..e744ceb --- /dev/null +++ b/src/app/theme/components/baWizard/baWizard.html @@ -0,0 +1,22 @@ +
+
+
+ {{t.title}} +
+
+ +
+
+
+
+ +
+ + +
diff --git a/src/app/theme/components/baWizard/baWizardCtrl.js b/src/app/theme/components/baWizard/baWizardCtrl.js new file mode 100644 index 0000000..996b763 --- /dev/null +++ b/src/app/theme/components/baWizard/baWizardCtrl.js @@ -0,0 +1,54 @@ +(function() { + 'use strict'; + + angular.module('BlurAdmin.theme.components') + .controller('baWizardCtrl', baWizardCtrl); + + /** @ngInject */ + function baWizardCtrl($scope) { + var vm = this; + vm.tabs = []; + + vm.tabNum = 0; + vm.progress = 0; + + vm.addTab = function(tab) { + tab.setPrev(vm.tabs[vm.tabs.length - 1]); + vm.tabs.push(tab); + vm.selectTab(0); + }; + + $scope.$watch(angular.bind(vm, function () {return vm.tabNum;}), calcProgress); + + vm.selectTab = function (tabNum) { + vm.tabs[vm.tabNum].submit(); + if (vm.tabs[tabNum].isAvailiable()) { + vm.tabNum = tabNum; + vm.tabs.forEach(function (t, tIndex) { + tIndex == vm.tabNum ? t.select(true) : t.select(false); + }); + } + }; + + vm.isFirstTab = function () { + return vm.tabNum == 0; + }; + + vm.isLastTab = function () { + return vm.tabNum == vm.tabs.length - 1 ; + }; + + vm.nextTab = function () { + vm.selectTab(vm.tabNum + 1) + }; + + vm.previousTab = function () { + vm.selectTab(vm.tabNum - 1) + }; + + function calcProgress() { + vm.progress = ((vm.tabNum + 1) / vm.tabs.length) * 100; + } + } +})(); + diff --git a/src/app/theme/components/baWizard/baWizardStep.directive.js b/src/app/theme/components/baWizard/baWizardStep.directive.js new file mode 100644 index 0000000..126dbd9 --- /dev/null +++ b/src/app/theme/components/baWizard/baWizardStep.directive.js @@ -0,0 +1,58 @@ +(function() { + 'use strict'; + + angular.module('BlurAdmin.theme.components') + .directive('baWizardStep', baWizardStep); + + /** @ngInject */ + function baWizardStep() { + return { + restrict: 'E', + transclude: true, + require: '^baWizard', + scope: { + form: '=' + }, + templateUrl: 'app/theme/components/baWizard/baWizardStep.html', + link: function($scope, $element, $attrs, wizard) { + $scope.selected = true; + + var tab = { + title: $attrs.title, + select: select, + submit: submit, + isComplete: isComplete, + isAvailiable: isAvailiable, + prevTab: undefined, + setPrev: setPrev + }; + + wizard.addTab(tab); + + function select(isSelected) { + if (isSelected) { + $scope.selected = true; + } else { + $scope.selected = false; + } + } + + function submit() { + $scope.form && $scope.form.$setSubmitted(true); + } + + function isComplete() { + return $scope.form ? $scope.form.$valid : true; + } + + function isAvailiable() { + return tab.prevTab ? tab.prevTab.isComplete() : true; + } + + function setPrev(pTab) { + tab.prevTab = pTab; + } + } + }; + } +})(); \ No newline at end of file diff --git a/src/app/pages/form/wizard/tab.html b/src/app/theme/components/baWizard/baWizardStep.html similarity index 100% rename from src/app/pages/form/wizard/tab.html rename to src/app/theme/components/baWizard/baWizardStep.html diff --git a/src/app/theme/components/sidebar/SidebarCtrl.js b/src/app/theme/components/sidebar/SidebarCtrl.js index d0b23e8..6d007d1 100644 --- a/src/app/theme/components/sidebar/SidebarCtrl.js +++ b/src/app/theme/components/sidebar/SidebarCtrl.js @@ -65,7 +65,7 @@ root: '#/form-layouts' }, { - title: 'From Wizard', + title: 'Form Wizard', root: '#/form-wizard' } ]