@hicoder/angular-cli
Version:
Angular UI componenets and service generator. It works with the mean-rest-express package to generate the end to end web application. The input to this generator is the Mongoose schema defined for the express application. mean-rest-express exposes the Res
947 lines • 50.1 kB
HTML
<%_ if (field.type === "SchemaString") { %><%_
if (field.editor) { %>
<lib-richtext-editor [(ngModel)]="detail['<%-fn%>']" name="Edit<%-Fn%>"<%
if (field.required) {%>
[required]="true"<%
}
if (field.validators) {%>
<%-mn%><%-Sn%>Directive<%-Fn%>=""<%
}
if (typeof field.minlength === 'number') {%>
[minlength]="<%-field.minlength%>"<%
}
if (typeof field.maxlength === 'number') {%>
[maxlength]="<%-field.maxlength%>"<%
}%>
#Edit<%-Fn%>="ngModel">
</lib-richtext-editor>
<% if (field.required || field.validators
|| typeof field.maxlength === 'number'
|| typeof field.minlength === 'number') {%>
<div *ngIf="!(Edit<%-Fn%>.valid || !Edit<%-Fn%>.errors)"><%_
if (field.required) {%>
<div *ngIf="!Edit<%-Fn%>.pristine && Edit<%-Fn%>.errors['required']"
class="alert alert-danger">
<%-fD%> is required.
</div><%}%><%_
if (field.validators) {%>
<div *ngIf="!Edit<%-Fn%>.pristine && Edit<%-Fn%>.errors['<%-mn%><%-Sn%>Directive<%-Fn%>']"
class="alert alert-danger">
{{Edit<%-Fn%>.errors['<%-mn%><%-Sn%>Directive<%-Fn%>']}}
</div><%}%><%_
if (typeof field.maxlength === 'number') {%>
<div *ngIf="!Edit<%-Fn%>.pristine && Edit<%-Fn%>.errors['maxlength']"
class="alert alert-danger">
<%-field.maxlengthMsg%>.
</div><%}%><%_
if (typeof field.minlength === 'number') {%>
<div *ngIf="!(Edit<%-Fn%>.untouched || !Edit<%-Fn%>.errors['minlength'])"
class="alert alert-danger">
<%-field.minlengthMsg%>.
</div><%}%>
</div><%
}%><%_
} else if (field.picture) {%>
<div class="form-check"<%_
if (field.required) {%>
[ngClass]="{'ng-valid': detail['<%-fn%>'],
'ng-invalid': !detail['<%-fn%>']}"<%
} else { %>
[ngClass]="{'ng-valid': true} "<%_ } %>
>
<input type="text" class="form-control rounded" id="Edit<%-Fn%>" style="display: none;"
<%if (field.required) {%>required<%}%>
[(ngModel)]="detail['<%-fn%>']" name="Edit<%-Fn%>"
#Edit<%-Fn%>="ngModel">
<div style="display: inline-block; width: 80%;" >
<lib-mdds-picture-select [(downloadUrl)]="detail['<%-fn%>']" [aspectRatio]="<%-field.aspectRatio%>"></lib-mdds-picture-select>
</div>
<span *ngIf="detail['<%-fn%>']"
class="icon-clear" (click)="clearValueFromDetail('<%-fn%>')">
<i class="fas fa-times-circle" title="Clear"></i>
</span>
</div><%_
if (field.required) {%>
<div *ngIf="!(Edit<%-Fn%>.valid || !Edit<%-Fn%>.errors)">
<div *ngIf="!Edit<%-Fn%>.pristine && Edit<%-Fn%>.errors['required']"
class="alert alert-danger">
<%-fD%> is required.
</div>
</div><%}%><%_
} else if (field.file) { %>
<div class="form-check"<%_
if (field.required) {%>
[ngClass]="{'ng-valid': detail['<%-fn%>'],
'ng-invalid': !detail['<%-fn%>']}"<%
} else { %>
[ngClass]="{'ng-valid': true} "<%_ } %>
>
<input type="text" class="form-control rounded" id="Edit<%-Fn%>" style="display: none;"
<%if (field.required) {%>required<%}%>
[(ngModel)]="detail['<%-fn%>']" name="Edit<%-Fn%>"
#Edit<%-Fn%>="ngModel">
<div style="display: inline-block; width: 80%;" >
<lib-mdds-files-upload [(downloadUrl)]="detail['<%-fn%>']"></lib-mdds-files-upload>
</div>
<span *ngIf="detail['<%-fn%>']"
class="icon-clear" (click)="clearValueFromDetail('<%-fn%>')">
<i class="fas fa-times-circle" title="Clear"></i>
</span>
</div><%_
if (field.required) {%>
<div *ngIf="!(Edit<%-Fn%>.valid || Edit<%-Fn%>.errors)">
<div *ngIf="!Edit<%-Fn%>.pristine && Edit<%-Fn%>.errors['required']"
class="alert alert-danger">
<%-fD%> is required.
</div>
</div><%}%><%_
} else { %><%_
if (field.enumValues) { %>
<div class="form-check"<%_
if (field.required) {%>
[ngClass]="{'ng-valid': enums['<%-fn%>'].includes(detail['<%-fn%>']),
'ng-invalid': !enums['<%-fn%>'].includes(detail['<%-fn%>'])}"<%
} else { %>
[ngClass]="{'ng-valid': true} "<%_ } %>
><%_
field.enumValues.forEach( (f) => { %>
<div class="form-check-inline">
<input type="radio" name="Edit<%-Fn%>"<%
if (field.required) {%>
required<%}%>
id="Edit<%-Fn%><%-f%>" [value]="'<%-f%>'"<%
if (field.validators) {%>
<%-mn%><%-Sn%>Directive<%-Fn%>=""<%}%>
[(ngModel)]="detail['<%-fn%>']"
#Edit<%-Fn%>="ngModel">
<label class="ms-1"><%-f%></label>
</div>
<%_ }) %><% if (!field.required) {%>
<span *ngIf="enums['<%-fn%>'].includes(detail['<%-fn%>'])"
class="icon-clear" (click)="clearValueFromDetail('<%-fn%>')">
<i class="fas fa-times-circle" title="Clear"></i>
</span> <%}%>
</div><%_
} else if (field.mraType === 'httpurl') { %>
<div class="row pl-5 my-1">
<div class="col-12 col-md-2">Link Text</div>
<div class="col-12 col-md-10 input-group">
<input type="text" class="form-control rounded" id="Edit<%-Fn%>Text"
[(ngModel)]="detail['<%-fn%>']['display']" name="Edit<%-Fn%>Text"
#Edit<%-Fn%>Text="ngModel">
<div *ngIf="detail['<%-fn%>']['display']"
class="input-group-append icon-clear-inside " (click)="clearValueFromUrlDisplay('<%-fn%>')">
<i class="fas fa-times-circle" title="Clear"></i>
</div>
</div>
</div>
<div class="row pl-5 my-1">
<div class="col-12 col-md-2">Link URL</div>
<div class="col-12 col-md-10 input-group">
<input type="text" class="form-control rounded" id="Edit<%-Fn%>"
<%if (field.required) {%>
required<%}%><%
if (typeof field.minlength === 'number') {%>
minlength="<%-field.minlength%>"<%}%><%
if (typeof field.maxlength === 'number') {%>
maxlength="<%-field.maxlength%>"<%}%><%
if (field.match) {%>
pattern="<%-field.match%>"<%}%><%
if (field.validators) {%>
<%-mn%><%-Sn%>Directive<%-Fn%>=""<%}%>
[(ngModel)]="detail['<%-fn%>']['url']" name="Edit<%-Fn%>"
#Edit<%-Fn%>="ngModel">
<div *ngIf="detail['<%-fn%>']['url']"
class="input-group-append icon-clear-inside " (click)="clearValueFromUrlLink('<%-fn%>')">
<i class="fas fa-times-circle" title="Clear"></i>
</div>
</div>
</div><%_
} else { %>
<div class="input-group"><%if (field.textarea) {%>
<textarea rows="8" <%} else if (field.mraType === 'email') {%>
<input type="email" email="true"<%} else {%>
<input type="text"<%}%>
class="form-control rounded"
id="Edit<%-Fn%>"<%
if (field.required) {%>
required<%}%><%
if (typeof field.minlength === 'number') {%>
minlength="<%-field.minlength%>"<%}%><%
if (typeof field.maxlength === 'number') {%>
maxlength="<%-field.maxlength%>"<%}%><%
if (field.match) {%>
pattern="<%-field.match%>"<%}%><%
if (field.validators) {%>
<%-mn%><%-Sn%>Directive<%-Fn%>=""<%}%>
[(ngModel)]="detail['<%-fn%>']" name="Edit<%-Fn%>"
#Edit<%-Fn%>="ngModel"><%if (field.textarea) {%>
</textarea><%}%>
<div *ngIf="detail['<%-fn%>']"
class="input-group-append icon-clear-inside " (click)="clearValueFromDetail('<%-fn%>')">
<i class="fas fa-times-circle" title="Clear"></i>
</div>
</div><%_
} %><%
if (field.required
|| field.validators
|| typeof field.maxlength === 'number'
|| typeof field.minlength === 'number'
|| typeof field.match
|| field.mraType === 'email') {%>
<div *ngIf="!(Edit<%-Fn%>.valid || !Edit<%-Fn%>.errors)"><%_
if (field.required) {%>
<div *ngIf="!Edit<%-Fn%>.pristine && Edit<%-Fn%>.errors['required']"
class="alert alert-danger">
<%-fD%> is required.
</div><%}%><%_
if (field.validators) {%>
<div *ngIf="!Edit<%-Fn%>.pristine && Edit<%-Fn%>.errors['<%-mn%><%-Sn%>Directive<%-Fn%>']"
class="alert alert-danger">
{{Edit<%-Fn%>.errors['<%-mn%><%-Sn%>Directive<%-Fn%>']}}
</div><%}%><%_
if (typeof field.maxlength === 'number') {%>
<div *ngIf="!Edit<%-Fn%>.pristine && Edit<%-Fn%>.errors['maxlength']"
class="alert alert-danger">
<%-field.maxlengthMsg%>.
</div><%}%><%_
if (typeof field.minlength === 'number') {%>
<div *ngIf="!Edit<%-Fn%>.untouched && Edit<%-Fn%>.errors['minlength']"
class="alert alert-danger">
<%-field.minlengthMsg%>.
</div><%}%><%_
if (field.match) {%>
<div *ngIf="!Edit<%-Fn%>.untouched && Edit<%-Fn%>.errors['pattern']"
class="alert alert-danger">
<%-field.matchMsg%>.
</div><%}%><%_
if (field.mraType === 'email') {%>
<div *ngIf="!Edit<%-Fn%>.untouched && Edit<%-Fn%>.errors['email']"
class="alert alert-danger">
<%-fD%> must be a valid email address.
</div><%}%>
</div><%}%><%_
if (!field.enumValues && field.hint) {%>
<div *ngIf="editHintFields['<%-fn%>'].length > 0" class="new-area">
<div style="font-size: 0.9rem;">Type in new value or select from available ones: </div>
<ng-template ngFor let-hintEle [ngForOf]="editHintFields['<%-fn%>']" let-i="index">
<div class="badge rounded-pill bg-primary pointer"
*ngIf="detail['<%-fn%>'] !== hintEle['_id']"
(click)="detail['<%-fn%>'] = hintEle['_id']">
{{hintEle['_id']}}
</div>
</ng-template>
</div><%_
}%><%_
}%><%
} else if (field.type === "SchemaBoolean") { %>
<div class="form-check"<%_
if (field.required) {%>
[ngClass]="{'ng-valid': detail['<%-fn%>'] == true || detail['<%-fn%>'] == false,
'ng-invalid': detail['<%-fn%>'] != true && detail['<%-fn%>'] != false}"<%
} else { %>
[ngClass]="{'ng-valid': true} "<%_ } %>
>
<div class="form-check-inline">
<input type="radio" name="Edit<%-Fn%>"
id="Edit<%-Fn%>Yes" [value]="true"<%
if (field.required) {%>
required<%}%><%
if (field.validators) {%>
<%-mn%><%-Sn%>Directive<%-Fn%>=""<%}%>
[(ngModel)]="detail['<%-fn%>']"
#Edit<%-Fn%>="ngModel">
<label class="ms-1">Yes</label>
</div>
<div class="form-check-inline">
<input type="radio" name="Edit<%-Fn%>"
id="Edit<%-Fn%>No" [value]="false"<%
if (field.required) {%>
required<%}%><%
if (field.validators) {%>
<%-mn%><%-Sn%>Directive<%-Fn%>=""<%}%>
[(ngModel)]="detail['<%-fn%>']"
#Edit<%-Fn%>="ngModel">
<label class="ms-1">No</label>
</div><% if (!field.required) {%>
<div *ngIf="detail['<%-fn%>'] == true || detail['<%-fn%>'] == false"
class="form-check-inline" (click)="clearValueFromDetail('<%-fn%>')">
<i class="fas fa-times-circle" title="Clear"></i>
</div> <%}%>
</div>
<div *ngIf="!(Edit<%-Fn%>.valid || !Edit<%-Fn%>.errors)"><%_
if (field.required) {%>
<div *ngIf="Edit<%-Fn%>.pristine && Edit<%-Fn%>.errors['required']"
class="alert alert-danger">
<%-fD%> is required.
</div><%}%><%_if (field.validators) {%>
<div *ngIf="Edit<%-Fn%>.pristine && Edit<%-Fn%>.errors['<%-mn%><%-Sn%>Directive<%-Fn%>']"
class="alert alert-danger">
{{Edit<%-Fn%>.errors['<%-mn%><%-Sn%>Directive<%-Fn%>']}}
</div><%}%>
</div><%_
} else if (field.type === "SchemaNumber") { %><%
if (field.mraType === 'currency'){%>
<span class="currency">$</span><%}%>
<input type="number" class="form-control" id="Edit<%-Fn%>"<%
if (typeof field.numberMin === 'number') {%>
libMddsMinNumber="<%-field.numberMin%>" min="<%-field.numberMin%>"<%}%><%
if (typeof field.numberMax === 'number') {%>
libMddsMaxNumber="<%-field.numberMax%>" max="<%-field.numberMax%>"<%}%><%
if (field.required) {%>
required<%}%><%
if (field.validators) {%>
<%-mn%><%-Sn%>Directive<%-Fn%>=""<%}%>
[(ngModel)]="detail['<%-fn%>']" name="Edit<%-Fn%>"
#Edit<%-Fn%>="ngModel"><%_
if (field.required
|| field.validators
|| typeof field.numberMax === 'number'
|| typeof field.numberMin === 'number') {%>
<div *ngIf="!(Edit<%-Fn%>.valid || !Edit<%-Fn%>.errors)"><%_
if (field.required) {%>
<div *ngIf="!Edit<%-Fn%>.pristine && Edit<%-Fn%>.errors['required']"
class="alert alert-danger">
<%-fD%> is required.
</div><%}%><%_
if (field.validators) {%>
<div *ngIf="!Edit<%-Fn%>.pristine && Edit<%-Fn%>.errors['<%-mn%><%-Sn%>Directive<%-Fn%>']"
class="alert alert-danger">
{{Edit<%-Fn%>.errors['<%-mn%><%-Sn%>Directive<%-Fn%>']}}
</div><%}%><%_
if (typeof field.numberMax === 'number') {%>
<div *ngIf="!Edit<%-Fn%>.pristine && Edit<%-Fn%>.errors['libMddsMaxNumber']"
class="alert alert-danger">
<%-field.numberMaxMsg%>.
</div><%}%><%_
if (typeof field.numberMin === 'number') {%>
<div *ngIf="!Edit<%-Fn%>.untouched && Edit<%-Fn%>.errors['libMddsMinNumber']"
class="alert alert-danger">
<%-field.numberMinMsg%>.
</div><%}%>
</div><%}%><%_
} else if (field.type === "SchemaDate") { %>
<div class="row align-items-start">
<%
let colClassDate = 'col-11';
let colClassTime = '';
if (field.mraDate.includes('time')) {
colClassDate = 'col-12 col-md-8';
colClassTime = 'col-11 col-md-3';
}
%>
<div class="<%-colClassDate%>">
<div class="input-group mb-1">
<input class="form-control" id="Edit<%-Fn%>" placeholder="{{dateFormat}}"<%
if (field.required) {%>
required<%}%><%
if (field.validators) {%>
<%-mn%><%-Sn%>Directive<%-Fn%>=""<%}%>
[(ngModel)]="detail['<%-fn%>']['date']" name="Edit<%-Fn%>"
ngbDatepicker [minDate]="minDate" #Edit<%-Fn%>Date="ngbDatepicker" #Edit<%-Fn%>="ngModel">
<div class="input-group-append">
<button class="btn btn-outline-secondary" (click)="Edit<%-Fn%>Date.toggle()" type="button">
<i class="fas fa-calendar-alt"></i>
</button>
</div>
</div><!-- input group -->
<div *ngIf="!(Edit<%-Fn%>.valid || !Edit<%-Fn%>.errors)"><%_
if (field.required) {%>
<div *ngIf="!Edit<%-Fn%>.pristine && Edit<%-Fn%>.errors['required'] && !(detail['<%-fn%>']?.date)"
class="alert alert-danger">
Date is required.
</div><%}%><%_
if (field.validators) {%>
<div *ngIf="!Edit<%-Fn%>.pristine && Edit<%-Fn%>.errors['<%-mn%><%-Sn%>Directive<%-Fn%>']"
class="alert alert-danger">
{{Edit<%-Fn%>.errors['<%-mn%><%-Sn%>Directive<%-Fn%>']}}
</div><%}%>
<div *ngIf="!(Edit<%-Fn%>.untouched || !Edit<%-Fn%>.errors['ngbDate'] || !Edit<%-Fn%>.errors['ngbDate']['minDate'])"
class="alert alert-danger">
Date must not be earlier than {{minDate | json}}.
</div>
<div *ngIf="!(Edit<%-Fn%>.untouched || !Edit<%-Fn%>.errors['ngbDate'] || !Edit<%-Fn%>.errors['ngbDate']['invalid'])"
class="alert alert-danger">
<%-fD%> must be in {{dateFormat}} format.
</div>
</div>
</div><%
if (field.mraDate.includes('time')) {%>
<div class="<%-colClassTime%>">
<div class="input-group mb-1">
<input class="form-control" id="Edit<%-Fn%>Time" placeholder="" type="time"<%
if (field.required) {%>
required<%}%>
[(ngModel)]="detail['<%-fn%>']['t_value']" name="Edit<%-Fn%>Time"
#Edit<%-Fn%>Time="ngModel"
>
</div><!-- input group -->
<div *ngIf="!(Edit<%-Fn%>Time.valid || !Edit<%-Fn%>Time.errors)"><%_
if (field.required) {%>
<div *ngIf="!Edit<%-Fn%>Time.pristine && Edit<%-Fn%>Time.errors['required']"
class="alert alert-danger">
Time is required.
</div><%}%>
</div>
</div><%
}%>
<div *ngIf="detail['<%-fn%>']['date'] || detail['<%-fn%>']['time']" class="col-1 mt-1">
<span
class="ms-0 icon-clear" (click)="clearValueFromDetail('<%-fn%>')">
<i class="fas fa-times-circle" title="Clear"></i>
</span>
</div>
</div><%_
} else if (field.type === "ObjectId") { %>
<!-- <a class="icon-search" [routerLink]="['.']" (click)="onRefSelect('<%-field.fieldName%>')"><i class="fas fa-list" title="Search"></i></a> -->
<div class="input-group" #field<%-Fn%>>
<input class="form-control rounded" id="Edit<%-Fn%>"
[ngClass]="{'pointer ref-badge': detail['<%-fn%>']['_id']}"
[disabled]="fieldsRefOpened['<%-fn%>']"
(focus)="onRefSelect('<%-fn%>')"<%
if (field.required) {%>
required<%}%><%
if (field.validators) {%>
<%-mn%><%-Sn%>Directive<%-Fn%>=""<%}%>
[ngModel]="detail['<%-fn%>']['valueMedium']" name="Edit<%-Fn%>"
#Edit<%-Fn%>="ngModel" >
<div *ngIf="detail['<%-fn%>']['valueMedium']"
class="input-group-append icon-clear-inside " (click)="clearValueFromDetail('<%-fn%>')">
<i class="fas fa-times-circle" title="Clear"></i>
</div>
</div><%_
if (field.required
|| field.validators) {%>
<div *ngIf="!(Edit<%-Fn%>.valid || !Edit<%-Fn%>.errors)"><%_
if (field.required) {%>
<div *ngIf="!Edit<%-Fn%>.pristine && Edit<%-Fn%>.errors['required'] && !(detail['<%-fn%>']?.date)"
class="alert alert-danger">
<%-fD%> is required.
</div><%}%><%_
if (field.validators) {%>
<div *ngIf="!Edit<%-Fn%>.pristine && Edit<%-Fn%>.errors['<%-mn%><%-Sn%>Directive<%-Fn%>']"
class="alert alert-danger">
{{Edit<%-Fn%>.errors['<%-mn%><%-Sn%>Directive<%-Fn%>']}}
</div><%}%>
</div><%}%><%_
} else if (field.type === "Map") { %><%_
if (field.elementType === "SchemaString" || field.elementType === "SchemaNumber") { %>
<div class="form-check"
ngModelGroup="Edit<%-Fn%>"<%
if (field.required) {%>
libMddsMapRequired<%}%>
#Edit<%-Fn%>="ngModelGroup"
>
<div class="row small">
<div class="col-5 font-weight-bold">
Key <%if (field.keyDescription) {%><span><i data-bs-toggle="tooltip" title="<%-field.keyDescription%>" class="far fa-question-circle"></i></span><%}%>
</div>
<div class="col-5 font-weight-bold">
Value <%if (field.valueDescription) {%><span><i data-bs-toggle="tooltip" title="<%-field.valueDescription%>" class="far fa-question-circle"></i></span><%}%>
</div>
</div>
<hr>
<ng-template [ngIf]="detail['<%-fn%>'] && detail['<%-fn%>']['selection']">
<ng-template ngFor let-key [ngForOf]="objectKeys(detail['<%-fn%>']['selection'])" let-idx="index">
<div class="row mb-2">
<label class="form-check-label small col-12 col-md-5">{{key}}: </label>
<div class="col-11 col-md-5"><%_
if (field.elementType === "SchemaString") { %><%
if (field.mraType === 'email') {%>
<input type="email" email="true"<%} else {%>
<input type="text"<%}%>
placeholder="Value for {{key}}"
class="form-control form-control-sm" id="<%-Fn%>Element{{idx}}"<%
if (typeof field.minlength === 'number') {%>
minlength="<%-field.minlength%>"<%}%><%
if (typeof field.maxlength === 'number') {%>
maxlength="<%-field.maxlength%>"<%}%><%
if (field.match) {%>
pattern="<%-field.match%>"<%}%><%
if (field.validators) {%>
<%-mn%><%-Sn%>Directive<%-Fn%>=""<%}%>
[(ngModel)]="detail['<%-fn%>']['selection'][key]" name="<%-Fn%>Element{{idx}}"
#<%-Fn%>Element{{idx}}="ngModel"> <%_
} else if (field.elementType === "SchemaNumber") { %>
<input type="number" class="form-control form-control-sm" id="<%-Fn%>Element{{idx}}"
placeholder="Value for {{key}}"<%
if (typeof field.numberMin === 'number') {%>
libMddsMinNumber="<%-field.numberMin%>" min="<%-field.numberMin%>"<%}%><%
if (typeof field.numberMax === 'number') {%>
libMddsMaxNumber="<%-field.numberMax%>" max="<%-field.numberMax%>"<%}%><%
if (field.validators) {%><%-mn%><%-Sn%>Directive<%-Fn%>=""<%}%>
[(ngModel)]="detail['<%-fn%>']['selection'][key]" name="<%-Fn%>Element{{idx}}"
#<%-Fn%>Element{{idx}}="ngModel"><%_
}%>
</div>
<div class="col-1">
<i class="fas fa-times-circle" (click)="clearValueFromMapField('<%-fn%>', key)" title="Remove"></i>
</div>
</div><%_
if (field.elementType === "SchemaString") { %><%_
if (field.validators
|| field.mraType === 'email'
|| field.match
|| typeof field.maxlength === 'number'
|| typeof field.minlength === 'number') {%>
<div *ngIf="!(!Edit<%-Fn%>.control.controls || !Edit<%-Fn%>.control.controls['<%-Fn%>Element'+idx]
|| Edit<%-Fn%>.control.controls['<%-Fn%>Element'+idx].valid
|| !Edit<%-Fn%>.control.controls['<%-Fn%>Element'+idx].errors)"><%_
if (field.validators) {%>
<div *ngIf="!Edit<%-Fn%>.control.controls['<%-Fn%>Element'+idx].pristine &&
Edit<%-Fn%>.control.controls['<%-Fn%>Element'+idx].errors['<%-mn%><%-Sn%>Directive<%-Fn%>']"
class="alert alert-danger small p-1">
{{Edit<%-Fn%>.control.controls['<%-Fn%>Element'+idx].errors['<%-mn%><%-Sn%>Directive<%-Fn%>']}}
</div><%}%><%_
if (typeof field.maxlength === 'number') {%>
<div *ngIf="!Edit<%-Fn%>.control.controls['<%-Fn%>Element'+idx].pristine &&
Edit<%-Fn%>.control.controls['<%-Fn%>Element'+idx].errors['maxlength']"
class="alert alert-danger small p-1">
<%-field.maxlengthMsg%>.
</div><%}%><%_
if (typeof field.minlength === 'number') {%>
<div *ngIf="!Edit<%-Fn%>.control.controls['<%-Fn%>Element'+idx].untouched &&
Edit<%-Fn%>.control.controls['<%-Fn%>Element'+idx].errors['minlength']"
class="alert alert-danger small p-1">
<%-field.minlengthMsg%>.
</div><%}%><%_
if (field.match) {%>
<div *ngIf="!Edit<%-Fn%>.control.controls['<%-Fn%>Element'+idx].untouched &&
Edit<%-Fn%>.control.controls['<%-Fn%>Element'+idx].errors['pattern']"
class="alert alert-danger small p-1">
<%-field.matchMsg%>.
</div><%}%><%_
if (field.mraType === 'email') {%>
<div *ngIf="!Edit<%-Fn%>.control.controls['<%-Fn%>Element'+idx].untouched &&
Edit<%-Fn%>.control.controls['<%-Fn%>Element'+idx].errors['email']"
class="alert alert-danger small p-1">
Value must be a valid email address.
</div><%}%>
</div><%}%><%_
} else if (field.elementType === "SchemaNumber") { %><%_
if (field.validators
|| typeof field.numberMax === 'number'
|| typeof field.numberMin === 'number') {%>
<div *ngIf="!(!Edit<%-Fn%>.control.controls
|| !Edit<%-Fn%>.control.controls['<%-Fn%>Element'+idx]
|| Edit<%-Fn%>.control.controls['<%-Fn%>Element'+idx].valid
|| !Edit<%-Fn%>.control.controls['<%-Fn%>Element'+idx].errors)"><%_
if (field.validators) {%>
<div *ngIf="!Edit<%-Fn%>.control.controls['<%-Fn%>Element'+idx].pristine &&
Edit<%-Fn%>.control.controls['<%-Fn%>Element'+idx].errors['<%-mn%><%-Sn%>Directive<%-Fn%>']"
class="alert alert-danger small p-1">
{{Edit<%-Fn%>.control.controls['<%-Fn%>Element'+idx].errors['<%-mn%><%-Sn%>Directive<%-Fn%>']}}
</div><%}%><%_
if (typeof field.numberMax === 'number') {%>
<div *ngIf="!Edit<%-Fn%>.control.controls['<%-Fn%>Element'+idx].pristine &&
Edit<%-Fn%>.control.controls['<%-Fn%>Element'+idx].errors['libMddsMaxNumber']"
class="alert alert-danger small p-1">
<%-field.numberMaxMsg%>.
</div><%}%><%_
if (typeof field.numberMin === 'number') {%>
<div *ngIf="!Edit<%-Fn%>.control.controls['<%-Fn%>Element'+idx].untouched &&
Edit<%-Fn%>.control.controls['<%-Fn%>Element'+idx].errors['libMddsMinNumber']"
class="alert alert-danger small p-1">
<%-field.numberMinMsg%>.
</div><%}%>
</div><%}%><%_
}%>
</ng-template>
</ng-template>
<div class="row">
<div class="input-group input-group-sm col-12 col-md-7">
<input type="text" class="form-control border"
id="Edit<%-Fn%>New" #Edit<%-Fn%>New="ngModel"
[(ngModel)]="detail['<%-fn%>']['new']" [ngModelOptions]="{standalone: true}"
(keydown.enter)="$any($event.target).blur();onAddMapItem('<%-fn%>');false"
>
<div class="input-group-append">
<button type="button" class="btn btn-outline-secondary" (click)="onAddMapItem('<%-fn%>')">
<i class="fas fa-plus" title="Add new key"></i>
</button>
</div>
<span class="ms-1 small">new key</span>
</div>
</div>
</div><%_
} else { %>
<div>Not supported yet.</div><%_
} %><%_
if (field.required) {%>
<div *ngIf="Edit<%-Fn%>.errors && Edit<%-Fn%>.errors['required']"
class="alert alert-danger">
<%-fD%> is required.
</div><%}%><%_
} else if (field.type === "SchemaArray") { %><%_
if (field.elementType === "SchemaString" && field.elementMultiSelect) { %>
<div class="form-check"
ngModelGroup="Edit<%-Fn%>"<%
if (field.required) {%>
libMddsMultiSelectionRequired<%}%>
#Edit<%-Fn%>="ngModelGroup"
><%_
field.enumValues.forEach( (f, index) => {
const fd = f.trim().replace(/\s+/g, '');
%>
<div class="form-check-inline">
<input type="checkbox" name="Edit<%-Fn%><%-fd%>"
id="Edit<%-Fn%><%-fd%>"
[(ngModel)]="detail['<%-fn%>']['selection']['<%-f%>']"
#Edit<%-Fn%><%-fd%>="ngModel">
<label class="ms-1"><%-f%></label>
</div><%_ }) %>
<span *ngIf="multiselectionSelected('<%-fn%>')"
class="icon-clear" (click)="clearValueFromDetail('<%-fn%>')">
<i class="fas fa-times-circle" title="Clear"></i>
</span>
</div><%_
} else if (field.elementType === 'SchemaString' && field.picture) { %>
<div class="form-check"
ngModelGroup="Edit<%-Fn%>"<%
if (field.required) {%>
libMddsArrayRequired<%}%>
#Edit<%-Fn%>="ngModelGroup"
>
<div class="d-flex align-items-center">
<div class="picture-small-block" *ngFor="let element of detail['<%-fn%>']['selection']; let i = index;">
<lib-mdds-picture-display [downloadUrl]="element" [isLarge]="false"
[style]="{img: {'background-color': '#8080801f', 'object-fit': 'contain', width: '100%'}}">
</lib-mdds-picture-display>
<i class="fas fa-times-circle icon-clear-badge-ontop" (click)="clearValueFromArrayField('<%-fn%>', i)" title="Remove"></i>
</div>
<span *ngIf="arraySelected('<%-fn%>')"
class="icon-clear" (click)="clearValueFromDetail('<%-fn%>')">
<i class="fas fa-times-circle" title="Clear All"></i>
</span>
</div>
<hr>
<div class="new-area">
<div class="mt-1">
<a class="pointer" routerLink="." (click)="onAddArrayItemClicked('<%-fn%>')"
style="font-size: 0.75rem;">
<i class="fas fa-plus-square" title="Add"></i>
Add
</a>
</div>
</div>
<div *ngIf="detail['<%-fn%>']['adding']">
<lib-mdds-picture-select [aspectRatio]="<%-field.aspectRatio%>"
[disableDisplay]="true" [askForSelect]="detail['<%-fn%>']['adding']"
(downloadUrlChange)="detail['<%-fn%>']['new'] = $event; onAddArrayItem('<%-fn%>')">
</lib-mdds-picture-select>
</div>
<!-- fake hidden input ngModel for directive to check the values-->
<input type="checkbox" name="Edit<%-Fn%>Selection"
style="display:none"
id="Edit<%-Fn%>Selection"
[(ngModel)]="detail['<%-fn%>']['selection'].length"
#Edit<%-Fn%>Selection="ngModel">
</div><%_
} else if (field.elementType === 'SchemaString' && field.file) { %>
<div class="form-check"
ngModelGroup="Edit<%-Fn%>"<%
if (field.required) {%>
libMddsArrayRequired<%}%>
#Edit<%-Fn%>="ngModelGroup"
>
<div class="d-flex align-items-center">
<div>
<div class="d-flex align-items-center" *ngFor="let element of detail['<%-fn%>']['selection']; let i = index;">
<lib-mdds-files-display [downloadUrls]="[element]">
</lib-mdds-files-display>
<i class="fas fa-times-circle icon-clear-bg-light" (click)="clearValueFromArrayField('<%-fn%>', i)" title="Remove"></i>
</div>
</div>
<span *ngIf="arraySelected('<%-fn%>') && detail['<%-fn%>']['selection'].length > 1"
class="icon-clear" (click)="clearValueFromDetail('<%-fn%>')">
<i class="fas fa-times-circle" title="Clear All"></i>
</span>
</div>
<hr>
<div class="new-area">
<div class="mt-1">
<a class="pointer" routerLink="." (click)="onAddArrayItemClicked('<%-fn%>')"
style="font-size: 0.75rem;">
<i class="fas fa-plus-square" title="Upload"></i>
Upload
</a>
</div>
</div>
<lib-mdds-files-upload
[disableDisplay]="true" [askForSelect]="detail['<%-fn%>']['adding']"
(downloadUrlChange)="detail['<%-fn%>']['new'] = $event; onAddArrayItem('<%-fn%>')">
</lib-mdds-files-upload>
<!-- fake hidden input ngModel for directive to check the values-->
<input type="checkbox" name="Edit<%-Fn%>Selection"
style="display:none"
id="Edit<%-Fn%>Selection"
[(ngModel)]="detail['<%-fn%>']['selection'].length"
#Edit<%-Fn%>Selection="ngModel">
</div><%_
} else if (field.elementType === 'SchemaString' && field.mraType === 'httpurl') { %>
<div class="form-check"
ngModelGroup="Edit<%-Fn%>"<%
if (field.required) {%>
libMddsArrayRequired<%}%>
#Edit<%-Fn%>="ngModelGroup"
>
<div class="d-flex align-items-center">
<div class="d-flex align-items-center badge rounded-pill bg-light"
*ngFor="let element of detail['<%-fn%>']['selection']; let i = index;">
<a class="" href="{{element['url']}}">{{element['display'] || element['url']}}</a>
<i class="fas fa-times-circle icon-clear-bg-light" (click)="clearValueFromArrayField('<%-fn%>', i)" title="Remove"></i>
</div>
<span *ngIf="arraySelected('<%-fn%>') && detail['<%-fn%>']['selection'].length > 1"
class="icon-clear" (click)="clearValueFromDetail('<%-fn%>')">
<i class="fas fa-times-circle" title="Clear All"></i>
</span>
</div>
<hr>
<div class="new-area">
<div class="mt-1">
<a class="pointer" routerLink="." (click)="onAddArrayItemClicked('<%-fn%>')"
style="font-size: 0.75rem;">
<i class="fas fa-plus-square" title="Upload"></i>
New
</a>
</div>
</div>
<div *ngIf="detail['<%-fn%>']['adding']" class="new-modal">
<div class="card text-center new-card">
<div class="card-body">
<div class="row my-1">
<div class="col-12 text-left">Link Text</div>
<div class="col-12 input-group">
<input type="text" class="form-control rounded" id="Edit<%-Fn%>NewText"
[ngModelOptions]="{standalone: true}"
[(ngModel)]="detail['<%-fn%>']['new']['display']" name="Edit<%-Fn%>NewText"
#Edit<%-Fn%>NewText="ngModel">
<div *ngIf="detail['<%-fn%>']['new']['display']"
class="input-group-append icon-clear-inside " (click)="detail['<%-fn%>']['new']['display'] = ''">
<i class="fas fa-times-circle" title="Clear"></i>
</div>
</div>
</div>
<div class="row my-1">
<div class="col-12 text-left">Link URL</div>
<div class="col-12 input-group">
<input type="text" class="form-control rounded" id="Edit<%-Fn%>New"
[ngModelOptions]="{standalone: true}"
required<%
if (typeof field.minlength === 'number') {%>
minlength="<%-field.minlength%>"<%}%><%
if (typeof field.maxlength === 'number') {%>
maxlength="<%-field.maxlength%>"<%}%><%
if (field.match) {%>
pattern="<%-field.match%>"<%}%><%
if (field.validators) {%>
<%-mn%><%-Sn%>Directive<%-Fn%>=""<%}%>
[(ngModel)]="detail['<%-fn%>']['new']['url']" name="Edit<%-Fn%>New"
#Edit<%-Fn%>New="ngModel">
<div *ngIf="detail['<%-fn%>']['new']['url']"
class="input-group-append icon-clear-inside " (click)="detail['<%-fn%>']['new']['url'] = ''">
<i class="fas fa-times-circle" title="Clear"></i>
</div>
</div>
</div>
<div *ngIf="!(Edit<%-Fn%>New.valid
|| !Edit<%-Fn%>New.errors}">
<div *ngIf="!(Edit<%-Fn%>New.pristine)"
class="alert alert-danger small p-1">
<div *ngIf="Edit<%-Fn%>New.errors['required']">
Value is required.
</div><%_
if (field.validators) {%>
<div *ngIf="Edit<%-Fn%>New.errors['<%-mn%><%-Sn%>Directive<%-Fn%>']">
{{Edit<%-Fn%>New.errors['<%-mn%><%-Sn%>Directive<%-Fn%>']}}
</div><%}%><%_
if (typeof field.maxlength === 'number') {%>
<div *ngIf="Edit<%-Fn%>New.errors['maxlength']">
<%-field.maxlengthMsg%>.
</div><%}%>
</div><%_
if (typeof field.minlength === 'number') {%>
<div *ngIf="!Edit<%-Fn%>New.untouched && Edit<%-Fn%>New.errors['minlength']"
class="alert alert-danger small p-1">
<%-field.minlengthMsg%>.
</div><%}%><%_
if (field.match) {%>
<div *ngIf="!Edit<%-Fn%>New.untouched && Edit<%-Fn%>New.errors['pattern']"
class="alert alert-danger small p-1">
{{field.matchMsg}}.
</div><%}%>
</div>
<div class="d-flex my-3 justify-content-center">
<button class="btn btn-outline-primary mx-1" [disabled]="!Edit<%-Fn%>New.valid" (click)="onAddArrayItem('<%-fn%>')">Confirm</button>
<button class="btn btn-outline-secondary mx-1" (click)="onAddArrayItemCancelled('<%-fn%>')">Cancel</button>
</div>
</div>
</div>
</div>
<!-- fake hidden input ngModel for directive to check the values-->
<input type="checkbox" name="Edit<%-Fn%>Selection"
style="display:none"
id="Edit<%-Fn%>Selection"
[(ngModel)]="detail['<%-fn%>']['selection'].length"
#Edit<%-Fn%>Selection="ngModel">
</div><%_
} else if (field.elementType === 'SchemaString') { %>
<div class="form-check"
ngModelGroup="Edit<%-Fn%>"<%
if (field.required) {%>
directive<%-Mn%>ArrayRequired<%}%>
#Edit<%-Fn%>="ngModelGroup"
>
<div class="badge-group" *ngIf="detail['<%-fn%>'] && detail['<%-fn%>']['selection']">
<div class="badge rounded-pill bg-secondary" *ngFor="let element of detail['<%-fn%>']['selection']; let i = index;">
{{element}}
<i class="fas fa-times-circle icon-clear-badge" (click)="clearValueFromArrayField('<%-fn%>', i)" title="Remove"></i>
</div>
<span *ngIf="arraySelected('<%-fn%>')"
class="icon-clear" (click)="clearValueFromDetail('<%-fn%>')">
<i class="fas fa-times-circle" title="Clear"></i>
</span>
</div>
<hr>
<div class="new-area"><%
if (field.hint) {%>
<div *ngIf="editHintFields['<%-fn%>'].length > 0" style="font-size: 0.9rem;">Select from Available <%-fD%>: </div>
<ng-template ngFor let-hintEle [ngForOf]="editHintFields['<%-fn%>']" let-i="index">
<div class="badge rounded-pill bg-primary pointer"
*ngIf="!detail['<%-fn%>']['selection'].includes(hintEle['_id'])"
(click)="onAddArrayItemValue('<%-fn%>', hintEle['_id'])">
{{hintEle['_id']}}
</div>
</ng-template><%_ }%>
<div class="mt-1">
<a class="pointer" routerLink="." (click)="onAddArrayItemClicked('<%-fn%>')"
style="font-size: 0.75rem;">
<i class="fas fa-plus-square" title="New"></i>
New
</a>
</div>
</div>
<div *ngIf="detail['<%-fn%>']['adding']" class="new-modal">
<div class="card text-center new-card">
<div class="card-body"><%if (field.mraType === 'email') {%>
<input type="email" email="true"<%} else {%>
<input type="text"<%}%>
class="form-control border"
id="Edit<%-Fn%>New" #Edit<%-Fn%>New="ngModel"
[(ngModel)]="detail['<%-fn%>']['new']"
[ngModelOptions]="{standalone: true}"<%
if (typeof field.minlength === 'number') {%>
minlength="<%-field.minlength%>"<%}%><%
if (typeof field.maxlength === 'number') {%>
maxlength="<%-field.maxlength%>"<%}%><%
if (typeof field.match) {%>
pattern="<%-field.match%>"<%}%><%
if (field.validators) {%>
<%-mn%><%-Sn%>Directive<%-Fn%>=""<%}%>
(keydown.enter)="$any($event.target).blur();onAddArrayItem('<%-fn%>');false"><%
if (field.validators
|| typeof field.maxlength === 'number'
|| typeof field.minlength === 'number'
|| field.match
|| field.mraType === 'email') {%>
<div *ngIf="!(Edit<%-Fn%>New.valid ||!Edit<%-Fn%>New.errors)"><%_
if (field.validators) {%>
<div *ngIf="!Edit<%-Fn%>New.pristine && Edit<%-Fn%>New.errors['<%-mn%><%-Sn%>Directive<%-Fn%>']"
class="alert alert-danger small p-1">
{{Edit<%-Fn%>New.errors['<%-mn%><%-Sn%>Directive<%-Fn%>']}}
</div><%}%><%_
if (typeof field.maxlength === 'number') {%>
<div *ngIf="!Edit<%-Fn%>New.pristine && Edit<%-Fn%>New.errors['maxlength']"
class="alert alert-danger small p-1">
<%-field.maxlengthMsg%>.
</div><%}%><%_
if (typeof field.minlength === 'number') {%>
<div *ngIf="!Edit<%-Fn%>New.untouched && Edit<%-Fn%>New.errors['minlength']"
class="alert alert-danger small p-1">
<%-field.minlengthMsg%>.
</div><%}%><%_
if (field.match) {%>
<div *ngIf="!Edit<%-Fn%>New.untouched && Edit<%-Fn%>New.errors['pattern']"
class="alert alert-danger small p-1">
<%-field.matchMsg%>.
</div><%}%><%_
if (field.mraType === 'email') {%>
<div *ngIf="!Edit<%-Fn%>New.untouched && Edit<%-Fn%>New.errors['email']"
class="alert alert-danger small p-1">
Value must be a valid email address.
</div><%}%>
</div><%}%>
<div class="d-flex my-3 justify-content-center">
<button class="btn btn-outline-primary mx-1" [disabled]="!Edit<%-Fn%>New.valid" (click)="onAddArrayItem('<%-fn%>')">Confirm</button>
<button class="btn btn-outline-secondary mx-1" (click)="onAddArrayItemCancelled('<%-fn%>')">Cancel</button>
</div>
</div>
</div>
</div>
<!-- fake hidden input ngModel for directive to check the values-->
<input type="checkbox" name="Edit<%-Fn%>Selection"
style="display:none"
id="Edit<%-Fn%>Selection"
[(ngModel)]="detail['<%-fn%>']['selection'].length"
#Edit<%-Fn%>Selection="ngModel">
</div><%_
} else if (field.elementType === 'ObjectId') { %>
<div class="form-check"
ngModelGroup="Edit<%-Fn%>"<%
if (field.required) {%>
directive<%-Mn%>ArrayRequired<%}%>
#Edit<%-Fn%>="ngModelGroup" #field<%-Fn%>
>
<ng-template [ngIf]="detail['<%-fn%>'] && detail['<%-fn%>']['selection']">
<div class="badge rounded-pill bg-secondary" *ngFor="let element of detail['<%-fn%>']['selection']; let i = index;">
{{element.valueMedium}}
<i class="fas fa-times-circle icon-clear-badge" (click)="clearValueFromArrayField('<%-fn%>', i)" title="Remove"></i>
</div>
</ng-template>
<span *ngIf="arraySelected('<%-fn%>')"
class="icon-clear" (click)="clearValueFromDetail('<%-fn%>')">
<i class="fas fa-times-circle" title="Clear"></i>
</span>
<button type="button" class="btn btn-light ms-3" (click)="onRefSelect('<%-fn%>')">
<i class="fas fa-plus" title="Add"></i>
</button>
<!-- fake hidden input ngModel for directive to check the values-->
<input type="checkbox" name="Edit<%-Fn%>Selection"
style="display:none"
id="Edit<%-Fn%>Selection"
[(ngModel)]="detail['<%-fn%>']['selection'].length"
#Edit<%-Fn%>Selection="ngModel">
</div><%_
} else { %>
<div>Not supported yet.</div><%_
} %><%
if (field.required) {%>
<div *ngIf="!(Edit<%-Fn%>.valid || !Edit<%-Fn%>.errors)">
<div *ngIf="!Edit<%-Fn%>.pristine && Edit<%-Fn%>.errors['required']"
class="alert alert-danger">
<%-fD%> is required.
</div>
</div><%}%><%_
} else if (ft === 'AngularSelector') { let sel = field.selector;%>
<!--Create a fake required ngModel in case validation is needed.-->
<input type="text" class="form-control rounded" id="Edit<%-Fn%>" style="display: none;"
required
[(ngModel)]="detail['<%-fn%>']" name="Edit<%-Fn%>"
#Edit<%-Fn%>="ngModel">
<<%-sel.selector%><% for(let input of sel.inputs) {%>
[<%-input.key%>]="<%-input.value%>"<%}%><%for(let output of sel.outputs) {%>
(<%-output.key%>)="<%-output.value%>"<%}%>
>
</<%-sel.selector%>><%
} else { %>
<div>Not supported yet.</div><%_
} %>