jinql
/
blur-admin
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Initial steps validatation.

pull/3/head
smartapant 2016-01-05 14:29:27 +03:00
parent 784a533647
commit 57cf5d0f89
3 changed files with 53 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/pages/form/wizard/wizard.html
View File

@ -10,7 +10,7 @@
<div class="progress progress-wizard"> <div class="progress progress-wizard">
<div class="progress-bar progress-bar-info active" role="progressbar" <div class="progress-bar progress-bar-info active" role="progressbar"
aria-valuenow="{{$baWizardController.progress}}" aria-valuemin="0" aria-valuemax="100" style="{{'width: ' + progress + '%;'}}"> aria-valuemin="0" aria-valuemax="100" style="{{'width: ' + $baWizardController.progress + '%;'}}">
</div> </div>
</div> </div>

28
src/app/pages/form/wizard/wizardPage.html
View File

@ -4,15 +4,15 @@
<div class="col-md-12"> <div class="col-md-12">
<blur-panel title="Form Wizard" class-container="with-scroll"> <blur-panel title="Form Wizard" class-container="with-scroll">
<ba-wizard> <ba-wizard>
<ba-wizard-tab title="Personal info"> <ba-wizard-tab title="Personal info" completeness="vm.personalInfoForm.$valid">
<form name="vm.personalInfoForm" novalidate> <form name="vm.personalInfoForm" novalidate>
<div class="form-group"> <div class="form-group">
<label for="exampleInputEmail1">Email address</label> <label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" required max="5"> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" ng-model="vm.personalInfo.email" required>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="exampleInputPassword1">Password</label> <label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" required> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" ng-model="vm.personalInfo.password" required>
</div> </div>
<div class="checkbox"> <div class="checkbox">
<label class="custom-checkbox"> <label class="custom-checkbox">
@ -23,19 +23,19 @@
<button type="submit" class="btn btn-danger">Submit</button> <button type="submit" class="btn btn-danger">Submit</button>
</form> </form>
</ba-wizard-tab> </ba-wizard-tab>
<ba-wizard-tab title="Product Info"> <ba-wizard-tab title="Product Info" completeness="vm.productInfoForm.$valid">
<form name="productInfoForm" novalidate> <form name="vm.productInfoForm" novalidate>
<div class="row"> <div class="row">
<div class="col-sm-6"> <div class="col-sm-6">
<div class="form-group"> <div class="form-group">
<label for="inputFirstName">First Name</label> <label for="inputFirstName">First Name</label>
<input type="text" class="form-control" id="inputFirstName" placeholder="First Name"> <input type="text" class="form-control" id="inputFirstName" placeholder="First Name" ng-model="vm.productInfoForm.fName" required>
</div> </div>
</div> </div>
<div class="col-sm-6"> <div class="col-sm-6">
<div class="form-group"> <div class="form-group">
<label for="inputLastName">Last Name</label> <label for="inputLastName">Last Name</label>
<input type="text" class="form-control" id="inputLastName" placeholder="Last Name"> <input type="text" class="form-control" id="inputLastName" placeholder="Last Name" ng-model="vm.productInfoForm.lName" required>
</div> </div>
</div> </div>
</div> </div>
@ -43,26 +43,26 @@
<div class="col-sm-6"> <div class="col-sm-6">
<div class="form-group"> <div class="form-group">
<label for="inputFirstName">Email</label> <label for="inputFirstName">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email"> <input type="email" class="form-control" id="inputEmail" placeholder="Email" ng-model="vm.productInfoForm.email" required>
</div> </div>
</div> </div>
<div class="col-sm-6"> <div class="col-sm-6">
<div class="form-group"> <div class="form-group">
<label for="inputWebsite">Website</label> <label for="inputWebsite">Website</label>
<input type="text" class="form-control" id="inputWebsite" placeholder="Website"> <input type="text" class="form-control" id="inputWebsite" placeholder="Website" ng-model="vm.productInfoForm.website" required>
</div> </div>
</div> </div>
</div> </div>
</form> </form>
<button type="submit" class="btn btn-primary">Submit</button> <button type="submit" class="btn btn-primary">Submit</button>
</ba-wizard-tab> </ba-wizard-tab>
<ba-wizard-tab title="Payment"> <ba-wizard-tab title="Payment" completeness="vm.paymentForm.$valid">
<form class="row form-inline" name="paymentForm" novalidate> <form class="row form-inline" name="vm.paymentForm" novalidate>
<div class="form-group col-sm-3 col-xs-6"> <div class="form-group col-sm-3 col-xs-6">
<input type="text" class="form-control" id="exampleInputName2" placeholder="Name"> <input type="text" class="form-control" id="exampleInputName2" placeholder="Name" ng-model="vm.paymentForm.name" required>
</div> </div>
<div class="form-group col-sm-3 col-xs-6"> <div class="form-group col-sm-3 col-xs-6">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email"> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email" ng-model="vm.paymentForm.email" required>
</div> </div>
<div class="checkbox"> <div class="checkbox">
<label class="custom-checkbox"> <label class="custom-checkbox">
@ -74,7 +74,7 @@
</form> </form>
</ba-wizard-tab> </ba-wizard-tab>
<ba-wizard-tab title="Finish"> <ba-wizard-tab title="Finish">
<form class="form-horizontal" name="finishForm" novalidate> <form class="form-horizontal" name="vm.finishForm" novalidate>
<div class="form-group"> <div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label> <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10"> <div class="col-sm-10">

46
src/app/pages/form/wizard/wizrdCtrl.js
View File

@ -9,11 +9,12 @@
/** @ngInject */ /** @ngInject */
function WizardCtrl($scope, $location, $sce) { function WizardCtrl($scope, $location, $sce) {
var vm = this; var vm = this;
setTimeout(function (evt, isValid) {
console.log(vm.personalInfoForm); vm.personalInfo = {};
$scope.formValid = isValid; vm.productInfo = {};
}, 1000); vm.paymentForm = {};
$scope.bla= 'Ctrl' vm.finishForm = {};
} }
function baWizard() { function baWizard() {
@ -30,6 +31,7 @@
vm.progress = 0; vm.progress = 0;
vm.addTab = function(tab) { vm.addTab = function(tab) {
tab.setPrev(vm.tabs[vm.tabs.length - 1]);
vm.tabs.push(tab); vm.tabs.push(tab);
vm.selectTab(0); vm.selectTab(0);
}; };
@ -37,10 +39,12 @@
$scope.$watch(angular.bind(vm, function () {return vm.tabNum;}), countProgress); $scope.$watch(angular.bind(vm, function () {return vm.tabNum;}), countProgress);
vm.selectTab = function (tabNum) { vm.selectTab = function (tabNum) {
if (vm.tabs[tabNum].isAvailiable()) {
vm.tabNum = tabNum; vm.tabNum = tabNum;
vm.tabs.forEach(function (t, tIndex) { vm.tabs.forEach(function (t, tIndex) {
tIndex == vm.tabNum ? t.select(true) : t.select(false); tIndex == vm.tabNum ? t.select(true) : t.select(false);
}); });
}
}; };
vm.isFirstTab = function () { vm.isFirstTab = function () {
@ -52,11 +56,11 @@
}; };
vm.nextTab = function () { vm.nextTab = function () {
vm.tabNum++; vm.selectTab(vm.tabNum + 1)
}; };
vm.previousTab = function () { vm.previousTab = function () {
vm.tabNum--; vm.selectTab(vm.tabNum - 1)
}; };
function countProgress() { function countProgress() {
@ -72,12 +76,23 @@
transclude: true, transclude: true,
require: '^baWizard', require: '^baWizard',
scope: { scope: {
availability: '=' completeness: '='
}, },
templateUrl: 'app/pages/form/wizard/tab.html', templateUrl: 'app/pages/form/wizard/tab.html',
link: function($scope, $element, $attrs, wizard) { link: function($scope, $element, $attrs, wizard) {
$scope.selected = true; $scope.selected = true;
var tab = {
title: $attrs.title,
select: select,
isComplete: isComplete,
isAvailiable: isAvailiable,
prevTab: undefined,
setPrev: setPrev
};
wizard.addTab(tab);
function select(isSelected) { function select(isSelected) {
if (isSelected) { if (isSelected) {
$scope.selected = true; $scope.selected = true;
@ -86,10 +101,17 @@
} }
} }
wizard.addTab({ function isComplete() {
title: $attrs.title, return $scope.completeness;
select: select }
});
function isAvailiable() {
return tab.prevTab ? tab.prevTab.isComplete() : true;
}
function setPrev(pTab) {
tab.prevTab = pTab;
}
} }
}; };
} }