@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
215 lines (207 loc) • 10.4 kB
HTML
<%_
let lineClass = 'two-column-search';
let labelCol = 'col-12 col-sm-3';
let inputCol = 'col-11 col-sm-8';
let clearCol = 'col-1';
if (field.type === "SchemaDate") {
lineClass = 'one-column-search';
labelCol = 'col-12 col-lg-3';
inputCol = 'col-11 col-lg-8';
}
let formControl = 'form-control form-control-sm';
let inputGroup = 'input-group input-group-sm'
let lineSize = 'small';
if (typeof size === 'undefined') {
;
} else if (size === 'normal') {
formControl = 'form-control';
inputGroup = 'input-group';
lineSize = '';
}
%>
<div class="container <%-lineClass%> <%-lineSize%>"
<%
let fn = field.fieldName; let ft = field.type;
let fieldObj = {field, fn, ft,};
if (field.meta.directive) {
%><%- include(`/ui/${uiFramework}/schema-display.field.directive.html`, fieldObj); %><%
}%>
>
<div class="row col-gutter align-items-center" #field<%-Fn%>>
<div class="<%-labelCol%>">
<label for="<%-sn%>Edit<%-Fn%>">
<%-fD%>
</label>
</div>
<div class="<%-inputCol%>" style="position: relative;"><%_
if (field.type === "SchemaString") {
if (field.enumValues) {
field.enumValues.forEach( (f) => { %>
<div class="form-check-inline">
<input type="radio" name="<%-sn%>Edit<%-Fn%>" id="<%-sn%>Edit<%-Fn%><%-f%>"
[value]="'<%-f%>'" [(ngModel)]="detail['<%-fn%>']" #<%-sn%>Edit<%-Fn%>="ngModel">
<span class="ms-1"><%-f%></span>
</div><%_ }) %><%_
} else { %>
<input type="text" class="<%-formControl%>" id="<%-sn%>Edit<%-Fn%>"
<%if (field.validators) {%><%-mn%><%-Sn%>Directive<%-Fn%>="" <%}%>
[(ngModel)]="detail['<%-fn%>']" name="<%-sn%>Edit<%-Fn%>" #<%-sn%>Edit<%-Fn%>="ngModel"><%_
}
} else if (field.type === "SchemaBoolean") { %>
<div class="form-check-inline">
<input type="radio" name="<%-sn%>Edit<%-Fn%>" id="<%-sn%>Edit<%-Fn%>Yes"
[value]="true" [(ngModel)]="detail['<%-fn%>']" #<%-sn%>Edit<%-Fn%>="ngModel">
<span class="ms-1">Yes</span>
</div>
<div class="form-check-inline">
<input type="radio" name="<%-sn%>Edit<%-Fn%>" id="<%-sn%>Edit<%-Fn%>No"
[value]="false" [(ngModel)]="detail['<%-fn%>']" #<%-sn%>Edit<%-Fn%>="ngModel">
<span class="ms-1">No</span>
</div><%_
} else if (field.type === "SchemaNumber") { %>
<div class="<%-inputGroup%> align-items-center">
<%if (field.mraType === 'currency'){%><span class="currency">$</span><%}%>
<input type="number" class="<%-formControl%>" id="<%-sn%>Edit<%-Fn%>"
[(ngModel)]="detail['__mra_<%-fn%>_from']" name="<%-sn%>Edit<%-Fn%>"
#<%-sn%>Edit<%-Fn%>="ngModel">
<span> ~ </span>
<input type="number" class="<%-formControl%>" id="<%-sn%>Edit<%-Fn%>"
[(ngModel)]="detail['__mra_<%-fn%>_to']" name="<%-sn%>Edit<%-Fn%>"
#<%-sn%>Edit<%-Fn%>="ngModel">
</div><%_
} else if (field.type === "SchemaDate") { %>
<div class="row">
<div class="col-12 col-md-6">
<div class="<%-inputGroup%> align-items-center">
<span class="small mx-1" style="width:2rem">From</span>
<input class="<%-formControl%> border-secondary" id="<%-sn%>Edit<%-Fn%>From" placeholder="{{dateFormat}}"
[(ngModel)]="detail['<%-fn%>']['from']" name="<%-sn%>Edit<%-Fn%>" ngbDatepicker [minDate]="minDate"
#<%-sn%>Edit<%-Fn%>="ngModel">
<div class="input-group-append">
<button class="btn btn-outline-secondary" (click)="onDateSelectionToggle('<%-fn%>')" type="button">
<i class="fas fa-calendar-alt"></i>
</button>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="<%-inputGroup%> align-items-center">
<span class="small mx-1" style="width:2rem">to</span>
<input class="<%-formControl%> border-secondary" id="<%-sn%>Edit<%-Fn%>To" placeholder="{{dateFormat}}"
[(ngModel)]="detail['<%-fn%>']['to']" name="<%-sn%>Edit<%-Fn%>" ngbDatepicker [minDate]="minDate"
#<%-sn%>Edit<%-Fn%>="ngModel">
<div class="input-group-append">
<button class="btn btn-outline-secondary" (click)="onDateSelectionToggle('<%-fn%>')" type="button">
<i class="fas fa-calendar-alt"></i>
</button>
</div>
</div>
</div>
</div>
<div class="date-selection-pop" *ngIf="detail['<%-fn%>']['pop']">
<ngb-datepicker #dp [minDate]="minDate" (dateSelect)="onDateSelection('<%-fn%>', $event)"
[displayMonths]="datePickerDisplayMonths" [dayTemplate]="<%-sn%>Edit<%-Fn%>T">
</ngb-datepicker>
<ng-template #<%-sn%>Edit<%-Fn%>T let-<%-sn%>Edit<%-Fn%>Date="date"
let-<%-sn%>Edit<%-Fn%>Focused="focused">
<span class="custom-day" [class.focused]="<%-sn%>Edit<%-Fn%>Focused"
[class.range]="isRange('<%-fn%>', <%-sn%>Edit<%-Fn%>Date)"
[class.faded]="isHovered('<%-fn%>', <%-sn%>Edit<%-Fn%>Date) || isInside('<%-fn%>', <%-sn%>Edit<%-Fn%>Date)"
(mouseenter)="hoveredDate = <%-sn%>Edit<%-Fn%>Date" (mouseleave)="hoveredDate = null">
{{ <%-sn%>Edit<%-Fn%>Date.day }}
</span>
</ng-template>
</div><%_
} else if (field.type === "ObjectId") { %>
<div class="<%-inputGroup%>">
<input class="<%-formControl%> rounded" id="<%-sn%>Edit<%-Fn%>"
[ngClass]="{'pointer ref-badge': detail['<%-fn%>']['_id']}" (focus)="onRefSelect('<%-fn%>')"
<%if (field.validators) {%><%-mn%><%-Sn%>Directive<%-Fn%>="" <%}%>
[ngModel]="detail['<%-fn%>']['valueMedium']" name="<%-sn%>Edit<%-Fn%>" #<%-sn%>Edit<%-Fn%>="ngModel">
</div>
<!-- (focus)="detail['<%-fn%>']['_id']?onRefShow('<%-field.fieldName%>', 'select', detail['<%-fn%>']['_id']):onRefSelect('<%-fn%>')" --><%_
} else if (field.type === "SchemaArray") {
if (field.elementType === "SchemaString") {
if (field.elementMultiSelect) {
field.enumValues.forEach( (f, index) => {
const fd = f.trim().replace(/\s+/g, '');%>
<div class="form-check-inline">
<input type="checkbox" name="<%-sn%>Edit<%-Fn%><%-fd%>"
id="<%-sn%>Edit<%-Fn%><%-fd%>" [(ngModel)]="detail['<%-fn%>']['selection']['<%-f%>']"
#<%-sn%>Edit<%-Fn%><%-fd%>="ngModel">
<span class="ms-1"><%-f%></span>
</div><%_
}) %><%_
} else if (!field.picture && !field.file) { %>
<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>
</div>
<hr>
<div class="available-hints"><%_
if (field.hint) {%>
<div *ngIf="editHintFields['<%-fn%>'].length > 0" class="small">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><%_ }
if (!field.hint && !field.mraType === 'httpurl') {
/* httpurl not supported yet. also search not based on regex */%>
<div class="mt-1">
<a class="pointer small" routerLink="." (click)="onAddArrayItemClicked('<%-fn%>')">
<i class="fas fa-plus-square" title="New"></i>
New
</a>
</div><%_
}%>
</div><%_
if (!field.hint && !field.mraType === 'httpurl') {
/* httpurl not supported yet. also search not based on regex */%>
<div *ngIf="detail['<%-fn%>']['adding']" class="new-modal">
<div class="card text-center new-card">
<div class="card-body">
<input type="search" class="<%-formControl%> border" id="Edit<%-Fn%>New" #Edit<%-Fn%>New="ngModel"
[(ngModel)]="detail['<%-fn%>']['new']" [ngModelOptions]="{standalone: true}"
(keydown.enter)="$any($event.target).blur();onAddArrayItem('<%-fn%>');false">
<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><%_
}
}
} else if (field.elementType === "ObjectId") { %>
<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.value}}
<i class="fas fa-times-circle icon-clear-badge" (click)="clearValueFromArrayField('<%-fn%>', i)"
title="Remove"></i>
</div>
</ng-template>
<button type="button" class="btn btn-light ms-3" (click)="onRefSelect('<%-fn%>')">
<i class="fas fa-plus" title="Add"></i>
</button><%_
} else { %>
<div>Not supported yet.</div><%_
}
} %>
</div>
<div class="<%-clearCol%>">
<div class="pointer" (click)="clearValueFromDetail('<%-fn%>')"
*ngIf="checkValueDefinedFromDetail('<%-fn%>')"><i class="fas fa-times-circle" title="Clear"></i></div>
</div>
</div>
</div>