@pega/dx-component-builder-sdk/tests/assets/sdk-a/components/createAll/override-sdk/widget/todo/todo.component.html

Utility for building custom UI components

<div class="psdk-todo">
  <div *ngIf="showTodoList$" class="psdk-todo-header">
    <div class="psdk-avatar">{{ this.currentUserInitials$ }}</div>
    <div id="worklist" class="psdk-todo-text">{{ headerText$ }}</div>
    <div class="psdk-assignment-count">{{ count }}</div>
  </div>
  <div *ngIf="showTodoList$" class="psdk-display-divider"></div>

  <div class="psdk-todo-assignments">
    <div *ngFor="let assignment of arAssignments$">
      <div class="psdk-todo-assignment">
        <div class="psdk-avatar">{{ this.currentUserInitials$ }}</div>
        <div class="psdk-todo-card">
          <div class="psdk-todo-assignment-title">{{ getAssignmentName(assignment) }}</div>
          <div class="psdk-todo-assignment-data">
            <div class="psdk-todo-assignment-task">
              {{ localizedVal('Task in', localeCategory) }}
              <button class="psdk-todo-id" style="cursor: pointer" (click)="clickGo(assignment)" *ngIf="!isConfirm || canPerform; else readOnlyText">
                {{ assignment.name }} {{ getID(assignment) }}
              </button>
              <ng-template #readOnlyText> {{ assignment.name }} {{ getID(assignment) }} </ng-template>
              <span *ngIf="assignment.status != undefined">
                &bull; <span class="psdk-todo-assignment-status">{{ assignment?.status }}</span>
              </span>
              &bull; {{ localizedVal('Urgency', localeCategory) }} {{ getPriority(assignment) }}
            </div>
          </div>
        </div>
        <div *ngIf="!isConfirm || canPerform" class="psdk-todo-assignment-action">
          <button mat-flat-button color="primary" (click)="clickGo(assignment)">{{ localizedVal('Go', localeCategory) }}</button>
        </div>
      </div>
      <div class="psdk-display-divider"></div>
    </div>
  </div>
</div>

<div *ngIf="count > 3">
  <div *ngIf="bShowMore$; else showLess" class="psdk-todo-show-more">
    <button mat-stroked-button (click)="_showMore()">{{ showMoreLocalizedValue === 'show_more' ? 'Show more' : showMoreLocalizedValue }}</button>
  </div>
  <ng-template #showLess>
    <div class="psdk-todo-show-more">
      <button mat-stroked-button (click)="_showLess()">{{ showlessLocalizedValue === 'show_less' ? 'Show less' : showlessLocalizedValue }}</button>
    </div>
  </ng-template>
</div>