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:
Felix van Hove
@@ -0,0 +1,168 @@
|
||||
<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 required formControlName="entity">
|
||||
<mat-option *ngFor="let entity of templateData.entities" [value]="entity.id">
|
||||
{{ entity.name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="templateForm.controls.entity.hasError('required')">
|
||||
{{ 'labels.inputs.Entity' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
|
||||
<mat-select required formControlName="type">
|
||||
<mat-option *ngFor="let type of templateData.types" [value]="type.id">
|
||||
{{ type.name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="templateForm.controls.type.hasError('required')">
|
||||
{{ 'labels.inputs.Type' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="48%">
|
||||
<mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
|
||||
<input matInput required formControlName="name" />
|
||||
<mat-error *ngIf="templateForm.controls.name.hasError('required')">
|
||||
{{ 'labels.inputs.name' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</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">
|
||||
{{ '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="48%">
|
||||
<mat-label>{{ 'labels.inputs.Mapper Key' | translate }}</mat-label>
|
||||
<input matInput [formControl]="mapper.mapperskey" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="38%">
|
||||
<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">
|
||||
<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">
|
||||
<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()" [disabled]="!templateForm.valid">
|
||||
{{ 'labels.buttons.Submit' | translate }}
|
||||
</button>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
</div>
|
||||
Reference in New Issue
Block a user