@hicoder/angular-cli/templates/schema-display.detail.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

    <%_{
      let pictureFields = viewFields.filter(x => x.picture && x.type !== 'SchemaArray');
      let pictureFieldsName = pictureFields.map(x=>x.fieldName);
      let indexedFields = viewFields.filter(x => !x.picture && x.isIndexField);
      let indexedFieldsName = indexedFields.map(x=>x.fieldName);
      let otherFields = viewFields.filter(x => !pictureFieldsName.includes(x.fieldName) && !indexedFieldsName.includes(x.fieldName));
      let otherFieldsName = otherFields.map(x=>x.fieldName);
      
      if (pictureFields.length > 0 || indexedFields.length > 0){%>
      <div class="card-header grid-head"><%
      for (let field of pictureFields){
        if (field.hidden) continue;

        let fn = field.fieldName; let ft = field.type;
        let fieldObj = {field, fn, ft, ref_link: true,};
        %>
        <div class="grid-head-picture"><%- include(`/ui/${uiFramework}/${uiDesign}/schema-display.field-wrap.html`, fieldObj); %>
        </div><%
      }%>
        <div class="ms-1">
          <h5><%
      for (let [index, field] of indexedFields.entries()){
          if (field.hidden) continue;

          let fn = field.fieldName; let ft = field.type;
          let fieldObj = {field, fn, ft, ref_link: true,};
          %>
            <div class="me-1 d-inline-block">
              <%- include(`/ui/${uiFramework}/${uiDesign}/schema-display.field-wrap.html`, fieldObj); %>
            </div><%_
      }%>
          </h5>
        </div>
      </div><%}%>
      <div class="card-body"><%
      for (let fieldGrp of viewGrp) {
          let fieldGrpProcessed = fieldGrp.filter(x=>otherFieldsName.includes(x.fieldName) && !x.hidden);
          if (fieldGrpProcessed.length < 1) {
            continue;
          }
          let grpClass = `class="d-inline-flex flex-wrap mx-2"`;
          if (fieldGrpProcessed.length == 1) {
            grpClass = `class="d-flex flex-wrap mx-2"`;
          }
          %>
          <div><%for (let field of fieldGrpProcessed) {
            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); %><%
                }%>
                <%-grpClass%> style="min-width: 160px;"><%_ if (field.showDisplayName) {%>
                <div class="me-2"><label><%-field.displayName%>:</label></div><%}%>
                <div style="overflow-x: scroll;"><%- include(`/ui/${uiFramework}/${uiDesign}/schema-display.field-wrap.html`, fieldObj); %></div>
            </div><%}%>
          </div><%}%>
      </div><%
    }%>