@pega/dx-component-builder-sdk/tests/assets/sdk-a/components/createAll/override-sdk/template/simple-table-manual/simple-table-manual.component.html

Utility for building custom UI components

<ng-container *ngIf="bVisible$">
  <div class="simple-table-wrapper">
    <h3 *ngIf="label" className="label" style="font-weight: bold">
      {{ label }} <span class="results-count">{{ getResultsText() }}</span>
    </h3>
    <table *ngIf="readOnlyMode || allowEditingInModal" mat-table [dataSource]="elementsData" class="mat-elevation-z8" id="readonly-table" matSort>
      <ng-container *ngFor="let dCol of processedFields; let i = index" [matColumnDef]="dCol.config.name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header (click)="_headerSortClick($event, dCol)" arrowPosition="before">
          <div>{{ dCol.config.label }}</div>
          <div class="psdk-mat-header-filter">
            <img class="psdk-filter-svg-icon" name="filterOnIcon" />
          </div>
          <div (click)="$event.stopPropagation()">
            <button mat-icon-button [matMenuTriggerFor]="groupMenu">
              <img class="psdk-list-view-svg-icon" src="{{ menuSvgIcon$ }}" />
            </button>
            <mat-menu #groupMenu>
              <button mat-menu-item (click)="_groupBy($event, dCol)">
                <img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Group By</span>
              </button>
              <button *ngIf="_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_unGroupBy($event, dCol)">
                <img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Ungroup</span>
              </button>
              <button mat-menu-item (click)="_filter($event, dCol)">
                <img class="psdk-list-view-svg-icon" src="{{ filterSvgIcon$ }}" /><span>Filter</span>
              </button>
            </mat-menu>
          </div>
        </th>
        <td mat-cell *matCellDef="let element">
          <component-mapper
            [name]="element[i].getPConnect().getComponentName()"
            [props]="{
              pConn$: element[i].getPConnect(),
              formGroup$: formGroup$
            }"
            errorMsg="Table wants component not yet available: {{ element[i].getPConnect().getComponentName() }}"
          ></component-mapper>
        </td>
      </ng-container>
      <ng-container matColumnDef="DeleteIcon">
        <div *ngIf="allowEditingInModal">
          <th mat-header-cell *matHeaderCellDef></th>
          <td mat-cell *matCellDef="let element; index as j">
            <div class="header-icon">
              <button mat-icon-button [matMenuTriggerFor]="utilityMenu">
                <img class="psdk-utility-card-actions-svg-icon" src="{{ settingsSvgIcon$ }}" />
              </button>
              <mat-menu #utilityMenu="matMenu" overlapTrigger="false">
                <button mat-menu-item (click)="editRecord(element, j)">Edit</button>
                <button mat-menu-item (click)="deleteRecord(j)">Delete</button>
              </mat-menu>
            </div>
          </td>
        </div>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
      <tr class="mat-row psdk-no-records" *matNoDataRow>
        <td id="no-records" class="mat-cell" [attr.colspan]="displayedColumns.length">
          {{ utils.getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.') }}
        </td>
      </tr>
    </table>
    <table *ngIf="editableMode && !allowEditingInModal" mat-table [dataSource]="elementsData" class="mat-elevation-z8" id="editable-table">
      <ng-container *ngFor="let dCol of fieldDefs; let i = index">
        <ng-container *ngIf="dCol.name != 'DeleteIcon'" [matColumnDef]="dCol.name">
          <th mat-header-cell *matHeaderCellDef class="psdk-mat-header">{{ dCol.label }}</th>
          <td mat-cell *matCellDef="let element">
            <component-mapper
              [name]="element[i].getPConnect().getComponentName()"
              [props]="{
                pConn$: element[i].getPConnect(),
                formGroup$: formGroup$
              }"
              errorMsg="Table wants component not yet available: {{ element[i].getPConnect().getComponentName() }}"
            ></component-mapper>
          </td>
        </ng-container>
      </ng-container>
      <ng-container matColumnDef="DeleteIcon">
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let element; index as j">
          <button id="delete-button" mat-icon-button (click)="deleteRecord(j)">
            <img class="psdk-utility-card-action-svg-icon" src="{{ menuIconOverride$ }}" />
          </button>
        </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
      <tr class="mat-row psdk-no-records" *matNoDataRow>
        <td id="no-records" class="mat-cell" [attr.colspan]="displayedColumns.length">
          {{ utils.getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.') }}
        </td>
      </tr>
    </table>
  </div>
  <button *ngIf="showAddRowButton" mat-button color="primary" style="font-size: 16px" (click)="addRecord()">
    + {{ localizedVal('Add', localeCategory) }}
  </button>
</ng-container>

<!-- pop overs for filters-->
<div *ngIf="bShowFilterPopover$" class="psdk-dialog-background">
  <div class="psdk-modal-file-top">
    <h4>
      Filter:<b> {{ filterContainsLabel$ }}</b>
    </h4>
    <div *ngIf="bContains$">
      <mat-form-field class="psdk-full-width">
        <mat-select [value]="filterContainsType$" (selectionChange)="_filterContainsType($event)">
          <mat-option value="contains">Contains</mat-option>
          <mat-option value="equals">Equals</mat-option>
          <mat-option value="startswith">Starts with</mat-option>
        </mat-select>
      </mat-form-field>

      <mat-form-field class="psdk-full-width">
        <input matInput type="text" [value]="filterContainsValue$" (change)="_filterContainsValue($event)" />
      </mat-form-field>
    </div>

    <div *ngIf="bDateTime$">
      <mat-form-field class="psdk-full-width">
        <mat-select [value]="filterContainsType$" (selectionChange)="_filterContainsType($event)">
          <mat-option value="notequal">is not equal to</mat-option>
          <mat-option value="after">after</mat-option>
          <mat-option value="before">before</mat-option>
          <mat-option value="null">is null</mat-option>
          <mat-option value="notnull">is not null</mat-option>
        </mat-select>
      </mat-form-field>

      <mat-form-field *ngIf="bIsDate$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'" class="psdk-full-width">
        <mat-label>Date</mat-label>
        <input
          matInput
          #dateInput
          [matDatepicker]="pegadate"
          type="text"
          [value]="filterContainsValue$"
          (dateChange)="_filterContainsDateValue($event, dateInput.value)"
        />
        <mat-datepicker-toggle matSuffix [for]="pegadate"></mat-datepicker-toggle>
        <mat-datepicker #pegadate [startAt]="filterContainsValue$"></mat-datepicker>
      </mat-form-field>

      <mat-form-field *ngIf="bIsDateTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'" class="psdk-full-width">
        <mat-label>Date time</mat-label>
        <input matInput type="datetime-local" [value]="filterContainsValue$" (change)="_filterContainsDateTimeValue($event)" />
      </mat-form-field>

      <mat-form-field *ngIf="bIsTime$ && filterContainsType$ !== 'null' && filterContainsType$ != 'notnull'" class="psdk-full-width">
        <mat-label>Time</mat-label>
        <input matInput type="time" [value]="filterContainsValue$" (change)="_filterContainsTimeValue($event)" />
      </mat-form-field>
    </div>

    <component-mapper
      name="ActionButtons"
      [props]="{ arMainButtons$: arFilterMainButtons$, arSecondaryButtons$: arFilterSecondaryButtons$ }"
      [parent]="this"
      [outputEvents]="{ actionButtonClick: _onFilterActionButtonClick }"
    ></component-mapper>
  </div>
</div>