ws-form-builder
Version:
Ionic 2 Form Builder
314 lines • 20.9 kB
JavaScript
"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = y[op[0] & 2 ? "return" : op[0] ? "throw" : "next"]) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [0, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var form_builder_1 = require("../../providers/form-builder/form-builder");
var ionic_angular_1 = require("ionic-angular");
var WsFormBuilderWrapperComponent = (function () {
function WsFormBuilderWrapperComponent(formBuilder) {
this.formBuilder = formBuilder;
this.formBuilderCallback = new core_1.EventEmitter();
this.formBuilderCurrentStepChangeCallback = new core_1.EventEmitter();
this.currentStep = 0;
this.totalSteps = 0;
this.progressBarConfiguration = {};
this.disablePreviousButton = true;
this.disableNextButton = false;
this.showPreviousButton = true;
this.showProgressBar = false;
this.nextButtonText = 'NEXT';
this.previousButtonText = 'PREVIOUS';
this.showActiveTab = false;
this.debugMode = false;
this.disableAnimation = false;
this.errorStatus = false;
this.wrongField = '';
this.defaultError = 'Please ensure you provide all required information';
this.hideQuestions = false;
this.buttonLayout = 'block';
this.nextButtonColor = 'primary';
this.prevButtonColor = 'primary';
}
WsFormBuilderWrapperComponent.prototype.ngOnInit = function () {
if (typeof this.formConfig !== 'undefined') {
this.fancyLog('Form config found', 'info');
//count number of steps
if (typeof this.formConfig.debugMode !== 'undefined') {
this.debugMode = this.formConfig.debugMode;
}
if (typeof this.formConfig.disableAnimation !== 'undefined') {
this.disableAnimation = this.formConfig.disableAnimation;
if (this.disableAnimation) {
this.showActiveTab = true;
}
}
if (typeof this.formConfig.hideQuestions !== 'undefined') {
this.hideQuestions = this.formConfig.hideQuestions;
}
if (typeof this.formConfig['buttons'] !== 'undefined') {
if (typeof this.formConfig['buttons']['layout'] !== 'undefined') {
this.buttonLayout = this.formConfig['buttons']['layout'];
}
if (typeof this.formConfig['buttons']['nextColor'] !== 'undefined') {
this.nextButtonColor = this.formConfig['buttons']['nextColor'];
}
if (typeof this.formConfig['buttons']['prevColor'] !== 'undefined') {
this.prevButtonColor = this.formConfig['buttons']['prevColor'];
}
}
this.totalSteps = Object.keys(this.formConfig.steps).length;
this.showProgressBar = this.formConfig.showProgressBar;
this.showPreviousButton = this.formConfig.showPreviousButton;
if (typeof this.formConfig.nextButtonText !== 'undefined') {
if (this.formConfig.nextButtonText.length !== 0) {
this.nextButtonText = this.formConfig.nextButtonText;
}
}
if (typeof this.formConfig.previousButtonText !== 'undefined') {
if (this.formConfig.previousButtonText.length !== 0) {
this.previousButtonText = this.formConfig.previousButtonText;
}
}
for (var i = 0; i < this.formConfig['steps'].length; i++) {
var questions = this.formConfig['steps'][i]['questions'];
for (var q = 0; q < questions.length; q++) {
this.formConfig['steps'][i]['questions'][q]['hideQuestion'] = this.hideQuestions;
}
}
var _self_1 = this;
setTimeout(function () {
_self_1.showActiveTab = true;
}, 250);
}
};
WsFormBuilderWrapperComponent.prototype.validateStep = function () {
var status = false;
if (typeof this.formConfig.steps[this.currentStep]['skipable'] !== 'undefined') {
if (this.formConfig.steps[this.currentStep]['skipable']) {
status = true;
this.fancyLog('Skipping step', 'info');
}
else {
//run through questions and check through valid fields
this.wrongField = '';
var loopCheck = true;
for (var i = 0; i < this.formConfig['steps'][this.currentStep]['questions'].length; i++) {
var q = this.formConfig['steps'][this.currentStep]['questions'][i];
//console.log(q); //use i instead of 0
if (q.valid !== true && loopCheck === true) {
this.fancyLog('error', 'Invalid Field');
if (typeof q.erorrMessage !== 'undefined') {
this.wrongField = q.erorrMessage;
}
else {
this.wrongField = this.defaultError;
}
loopCheck = false;
}
}
if (loopCheck) {
status = true;
}
}
}
return status;
};
WsFormBuilderWrapperComponent.prototype.continueToNext = function () {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
this.errorStatus = false;
this.goToNextStep();
return [2 /*return*/];
});
});
};
WsFormBuilderWrapperComponent.prototype.goToNextStep = function () {
return __awaiter(this, void 0, void 0, function () {
var _self_2, dataToReturn;
return __generator(this, function (_a) {
if (this.validateStep()) {
if (!((this.currentStep + 1) === this.totalSteps)) {
if (this.disableAnimation) {
this.showActiveTab = true;
}
else {
this.showActiveTab = false;
}
}
if (this.currentStep <= this.totalSteps) {
this.currentStep++;
this.disablePreviousButton = false;
_self_2 = this;
//prevent fade out on a single step that doesnt validate.
this.formBuilderCurrentStepChangeCallback.emit(this.currentStep);
if (!((this.currentStep + 1) === this.totalSteps)) {
setTimeout(function () {
_self_2.showActiveTab = true;
}, 250);
}
if (this.currentStep === this.totalSteps) {
//forces last step to show
if (typeof this.formConfig.showLastStep !== 'undefined') {
if (this.formConfig.showLastStep) {
this.currentStep--;
}
}
if (typeof this.formConfig.disableNextOnComplete !== 'undefined') {
if (this.formConfig.disableNextOnComplete) {
this.disableNextButton = true;
}
}
else {
this.disableNextButton = true;
}
this.disablePreviousButton = true;
dataToReturn = this.extractData(this.formConfig);
this.formBuilderCallback.emit(dataToReturn);
}
}
}
else {
this.errorStatus = true;
//alert('Step Invalid');
}
return [2 /*return*/];
});
});
};
WsFormBuilderWrapperComponent.prototype.extractData = function (data) {
var dataToReturn = {};
if (typeof data.returnFormat !== 'undefined') {
if (data.returnFormat === 'clean') {
for (var i = 0; i < data['steps'].length; i++) {
var questions = data['steps'][i]['questions'];
for (var q = 0; q < questions.length; q++) {
var question = data['steps'][i]['questions'][q];
if (question.type === 'checkbox' || question.type === 'checkbox-grid') {
dataToReturn[question.field] = question.options;
}
else if (question.type === 'punchcard') {
dataToReturn[question.field] = question.data;
}
else {
dataToReturn[question.field] = question.value;
}
}
}
}
}
else {
dataToReturn = data;
}
return dataToReturn;
};
WsFormBuilderWrapperComponent.prototype.goToPreviousStep = function () {
return __awaiter(this, void 0, void 0, function () {
var _self;
return __generator(this, function (_a) {
if (this.disableAnimation) {
this.showActiveTab = true;
}
else {
this.showActiveTab = false;
}
if (this.currentStep >= 1) {
this.currentStep--;
}
if (this.currentStep == 0) {
this.disablePreviousButton = true;
}
this.formBuilderCurrentStepChangeCallback.emit(this.currentStep);
_self = this;
setTimeout(function () {
_self.showActiveTab = true;
}, 250);
return [2 /*return*/];
});
});
};
WsFormBuilderWrapperComponent.prototype.updateField = function (question, stepIndex, questionIndex) {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
// console.log(question);
this.formConfig.steps[stepIndex].questions[questionIndex] = question;
//this.formBuilderCallback.emit(question,stepIndex,questionIndex);
return [2 /*return*/];
});
});
};
WsFormBuilderWrapperComponent.prototype.fancyLog = function (message, style) {
if (style === void 0) { style = 'default'; }
//header
//standard
//error
//info
if (this.debugMode) {
if (style === 'header') {
console.log('%c' + message, 'background: #222; color: #bada55');
}
else if (style === 'error') {
console.log('%c' + message, 'background: #e74c3c; color: #fff');
}
else if (style === 'info') {
console.log('%c' + message, 'background: #3498db; color: #fff');
}
else {
console.log('%c' + message, 'background: #222; color: #bada55');
}
}
};
WsFormBuilderWrapperComponent.decorators = [
{ type: core_1.Component, args: [{
selector: 'ws-form-builder-wrapper',
template: "\n <div class=\"ws-form-builder-wrapper\">\n\n \t<div *ngIf=\"errorStatus\">\n \t\t<div class=\"error-message\">{{wrongField}}</div>\n \t</div>\n\n \t<div *ngIf=\"showProgressBar\">\n \t\t<ws-progress-bar [progressBarTotal]=\"totalSteps\" [progressBarCurrent]=\"currentStep\"></ws-progress-bar>\n \t</div>\n\n \t<ion-list>\n \t\t<div *ngFor=\"let step of formConfig.steps; let s = index;\">\n \t\t\t<span *ngIf=\"s === currentStep\">\n \t\t\t\t<div class=\"step-container\" [ngClass]=\"{'step-container-show': showActiveTab === true}\">\n \t\t\t\t{{step.stepTitle}}\n \t\t\t\t<div *ngFor=\"let question of step.questions; let q = index;\">\n \t\t\t\t\t<span *ngIf=\"question.type === 'text'\">\n \t\t\t\t\t\t<ws-text-input [question]='question' (answerGiven)=\"updateField($event,s,q)\"></ws-text-input>\n \t\t\t\t\t</span>\n\n \t\t\t\t\t<span *ngIf=\"question.type === 'textarea'\">\n \t\t\t\t\t\t<ws-text-area [question]='question' (answerGiven)=\"updateField($event,s,q)\"></ws-text-area>\n \t\t\t\t\t</span>\n\n \t\t\t\t\t<span *ngIf=\"question.type === 'email'\">\n \t\t\t\t\t\t<ws-email-input [question]='question' (answerGiven)=\"updateField($event,s,q)\"></ws-email-input>\n \t\t\t\t\t</span>\n\n \t\t\t\t\t<span *ngIf=\"question.type === 'password'\">\n \t\t\t\t\t\t<ws-password-input [question]='question' (answerGiven)=\"updateField($event,s,q)\"></ws-password-input>\n \t\t\t\t\t</span>\n\n \t\t\t\t\t<span *ngIf=\"question.type === 'phone'\">\n \t\t\t\t\t\t<ws-phone-input [question]='question' (answerGiven)=\"updateField($event,s,q)\"></ws-phone-input>\n \t\t\t\t\t</span>\n\n \t\t\t\t\t<span *ngIf=\"question.type === 'number'\">\n \t\t\t\t\t\t<ws-number-input [question]='question' (answerGiven)=\"updateField($event,s,q)\"></ws-number-input>\n \t\t\t\t\t</span>\n\n \t\t\t\t\t<span *ngIf=\"question.type === 'radio'\">\n \t\t\t\t\t\t<ws-radio-group [question]='question' (answerGiven)=\"updateField($event,s,q)\"></ws-radio-group>\n \t\t\t\t\t</span>\n\n \t\t\t\t\t<span *ngIf=\"question.type === 'checkbox'\">\n \t\t\t\t\t\t<ws-checkbox-group [question]='question' (answerGiven)=\"updateField($event,s,q)\"></ws-checkbox-group>\n \t\t\t\t\t</span>\n\n \t\t\t\t\t<span *ngIf=\"question.type === 'checkbox-grid'\">\n \t\t\t\t\t\t<ws-checkbox-grid [question]='question' (answerGiven)=\"updateField($event,s,q)\"></ws-checkbox-grid>\n \t\t\t\t\t</span>\n\t\t\t\t\t\n \t\t\t\t\t<span *ngIf=\"question.type === 'select'\">\n \t\t\t\t\t\t<ws-select-dropdown [question]='question' (answerGiven)=\"updateField($event,s,q)\"></ws-select-dropdown>\n \t\t\t\t\t</span>\n\n \t\t\t\t\t<span *ngIf=\"question.type === 'date'\">\n \t\t\t\t\t\t<ws-date-picker [question]='question' (answerGiven)=\"updateField($event,s,q)\"></ws-date-picker>\n \t\t\t\t\t</span>\n\n\n \t\t\t\t\t<span *ngIf=\"question.type === 'profilepic'\">\n \t\t\t\t\t\t<ws-profile-picture [question]='question' (answerGiven)=\"updateField($event,s,q)\"></ws-profile-picture>\n \t\t\t\t\t</span>\n\n \t\t\t\t\t<span *ngIf=\"question.type === 'pincode'\">\n \t\t\t\t\t\t<ws-pincode [question]='question' (answerGiven)=\"updateField($event,s,q)\"></ws-pincode>\n \t\t\t\t\t</span>\n\n \t\t\t\t\t<span *ngIf=\"question.type === 'punchcard'\">\n\n \t\t\t\t\t\t<ws-punchcard [question]='question' (answerGiven)=\"updateField($event,s,q)\"></ws-punchcard>\n \t\t\t\t\t</span>\n\n \t\t\t\t\t<span *ngIf=\"question.type === 'toggle'\">\n \t\t\t\t\t\t<ws-toggle [question]='question' (answerGiven)=\"updateField($event,s,q)\"></ws-toggle>\n \t\t\t\t\t</span>\n\n \t\t\t\t\t<span *ngIf=\"question.type === 'slider'\">\n \t\t\t\t\t\t<ws-single-range-slider [question]='question' (answerGiven)=\"updateField($event,s,q)\"></ws-single-range-slider>\n \t\t\t\t\t</span>\n\t\t\t\t\t\n\n \t\t\t\t</div>\n \t\t\t</div>\n \t\t\t</span>\n\n \t\t</div>\n\n \t</ion-list>\n\n\n\n \t<div class=\"buttons\" *ngIf=\"buttonLayout === 'grid'\">\n \t\t<div class=\"buttons__button-wrapper\" *ngIf=\"showPreviousButton\">\n \t\t\t<button class=\"buttons__previous-button\" ion-button (tap)=\"goToPreviousStep()\" [disabled]=\"disablePreviousButton\" round [color]=\"prevButtonColor\">\n \t\t\t\t{{previousButtonText}}\n \t\t\t</button>\n \t\t</div>\n \t\t<div class=\"buttons__button-wrapper\">\n \t\t\t<button class=\"buttons__next-button\" ion-button (tap)=\"continueToNext()\" round [color]=\"nextButtonColor\" [disabled]=\"disableNextButton\">\n \t\t\t\t{{nextButtonText}}\n \t\t\t</button>\n \t\t</div>\n \t</div>\n\n\n\n\n\n\n \t<div class=\"block-buttons\" *ngIf=\"buttonLayout === 'block'\">\n \t\t<button ion-button (tap)=\"continueToNext()\" [attr.block]=\"nextButtonStyle\" round [color]=\"nextButtonColor\" [disabled]=\"disableNextButton\">{{nextButtonText}}</button>\n\t\t\n \t\t<span *ngIf=\"showPreviousButton\">\n \t\t\t<button ion-button (tap)=\"goToPreviousStep()\" [attr.block]=\"prevButtonStyle\" [disabled]=\"disablePreviousButton\" round [color]=\"prevButtonColor\">{{previousButtonText}}</button>\n \t\t</span>\n \t</div>\n\t\n\n\n \t<span *ngIf=\"debugMode\">\n \t\t<pre style=\"max-height:150px; border:1px solid grey; padding:15px;\">\n \t\t{{formConfig | json}}\n \t\t</pre>\n \t</span>\n </div>\n ",
styles: ["\n .ws-form-builder-wrapper .step-container{width:100%;display:block;opacity:0;-moz-transition:all 250ms;-o-transition:all 250ms;-webkit-transition:all 250ms;transition:all 250ms;-webkit-transform:translate(0, -10px);-moz-transform:translate(0, -10px);-ms-transform:translate(0, -10px);-o-transform:translate(0, -10px);transform:translate(0, -10px)}.ws-form-builder-wrapper .step-container.step-container-show{opacity:1;-webkit-transform:translate(0, 0);-moz-transform:translate(0, 0);-ms-transform:translate(0, 0);-o-transform:translate(0, 0);transform:translate(0, 0)}\n "]
},] },
];
/** @nocollapse */
WsFormBuilderWrapperComponent.ctorParameters = function () { return [
{ type: form_builder_1.FormBuilderProvider, },
]; };
WsFormBuilderWrapperComponent.propDecorators = {
"content": [{ type: core_1.ViewChild, args: [ionic_angular_1.Content,] },],
"formConfig": [{ type: core_1.Input, args: ['formConfig',] },],
"formBuilderCallback": [{ type: core_1.Output },],
"formBuilderCurrentStepChangeCallback": [{ type: core_1.Output },],
};
return WsFormBuilderWrapperComponent;
}());
exports.WsFormBuilderWrapperComponent = WsFormBuilderWrapperComponent;
//# sourceMappingURL=ws-form-builder-wrapper.js.map