mdds-angular-composite
Version:
Augular Composite that compose multiple componennt to be a single page
311 lines (305 loc) • 11.2 kB
JavaScript
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
*/
class CompositeDirective {
/**
* @param {?} viewContainerRef
*/
constructor(viewContainerRef) {
this.viewContainerRef = viewContainerRef;
}
}
CompositeDirective.decorators = [
{ type: Directive, args: [{
selector: '[composite-directive]',
},] }
];
/** @nocollapse */
CompositeDirective.ctorParameters = () => [
{ type: ViewContainerRef }
];
class CompositeSubmitDirective {
/**
* @param {?} viewContainerRef
*/
constructor(viewContainerRef) {
this.viewContainerRef = viewContainerRef;
}
}
CompositeSubmitDirective.decorators = [
{ type: Directive, args: [{
selector: '[composite-submit-directive]',
},] }
];
/** @nocollapse */
CompositeSubmitDirective.ctorParameters = () => [
{ type: ViewContainerRef }
];
class CompositeComponent {
/**
* @param {?} componentFactoryResolver
* @param {?} router
*/
constructor(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 {?}
*/
ngOnInit() {
if (!this.steps) {
console.warn("No steps defined for CompositeComponent.");
return;
}
this.totalSteps = this.steps.length;
}
/**
* @return {?}
*/
ngAfterViewInit() {
if (!this.compositeDirectives) {
console.warn("No composite directive for CompositeComponent.");
return;
}
setTimeout((/**
* @return {?}
*/
() => {
this.loadAllSteps();
}), 10);
this.componentEvents.emit({
//telling parent we are ready to load steps
stepIndex: undefined,
message: {
type: 'ngAfterViewInit'
},
});
}
/**
* @param {?} index
* @param {?} stepConfig
* @return {?}
*/
reloadStep(index, stepConfig) {
/** @type {?} */
const directive = this.compositeDirectives.toArray()[index];
const { stepTitle, stepComponent, mandatory, preSelectedId, searchObj, disableActionButtions } = stepConfig;
if (!stepComponent)
return; //stop handling this step.
//stop handling this step.
/** @type {?} */
let viewContainerRef = directive.viewContainerRef;
viewContainerRef.clear();
/** @type {?} */
let componentFactory = this.componentFactoryResolver.resolveComponentFactory(stepComponent);
/** @type {?} */
let componentRef = viewContainerRef.createComponent(componentFactory);
// create and insert in one call
/** @type {?} */
let componentInstance = componentRef.instance;
this.stepCompIns[index] = componentInstance;
componentInstance.inputData = {
stepTitle,
preSelectedId,
mandatory,
};
componentInstance.searchObj = searchObj;
componentInstance.disableActionButtions = disableActionButtions;
if (index === 0) {
componentInstance.setFocus();
}
componentInstance.eventEmitter.subscribe((/**
* @param {?} message
* @return {?}
*/
(message) => {
if (message) {
/** @type {?} */
const msg = {
stepIndex: index,
message,
};
this.componentEvents.emit(msg);
}
}));
}
/**
* @return {?}
*/
loadAllSteps() {
for (let 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 {?}
*/
allActionsReady() {
/** @type {?} */
let ready = true;
for (let [index, step] of this.stepConfigs.entries()) {
this.errorMessages[index] = false; // no error
if (step.mandatory) {
/** @type {?} */
const instance = this.stepCompIns[index];
if (!instance) {
return false;
}
if (instance.actionType === 'selection') {
/** @type {?} */
let 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;
}
}
}
}
return ready;
}
/**
* @return {?}
*/
onSubmit() {
this.submitting = true;
if (!(this.allActionsReady())) {
return;
}
/** @type {?} */
let viewContainerRef = this.compositeSubmitDirective.viewContainerRef;
viewContainerRef.clear();
if (!this.submitCompRef) {
/** @type {?} */
let componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.submit.compoment);
this.submitCompRef = viewContainerRef.createComponent(componentFactory); // create and insert in one call
}
/** @type {?} */
let componentInstance = this.submitCompRef.instance;
/** @type {?} */
const initData = {};
for (let [index, step] of this.stepConfigs.entries()) {
/** @type {?} */
const instance = this.stepCompIns[index];
/** @type {?} */
let value;
if (instance.actionType === 'selection') {
value = instance.getSelectedItems();
if (value.length === 0) {
value = undefined;
}
else if (!componentInstance.arrayFields.some((/**
* @param {?} x
* @return {?}
*/
x => 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;
}
componentInstance.id = undefined;
componentInstance.embeddedView = true;
componentInstance.initData = initData;
componentInstance.ngOnInit();
componentInstance.onSubmit();
componentInstance.done.subscribe((/**
* @param {?} value
* @return {?}
*/
(value) => {
if (value) {
this.router.navigateByUrl(this.submit.succeedUrl);
}
}));
}
/**
* @return {?}
*/
onCancel() {
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 = () => [
{ 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,] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class CompositeModule {
}
CompositeModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
],
declarations: [
CompositeComponent,
CompositeDirective,
CompositeSubmitDirective
],
exports: [
CompositeComponent
],
providers: [],
},] }
];
/**
* @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