@hicoder/angular-cli/templates/widgets/detail/gallerySideIntro/gallerySideIntro.component.html

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

<div class="detail" *ngIf="detail">
	<div>
		<%- include('../../../schema-detail.d.actions.html') %>
	</div>
	<div class="row flex-wrap align-items-center">
		<%_
		let field0 = detailView[0]; let fn0 = field0.fieldName; let ft0 = field0.type;
		let field1 = detailView[1]; let fn1 = field1.fieldName; let ft1 = field1.type;
		let field2 = detailView[2]; let fn2 = field2.fieldName; let ft2 = field2.type;
		let field, fn, ft, fieldObj;%>
		<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['picture']">

						<lib-mdds-picture-display [downloadUrl]="detail['<%-fn0%>']" [isLarge]="true"
							[style]="{img: {'object-fit': 'contain', width: '100%'}}">
						</lib-mdds-picture-display>
					</div>
				</div>
			</div>
		</div>
		<div class="intro-block">
			<div class="grid-picture-title grid-picture-title-large"
				[ngStyle]="style['title']">
				<%
				field = field1; fn = fn1; ft = ft1;
				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 = field2; fn = fn2; ft = ft2;
				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(3);
			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="me-3 d-flex flex-wrap" [ngStyle]="style['<%-fn%>']"><%_ if (field.showDisplayName) {%>
				<div class="field-label me-2" [ngStyle]="style['<%-fn%>-label']"><%-field.displayName%>:</div><%}%>
				<div [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>