mirror of https://github.com/akveo/blur-admin
Wizard to theme
smartapant
parent
bfd1084fa0
commit
14e0373d62
|
|
@ -22,7 +22,7 @@
|
||||||
.state('form-wizard',
|
.state('form-wizard',
|
||||||
{
|
{
|
||||||
url: '/form-wizard',
|
url: '/form-wizard',
|
||||||
templateUrl: 'app/pages/form/wizard/wizardPage.html',
|
templateUrl: 'app/pages/form/wizard/wizard.html',
|
||||||
controller: 'WizardCtrl',
|
controller: 'WizardCtrl',
|
||||||
controllerAs: 'vm'
|
controllerAs: 'vm'
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<div class="form-group">
|
<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 1</option>
|
||||||
<option>Option 2</option>
|
<option>Option 2</option>
|
||||||
<option>Option 3</option>
|
<option>Option 3</option>
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<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>Hot Dog, Fries and a Soda</option>
|
||||||
<option>Burger, Shake and a Smile</option>
|
<option>Burger, Shake and a Smile</option>
|
||||||
<option>Sugar, Spice and all things nice</option>
|
<option>Sugar, Spice and all things nice</option>
|
||||||
|
|
@ -15,7 +15,7 @@
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<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>Standard option</option>
|
||||||
<option data-subtext="option subtext">Option with subtext</option>
|
<option data-subtext="option subtext">Option with subtext</option>
|
||||||
<option disabled>Disabled Option</option>
|
<option disabled>Disabled Option</option>
|
||||||
|
|
@ -23,7 +23,7 @@
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<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 1</option>
|
||||||
<option>Option 2</option>
|
<option>Option 2</option>
|
||||||
<option>Option 3</option>
|
<option>Option 3</option>
|
||||||
|
|
|
||||||
|
|
@ -1,23 +1,106 @@
|
||||||
<div class="wizard">
|
<div class="widgets">
|
||||||
<div class="wizard-navigation-container">
|
|
||||||
<div ng-repeat="t in $baWizardController.tabs" class="wizard-navigation {{$baWizardController.tabNum == $index ? 'active' : ''}}" ng-click="$baWizardController.selectTab($index)">
|
<div class="row">
|
||||||
{{t.title}}
|
<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>
|
</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">←</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">→</span></button></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -2,9 +2,7 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
angular.module('BlurAdmin.pages.form')
|
angular.module('BlurAdmin.pages.form')
|
||||||
.controller('WizardCtrl', WizardCtrl)
|
.controller('WizardCtrl', WizardCtrl);
|
||||||
.directive('baWizard', baWizard)
|
|
||||||
.directive('baWizardTab', baWizardTab);
|
|
||||||
|
|
||||||
/** @ngInject */
|
/** @ngInject */
|
||||||
function WizardCtrl($scope) {
|
function WizardCtrl($scope) {
|
||||||
|
|
@ -17,115 +15,6 @@
|
||||||
vm.arePersonalInfoPasswordsEqual = function () {
|
vm.arePersonalInfoPasswordsEqual = function () {
|
||||||
return vm.personalInfo.confirmPassword && vm.personalInfo.password == vm.personalInfo.confirmPassword;
|
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
})();
|
})();
|
||||||
|
|
|
||||||
|
|
@ -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'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
@ -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">←</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">→</span></button></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
@ -65,7 +65,7 @@
|
||||||
root: '#/form-layouts'
|
root: '#/form-layouts'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'From Wizard',
|
title: 'Form Wizard',
|
||||||
root: '#/form-wizard'
|
root: '#/form-wizard'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue