@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
100 lines (96 loc) • 4.03 kB
HTML
<div class="detail" *ngIf="detail">
<div>
<%- include('../../../schema-detail.d.actions.html') %>
</div>
<div class="row flex-wrap align-items-center justify-content-center">
<%_
let fieldMainPic = detailView[0]; let fn0 = fieldMainPic.fieldName;
let fieldMP = detailView[1]; let fnMP = fieldMP.fieldName;
let fieldTitle = detailView[2];
let fieldSubtitle = detailView[3];
let field, fn, ft, fieldObj;%>
<div class="d-flex align-items-center">
<div class="d-flex flex-column">
<div class="grid-head-picture grid-head-picture-column-small"
[ngClass]="{'picure-selected': !selectedPictureLink || selectedPictureLink === detail['<%-fn0%>']}"
[ngStyle]="style['small-picture']"
(click)="selectPicture(detail['<%-fn0%>'])">
<lib-mdds-picture-display [downloadUrl]="detail['<%-fn0%>']" [isLarge]="false"
[style]="{img: {'object-fit': 'contain', width: '100%'}}">
</lib-mdds-picture-display>
</div>
<ng-template [ngIf]="detail['<%-fnMP%>'] && detail['<%-fnMP%>']['selection']">
<div class="grid-head-picture grid-head-picture-column-small"
*ngFor="let ele of detail['<%-fieldMP.fieldName%>']['selection']"
[ngClass]="{'picure-selected': selectedPictureLink === ele}"
[ngStyle]="style['small-picture']"
(click)="selectPicture(ele)">
<lib-mdds-picture-display [downloadUrl]="ele" [isLarge]="false"
[style]="{img: {'object-fit': 'contain', width: '100%'}}">
</lib-mdds-picture-display>
</div>
</ng-template>
</div>
<div class="grid-block grid-block-large">
<div class="text-left h-100">
<div class="grid-fields">
<div class="grid-head-picture grid-head-picture-large"
[ngStyle]="style['large-picture']">
<lib-mdds-picture-display [downloadUrl]="selectedPictureLink || detail['<%-fn0%>']" [isLarge]="true"
[style]="{img: {'object-fit': 'contain', width: '100%'}}">
</lib-mdds-picture-display>
</div>
</div>
</div>
</div>
</div>
<div class="intro-block">
<div class="grid-picture-title grid-picture-title-large"
[ngStyle]="style['title']">
<%
field = fieldTitle; fn = fieldTitle.fieldName; ft = fieldTitle.type;
fieldObj = {field, fn, ft, ref_link: true,};
%>
<%- include(`/ui/${uiFramework}/${uiDesign}/schema-display.field-wrap.html`, fieldObj); %>
</div>
<div class="grid-picture-subtitle grid-picture-subtitle-large"
[ngStyle]="style['intro']">
<%
field = fieldSubtitle; fn = fieldSubtitle.fieldName; ft = fieldSubtitle.type;
fieldObj = {field, fn, ft, ref_link: true,};
%>
<%- include(`/ui/${uiFramework}/${uiDesign}/schema-display.field-wrap.html`, fieldObj); %>
</div><%if (detailView.length > 3) {%>
<hr/><%}%><%_
const otherFields = detailView.slice(4);
for (let [index, field] of otherFields.entries()){
if (field.hidden) continue;
let fn = field.fieldName; let ft = field.type;
let fieldObj = {field, fn, ft, ref_link: true,};
let fieldHasValue = `fieldHasValue(detail['${fn}'])`;
if (field.exclusiveRequired) {
let values = [];
for (let fld of field.formGroup) {
values.push(`fieldHasValue(detail['${fld.fieldName}'])`);
}
fieldHasValue = values.join(' || ');
}
%>
<div <%_ if (ft !== 'AngularSelector') {%> *ngIf="<%-fieldHasValue%>"<%}%>
<% if (field.meta.directive) {
%><%- include(`/ui/${uiFramework}/schema-display.field.directive.html`, fieldObj); %><%
}%>
class="mx-1 d-flex flex-wrap" [ngStyle]="style['<%-fn%>']"><%_ if (field.showDisplayName) {%>
<div class="field-label me-2" [ngStyle]="style['<%-fn%>-label']">
<%-field.displayName%>:
</div><%}%>
<div class="" [ngStyle]="style['<%-fn%>-value']">
<%- include(`/ui/${uiFramework}/${uiDesign}/schema-display.field-wrap.html`, fieldObj); %>
</div>
</div><%_
}%>
</div>
</div>
<%- include('../../../schema-detail.d.pipeline.html') %>
<%- include('../../../schema-detail.d.ref.html') %>
</div>