@pega/dx-component-builder-sdk/tests/assets/sdk-a/components/create/override-sdk/template/case-view/case-view.component.html

Utility for building custom UI components

<div class="psdk-case-view" id="case-view">
  <div class="psdk-case-view-info">
    <mat-toolbar color="primary" class="psdk-case-view-toolbar">
      <mat-toolbar-row style="padding-left: 1rem">
        <div class="psdk-case-icon-div">
          <img class="psdk-case-svg-icon" src="{{ svgCase$ }}" />
        </div>
        <div class="psdk-case-view-heading">
          <div>
            <h1 id="case-name">{{ heading$ }}</h1>
          </div>
          <div id="current-caseID" [hidden]="true">{{ currentCaseID }}</div>
          <div class="psdk-case-view-heading-id" id="caseId">{{ id$ }}</div>
        </div>
      </mat-toolbar-row>
    </mat-toolbar>

    <div class="psdk-case-view-buttons">
      <button *ngIf="editAction" mat-raised-button color="secondary" (click)="_editClick()">{{ localizedVal('Edit', localeCategory) }}</button>
      <button mat-raised-button color="secondary" [matMenuTriggerFor]="actionMenu">{{ localizedVal('Actions...', localeCategory) }}</button>
      <mat-menu #actionMenu="matMenu" overlapTrigger="false">
        <ng-container *ngFor="let action of arAvailableActions$">
          <button mat-menu-item (click)="_menuActionClick(action)">
            {{ localizedVal(action.name, '', localeKey) }}
          </button>
        </ng-container>
        <ng-container *ngFor="let process of arAvailabeProcesses$">
          <button mat-menu-item (click)="_menuProcessClick(process)">
            {{ process.name }}
          </button>
        </ng-container>
      </mat-menu>
    </div>

    <div class="psdk-case-view-divider"></div>

    <div class="psdk-case-view-summary">
      <component-mapper name="CaseSummary" [props]="{ pConn$: caseSummaryPConn$ }"></component-mapper>
    </div>

    <component-mapper
      *ngIf="caseTabs$.length > 1"
      name="VerticalTabs"
      [props]="{ tabConfig$: caseTabs$ }"
      [parent]="this"
      [outputEvents]="{ tabClick: onTabClick }"
    ></component-mapper>
  </div>
  <div class="psdk-case-view-main">
    <div>
      <div *ngFor="let kid of arChildren$">
        <div
          *ngIf="
            kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name.toLowerCase() == 'stages'
          "
        >
          <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
        </div>
      </div>
    </div>

    <div *ngFor="let kid of arChildren$">
      <div
        *ngIf="kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name.toLowerCase() == 'todo'"
      >
        <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
      </div>
    </div>

    <div *ngFor="let kid of arChildren$">
      <div *ngIf="kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name == 'Main'">
        <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
      </div>
    </div>

    <div>
      <component-mapper name="DeferLoad" [props]="{ pConn$, loadData$: tabData$, name: tabData$?.config?.name }"></component-mapper>
    </div>
  </div>
  <div>
    <div *ngIf="arChildren$" class="psdk-case-view-utilities">
      <div *ngFor="let kid of arChildren$">
        <div *ngIf="kid.getPConnect().getRawMetadata()?.type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata()?.name == 'Utilities'">
          <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
        </div>
      </div>
    </div>
  </div>
</div>