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

A translation tool for Angular i18n

<div class="mat-elevation-z8">
  <table mat-table matSort i18n-aria-label aria-label="Translation 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="target">
      <th mat-header-cell *matHeaderCellDef mat-sort-header i18n>Target</th>
      <td mat-cell *matCellDef="let row">
        <mat-form-field>
          <textarea
            matInput
            cdkTextareaAutosize
            placeholder="Translation"
            [formControl]="row.target"
          ></textarea>
        </mat-form-field>
      </td>
    </ng-container>
    <ng-container matColumnDef="state">
      <th mat-header-cell *matHeaderCellDef mat-sort-header i18n>State</th>
      <td mat-cell *matCellDef="let row">
        <mat-form-field>
          <mat-select [formControl]="row.state">
            <mat-option *ngIf="row.state.value === 'initial'" value="initial" i18n
              >Initial</mat-option
            >
            <mat-option value="translated" i18n>Translated</mat-option>
            <mat-option value="reviewed" i18n>Reviewed</mat-option>
            <mat-option value="final" i18n>Final</mat-option>
          </mat-select>
        </mat-form-field>
      </td>
    </ng-container>
    <ng-container matColumnDef="action">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let row">
        <a
          [routerLink]="['./unit', row.id, queryParams | async]"
          mat-icon-button
          i18n-matTooltip
          matTooltip="Edit unit"
        >
          <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>
    <ng-container matColumnDef="target-filter">
      <th mat-header-cell *matHeaderCellDef>
        <mat-form-field>
          <input matInput placeholder="Filter" [formControl]="filter.get('target')" />
        </mat-form-field>
      </th>
    </ng-container>
    <ng-container matColumnDef="state-filter">
      <th mat-header-cell *matHeaderCellDef>
        <mat-form-field>
          <mat-select [formControl]="filter.get('state')">
            <mat-option value=""></mat-option>
            <mat-option value="initial" i18n>Initial</mat-option>
            <mat-option value="translated" i18n>Translated</mat-option>
            <mat-option value="reviewed" i18n>Reviewed</mat-option>
            <mat-option value="final" i18n>Final</mat-option>
          </mat-select>
        </mat-form-field>
      </th>
    </ng-container>

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

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