@hicoder/angular-cli/templates/ui/angular/bootstrap/schema-display.list.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);
    let indexedFields = viewFields.filter(x => !x.picture && x.isIndexField);
    let otherFields = viewFields.filter(x => !x.picture && !x.isIndexField);
    let otherFieldsName = otherFields.map(x=>x.fieldName);
    for (let field of pictureFields){
      if (field.hidden) continue;
      if (listCategoryFieldsNotShown.includes(field.fieldName)) continue;
      let fn = field.fieldName; let ft = field.type;
      let fieldObj = {field, fn, ft, ref_link: true,};
      %>
      <div class="list-head-picture"><%- include(`/ui/${uiFramework}/${uiDesign}/schema-display.field-wrap.html`, fieldObj); %>
      </div>
    <%}%>
      <div class="list-body-fields">
        <h5><%
    for (let [index, field] of indexedFields.entries()){
        if (field.hidden) continue;
        if (listCategoryFieldsNotShown.includes(field.fieldName)) 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><%
    for (let fieldGrp of viewGrp) {
          let fieldGrpProcessed = fieldGrp.filter(x=> {
            return otherFieldsName.includes(x.fieldName) && !x.hidden && !listCategoryFieldsNotShown.includes(x.fieldName)
          });
          if (fieldGrpProcessed.length < 1) {
            continue;
          }%>
        <div><%
        for (let [index, field] of fieldGrpProcessed.entries()){
              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(' || ');
              }
          %><%
          if (field.ref) {%>
          <div *ngIf="referenceFieldsMap['<%-field.fieldName%>'] != parentItem"><%}%>
            <div <%_ if (ft !== 'AngularSelector') {%> *ngIf="<%-fieldHasValue%>"<%}%>
              <% if (field.meta.directive) {
                %><%- include(`/ui/${uiFramework}/schema-display.field.directive.html`, fieldObj); %><%
              }%>
              class="me-3 d-inline-flex flex-wrap"><%_ if (field.showDisplayName) {%>
              <div class="me-3"><label><%-field.displayName%>:</label></div><%}%>
              <div><%- include(`/ui/${uiFramework}/${uiDesign}/schema-display.field-wrap.html`, fieldObj); %>
              </div>
            </div><%
          if (field.ref) {%>
          </div><%}%><%_
        }%>
        </div><%_  
    }%>
        <div class="d-flex flex-row mt-1"><% if (includeSubDetail) {%>
          <div class="read-more me-5">More
            <span class="pointer" (click)="toggleShowDetailItem(i)">
              <i *ngIf="!detail.mddsShowDetail" class="fas fa-caret-down" title="More"></i>
              <i *ngIf="detail.mddsShowDetail" class="fas fa-caret-up" title="Less"></i>
            </span>
          </div><%}%><% if (cardHasLink) {%>
            <div class="read-more" (click)="onDetailLinkClicked(detail['_id'])">
              Detail <i class="far fa-arrow-alt-circle-right"></i>
            </div><%}%>
        </div><%_ if (includeSubDetail) {%>
        <div *ngIf="detail.mddsShowDetail" >
            <app-<%-schemaName%>-detail-sub [inputData]="detail['_id']"></app-<%-schemaName%>-detail-sub>
        </div><%}%>
      </div><%
  }%>