CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: Improve "create and edit template" functionality (#2339)

Browse Source 
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:
Felix van Hove
2025-03-23 10:00:29 -06:00
committed by GitHub
parent c4cc3954bd
commit 186ec29748
25 changed files with 121 additions and 465 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/templates/create-template/create-template.component.html → src/app/templates/create-edit-template/create-edit-template.component.html
+17 -7
View File
@@ -6,7 +6,7 @@
<mat-form-field fxFlex="48%">
<mat-label>{{ 'labels.inputs.Entity' | translate }}</mat-label>
<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 }}
</mat-option>
</mat-select>
@@ -19,7 +19,7 @@
<mat-form-field fxFlex="48%">
<mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
<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 }}
</mat-option>
</mat-select>
@@ -43,18 +43,18 @@
<div role="toggle" fxFlex="13%">
<button mat-raised-button color="primary" (click)="showAdvanceOptions = !showAdvanceOptions">
{{ 'labels.buttons.Advance Options' | translate }}
{{ 'labels.buttons.Advanced 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-form-field fxFlex="48%">
<mat-label>{{ 'labels.inputs.Mapper Key' | translate }}</mat-label>
<input matInput [formControl]="mapper.mapperskey" />
</mat-form-field>
<mat-form-field fxFlex="43%">
<mat-form-field fxFlex="38%">
<mat-label>{{ 'labels.inputs.Mapper Value' | translate }}</mat-label>
<input matInput [formControl]="mapper.mappersvalue" />
</mat-form-field>
@@ -83,7 +83,15 @@
</ng-container>
<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 role="template-parameters">
@@ -152,7 +160,9 @@
<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>
<button mat-raised-button color="primary" (click)="submit()" [disabled]="!templateForm.valid">
{{ 'labels.buttons.Submit' | translate }}
</button>
</mat-card-actions>
</mat-card>
</div>
src/app/templates/create-edit-template/create-edit-template.component.scss
View File
src/app/templates/create-edit-template/create-edit-template.component.spec.ts
View File
src/app/templates/create-template/create-template.component.ts → src/app/templates/create-edit-template/create-edit-template.component.ts
+82 -34
View File
@@ -16,11 +16,11 @@ import { TemplatesService } from '../templates.service';
* Create Template Component.
*/
@Component({
selector: 'mifosx-create-template',
templateUrl: './create-template.component.html',
styleUrls: ['./create-template.component.scss']
selector: 'mifosx-create-edit-template',
templateUrl: './create-edit-template.component.html',
styleUrls: ['./create-edit-template.component.scss']
})
export class CreateTemplateComponent implements OnInit {
export class CreateEditComponent implements OnInit {
/** CKEditor5 */
public Editor = ClassicEditor;
/** CKEditor5 Template Reference */
@@ -28,12 +28,14 @@ export class CreateTemplateComponent implements OnInit {
/** Template form. */
templateForm: UntypedFormGroup;
/** Create Template Data. */
createTemplateData: any;
/** Create or Edit Template Data. */
templateData: any;
/** Template Mappers */
mappers: any[] = [];
/** Toggles Visibility of Advance Options */
/** Toggles Visibility of Advanced Options */
showAdvanceOptions = false;
/** mode */
mode: 'create' | 'edit';
/** Client Parameter Labels */
clientParameterLabels: string[] = clientParameterLabels;
@@ -55,8 +57,16 @@ export class CreateTemplateComponent implements OnInit {
private router: Router,
private templateService: TemplatesService
) {
this.route.data.subscribe((data: { createTemplateData: any }) => {
this.createTemplateData = data.createTemplateData;
this.route.data.subscribe((data: { templateData: any; mode: 'create' | 'edit' }) => {
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.
*/
createTemplateForm() {
this.templateForm = this.formBuilder.group({
entity: [
'',
Validators.required
],
type: [
'',
Validators.required
],
name: [
'',
Validators.required
]
});
if (this.mode === 'create') {
this.templateForm = this.formBuilder.group({
entity: [
'',
Validators.required
],
type: [
'',
Validators.required
],
name: [
'',
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.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 '';
}
onEditorChange(event: any) {
const editorContent = event.editor.getData();
this.templateForm.get('text').setValue(editorContent);
}
/**
* Creates a template.
* Submits a template.
*/
submit() {
const template: any = {
@@ -177,14 +219,20 @@ export class CreateTemplateComponent implements OnInit {
})),
text: this.getEditorContent()
};
this.templateService.createTemplate(template).subscribe((response: any) => {
this.router.navigate(
[
'../',
response.resourceId
],
{ relativeTo: this.route }
);
});
if (this.mode === 'create') {
this.templateService.createTemplate(template).subscribe((response: any) => {
this.router.navigate(
[
'../',
response.resourceId
],
{ relativeTo: this.route }
);
});
} else {
this.templateService.updateTemplate(template, this.templateData.template.id).subscribe(() => {
this.router.navigate(['../'], { relativeTo: this.route });
});
}
}
}
src/app/templates/create-template/create-template.component.scss
-10
View File
@@ -1,10 +0,0 @@
.container {
.mapper-button {
max-height: 2.25rem;
margin-top: 1rem;
}
.parameter {
margin: 1%;
}
}
src/app/templates/create-template/create-template.component.spec.ts
-24
View File
@@ -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();
});
});
src/app/templates/edit-template/edit-template.component.html
-146
View File
@@ -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>
src/app/templates/edit-template/edit-template.component.scss
-10
View File
@@ -1,10 +0,0 @@
.container {
.mapper-button {
max-height: 2.25rem;
margin-top: 1rem;
}
.parameter {
margin: 1%;
}
}
src/app/templates/edit-template/edit-template.component.spec.ts
-24
View File
@@ -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();
});
});
src/app/templates/edit-template/edit-template.component.ts
-181
View File
@@ -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 });
});
}
}
src/app/templates/templates-routing.module.ts
+7 -12
View File
@@ -8,8 +8,7 @@ import { Route } from '../core/route/route.service';
/** Custom Components */
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';
import { CreateEditComponent } from './create-edit-template/create-edit-template.component';
/** Custom Resolvers */
import { TemplatesResolver } from './common-resolvers/templates.resolver';
@@ -33,11 +32,9 @@ const routes: Routes = [
},
{
path: 'create',
data: { title: 'Create Template', breadcrumb: 'Create Template' },
component: CreateTemplateComponent,
resolve: {
createTemplateData: CreateTemplateResolver
}
component: CreateEditComponent,
data: { mode: 'create', breadcrumb: 'Create Template' },
resolve: { templateData: CreateTemplateResolver }
},
{
path: ':id',
@@ -52,11 +49,9 @@ const routes: Routes = [
},
{
path: 'edit',
component: EditTemplateComponent,
data: { title: 'Edit Template', breadcrumb: 'Edit', routeParamBreadcrumb: false },
resolve: {
editTemplateData: EditTemplateResolver
}
component: CreateEditComponent,
data: { mode: 'edit', breadcrumb: 'Edit', routeParamBreadcrumb: false },
resolve: { templateData: EditTemplateResolver }
}
]
}
src/app/templates/templates.module.ts
+2 -4
View File
@@ -10,8 +10,7 @@ import { TemplatesRoutingModule } from './templates-routing.module';
/** Custom Components */
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';
import { CreateEditComponent } from './create-edit-template/create-edit-template.component';
/**
* Templates Module
@@ -28,8 +27,7 @@ import { CreateTemplateComponent } from './create-template/create-template.compo
declarations: [
TemplatesComponent,
ViewTemplateComponent,
EditTemplateComponent,
CreateTemplateComponent
CreateEditComponent
]
})
export class TemplatesModule {}