fix: Improve "create and edit template" functionality (#2339)
The button label got corrected, the form can't be submitted anymore without all required fields filled out. Two Typescript modules got merged, because they were almost identical. The routing module got updated to reflect the new component. FIXES: WEB-65
This commit is contained in:
+17
-7
@@ -6,7 +6,7 @@
|
|||||||
<mat-form-field fxFlex="48%">
|
<mat-form-field fxFlex="48%">
|
||||||
<mat-label>{{ 'labels.inputs.Entity' | translate }}</mat-label>
|
<mat-label>{{ 'labels.inputs.Entity' | translate }}</mat-label>
|
||||||
<mat-select required formControlName="entity">
|
<mat-select required formControlName="entity">
|
||||||
<mat-option *ngFor="let entity of createTemplateData.entities" [value]="entity.id">
|
<mat-option *ngFor="let entity of templateData.entities" [value]="entity.id">
|
||||||
{{ entity.name }}
|
{{ entity.name }}
|
||||||
</mat-option>
|
</mat-option>
|
||||||
</mat-select>
|
</mat-select>
|
||||||
@@ -19,7 +19,7 @@
|
|||||||
<mat-form-field fxFlex="48%">
|
<mat-form-field fxFlex="48%">
|
||||||
<mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
|
<mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
|
||||||
<mat-select required formControlName="type">
|
<mat-select required formControlName="type">
|
||||||
<mat-option *ngFor="let type of createTemplateData.types" [value]="type.id">
|
<mat-option *ngFor="let type of templateData.types" [value]="type.id">
|
||||||
{{ type.name }}
|
{{ type.name }}
|
||||||
</mat-option>
|
</mat-option>
|
||||||
</mat-select>
|
</mat-select>
|
||||||
@@ -43,18 +43,18 @@
|
|||||||
|
|
||||||
<div role="toggle" fxFlex="13%">
|
<div role="toggle" fxFlex="13%">
|
||||||
<button mat-raised-button color="primary" (click)="showAdvanceOptions = !showAdvanceOptions">
|
<button mat-raised-button color="primary" (click)="showAdvanceOptions = !showAdvanceOptions">
|
||||||
{{ 'labels.buttons.Advance Options' | translate }}
|
{{ 'labels.buttons.Advanced Options' | translate }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ng-container role="mappers" *ngIf="showAdvanceOptions">
|
<ng-container role="mappers" *ngIf="showAdvanceOptions">
|
||||||
<div *ngFor="let mapper of mappers; index as i" fxLayout="row" fxLayoutGap="2%">
|
<div *ngFor="let mapper of mappers; index as i" fxLayout="row" fxLayoutGap="2%">
|
||||||
<mat-form-field fxFlex="43%">
|
<mat-form-field fxFlex="48%">
|
||||||
<mat-label>{{ 'labels.inputs.Mapper Key' | translate }}</mat-label>
|
<mat-label>{{ 'labels.inputs.Mapper Key' | translate }}</mat-label>
|
||||||
<input matInput [formControl]="mapper.mapperskey" />
|
<input matInput [formControl]="mapper.mapperskey" />
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
|
|
||||||
<mat-form-field fxFlex="43%">
|
<mat-form-field fxFlex="38%">
|
||||||
<mat-label>{{ 'labels.inputs.Mapper Value' | translate }}</mat-label>
|
<mat-label>{{ 'labels.inputs.Mapper Value' | translate }}</mat-label>
|
||||||
<input matInput [formControl]="mapper.mappersvalue" />
|
<input matInput [formControl]="mapper.mappersvalue" />
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
@@ -83,7 +83,15 @@
|
|||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
<div role="editor">
|
<div role="editor">
|
||||||
<ckeditor #ckEditor [editor]="Editor"></ckeditor>
|
<label for="ckeditor" class="required-label required-label-ckeditor">
|
||||||
|
{{ 'labels.inputs.Text' | translate }} <span class="required-asterisk">*</span>
|
||||||
|
</label>
|
||||||
|
<ckeditor
|
||||||
|
#ckEditor
|
||||||
|
[editor]="Editor"
|
||||||
|
(change)="onEditorChange($event)"
|
||||||
|
[data]="templateData.template?.text"
|
||||||
|
></ckeditor>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div role="template-parameters">
|
<div role="template-parameters">
|
||||||
@@ -152,7 +160,9 @@
|
|||||||
|
|
||||||
<mat-card-actions class="m-b-20" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
|
<mat-card-actions class="m-b-20" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
|
||||||
<button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
|
<button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
|
||||||
<button mat-raised-button color="primary" (click)="submit()">{{ 'labels.buttons.Submit' | translate }}</button>
|
<button mat-raised-button color="primary" (click)="submit()" [disabled]="!templateForm.valid">
|
||||||
|
{{ 'labels.buttons.Submit' | translate }}
|
||||||
|
</button>
|
||||||
</mat-card-actions>
|
</mat-card-actions>
|
||||||
</mat-card>
|
</mat-card>
|
||||||
</div>
|
</div>
|
||||||
+82
-34
@@ -16,11 +16,11 @@ import { TemplatesService } from '../templates.service';
|
|||||||
* Create Template Component.
|
* Create Template Component.
|
||||||
*/
|
*/
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'mifosx-create-template',
|
selector: 'mifosx-create-edit-template',
|
||||||
templateUrl: './create-template.component.html',
|
templateUrl: './create-edit-template.component.html',
|
||||||
styleUrls: ['./create-template.component.scss']
|
styleUrls: ['./create-edit-template.component.scss']
|
||||||
})
|
})
|
||||||
export class CreateTemplateComponent implements OnInit {
|
export class CreateEditComponent implements OnInit {
|
||||||
/** CKEditor5 */
|
/** CKEditor5 */
|
||||||
public Editor = ClassicEditor;
|
public Editor = ClassicEditor;
|
||||||
/** CKEditor5 Template Reference */
|
/** CKEditor5 Template Reference */
|
||||||
@@ -28,12 +28,14 @@ export class CreateTemplateComponent implements OnInit {
|
|||||||
|
|
||||||
/** Template form. */
|
/** Template form. */
|
||||||
templateForm: UntypedFormGroup;
|
templateForm: UntypedFormGroup;
|
||||||
/** Create Template Data. */
|
/** Create or Edit Template Data. */
|
||||||
createTemplateData: any;
|
templateData: any;
|
||||||
/** Template Mappers */
|
/** Template Mappers */
|
||||||
mappers: any[] = [];
|
mappers: any[] = [];
|
||||||
/** Toggles Visibility of Advance Options */
|
/** Toggles Visibility of Advanced Options */
|
||||||
showAdvanceOptions = false;
|
showAdvanceOptions = false;
|
||||||
|
/** mode */
|
||||||
|
mode: 'create' | 'edit';
|
||||||
|
|
||||||
/** Client Parameter Labels */
|
/** Client Parameter Labels */
|
||||||
clientParameterLabels: string[] = clientParameterLabels;
|
clientParameterLabels: string[] = clientParameterLabels;
|
||||||
@@ -55,8 +57,16 @@ export class CreateTemplateComponent implements OnInit {
|
|||||||
private router: Router,
|
private router: Router,
|
||||||
private templateService: TemplatesService
|
private templateService: TemplatesService
|
||||||
) {
|
) {
|
||||||
this.route.data.subscribe((data: { createTemplateData: any }) => {
|
this.route.data.subscribe((data: { templateData: any; mode: 'create' | 'edit' }) => {
|
||||||
this.createTemplateData = data.createTemplateData;
|
this.templateData = data.templateData;
|
||||||
|
this.mode = data.mode;
|
||||||
|
if (this.mode === 'edit') {
|
||||||
|
this.mappers = this.templateData.template.mappers.map((mapper: any) => ({
|
||||||
|
mappersorder: mapper.mapperorder,
|
||||||
|
mapperskey: new UntypedFormControl(mapper.mapperkey),
|
||||||
|
mappersvalue: new UntypedFormControl(mapper.mappervalue)
|
||||||
|
}));
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -69,20 +79,45 @@ export class CreateTemplateComponent implements OnInit {
|
|||||||
* Creates the template form.
|
* Creates the template form.
|
||||||
*/
|
*/
|
||||||
createTemplateForm() {
|
createTemplateForm() {
|
||||||
this.templateForm = this.formBuilder.group({
|
if (this.mode === 'create') {
|
||||||
entity: [
|
this.templateForm = this.formBuilder.group({
|
||||||
'',
|
entity: [
|
||||||
Validators.required
|
'',
|
||||||
],
|
Validators.required
|
||||||
type: [
|
],
|
||||||
'',
|
type: [
|
||||||
Validators.required
|
'',
|
||||||
],
|
Validators.required
|
||||||
name: [
|
],
|
||||||
'',
|
name: [
|
||||||
Validators.required
|
'',
|
||||||
]
|
Validators.required
|
||||||
});
|
],
|
||||||
|
text: [
|
||||||
|
'',
|
||||||
|
Validators.required
|
||||||
|
]
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.templateForm = this.formBuilder.group({
|
||||||
|
entity: [
|
||||||
|
this.templateData.entities.find((entity: any) => entity.name === this.templateData.template.entity).id,
|
||||||
|
Validators.required
|
||||||
|
],
|
||||||
|
type: [
|
||||||
|
this.templateData.types.find((type: any) => type.name === this.templateData.template.type).id,
|
||||||
|
Validators.required
|
||||||
|
],
|
||||||
|
name: [
|
||||||
|
this.templateData.template.name,
|
||||||
|
Validators.required
|
||||||
|
],
|
||||||
|
text: [
|
||||||
|
this.templateData.template.text,
|
||||||
|
Validators.required
|
||||||
|
]
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -108,7 +143,9 @@ export class CreateTemplateComponent implements OnInit {
|
|||||||
}
|
}
|
||||||
this.setEditorContent('');
|
this.setEditorContent('');
|
||||||
});
|
});
|
||||||
this.templateForm.get('entity').patchValue(0);
|
if (this.mode === 'create') {
|
||||||
|
this.templateForm.get('entity').patchValue(0);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -164,8 +201,13 @@ export class CreateTemplateComponent implements OnInit {
|
|||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onEditorChange(event: any) {
|
||||||
|
const editorContent = event.editor.getData();
|
||||||
|
this.templateForm.get('text').setValue(editorContent);
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Creates a template.
|
* Submits a template.
|
||||||
*/
|
*/
|
||||||
submit() {
|
submit() {
|
||||||
const template: any = {
|
const template: any = {
|
||||||
@@ -177,14 +219,20 @@ export class CreateTemplateComponent implements OnInit {
|
|||||||
})),
|
})),
|
||||||
text: this.getEditorContent()
|
text: this.getEditorContent()
|
||||||
};
|
};
|
||||||
this.templateService.createTemplate(template).subscribe((response: any) => {
|
if (this.mode === 'create') {
|
||||||
this.router.navigate(
|
this.templateService.createTemplate(template).subscribe((response: any) => {
|
||||||
[
|
this.router.navigate(
|
||||||
'../',
|
[
|
||||||
response.resourceId
|
'../',
|
||||||
],
|
response.resourceId
|
||||||
{ relativeTo: this.route }
|
],
|
||||||
);
|
{ relativeTo: this.route }
|
||||||
});
|
);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.templateService.updateTemplate(template, this.templateData.template.id).subscribe(() => {
|
||||||
|
this.router.navigate(['../'], { relativeTo: this.route });
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
.container {
|
|
||||||
.mapper-button {
|
|
||||||
max-height: 2.25rem;
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.parameter {
|
|
||||||
margin: 1%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,24 +0,0 @@
|
|||||||
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();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,146 +0,0 @@
|
|||||||
<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>{{ 'labels.inputs.Entity' | translate }}</mat-label>
|
|
||||||
<mat-select formControlName="entity">
|
|
||||||
<mat-option *ngFor="let entity of editTemplateData.entities" [value]="entity.id">
|
|
||||||
{{ entity.name }}
|
|
||||||
</mat-option>
|
|
||||||
</mat-select>
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
<mat-form-field fxFlex="48%">
|
|
||||||
<mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
|
|
||||||
<mat-select formControlName="type">
|
|
||||||
<mat-option *ngFor="let type of editTemplateData.types" [value]="type.id">
|
|
||||||
{{ type.name }}
|
|
||||||
</mat-option>
|
|
||||||
</mat-select>
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
<mat-form-field fxFlex="48%">
|
|
||||||
<mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
|
|
||||||
<input matInput formControlName="name" />
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
|
||||||
</mat-card-content>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div role="toggle" fxFlex="13%">
|
|
||||||
<button mat-raised-button color="primary" (click)="showAdvanceOptions = !showAdvanceOptions">
|
|
||||||
{{ 'labels.buttons.Advance Options' | translate }}
|
|
||||||
</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>{{ 'labels.inputs.Mapper Key' | translate }}</mat-label>
|
|
||||||
<input matInput [formControl]="mapper.mapperskey" />
|
|
||||||
</mat-form-field>
|
|
||||||
|
|
||||||
<mat-form-field fxFlex="43%">
|
|
||||||
<mat-label>{{ 'labels.inputs.Mapper Value' | translate }}</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" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
*ngIf="!(i === 0)"
|
|
||||||
class="mapper-button"
|
|
||||||
fxFlex="9%"
|
|
||||||
mat-raised-button
|
|
||||||
color="primary"
|
|
||||||
(click)="removeMapper(i)"
|
|
||||||
>
|
|
||||||
<fa-icon icon="minus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Remove' | translate }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<div role="editor">
|
|
||||||
<ckeditor #ckEditor [editor]="Editor" [data]="editTemplateData.template.text"></ckeditor>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div role="template-parameters">
|
|
||||||
<mat-accordion>
|
|
||||||
<mat-expansion-panel *ngIf="templateForm.controls.entity.value === 0">
|
|
||||||
<mat-expansion-panel-header>
|
|
||||||
<mat-panel-title>
|
|
||||||
{{ 'labels.inputs.Client Parameters' | translate }}
|
|
||||||
</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>
|
|
||||||
{{ 'labels.inputs.Loan Parameters' | translate }}
|
|
||||||
</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>
|
|
||||||
{{ 'labels.inputs.Repayment Schedule Parameters' | translate }}
|
|
||||||
</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]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
|
|
||||||
<button mat-raised-button color="primary" (click)="submit()">{{ 'labels.buttons.Submit' | translate }}</button>
|
|
||||||
</mat-card-actions>
|
|
||||||
</mat-card>
|
|
||||||
</div>
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
.container {
|
|
||||||
.mapper-button {
|
|
||||||
max-height: 2.25rem;
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.parameter {
|
|
||||||
margin: 1%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,24 +0,0 @@
|
|||||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
|
||||||
|
|
||||||
import { EditTemplateComponent } from './edit-template.component';
|
|
||||||
|
|
||||||
describe('EditTemplateComponent', () => {
|
|
||||||
let component: EditTemplateComponent;
|
|
||||||
let fixture: ComponentFixture<EditTemplateComponent>;
|
|
||||||
|
|
||||||
beforeEach(async(() => {
|
|
||||||
TestBed.configureTestingModule({
|
|
||||||
declarations: [EditTemplateComponent]
|
|
||||||
}).compileComponents();
|
|
||||||
}));
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
fixture = TestBed.createComponent(EditTemplateComponent);
|
|
||||||
component = fixture.componentInstance;
|
|
||||||
fixture.detectChanges();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should create', () => {
|
|
||||||
expect(component).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,181 +0,0 @@
|
|||||||
/** Angular Imports */
|
|
||||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
|
||||||
import { UntypedFormGroup, UntypedFormBuilder, UntypedFormControl } 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';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Edit Template Component.
|
|
||||||
*/
|
|
||||||
@Component({
|
|
||||||
selector: 'mifosx-edit-template',
|
|
||||||
templateUrl: './edit-template.component.html',
|
|
||||||
styleUrls: ['./edit-template.component.scss']
|
|
||||||
})
|
|
||||||
export class EditTemplateComponent implements OnInit {
|
|
||||||
/** CKEditor5 */
|
|
||||||
public Editor = ClassicEditor;
|
|
||||||
/** CKEditor5 Template Reference */
|
|
||||||
@ViewChild('ckEditor', { static: true }) ckEditor: any;
|
|
||||||
|
|
||||||
/** Template form. */
|
|
||||||
templateForm: UntypedFormGroup;
|
|
||||||
/** Edit Template Data. */
|
|
||||||
editTemplateData: 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: UntypedFormBuilder,
|
|
||||||
private route: ActivatedRoute,
|
|
||||||
private router: Router,
|
|
||||||
private templateService: TemplatesService
|
|
||||||
) {
|
|
||||||
this.route.data.subscribe((data: { editTemplateData: any }) => {
|
|
||||||
this.editTemplateData = data.editTemplateData;
|
|
||||||
this.mappers = this.editTemplateData.template.mappers.map((mapper: any) => ({
|
|
||||||
mappersorder: mapper.mapperorder,
|
|
||||||
mapperskey: new UntypedFormControl(mapper.mapperkey),
|
|
||||||
mappersvalue: new UntypedFormControl(mapper.mappervalue)
|
|
||||||
}));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
ngOnInit() {
|
|
||||||
this.createTemplateForm();
|
|
||||||
this.buildDependencies();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Creates the template form.
|
|
||||||
*/
|
|
||||||
createTemplateForm() {
|
|
||||||
this.templateForm = this.formBuilder.group({
|
|
||||||
entity: [
|
|
||||||
this.editTemplateData.entities.find((entity: any) => entity.name === this.editTemplateData.template.entity).id
|
|
||||||
],
|
|
||||||
type: [this.editTemplateData.types.find((type: any) => type.name === this.editTemplateData.template.type).id],
|
|
||||||
name: [this.editTemplateData.template.name]
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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 UntypedFormControl('client'),
|
|
||||||
mappersvalue: new UntypedFormControl('clients/{{clientId}}?tenantIdentifier=' + tenantIdentifier)
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
// loan
|
|
||||||
this.mappers.splice(0, 1, {
|
|
||||||
mappersorder: 0,
|
|
||||||
mapperskey: new UntypedFormControl('loan'),
|
|
||||||
mappersvalue: new UntypedFormControl('loans/{{loanId}}?associations=all&tenantIdentifier=' + tenantIdentifier)
|
|
||||||
});
|
|
||||||
}
|
|
||||||
this.setEditorContent('');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Adds a mapper.
|
|
||||||
*/
|
|
||||||
addMapper() {
|
|
||||||
this.mappers.push({
|
|
||||||
mappersorder: this.mappers.length,
|
|
||||||
mapperskey: new UntypedFormControl(''),
|
|
||||||
mappersvalue: new UntypedFormControl('')
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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 '';
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Edits an existing 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.updateTemplate(template, this.editTemplateData.template.id).subscribe(() => {
|
|
||||||
this.router.navigate(['../'], { relativeTo: this.route });
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -8,8 +8,7 @@ import { Route } from '../core/route/route.service';
|
|||||||
/** Custom Components */
|
/** Custom Components */
|
||||||
import { TemplatesComponent } from './templates.component';
|
import { TemplatesComponent } from './templates.component';
|
||||||
import { ViewTemplateComponent } from './view-template/view-template.component';
|
import { ViewTemplateComponent } from './view-template/view-template.component';
|
||||||
import { EditTemplateComponent } from './edit-template/edit-template.component';
|
import { CreateEditComponent } from './create-edit-template/create-edit-template.component';
|
||||||
import { CreateTemplateComponent } from './create-template/create-template.component';
|
|
||||||
|
|
||||||
/** Custom Resolvers */
|
/** Custom Resolvers */
|
||||||
import { TemplatesResolver } from './common-resolvers/templates.resolver';
|
import { TemplatesResolver } from './common-resolvers/templates.resolver';
|
||||||
@@ -33,11 +32,9 @@ const routes: Routes = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'create',
|
path: 'create',
|
||||||
data: { title: 'Create Template', breadcrumb: 'Create Template' },
|
component: CreateEditComponent,
|
||||||
component: CreateTemplateComponent,
|
data: { mode: 'create', breadcrumb: 'Create Template' },
|
||||||
resolve: {
|
resolve: { templateData: CreateTemplateResolver }
|
||||||
createTemplateData: CreateTemplateResolver
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: ':id',
|
path: ':id',
|
||||||
@@ -52,11 +49,9 @@ const routes: Routes = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'edit',
|
path: 'edit',
|
||||||
component: EditTemplateComponent,
|
component: CreateEditComponent,
|
||||||
data: { title: 'Edit Template', breadcrumb: 'Edit', routeParamBreadcrumb: false },
|
data: { mode: 'edit', breadcrumb: 'Edit', routeParamBreadcrumb: false },
|
||||||
resolve: {
|
resolve: { templateData: EditTemplateResolver }
|
||||||
editTemplateData: EditTemplateResolver
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -10,8 +10,7 @@ import { TemplatesRoutingModule } from './templates-routing.module';
|
|||||||
/** Custom Components */
|
/** Custom Components */
|
||||||
import { TemplatesComponent } from './templates.component';
|
import { TemplatesComponent } from './templates.component';
|
||||||
import { ViewTemplateComponent } from './view-template/view-template.component';
|
import { ViewTemplateComponent } from './view-template/view-template.component';
|
||||||
import { EditTemplateComponent } from './edit-template/edit-template.component';
|
import { CreateEditComponent } from './create-edit-template/create-edit-template.component';
|
||||||
import { CreateTemplateComponent } from './create-template/create-template.component';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Templates Module
|
* Templates Module
|
||||||
@@ -28,8 +27,7 @@ import { CreateTemplateComponent } from './create-template/create-template.compo
|
|||||||
declarations: [
|
declarations: [
|
||||||
TemplatesComponent,
|
TemplatesComponent,
|
||||||
ViewTemplateComponent,
|
ViewTemplateComponent,
|
||||||
EditTemplateComponent,
|
CreateEditComponent
|
||||||
CreateTemplateComponent
|
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
export class TemplatesModule {}
|
export class TemplatesModule {}
|
||||||
|
|||||||
@@ -315,7 +315,7 @@
|
|||||||
"Add Slab": "Přidejte desku",
|
"Add Slab": "Přidejte desku",
|
||||||
"Add/Edit": "Přidat/Upravit",
|
"Add/Edit": "Přidat/Upravit",
|
||||||
"Adjustment": "Nastavení",
|
"Adjustment": "Nastavení",
|
||||||
"Advance Options": "Pokročilé možnosti",
|
"Advanced Options": "Pokročilé možnosti",
|
||||||
"Allocate Cash": "Přidělte hotovost",
|
"Allocate Cash": "Přidělte hotovost",
|
||||||
"Applications": "Aplikace",
|
"Applications": "Aplikace",
|
||||||
"Approve": "Schvalovat",
|
"Approve": "Schvalovat",
|
||||||
|
|||||||
@@ -315,7 +315,7 @@
|
|||||||
"Add Slab": "Platte hinzufügen",
|
"Add Slab": "Platte hinzufügen",
|
||||||
"Add/Edit": "Hinzufügen/Bearbeiten",
|
"Add/Edit": "Hinzufügen/Bearbeiten",
|
||||||
"Adjustment": "Einstellung",
|
"Adjustment": "Einstellung",
|
||||||
"Advance Options": "Erweiterte Optionen",
|
"Advanced Options": "Erweiterte Optionen",
|
||||||
"Allocate Cash": "Bargeld zuweisen",
|
"Allocate Cash": "Bargeld zuweisen",
|
||||||
"Applications": "Anwendungen",
|
"Applications": "Anwendungen",
|
||||||
"Approve": "Genehmigen",
|
"Approve": "Genehmigen",
|
||||||
|
|||||||
@@ -316,7 +316,7 @@
|
|||||||
"Add Slab": "Add Slab",
|
"Add Slab": "Add Slab",
|
||||||
"Add/Edit": "Add/Edit",
|
"Add/Edit": "Add/Edit",
|
||||||
"Adjustment": "Adjustment",
|
"Adjustment": "Adjustment",
|
||||||
"Advance Options": "Advance Options",
|
"Advanced Options": "Advanced Options",
|
||||||
"Allocate Cash": "Allocate Cash",
|
"Allocate Cash": "Allocate Cash",
|
||||||
"Applications": "Applications",
|
"Applications": "Applications",
|
||||||
"Approve": "Approve",
|
"Approve": "Approve",
|
||||||
|
|||||||
@@ -315,7 +315,7 @@
|
|||||||
"Add Slab": "Agregar Rango de Montos",
|
"Add Slab": "Agregar Rango de Montos",
|
||||||
"Add/Edit": "Agregar/Editar",
|
"Add/Edit": "Agregar/Editar",
|
||||||
"Adjustment": "Ajustamiento",
|
"Adjustment": "Ajustamiento",
|
||||||
"Advance Options": "Opciones Avanzadas",
|
"Advanced Options": "Opciones Avanzadas",
|
||||||
"Allocate Cash": "Asignar Efectivo",
|
"Allocate Cash": "Asignar Efectivo",
|
||||||
"Applications": "Solicitudes",
|
"Applications": "Solicitudes",
|
||||||
"Approve": "Aprobar",
|
"Approve": "Aprobar",
|
||||||
|
|||||||
@@ -315,7 +315,7 @@
|
|||||||
"Add Slab": "Agregar Rango de Montos",
|
"Add Slab": "Agregar Rango de Montos",
|
||||||
"Add/Edit": "Agregar/Editar",
|
"Add/Edit": "Agregar/Editar",
|
||||||
"Adjustment": "Ajustamiento",
|
"Adjustment": "Ajustamiento",
|
||||||
"Advance Options": "Opciones Avanzadas",
|
"Advanced Options": "Opciones Avanzadas",
|
||||||
"Allocate Cash": "Asignar Efectivo",
|
"Allocate Cash": "Asignar Efectivo",
|
||||||
"Applications": "Solicitudes",
|
"Applications": "Solicitudes",
|
||||||
"Approve": "Aprobar",
|
"Approve": "Aprobar",
|
||||||
|
|||||||
@@ -315,7 +315,7 @@
|
|||||||
"Add Slab": "Ajouter une dalle",
|
"Add Slab": "Ajouter une dalle",
|
||||||
"Add/Edit": "Ajouter/Modifier",
|
"Add/Edit": "Ajouter/Modifier",
|
||||||
"Adjustment": "Ajustement",
|
"Adjustment": "Ajustement",
|
||||||
"Advance Options": "Options avancées",
|
"Advanced Options": "Options avancées",
|
||||||
"Allocate Cash": "Allouer de l'argent",
|
"Allocate Cash": "Allouer de l'argent",
|
||||||
"Applications": "Applications",
|
"Applications": "Applications",
|
||||||
"Apply Changes": "Appliquer les modifications",
|
"Apply Changes": "Appliquer les modifications",
|
||||||
|
|||||||
@@ -315,7 +315,7 @@
|
|||||||
"Add Slab": "Aggiungi lastra",
|
"Add Slab": "Aggiungi lastra",
|
||||||
"Add/Edit": "Aggiungi/Modifica",
|
"Add/Edit": "Aggiungi/Modifica",
|
||||||
"Adjustment": "Regolazione",
|
"Adjustment": "Regolazione",
|
||||||
"Advance Options": "Opzioni avanzate",
|
"Advanced Options": "Opzioni avanzate",
|
||||||
"Allocate Cash": "Assegnare contanti",
|
"Allocate Cash": "Assegnare contanti",
|
||||||
"Applications": "Applicazioni",
|
"Applications": "Applicazioni",
|
||||||
"Apply Changes": "Applica i cambiamenti",
|
"Apply Changes": "Applica i cambiamenti",
|
||||||
|
|||||||
@@ -315,7 +315,7 @@
|
|||||||
"Add Slab": "슬래브 추가",
|
"Add Slab": "슬래브 추가",
|
||||||
"Add/Edit": "추가/수정",
|
"Add/Edit": "추가/수정",
|
||||||
"Adjustment": "조정",
|
"Adjustment": "조정",
|
||||||
"Advance Options": "고급 옵션",
|
"Advanced Options": "고급 옵션",
|
||||||
"Allocate Cash": "현금 할당",
|
"Allocate Cash": "현금 할당",
|
||||||
"Applications": "응용",
|
"Applications": "응용",
|
||||||
"Apply Changes": "변경 승인",
|
"Apply Changes": "변경 승인",
|
||||||
|
|||||||
@@ -315,7 +315,7 @@
|
|||||||
"Add Slab": "Pridėti plokštę",
|
"Add Slab": "Pridėti plokštę",
|
||||||
"Add/Edit": "Pridėti / redaguoti",
|
"Add/Edit": "Pridėti / redaguoti",
|
||||||
"Adjustment": "Koregavimas",
|
"Adjustment": "Koregavimas",
|
||||||
"Advance Options": "Išankstinės parinktys",
|
"Advanced Options": "Išankstinės parinktys",
|
||||||
"Allocate Cash": "Paskirstykite grynuosius pinigus",
|
"Allocate Cash": "Paskirstykite grynuosius pinigus",
|
||||||
"Applications": "Programos",
|
"Applications": "Programos",
|
||||||
"Apply Changes": "Taikyti pakeitimus",
|
"Apply Changes": "Taikyti pakeitimus",
|
||||||
|
|||||||
@@ -315,7 +315,7 @@
|
|||||||
"Add Slab": "Pievienot plāksni",
|
"Add Slab": "Pievienot plāksni",
|
||||||
"Add/Edit": "Pievienot/rediģēt",
|
"Add/Edit": "Pievienot/rediģēt",
|
||||||
"Adjustment": "Pielāgošana",
|
"Adjustment": "Pielāgošana",
|
||||||
"Advance Options": "Papildu opcijas",
|
"Advanced Options": "Papildu opcijas",
|
||||||
"Allocate Cash": "Piešķirt skaidru naudu",
|
"Allocate Cash": "Piešķirt skaidru naudu",
|
||||||
"Applications": "Lietojumprogrammas",
|
"Applications": "Lietojumprogrammas",
|
||||||
"Apply Changes": "Lietot izmaiņas",
|
"Apply Changes": "Lietot izmaiņas",
|
||||||
|
|||||||
@@ -315,7 +315,7 @@
|
|||||||
"Add Slab": "स्लैब थप्नुहोस्",
|
"Add Slab": "स्लैब थप्नुहोस्",
|
||||||
"Add/Edit": "थप्नुहोस्/सम्पादन गर्नुहोस्",
|
"Add/Edit": "थप्नुहोस्/सम्पादन गर्नुहोस्",
|
||||||
"Adjustment": "समायोजन",
|
"Adjustment": "समायोजन",
|
||||||
"Advance Options": "अग्रिम विकल्प",
|
"Advanced Options": "अग्रिम विकल्प",
|
||||||
"Allocate Cash": "नगद आवंटित गर्नुहोस्",
|
"Allocate Cash": "नगद आवंटित गर्नुहोस्",
|
||||||
"Applications": "अनुप्रयोगहरू",
|
"Applications": "अनुप्रयोगहरू",
|
||||||
"Apply Changes": "परिवर्तनहरू लागू गर्नुहोस्",
|
"Apply Changes": "परिवर्तनहरू लागू गर्नुहोस्",
|
||||||
|
|||||||
@@ -315,7 +315,7 @@
|
|||||||
"Add Slab": "Adicionar laje",
|
"Add Slab": "Adicionar laje",
|
||||||
"Add/Edit": "Adicionar/Editar",
|
"Add/Edit": "Adicionar/Editar",
|
||||||
"Adjustment": "Ajustamento",
|
"Adjustment": "Ajustamento",
|
||||||
"Advance Options": "Opções avançadas",
|
"Advanced Options": "Opções avançadas",
|
||||||
"Allocate Cash": "Alocar dinheiro",
|
"Allocate Cash": "Alocar dinheiro",
|
||||||
"Applications": "Formulários",
|
"Applications": "Formulários",
|
||||||
"Apply Changes": "Aplicar mudanças",
|
"Apply Changes": "Aplicar mudanças",
|
||||||
|
|||||||
@@ -315,7 +315,7 @@
|
|||||||
"Add Slab": "Ongeza Slab",
|
"Add Slab": "Ongeza Slab",
|
||||||
"Add/Edit": "Ongeza/Hariri",
|
"Add/Edit": "Ongeza/Hariri",
|
||||||
"Adjustment": "Marekebisho",
|
"Adjustment": "Marekebisho",
|
||||||
"Advance Options": "Chaguzi za Mapema",
|
"Advanced Options": "Chaguzi za Mapema",
|
||||||
"Allocate Cash": "Tenga Pesa",
|
"Allocate Cash": "Tenga Pesa",
|
||||||
"Applications": "Maombi",
|
"Applications": "Maombi",
|
||||||
"Apply Changes": "Tekeleza Mabadiliko",
|
"Apply Changes": "Tekeleza Mabadiliko",
|
||||||
|
|||||||
Reference in New Issue
Block a user