angular-t9n/src/app/target/orphan/orphan.component.html

A translation tool for Angular i18n

<h2>{{ (orphan | async)?.id }}</h2>

<dl *ngIf="orphan | async as orphan">
  <dt i18n>Description</dt>
  <dd>{{ orphan.description || '-' }}</dd>

  <dt i18n>Meaning</dt>
  <dd>{{ orphan.meaning || '-' }}</dd>

  <dt i18n>Source</dt>
  <dd class="source">{{ orphan.source }}</dd>

  <dt i18n>Target</dt>
  <dd class="target">{{ orphan.target }}</dd>

  <dt i18n>State</dt>
  <dd>{{ orphan.state | titlecase }}</dd>
</dl>

<div class="mat-elevation-z1">
  <table
    mat-table
    matSort
    i18n-aria-label
    aria-label="Similar units"
    [dataSource]="similar | async"
  >
    <ng-container matColumnDef="distance">
      <th
        mat-header-cell
        *matHeaderCellDef
        i18n-matTooltip
        matTooltip="Distance according to the levenshtein algorithm"
        i18n
      >
        Distance
      </th>
      <td
        mat-cell
        *matCellDef="let row"
        i18n-matTooltip
        matTooltip="Distance according to the levenshtein algorithm"
      >
        {{ row.distance }}
      </td>
    </ng-container>
    <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="target">
      <th mat-header-cell *matHeaderCellDef mat-sort-header i18n>Target</th>
      <td mat-cell *matCellDef="let row">{{ row.target }}</td>
    </ng-container>
    <ng-container matColumnDef="state">
      <th mat-header-cell *matHeaderCellDef mat-sort-header i18n>State</th>
      <td mat-cell *matCellDef="let row">{{ row.state | titlecase }}</td>
    </ng-container>
    <ng-container matColumnDef="action">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let row">
        <button
          type="button"
          mat-icon-button
          i18n-matTooltip
          matTooltip="Migrate translation and state to this unit and remove this orphan."
          (click)="migrate(row)"
        >
          <mat-icon>input</mat-icon>
        </button>
      </td>
    </ng-container>

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

<div class="actions">
  <a mat-raised-button color="primary" routerLink=".." [queryParams]="params | async">
    <mat-icon>keyboard_backspace</mat-icon> <ng-container i18n>Back</ng-container>
  </a>

  <button type="button" mat-raised-button color="warn" (click)="delete()" i18n>
    Delete orphan
  </button>
</div>