mdds-angular-composite
Version:
Augular Composite that compose multiple componennt to be a single page
360 lines (354 loc) • 13.6 kB
JavaScript
import { __values, __read } from 'tslib';
import { Router } from '@angular/router';
import { Component, Directive, Input, Output, ViewContainerRef, ViewChildren, ViewChild, ComponentFactoryResolver, EventEmitter, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var CompositeDirective = /** @class */ (function () {
function CompositeDirective(viewContainerRef) {
this.viewContainerRef = viewContainerRef;
}
CompositeDirective.decorators = [
{ type: Directive, args: [{
selector: '[composite-directive]',
},] }
];
/** @nocollapse */
CompositeDirective.ctorParameters = function () { return [
{ type: ViewContainerRef }
]; };
return CompositeDirective;
}());
var CompositeSubmitDirective = /** @class */ (function () {
function CompositeSubmitDirective(viewContainerRef) {
this.viewContainerRef = viewContainerRef;
}
CompositeSubmitDirective.decorators = [
{ type: Directive, args: [{
selector: '[composite-submit-directive]',
},] }
];
/** @nocollapse */
CompositeSubmitDirective.ctorParameters = function () { return [
{ type: ViewContainerRef }
]; };
return CompositeSubmitDirective;
}());
var CompositeComponent = /** @class */ (function () {
function CompositeComponent(componentFactoryResolver, router) {
this.componentFactoryResolver = componentFactoryResolver;
this.router = router;
this.totalSteps = 0;
this.stepCompRef = [];
this.stepCompIns = [];
this.stepCompEmitter = [];
this.errorMessages = [];
this.submitting = false;
this.componentEvents = new EventEmitter();
}
/**
* @return {?}
*/
CompositeComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
if (!this.steps) {
console.warn("No steps defined for CompositeComponent.");
return;
}
this.totalSteps = this.steps.length;
};
/**
* @return {?}
*/
CompositeComponent.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
var _this = this;
if (!this.compositeDirectives) {
console.warn("No composite directive for CompositeComponent.");
return;
}
setTimeout((/**
* @return {?}
*/
function () {
_this.loadAllSteps();
}), 10);
this.componentEvents.emit({
//telling parent we are ready to load steps
stepIndex: undefined,
message: {
type: 'ngAfterViewInit'
},
});
};
/**
* @param {?} index
* @param {?} stepConfig
* @return {?}
*/
CompositeComponent.prototype.reloadStep = /**
* @param {?} index
* @param {?} stepConfig
* @return {?}
*/
function (index, stepConfig) {
var _this = this;
/** @type {?} */
var directive = this.compositeDirectives.toArray()[index];
var stepTitle = stepConfig.stepTitle, stepComponent = stepConfig.stepComponent, mandatory = stepConfig.mandatory, preSelectedId = stepConfig.preSelectedId, searchObj = stepConfig.searchObj, disableActionButtions = stepConfig.disableActionButtions;
if (!stepComponent)
return; //stop handling this step.
//stop handling this step.
/** @type {?} */
var viewContainerRef = directive.viewContainerRef;
viewContainerRef.clear();
/** @type {?} */
var componentFactory = this.componentFactoryResolver.resolveComponentFactory(stepComponent);
/** @type {?} */
var componentRef = viewContainerRef.createComponent(componentFactory);
// create and insert in one call
/** @type {?} */
var componentInstance = componentRef.instance;
this.stepCompIns[index] = componentInstance;
componentInstance.inputData = {
stepTitle: stepTitle,
preSelectedId: preSelectedId,
mandatory: mandatory,
};
componentInstance.searchObj = searchObj;
componentInstance.disableActionButtions = disableActionButtions;
if (index === 0) {
componentInstance.setFocus();
}
componentInstance.eventEmitter.subscribe((/**
* @param {?} message
* @return {?}
*/
function (message) {
if (message) {
/** @type {?} */
var msg = {
stepIndex: index,
message: message,
};
_this.componentEvents.emit(msg);
}
}));
};
/**
* @return {?}
*/
CompositeComponent.prototype.loadAllSteps = /**
* @return {?}
*/
function () {
for (var index = 0; index < this.compositeDirectives.length; index++) {
if (this.stepCompIns[index])
continue; //already loaded
if (!this.stepConfigs[index])
continue; //no configuration
this.reloadStep(index, this.stepConfigs[index]);
}
};
/**
* @return {?}
*/
CompositeComponent.prototype.allActionsReady = /**
* @return {?}
*/
function () {
var e_1, _a;
/** @type {?} */
var ready = true;
try {
for (var _b = __values(this.stepConfigs.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
var _d = __read(_c.value, 2), index = _d[0], step = _d[1];
this.errorMessages[index] = false; // no error
if (step.mandatory) {
/** @type {?} */
var instance = this.stepCompIns[index];
if (!instance) {
return false;
}
if (instance.actionType === 'selection') {
/** @type {?} */
var value = instance.getSelectedItems();
if (value.length === 0) {
this.errorMessages[index] = true;
ready = false;
return false;
}
}
else if (instance.actionType === 'term') {
if (!instance.isTermChecked()) {
this.errorMessages[index] = true;
return false;
}
}
}
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_1) throw e_1.error; }
}
return ready;
};
/**
* @return {?}
*/
CompositeComponent.prototype.onSubmit = /**
* @return {?}
*/
function () {
var _this = this;
var e_2, _a;
this.submitting = true;
if (!(this.allActionsReady())) {
return;
}
/** @type {?} */
var viewContainerRef = this.compositeSubmitDirective.viewContainerRef;
viewContainerRef.clear();
if (!this.submitCompRef) {
/** @type {?} */
var componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.submit.compoment);
this.submitCompRef = viewContainerRef.createComponent(componentFactory); // create and insert in one call
}
/** @type {?} */
var componentInstance = this.submitCompRef.instance;
/** @type {?} */
var initData = {};
var _loop_1 = function (index, step) {
/** @type {?} */
var instance = this_1.stepCompIns[index];
/** @type {?} */
var value = void 0;
if (instance.actionType === 'selection') {
value = instance.getSelectedItems();
if (value.length === 0) {
value = undefined;
}
else if (!componentInstance.arrayFields.some((/**
* @param {?} x
* @return {?}
*/
function (x) { return x[0] === step.submitFieldName; }))) { //check if the target fields is an array fields. in ['fieldName', 'Field type'] format
value = value[0]; //only get one object
}
}
else if (instance.actionType === 'term') {
value = instance.isTermChecked();
}
initData[step.submitFieldName] = value;
};
var this_1 = this;
try {
for (var _b = __values(this.stepConfigs.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
var _d = __read(_c.value, 2), index = _d[0], step = _d[1];
_loop_1(index, step);
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_2) throw e_2.error; }
}
componentInstance.id = undefined;
componentInstance.embeddedView = true;
componentInstance.initData = initData;
componentInstance.ngOnInit();
componentInstance.onSubmit();
componentInstance.done.subscribe((/**
* @param {?} value
* @return {?}
*/
function (value) {
if (value) {
_this.router.navigateByUrl(_this.submit.succeedUrl);
}
}));
};
/**
* @return {?}
*/
CompositeComponent.prototype.onCancel = /**
* @return {?}
*/
function () {
this.router.navigateByUrl(this.submit.cancelUrl);
};
CompositeComponent.decorators = [
{ type: Component, args: [{
selector: 'app-composite',
template: "<div>\n <h3 class=\"mt-3\">Class Enrollment:</h3>\n\n <div *ngFor=\"let step of steps; index as idx;\">\n <h4 class=\"mt-3\">{{idx + 1}}. {{step.stepName}}</h4>\n <ng-template composite-directive></ng-template>\n <div class=\"error-message\" *ngIf=\"errorMessages[idx]\">{{step.errorMessage}}</div>\n </div>\n\n <div class=\"action-buttons-center mt-3\">\n <button class=\"btn btn-success\" \n (click)=\"onSubmit()\">Submit</button>\n <button class=\"btn btn-outline-success\" \n type=\"button\" (click)=\"onCancel()\">Cancel</button>\n \n <div *ngIf=\"submitting && !allActionsReady()\" class=\"error-message\">Please check and fix all errors before submitting.</div>\n </div>\n\n <div style=\"display: none;\">\n <ng-template composite-submit-directive></ng-template>\n </div>\n</div>",
styles: [".action-buttons-center{width:100%;float:right;text-align:center;margin-bottom:1.25rem}.action-buttons-center .btn{display:inline-block;margin-left:2.5rem}.error-message{color:#dc3545;margin-top:1rem;font-style:italic}"]
}] }
];
/** @nocollapse */
CompositeComponent.ctorParameters = function () { return [
{ type: ComponentFactoryResolver },
{ type: Router }
]; };
CompositeComponent.propDecorators = {
steps: [{ type: Input }],
stepConfigs: [{ type: Input }],
title: [{ type: Input }],
submit: [{ type: Input }],
componentEvents: [{ type: Output }],
compositeDirectives: [{ type: ViewChildren, args: [CompositeDirective,] }],
compositeSubmitDirective: [{ type: ViewChild, args: [CompositeSubmitDirective,] }]
};
return CompositeComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var CompositeModule = /** @class */ (function () {
function CompositeModule() {
}
CompositeModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
],
declarations: [
CompositeComponent,
CompositeDirective,
CompositeSubmitDirective
],
exports: [
CompositeComponent
],
providers: [],
},] }
];
return CompositeModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { CompositeComponent, CompositeModule, CompositeDirective as ɵa, CompositeSubmitDirective as ɵb };
//# sourceMappingURL=mdds-angular-composite.js.map