jinql
/
blur-admin
mirror of https://github.com/akveo/blur-admin
1
0
Fork 0
Code Issues 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-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>

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

@ -4,15 +4,15 @@
<div class="col-md-12">
<blur-panel title="Form Wizard" class-container="with-scroll">
<ba-wizard>
<ba-wizard-tab title="Personal info">
<ba-wizard-tab title="Personal info" completeness="vm.personalInfoForm.$valid">
<form name="vm.personalInfoForm" novalidate>
<div class="form-group">
<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 class="form-group">
<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 class="checkbox">
<label class="custom-checkbox">
@ -23,19 +23,19 @@
<button type="submit" class="btn btn-danger">Submit</button>
</form>
</ba-wizard-tab>
<ba-wizard-tab title="Product Info">
<form name="productInfoForm" novalidate>
<ba-wizard-tab title="Product Info" completeness="vm.productInfoForm.$valid">
<form name="vm.productInfoForm" novalidate>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<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 class="col-sm-6">
<div class="form-group">
<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>
@ -43,26 +43,26 @@
<div class="col-sm-6">
<div class="form-group">
<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 class="col-sm-6">
<div class="form-group">
<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>
</form>
<button type="submit" class="btn btn-primary">Submit</button>
</ba-wizard-tab>
<ba-wizard-tab title="Payment">
<form class="row form-inline" name="paymentForm" novalidate>
<ba-wizard-tab title="Payment" completeness="vm.paymentForm.$valid">
<form class="row form-inline" name="vm.paymentForm" novalidate>
<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 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 class="checkbox">
<label class="custom-checkbox">
@ -74,7 +74,7 @@
</form>
</ba-wizard-tab>
<ba-wizard-tab title="Finish">
<form class="form-horizontal" name="finishForm" novalidate>
<form class="form-horizontal" name="vm.finishForm" novalidate>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">

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

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