angular-t9n/src/app/source-orphans/migrate/migrate.component.html

A translation tool for Angular i18n

<div class="mat-elevation-z8">
  <table mat-table matSort i18n-aria-label aria-label="Orphaned units" [dataSource]="dataSource">
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header i18n>Id</th>
      <td
        mat-cell
        [matTooltip]="row.locations?.join('\n')"
        [matTooltipDisabled]="!row.locations?.length"
        matTooltipClass="tooltip-linebreak"
        *matCellDef="let row"
      >
        {{ row.id }}
      </td>
    </ng-container>
    <ng-container matColumnDef="description">
      <th mat-header-cell *matHeaderCellDef mat-sort-header i18n>Description</th>
      <td mat-cell *matCellDef="let row">{{ row.description }}</td>
    </ng-container>
    <ng-container matColumnDef="meaning">
      <th mat-header-cell *matHeaderCellDef mat-sort-header i18n>Meaning</th>
      <td mat-cell *matCellDef="let row">{{ row.meaning }}</td>
    </ng-container>
    <ng-container matColumnDef="source">
      <th mat-header-cell *matHeaderCellDef mat-sort-header i18n>Source</th>
      <td mat-cell *matCellDef="let row">{{ row.source }}</td>
    </ng-container>
    <ng-container matColumnDef="action">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let row">
        <a
          [routerLink]="['./', row.id, queryParams | async]"
          mat-icon-button
          i18n-matTooltip
          matTooltip="Migrate orphan"
        >
          <mat-icon>edit</mat-icon>
        </a>
      </td>
    </ng-container>

    <ng-container matColumnDef="id-filter">
      <th mat-header-cell *matHeaderCellDef>
        <mat-form-field>
          <input matInput placeholder="Filter" [formControl]="filter.get('id')" />
        </mat-form-field>
      </th>
    </ng-container>
    <ng-container matColumnDef="description-filter">
      <th mat-header-cell *matHeaderCellDef>
        <mat-form-field>
          <input matInput placeholder="Filter" [formControl]="filter.get('description')" />
        </mat-form-field>
      </th>
    </ng-container>
    <ng-container matColumnDef="meaning-filter">
      <th mat-header-cell *matHeaderCellDef>
        <mat-form-field>
          <input matInput placeholder="Filter" [formControl]="filter.get('meaning')" />
        </mat-form-field>
      </th>
    </ng-container>
    <ng-container matColumnDef="source-filter">
      <th mat-header-cell *matHeaderCellDef>
        <mat-form-field>
          <input matInput placeholder="Filter" [formControl]="filter.get('source')" />
        </mat-form-field>
      </th>
    </ng-container>

    <tr
      mat-header-row
      *matHeaderRowDef="['id', 'description', 'meaning', 'source', 'action']; sticky: true"
    ></tr>
    <tr
      mat-header-row
      *matHeaderRowDef="
        ['id-filter', 'description-filter', 'meaning-filter', 'source-filter', 'action'];
        sticky: true
      "
    ></tr>
    <tr
      mat-row
      *matRowDef="let row; columns: ['id', 'description', 'meaning', 'source', 'action']"
    ></tr>
  </table>

  <mat-paginator
    [pageSize]="pageSize"
    [pageIndex]="pageIndex"
    [pageSizeOptions]="[25, 50, 100, 250]"
  >
  </mat-paginator>
</div>