jinql
/
blur-admin
mirror of https://github.com/akveo/blur-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

Wizard to theme

Browse Source
pull/3/head
smartapant 9 years ago
parent bfd1084fa0
commit 14e0373d62
11 changed files with 260 additions and 243 deletions
Show Stats Download Patch File Download Diff File

2
src/app/pages/form/form.module.js
Unescape View File

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

8
src/app/pages/form/inputs/widgets/select/select.html
Unescape View File

@ -1,5 +1,5 @@
<div class="form-group">
<select class="form-control" title="Standard Select" selectpicker>
<select class="form-control selectpicker" title="Standard Select" selectpicker>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
@ -7,7 +7,7 @@
</select>
</div>
<div class="form-group">
<select class="form-control" data-live-search="true" title="Select With Search" selectpicker>
<select class="form-control selectpicker" data-live-search="true" title="Select With Search" selectpicker>
<option>Hot Dog, Fries and a Soda</option>
<option>Burger, Shake and a Smile</option>
<option>Sugar, Spice and all things nice</option>
@ -15,7 +15,7 @@
</select>
</div>
<div class="form-group">
<select class="form-control" title="Option Types" selectpicker>
<select class="form-control selectpicker" title="Option Types" selectpicker>
<option>Standard option</option>
<option data-subtext="option subtext">Option with subtext</option>
<option disabled>Disabled Option</option>
@ -23,7 +23,7 @@
</select>
</div>
<div class="form-group">
<select class="form-control" disabled title="Disabled Select" selectpicker>
<select class="form-control selectpicker" disabled title="Disabled Select" selectpicker>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>

121
src/app/pages/form/wizard/wizard.html
Unescape View File

@ -1,23 +1,106 @@
<div class="wizard">
<div class="wizard-navigation-container">
<div ng-repeat="t in $baWizardController.tabs" class="wizard-navigation {{$baWizardController.tabNum == $index ? 'active' : ''}}" ng-click="$baWizardController.selectTab($index)">
{{t.title}}
</div>
</div>
<div class="widgets">
<div class="progress progress-wizard">
<div class="progress-bar progress-bar-info active" role="progressbar"
aria-valuemin="0" aria-valuemax="100" ng-style="{width: $baWizardController.progress + '%'}">
<div class="row">
<div class="col-md-12">
<div ba-panel ba-panel-title="Form Wizard" ba-panel-class="with-scroll">
<ba-wizard>
<ba-wizard-step title="Personal info" form="vm.personalInfoForm">
<form name="vm.personalInfoForm" novalidate>
<div class="row">
<div class="col-md-6">
<div class="form-group has-feedback"
ng-class="{'has-error': vm.personalInfoForm.username.$invalid && (vm.personalInfoForm.username.$dirty || vm.personalInfoForm.$submitted)}">
<label for="exampleUsername1">Username</label>
<input type="text" class="form-control" id="exampleUsername1" name="username" placeholder="Username" ng-model="vm.personalInfo.username" required>
<span class="help-block error-block basic-block">Required</span>
</div>
<div class="form-group" ng-class="{'has-error': vm.personalInfoForm.email.$invalid && (vm.personalInfoForm.email.$dirty || vm.personalInfoForm.$submitted)}">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" name="email" placeholder="Email" ng-model="vm.personalInfo.email" required>
<span class="help-block error-block basic-block">Proper email required</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group" ng-class="{'has-error': vm.personalInfoForm.password.$invalid && (vm.personalInfoForm.password.$dirty || vm.personalInfoForm.$submitted)}">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" name="password" placeholder="Password" ng-model="vm.personalInfo.password" required>
<span class="help-block error-block basic-block">Required</span>
</div>
<div class="form-group" ng-class="{'has-error': !vm.arePersonalInfoPasswordsEqual() && (vm.personalInfoForm.confirmPassword.$dirty || vm.personalInfoForm.$submitted)}">
<label for="exampleInputConfirmPassword1">Confirm Password</label>
<input type="password" class="form-control" id="exampleInputConfirmPassword1" name="confirmPassword" placeholder="Confirm Password" ng-model="vm.personalInfo.confirmPassword" required>
<span class="help-block error-block basic-block">Passwords should match</span>
</div>
</div>
</div>
</form>
</ba-wizard-step>
<ba-wizard-step title="Product Info" form="vm.productInfoForm">
<form name="vm.productInfoForm" novalidate>
<div class="row">
<div class="col-md-6">
<div class="form-group has-feedback"
ng-class="{'has-error': vm.productInfoForm.productName.$invalid && (vm.productInfoForm.productName.$dirty || vm.productInfoForm.$submitted)}">
<label for="productName">Product name</label>
<input type="text" class="form-control" id="productName" name="productName" placeholder="Product name" ng-model="vm.productInfo.productName" required>
<span class="help-block error-block basic-block">Required</span>
</div>
<div class="form-group" ng-class="{'has-error': vm.productInfoForm.productId.$invalid && (vm.productInfoForm.productId.$dirty || vm.productInfoForm.$submitted)}">
<label for="productId">Product id</label>
<input type="text" class="form-control" id="productId" name="productId" placeholder="productId" ng-model="vm.productInfo.productId" required>
<span class="help-block error-block basic-block">Required</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="productName">Category</label>
<select class="form-control" title="Category" selectpicker>
<option selected>Electronics</option>
<option>Toys</option>
<option>Accessories</option>
</select>
</div>
</div>
</div>
</form>
</ba-wizard-step>
<ba-wizard-step title="Shipment" form="vm.addressForm">
<form name="vm.addressForm" novalidate>
<div class="row">
<div class="col-md-6">
<div class="form-group has-feedback"
ng-class="{'has-error': vm.addressForm.address.$invalid && (vm.addressForm.address.$dirty || vm.addressForm.$submitted)}">
<label for="productName">Shipment address</label>
<input type="text" class="form-control" id="address" name="address" placeholder="Shipment address" ng-model="vm.shipment.address" required>
<span class="help-block error-block basic-block">Required</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="productName">Shipment method</label>
<select class="form-control" title="Category" selectpicker>
<option selected>Fast & expensive</option>
<option>Cheap & free</option>
</select>
</div>
</div>
</div>
<div class="checkbox">
<label class="custom-checkbox">
<input type="checkbox">
<span>Save shipment info</span>
</label>
</div>
</form>
</ba-wizard-step>
<ba-wizard-step title="Finish">
<form class="form-horizontal" name="vm.finishForm" novalidate>
Congratulations! You have successfully filled the form!
</form>
</ba-wizard-step>
</ba-wizard>
</div>
</div>
</div>
<div class="steps" ng-transclude></div>
<nav>
<ul class="pager wizard-pager">
<li class="previous"><button ng-disabled="$baWizardController.isFirstTab()" ng-click="$baWizardController.previousTab()" type="button" class=" btn btn-primary"><span aria-hidden="true">&larr;</span> previous</button></li>
<li class="next"> <button ng-disabled="$baWizardController.isLastTab()" ng-click="$baWizardController.nextTab()" type="button" class="btn btn-primary">next <span aria-hidden="true">&rarr;</span></button></li>
</ul>
</nav>
</div>
</div>

106
src/app/pages/form/wizard/wizardPage.html
Unescape View File

@ -1,106 +0,0 @@
<div class="widgets">
<div class="row">
<div class="col-md-12">
<div ba-panel ba-panel-title="Form Wizard" ba-panel-class="with-scroll">
<ba-wizard>
<ba-wizard-tab title="Personal info" form="vm.personalInfoForm">
<form name="vm.personalInfoForm" novalidate>
<div class="row">
<div class="col-md-6">
<div class="form-group has-feedback"
ng-class="{'has-error': vm.personalInfoForm.username.$invalid && (vm.personalInfoForm.username.$dirty || vm.personalInfoForm.$submitted)}">
<label for="exampleUsername1">Username</label>
<input type="text" class="form-control" id="exampleUsername1" name="username" placeholder="Username" ng-model="vm.personalInfo.username" required>
<span class="help-block error-block basic-block">Required</span>
</div>
<div class="form-group" ng-class="{'has-error': vm.personalInfoForm.email.$invalid && (vm.personalInfoForm.email.$dirty || vm.personalInfoForm.$submitted)}">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" name="email" placeholder="Email" ng-model="vm.personalInfo.email" required>
<span class="help-block error-block basic-block">Proper email required</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group" ng-class="{'has-error': vm.personalInfoForm.password.$invalid && (vm.personalInfoForm.password.$dirty || vm.personalInfoForm.$submitted)}">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" name="password" placeholder="Password" ng-model="vm.personalInfo.password" required>
<span class="help-block error-block basic-block">Required</span>
</div>
<div class="form-group" ng-class="{'has-error': !vm.arePersonalInfoPasswordsEqual() && (vm.personalInfoForm.confirmPassword.$dirty || vm.personalInfoForm.$submitted)}">
<label for="exampleInputConfirmPassword1">Confirm Password</label>
<input type="password" class="form-control" id="exampleInputConfirmPassword1" name="confirmPassword" placeholder="Confirm Password" ng-model="vm.personalInfo.confirmPassword" required>
<span class="help-block error-block basic-block">Passwords should match</span>
</div>
</div>
</div>
</form>
</ba-wizard-tab>
<ba-wizard-tab title="Product Info" form="vm.productInfoForm">
<form name="vm.productInfoForm" novalidate>
<div class="row">
<div class="col-md-6">
<div class="form-group has-feedback"
ng-class="{'has-error': vm.productInfoForm.productName.$invalid && (vm.productInfoForm.productName.$dirty || vm.productInfoForm.$submitted)}">
<label for="productName">Product name</label>
<input type="text" class="form-control" id="productName" name="productName" placeholder="Product name" ng-model="vm.productInfo.productName" required>
<span class="help-block error-block basic-block">Required</span>
</div>
<div class="form-group" ng-class="{'has-error': vm.productInfoForm.productId.$invalid && (vm.productInfoForm.productId.$dirty || vm.productInfoForm.$submitted)}">
<label for="productId">Product id</label>
<input type="text" class="form-control" id="productId" name="productId" placeholder="productId" ng-model="vm.productInfo.productId" required>
<span class="help-block error-block basic-block">Required</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="productName">Category</label>
<select class="form-control" title="Category" selectpicker>
<option selected>Electronics</option>
<option>Toys</option>
<option>Accessories</option>
</select>
</div>
</div>
</div>
</form>
</ba-wizard-tab>
<ba-wizard-tab title="Shipment" form="vm.addressForm">
<form name="vm.addressForm" novalidate>
<div class="row">
<div class="col-md-6">
<div class="form-group has-feedback"
ng-class="{'has-error': vm.addressForm.address.$invalid && (vm.addressForm.address.$dirty || vm.addressForm.$submitted)}">
<label for="productName">Shipment address</label>
<input type="text" class="form-control" id="address" name="address" placeholder="Shipment address" ng-model="vm.shipment.address" required>
<span class="help-block error-block basic-block">Required</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="productName">Shipment method</label>
<select class="form-control" title="Category" selectpicker>
<option selected>Fast & expensive</option>
<option>Cheap & free</option>
</select>
</div>
</div>
</div>
<div class="checkbox">
<label class="custom-checkbox">
<input type="checkbox">
<span>Save shipment info</span>
</label>
</div>
</form>
</ba-wizard-tab>
<ba-wizard-tab title="Finish">
<form class="form-horizontal" name="vm.finishForm" novalidate>
Congratulations! You have successfully filled the form!
</form>
</ba-wizard-tab>
</ba-wizard>
</div>
</div>
</div>
</div>

113
src/app/pages/form/wizard/wizrdCtrl.js
Unescape View File

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

17
src/app/theme/components/baWizard/baWizard.directive.js
Unescape View File

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

22
src/app/theme/components/baWizard/baWizard.html
Unescape View File

@ -0,0 +1,22 @@
<div class="wizard">
<div class="wizard-navigation-container">
<div ng-repeat="t in $baWizardController.tabs" class="wizard-navigation {{$baWizardController.tabNum == $index ? 'active' : ''}}" ng-click="$baWizardController.selectTab($index)">
{{t.title}}
</div>
</div>
<div class="progress progress-wizard">
<div class="progress-bar progress-bar-info active" role="progressbar"
aria-valuemin="0" aria-valuemax="100" ng-style="{width: $baWizardController.progress + '%'}">
</div>
</div>
<div class="steps" ng-transclude></div>
<nav>
<ul class="pager wizard-pager">
<li class="previous"><button ng-disabled="$baWizardController.isFirstTab()" ng-click="$baWizardController.previousTab()" type="button" class=" btn btn-primary"><span aria-hidden="true">&larr;</span> previous</button></li>
<li class="next"> <button ng-disabled="$baWizardController.isLastTab()" ng-click="$baWizardController.nextTab()" type="button" class="btn btn-primary">next <span aria-hidden="true">&rarr;</span></button></li>
</ul>
</nav>
</div>

54
src/app/theme/components/baWizard/baWizardCtrl.js
Unescape View File

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

58
src/app/theme/components/baWizard/baWizardStep.directive.js
Unescape View File

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

0
src/app/pages/form/wizard/tab.html → src/app/theme/components/baWizard/baWizardStep.html
Unescape View File

2
src/app/theme/components/sidebar/SidebarCtrl.js
Unescape View File

@ -65,7 +65,7 @@
root: '#/form-layouts'
},
{
title: 'From Wizard',
title: 'Form Wizard',
root: '#/form-wizard'
}
]

Write Preview
Loading…
Cancel
Save