nomulus/console-webapp/src/app/domains/domainList.component.html

<app-selected-registrar-wrapper>
  <div class="console-app-domains">
    <h1 class="mat-headline-4">Domains</h1>

    <div
      class="console-app-domains__actions-wrapper"
      [hidden]="!domainListService.activeActionComponent"
    >
      <ng-container
        v-if="domainListService.activeActionComponent"
        *ngComponentOutlet="domainListService.activeActionComponent"
      >
      </ng-container>
    </div>

    @if (!isLoading && totalResults == 0) {
    <div class="console-app__empty-domains">
      <h1>
        <mat-icon class="console-app__empty-domains-icon secondary-text"
          >apps_outage</mat-icon
        >
      </h1>
      <h1>No domains found</h1>
    </div>
    } @else {
    <mat-menu #actions="matMenu">
      <ng-template matMenuContent let-domainName="domainName">
        <button mat-menu-item (click)="openRegistryLock(domainName)">
          <mat-icon>key</mat-icon>
          <span>Registry Lock</span>
        </button>
      </ng-template>
    </mat-menu>
    <div
      class="console-app__domains-table-parent"
      [hidden]="domainListService.activeActionComponent"
    >
      <div class="console-app__scrollable-wrapper">
        <div class="console-app__scrollable">
          @if (isLoading) {
          <div class="console-app__domains-spinner">
            <mat-spinner />
          </div>
          }
          <a
            mat-stroked-button
            color="primary"
            href="/console-api/dum-download?registrarId={{
              registrarService.registrarId()
            }}"
            class="console-app-domains__download"
          >
            <mat-icon>download</mat-icon>
            Download domains (.csv)
          </a>

          <mat-form-field class="console-app__domains-filter">
            <mat-label>Filter</mat-label>
            <input
              type="search"
              matInput
              [(ngModel)]="searchTerm"
              (ngModelChange)="sendInput()"
              #input
            />
          </mat-form-field>

          <mat-table
            [dataSource]="dataSource"
            class="mat-elevation-z0"
            class="console-app__domains-table"
          >
            <ng-container matColumnDef="domainName">
              <mat-header-cell *matHeaderCellDef>Domain Name</mat-header-cell>
              <mat-cell *matCellDef="let element">{{
                element.domainName
              }}</mat-cell>
            </ng-container>

            <ng-container matColumnDef="creationTime">
              <mat-header-cell *matHeaderCellDef>Creation Time</mat-header-cell>
              <mat-cell *matCellDef="let element">
                {{ element.creationTime.creationTime }}
              </mat-cell>
            </ng-container>

            <ng-container matColumnDef="registrationExpirationTime">
              <mat-header-cell *matHeaderCellDef
                >Expiration Time</mat-header-cell
              >
              <mat-cell *matCellDef="let element">
                {{ element.registrationExpirationTime }}
              </mat-cell>
            </ng-container>

            <ng-container matColumnDef="statuses">
              <mat-header-cell *matHeaderCellDef>Statuses</mat-header-cell>
              <mat-cell *matCellDef="let element">
                <span>{{ element.statuses?.join(", ") }}</span>
              </mat-cell>
            </ng-container>

            <ng-container matColumnDef="registryLock">
              <mat-header-cell *matHeaderCellDef
                >Registry-Locked</mat-header-cell
              >
              <mat-cell *matCellDef="let element">{{
                isDomainLocked(element.domainName)
              }}</mat-cell>
            </ng-container>

            <ng-container matColumnDef="actions">
              <mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
              <mat-cell *matCellDef="let element">
                <button
                  mat-icon-button
                  [matMenuTriggerFor]="actions"
                  [matMenuTriggerData]="{ domainName: element.domainName }"
                  aria-label="Domain actions"
                >
                  <mat-icon>more_horiz</mat-icon>
                </button>
              </mat-cell>
            </ng-container>

            <mat-header-row
              *matHeaderRowDef="displayedColumns"
            ></mat-header-row>
            <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>

            <!-- Row shown when there is no matching data. -->
            <mat-row *matNoDataRow>
              <mat-cell colspan="6">No domains found</mat-cell>
            </mat-row>
          </mat-table>
          <mat-paginator
            [length]="totalResults"
            [pageIndex]="pageNumber"
            [pageSize]="resultsPerPage"
            [pageSizeOptions]="[10, 25, 50, 100, 500]"
            (page)="onPageChange($event)"
            aria-label="Select page of domain results"
            showFirstLastButtons
          ></mat-paginator>
        </div>
      </div>
    </div>
    }
  </div>
</app-selected-registrar-wrapper>