feat: add create template component (#1185)

Fixes: #1184

src/app/templates/common-resolvers/create-template.resolver.ts

@@ -0,0 +1,30 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { TemplatesService } from '../templates.service';
+
+/**
+ * Create Template data resolver.
+ */
+@Injectable()
+export class CreateTemplateResolver implements Resolve<Object> {
+
+  /**
+   * @param {TemplatesService} templatesService Templates service.
+   */
+  constructor(private templatesService: TemplatesService) {}
+
+  /**
+   * Returns the template data.
+   * @returns {Observable<any>}
+   */
+  resolve(): Observable<any> {
+    return this.templatesService.getCreateTemplateData();
+  }
+
+}

src/app/templates/create-template/create-template.component.html

@@ -0,0 +1,152 @@
+<div class="container">
+
+  <mat-card fxLayout="column" fxLayoutGap="2%">
+
+    <form [formGroup]="templateForm">
+  
+      <mat-card-content>
+  
+        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+  
+          <mat-form-field fxFlex="48%">
+            <mat-label>Entity</mat-label>
+            <mat-select required formControlName="entity">
+              <mat-option *ngFor="let entity of createTemplateData.entities" [value]="entity.id">
+                {{ entity.name }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="templateForm.controls.entity.hasError('required')">
+              Entity is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>		
+  
+          <mat-form-field fxFlex="48%">
+            <mat-label>Type</mat-label>
+            <mat-select required formControlName="type">
+              <mat-option *ngFor="let type of createTemplateData.types" [value]="type.id">
+                {{ type.name }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="templateForm.controls.type.hasError('required')">
+              Type is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+  
+          <mat-form-field fxFlex="48%">
+            <mat-label>Name</mat-label>
+            <input matInput required formControlName="name">
+            <mat-error *ngIf="templateForm.controls.name.hasError('required')">
+              Name is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+  
+        </div>
+  
+      </mat-card-content>
+
+    </form>
+
+    <div role="toggle" fxFlex="13%">
+
+      <button mat-raised-button color="primary" (click)="showAdvanceOptions = !showAdvanceOptions">Advance Options</button>
+
+    </div>
+
+    <ng-container role="mappers" *ngIf="showAdvanceOptions">
+
+      <div *ngFor="let mapper of mappers; index as i" fxLayout="row" fxLayoutGap="2%">
+
+        <mat-form-field fxFlex="43%">
+          <mat-label>Mapper Key</mat-label>
+          <input matInput [formControl]="mapper.mapperskey">
+        </mat-form-field>
+
+        <mat-form-field fxFlex="43%">
+          <mat-label>Mapper Value</mat-label>
+          <input matInput [formControl]="mapper.mappersvalue">
+        </mat-form-field>
+
+        <button *ngIf="i === 0" class="mapper-button" fxFlex="8%" mat-raised-button color="primary" (click)="addMapper()">
+          <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
+        </button>
+        <button *ngIf="!(i === 0)" class="mapper-button" fxFlex="9%" mat-raised-button color="primary" (click)="removeMapper(i)">
+          <fa-icon icon="minus"></fa-icon>&nbsp;&nbsp;Remove
+        </button>
+
+      </div>
+
+    </ng-container>
+
+    <div role="editor">
+
+      <ckeditor #ckEditor [editor]="Editor"></ckeditor>
+
+    </div>
+
+    <div role="template-parameters">
+
+      <mat-accordion>
+
+        <mat-expansion-panel *ngIf="templateForm.controls.entity.value === 0">
+  
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              Client Parameters
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          
+          <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutAlign="center">
+            <button mat-stroked-button color="primary" class="parameter"
+              *ngFor="let label of clientParameterLabels" (click)="addText(label)">
+              {{ label }}
+            </button>
+          </div>
+  
+        </mat-expansion-panel>
+
+        <mat-expansion-panel *ngIf="templateForm.controls.entity.value === 1">
+  
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              Loan Parameters
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          
+          <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutAlign="center">
+            <button mat-stroked-button color="primary" class="parameter"
+              *ngFor="let label of loanParameterLabels" (click)="addText(label)">
+              {{ label }}
+            </button>
+          </div>
+  
+        </mat-expansion-panel>
+
+        <mat-expansion-panel *ngIf="templateForm.controls.entity.value === 1">
+  
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              Repayment Schedule Parameters
+            </mat-panel-title>
+          </mat-expansion-panel-header>
+          
+          <div fxLayout="row wrap" fxLayout.xs="column" fxLayoutAlign="center">
+            <button mat-stroked-button color="primary" class="parameter"
+              *ngFor="let label of repaymentParameterLabels" (click)="addText(label)">
+              {{ label }}
+            </button>
+          </div>
+
+        </mat-expansion-panel>
+  
+      </mat-accordion>
+
+    </div>
+
+    <mat-card-actions class="m-b-20" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+      <button mat-raised-button color="primary" (click)="submit()">Submit</button>
+    </mat-card-actions>
+  
+  </mat-card>
+
+</div>

src/app/templates/create-template/create-template.component.scss

@@ -0,0 +1,12 @@
+.container {
+
+  .mapper-button {
+    max-height: 2.25rem;
+    margin-top: 1rem;
+  }
+
+  .parameter {
+    margin: 1%;
+  }
+  
+}

src/app/templates/create-template/create-template.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateTemplateComponent } from './create-template.component';
+
+describe('CreateTemplateComponent', () => {
+  let component: CreateTemplateComponent;
+  let fixture: ComponentFixture<CreateTemplateComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CreateTemplateComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CreateTemplateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/templates/create-template/create-template.component.ts

@@ -0,0 +1,173 @@
+/** Angular Imports */
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
+import { Router, ActivatedRoute } from '@angular/router';
+
+/** CKEditor5 Imports */
+import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
+
+/** Custom Imports */
+import { clientParameterLabels, loanParameterLabels, repaymentParameterLabels } from '../template-parameter-labels';
+
+/** Custom Services */
+import { TemplatesService } from '../templates.service';
+
+/**
+ * Create Template Component.
+ */
+@Component({
+  selector: 'mifosx-create-template',
+  templateUrl: './create-template.component.html',
+  styleUrls: ['./create-template.component.scss']
+})
+export class CreateTemplateComponent implements OnInit {
+
+  /** CKEditor5 */
+  public Editor = ClassicEditor;
+  /** CKEditor5 Template Reference */
+  @ViewChild('ckEditor') ckEditor: any;
+
+  /** Template form. */
+  templateForm: FormGroup;
+  /** Edit Template Data. */
+  createTemplateData: any;
+  /** Template Mappers */
+  mappers: any[] = [];
+  /** Toggles Visibility of Advance Options */
+  showAdvanceOptions = false;
+
+  /** Client Parameter Labels */
+  clientParameterLabels: string[] = clientParameterLabels;
+  /** Loan Parameter Labels */
+  loanParameterLabels: string[] = loanParameterLabels;
+  /** Repayment Parameter Labels */
+  repaymentParameterLabels: string[] = repaymentParameterLabels;
+
+  /**
+   * Retrieves the template data from `resolve`.
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   * @param {TemplateService} templateService Templates Service
+   */
+  constructor(private formBuilder: FormBuilder,
+              private route: ActivatedRoute,
+              private router: Router,
+              private templateService: TemplatesService) {
+    this.route.data.subscribe((data: { createTemplateData: any }) => {
+      this.createTemplateData = data.createTemplateData;
+    });
+  }
+
+  ngOnInit() {
+    this.createTemplateForm();
+    this.buildDependencies();
+  }
+
+  /**
+   * Creates the template form.
+   */
+  createTemplateForm() {
+    this.templateForm = this.formBuilder.group({
+      'entity': ['', Validators.required],
+      'type': ['', Validators.required],
+      'name': ['', Validators.required]
+    });
+  }
+
+  /**
+   * Subscribe to value changes of entity to set default mapper.
+   */
+  buildDependencies() {
+    const tenantIdentifier = 'default'; // update once global settings are setup.
+    this.templateForm.get('entity').valueChanges.subscribe((value: any) => {
+      if (value === 0) { // client
+        this.mappers.splice(0, 1, {
+          mappersorder: 0,
+          mapperskey: new FormControl('client'),
+          mappersvalue: new FormControl('clients/{{clientId}}?tenantIdentifier=' + tenantIdentifier)
+        });
+      } else { // loan
+        this.mappers.splice(0, 1, {
+          mappersorder: 0,
+          mapperskey: new FormControl('loan'),
+          mappersvalue: new FormControl('loans/{{loanId}}?associations=all&tenantIdentifier=' + tenantIdentifier )
+        });
+      }
+      this.setEditorContent('');
+    });
+    this.templateForm.get('entity').patchValue(0);
+  }
+
+  /**
+   * Adds a mapper.
+   */
+  addMapper() {
+    this.mappers.push({
+      mappersorder: this.mappers.length,
+      mapperskey: new FormControl(''),
+      mappersvalue: new FormControl('')
+    });
+  }
+
+  /**
+   * Removes a mapper
+   * @param {any} index Mapper Index
+   */
+  removeMapper(index: any) {
+    this.mappers.splice(index, 1);
+  }
+
+  /**
+   * Adds text to CKEditor at cursor position.
+   * @param {string} label Template parameter label.
+   */
+  addText(label: string) {
+    if (this.ckEditor && this.ckEditor.editorInstance) {
+      this.ckEditor.editorInstance.model.change((writer: any) => {
+        const insertPosition = this.ckEditor.editorInstance.model.document.selection.getFirstPosition();
+        writer.insertText(label, insertPosition);
+    } );
+    }
+  }
+
+  /**
+   * Gets the contents of CKEditor.
+   */
+  getEditorContent() {
+    if (this.ckEditor && this.ckEditor.editorInstance) {
+      return this.ckEditor.editorInstance.getData();
+    }
+    return '';
+  }
+
+  /**
+   * Sets the contents of CKEditor.
+   * @param {string} content Editor Content
+   */
+  setEditorContent(content: string) {
+    if (this.ckEditor && this.ckEditor.editorInstance) {
+      return this.ckEditor.editorInstance.setData(content);
+    }
+    return '';
+  }
+
+  /**
+   * Creates a template.
+   */
+  submit() {
+    const template: any = {
+      ...this.templateForm.value,
+      mappers: this.mappers.map((mapper: any) => ({
+        mappersorder: mapper.mappersorder,
+        mapperskey: mapper.mapperskey.value,
+        mappersvalue: mapper.mappersvalue.value
+      })),
+      text: this.getEditorContent()
+    };
+    this.templateService.createTemplate(template).subscribe((response: any) => {
+      this.router.navigate(['../', response.resourceId], { relativeTo: this.route });
+    });
+  }
+
+}

src/app/templates/edit-template/edit-template.component.ts

@@ -1,8 +1,7 @@
 /** Angular Imports */
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
+import { FormGroup, FormBuilder, FormControl } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
-import { DatePipe } from '@angular/common';
 
 /** CKEditor5 Imports */
 import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
@@ -49,7 +48,7 @@ export class EditTemplateComponent implements OnInit {
    * @param {FormBuilder} formBuilder Form Builder.
    * @param {ActivatedRoute} route Activated Route.
    * @param {Router} router Router for navigation.
-   * @param {DatePipe} datePipe Date Pipe to format date.
+   * @param {TemplateService} templateService Templates Service
    */
   constructor(private formBuilder: FormBuilder,
               private route: ActivatedRoute,
@@ -158,6 +157,9 @@ export class EditTemplateComponent implements OnInit {
     return '';
   }
 
+  /**
+   * Edits an existing template.
+   */
   submit() {
     const template: any = {
       ...this.templateForm.value,

src/app/templates/templates-routing.module.ts

@@ -12,11 +12,13 @@ import { extract } from '../core/i18n/i18n.service';
 import { TemplatesComponent } from './templates.component';
 import { ViewTemplateComponent } from './view-template/view-template.component';
 import { EditTemplateComponent } from './edit-template/edit-template.component';
+import { CreateTemplateComponent } from './create-template/create-template.component';
 
 /** Custom Resolvers */
 import { TemplatesResolver } from './common-resolvers/templates.resolver';
 import { TemplateResolver } from './common-resolvers/template.resolver';
 import { EditTemplateResolver } from './common-resolvers/edit-template.resolver';
+import { CreateTemplateResolver } from './common-resolvers/create-template.resolver';
 
 /** Templates Routes */
 const routes: Routes = [
@@ -32,6 +34,14 @@ const routes: Routes = [
             templates: TemplatesResolver
           }
         },
+        {
+          path: 'create',
+          data: { title: extract('Create Template'), breadcrumb: 'Create Template' },
+          component: CreateTemplateComponent,
+          resolve: {
+            createTemplateData: CreateTemplateResolver
+          }
+        },
         {
           path: ':id',
           data: { title: extract('View Template'), routeParamBreadcrumb: 'id' },
@@ -69,7 +79,8 @@ const routes: Routes = [
   providers: [
     TemplatesResolver,
     TemplateResolver,
-    EditTemplateResolver
+    EditTemplateResolver,
+    CreateTemplateResolver
   ]
 })
 export class TemplatesRoutingModule { }

src/app/templates/templates.component.html

@@ -1,5 +1,5 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
-  <button mat-raised-button color="primary">
+  <button mat-raised-button color="primary" [routerLink]="['create']">
     <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
     Create Template
   </button>

src/app/templates/templates.module.ts

@@ -10,6 +10,7 @@ import { TemplatesRoutingModule } from './templates-routing.module';
 import { TemplatesComponent } from './templates.component';
 import { ViewTemplateComponent } from './view-template/view-template.component';
 import { EditTemplateComponent } from './edit-template/edit-template.component';
+import { CreateTemplateComponent } from './create-template/create-template.component';
 
 /**
  * Templates Module
@@ -26,6 +27,7 @@ import { EditTemplateComponent } from './edit-template/edit-template.component';
     TemplatesComponent,
     ViewTemplateComponent,
     EditTemplateComponent,
+    CreateTemplateComponent,
   ]
 })
 export class TemplatesModule { }

src/app/templates/templates.service.ts

@@ -33,6 +33,13 @@ export class TemplatesService {
     return this.http.get(`/templates/${templateId}`);
   }
 
+  /**
+   * @returns {Observable<any>}.
+   */
+  getCreateTemplateData(): Observable<any> {
+    return this.http.get('/templates/template');
+  }
+
   /**
    * @param templateId Template Id.
    * @returns {Observable<any>}.
@@ -41,6 +48,15 @@ export class TemplatesService {
     return this.http.get(`/templates/${templateId}/template`);
   }
 
+  /**
+   * @param templateData Template to be created.
+   * @param templateId Template Id.
+   * @returns {Observable<any>}.
+   */
+  createTemplate(templateData: any): Observable<any>  {
+    return this.http.post(`/templates`, templateData);
+  }
+
   /**
    * @param templateData Templete Data to be edited.
    * @param templateId Template Id.