feat: implement unit detail page

.prettierignore

@@ -2,7 +2,7 @@
 browserslist
 LICENSE
 coverage
-app
+app/*
 package-lock.json
 .*
 *.ico

angular.json

@@ -31,6 +31,10 @@
             "scripts": []
           },
           "configurations": {
+            "de": {
+              "i18nLocale": "de",
+              "i18nFile": "src/locale/xlf2/messages.de.xlf"
+            },
             "production": {
               "fileReplacements": [
                 {
@@ -67,6 +71,9 @@
             "browserTarget": "angular-t9n:build"
           },
           "configurations": {
+            "de": {
+              "browserTarget": "angular-t9n:build:de"
+            },
             "production": {
               "browserTarget": "angular-t9n:build:production"
             }

src/app/target/core/translation-target.service.ts

@@ -1,9 +1,21 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
+import { AbstractControl } from '@angular/forms';
 import { SortDirection } from '@angular/material/sort';
 import { ActivatedRoute } from '@angular/router';
 import { Observable } from 'rxjs';
-import { filter, first, map, switchMap } from 'rxjs/operators';
+import {
+  debounceTime,
+  distinctUntilChanged,
+  filter,
+  first,
+  map,
+  skip,
+  startWith,
+  switchMap,
+  takeUntil,
+  tap
+} from 'rxjs/operators';
 
 import { PaginationResponse, TargetResponse, TranslationTargetUnitResponse } from '../../../models';
 import { TranslationService } from '../../core/translation.service';
@@ -49,6 +61,44 @@ export class TranslationTargetService {
     );
   }
 
+  updateUnitOnChange(
+    unit: TranslationTargetUnitResponse,
+    controls: { target: AbstractControl; state: AbstractControl },
+    until: Observable<void>
+  ) {
+    // The startWith, skip combination is necessary to deal with an IE11 bug
+    controls.target.valueChanges
+      .pipe(
+        takeUntil(until),
+        startWith(controls.target.value),
+        debounceTime(500),
+        distinctUntilChanged(),
+        skip(1),
+        tap(target =>
+          target
+            ? controls.state.enable({ emitEvent: false })
+            : controls.state.disable({ emitEvent: false })
+        ),
+        switchMap(target => this.updateUnit({ ...unit, target, state: controls.state.value }))
+      )
+      .subscribe(r => controls.state.setValue(r.state, { emitEvent: false }));
+    controls.state.valueChanges
+      .pipe(
+        takeUntil(until),
+        startWith(controls.state.value),
+        distinctUntilChanged(),
+        skip(1),
+        switchMap(state =>
+          this.updateUnit({
+            ...unit,
+            target: controls.target.value,
+            state
+          })
+        )
+      )
+      .subscribe();
+  }
+
   updateUnit(unit: Partial<TranslationTargetUnitResponse>) {
     if (unit.target === '' && unit.state !== 'initial') {
       unit.state = 'initial';

src/app/target/core/xlf-element-validator.ts

@@ -0,0 +1,20 @@
+import { AbstractControl, ValidatorFn } from '@angular/forms';
+
+const parser = new DOMParser();
+
+export function xlfElementValidator(source: string): ValidatorFn {
+  const doc = parser.parseFromString(`<root>${source}</root>`, 'text/xml');
+  const placeholders = Array.from<Element>(doc.documentElement.childNodes as any)
+    .filter(n => n.nodeType !== doc.TEXT_NODE)
+    .map(p => p.outerHTML);
+  return !placeholders.length ||
+    source.startsWith('{VAR_PLURAL') ||
+    source.startsWith('{VAR_SELECT')
+    ? () => null
+    : (control: AbstractControl) => {
+        const value: string = control.value;
+        return typeof value !== 'string' || !value || placeholders.every(p => value.indexOf(p) >= 0)
+          ? null
+          : { placeholders };
+      };
+}

src/app/target/orphans/orphans.component.html

@@ -44,7 +44,7 @@
         mat-cell
         [matTooltip]="row.locations?.join('\n')"
         [matTooltipDisabled]="!row.locations?.length"
-        matTooltipClass="tooltip-locations"
+        matTooltipClass="tooltip-linebreak"
         *matCellDef="let row"
       >
         {{ row.id }}

src/app/target/target-routing.module.ts

@@ -6,6 +6,7 @@ import { ImportComponent } from './import/import.component';
 import { OrphansComponent } from './orphans/orphans.component';
 import { TargetComponent } from './target/target.component';
 import { TranslateComponent } from './translate/translate.component';
+import { UnitComponent } from './unit/unit.component';
 
 const routes: Routes = [
   {
@@ -16,6 +17,10 @@ const routes: Routes = [
         path: '',
         component: TranslateComponent
       },
+      {
+        path: 'unit/:unitId',
+        component: UnitComponent
+      },
       {
         path: 'import',
         component: ImportComponent

src/app/target/target.module.ts

@@ -23,14 +23,16 @@ import { OrphansComponent } from './orphans/orphans.component';
 import { TargetRoutingModule } from './target-routing.module';
 import { TargetComponent } from './target/target.component';
 import { TranslateComponent } from './translate/translate.component';
+import { UnitComponent } from './unit/unit.component';
 
 @NgModule({
   declarations: [
     TranslateComponent,
     ExportComponent,
     ImportComponent,
     TargetComponent,
-    OrphansComponent
+    OrphansComponent,
+    UnitComponent
   ],
   imports: [
     CommonModule,

src/app/target/translate/translate-datasource.ts

@@ -3,19 +3,11 @@ import { FormControl, FormGroup } from '@angular/forms';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { BehaviorSubject, merge, Observable, Subject } from 'rxjs';
-import {
-  debounceTime,
-  distinctUntilChanged,
-  map,
-  skip,
-  startWith,
-  switchMap,
-  takeUntil,
-  tap
-} from 'rxjs/operators';
+import { debounceTime, map, startWith, switchMap, tap } from 'rxjs/operators';
 
 import { FormTargetUnit } from '../../../models';
 import { TranslationTargetService } from '../core/translation-target.service';
+import { xlfElementValidator } from '../core/xlf-element-validator';
 
 export class TranslateDataSource extends DataSource<FormTargetUnit> {
   totalEntries: Observable<number>;
@@ -56,46 +48,11 @@ export class TranslateDataSource extends DataSource<FormTargetUnit> {
         unitPage._embedded!.entries.map(u => {
           const unit: FormTargetUnit = {
             ...u,
-            target: new FormControl(u.target),
-            state: new FormControl(u.state)
+            target: new FormControl(u.target, xlfElementValidator(u.source)),
+            state: new FormControl({ value: u.state, disabled: !u.target })
           };
-          if (!u.target) {
-            unit.state.disable();
-          }
-
-          // The startWith, skip combination is necessary to deal with an IE11 bug
-          unit.target.valueChanges
-            .pipe(
-              takeUntil(this._destroy),
-              startWith(unit.target.value),
-              debounceTime(500),
-              distinctUntilChanged(),
-              skip(1),
-              tap(target =>
-                target
-                  ? unit.state.enable({ emitEvent: false })
-                  : unit.state.disable({ emitEvent: false })
-              ),
-              switchMap(target =>
-                this._translationTargetService.updateUnit({ ...u, target, state: unit.state.value })
-              )
-            )
-            .subscribe(r => unit.state.setValue(r.state, { emitEvent: false }));
-          unit.state.valueChanges
-            .pipe(
-              takeUntil(this._destroy),
-              startWith(unit.state.value),
-              distinctUntilChanged(),
-              skip(1),
-              switchMap(state =>
-                this._translationTargetService.updateUnit({
-                  ...u,
-                  target: unit.target.value,
-                  state
-                })
-              )
-            )
-            .subscribe();
+          this._translationTargetService.updateUnitOnChange(u, unit, this._destroy);
+          unit.target.markAsTouched();
           return unit;
         })
       )

src/app/target/translate/translate.component.html

@@ -6,7 +6,7 @@
         mat-cell
         [matTooltip]="row.locations?.join('\n')"
         [matTooltipDisabled]="!row.locations?.length"
-        matTooltipClass="tooltip-locations"
+        matTooltipClass="tooltip-linebreak"
         *matCellDef="let row"
       >
         {{ row.id }}
@@ -34,6 +34,12 @@
             placeholder="Translation"
             [formControl]="row.target"
           ></textarea>
+          <mat-hint *ngIf="row.target.errors?.placeholders as placeholders"
+            >Expected {{ placeholders.length }} placeholders
+            <mat-icon [matTooltip]="placeholders.join('\n')" matTooltipClass="tooltip-linebreak"
+              >info</mat-icon
+            >
+          </mat-hint>
         </mat-form-field>
       </td>
     </ng-container>
@@ -50,6 +56,18 @@
         </mat-form-field>
       </td>
     </ng-container>
+    <ng-container matColumnDef="unit-link">
+      <th mat-header-cell *matHeaderCellDef></th>
+      <td mat-cell *matCellDef="let row">
+        <a
+          [routerLink]="['./unit', row.id, queryParams | async]"
+          mat-icon-button
+          matTooltip="Edit unit"
+        >
+          <mat-icon>edit</mat-icon>
+        </a>
+      </td>
+    </ng-container>
 
     <ng-container matColumnDef="id-filter">
       <th mat-header-cell *matHeaderCellDef>
@@ -102,7 +120,10 @@
 
     <tr
       mat-header-row
-      *matHeaderRowDef="['id', 'description', 'meaning', 'source', 'target', 'state']; sticky: true"
+      *matHeaderRowDef="
+        ['id', 'description', 'meaning', 'source', 'target', 'state', 'unit-link'];
+        sticky: true
+      "
     ></tr>
     <tr
       mat-header-row
@@ -120,7 +141,10 @@
     ></tr>
     <tr
       mat-row
-      *matRowDef="let row; columns: ['id', 'description', 'meaning', 'source', 'target', 'state']"
+      *matRowDef="
+        let row;
+        columns: ['id', 'description', 'meaning', 'source', 'target', 'state', 'unit-link']
+      "
     ></tr>
   </table>
 

src/app/target/translate/translate.component.scss

@@ -28,6 +28,10 @@ table {
     &.mat-column-state {
       width: 10rem;
     }
+
+    &.mat-column-unit-link {
+      width: 2rem;
+    }
   }
 
   mat-form-field {

src/app/target/translate/translate.component.ts

@@ -29,6 +29,7 @@ export class TranslateComponent implements AfterViewInit, OnDestroy {
   @ViewChild(MatSort) sort!: MatSort;
   @ViewChild(MatTable) table!: MatTable<FormTargetUnit>;
   dataSource!: TranslateDataSource;
+  queryParams: Observable<Params>;
   filter: FormGroup;
   private _paginationHelper: PaginationHelper;
   private _destroy = new Subject<void>();
@@ -40,6 +41,7 @@ export class TranslateComponent implements AfterViewInit, OnDestroy {
     formBuilder: FormBuilder
   ) {
     this._paginationHelper = new PaginationHelper(this, this._route, this._router);
+    this.queryParams = this._route.queryParams;
     this.filter = formBuilder.group({
       id: '',
       description: '',

src/app/target/unit/unit.component.html

@@ -0,0 +1,56 @@
+<h2>{{ (unit | async)?.id }}</h2>
+
+<ng-container *ngIf="form | async as formGroup">
+  <form [formGroup]="formGroup">
+    <mat-form-field appearance="standard">
+      <mat-label>Description</mat-label>
+      <input matInput formControlName="description" />
+    </mat-form-field>
+
+    <mat-form-field appearance="standard">
+      <mat-label>Meaning</mat-label>
+      <input matInput formControlName="meaning" />
+    </mat-form-field>
+
+    <mat-form-field appearance="standard">
+      <mat-label>Source</mat-label>
+      <textarea matInput formControlName="source" cdkTextareaAutosize></textarea>
+      <button
+        type="button"
+        mat-icon-button
+        matSuffix
+        matTooltip="Copy source to clipboard"
+        (click)="copySourceToClipboard(formGroup.get('source').value)"
+      >
+        <mat-icon>file_copy</mat-icon>
+      </button>
+    </mat-form-field>
+
+    <mat-form-field appearance="standard">
+      <mat-label>Target</mat-label>
+      <textarea matInput formControlName="target" cdkTextareaAutosize></textarea>
+      <mat-hint *ngIf="formGroup.get('target').errors?.placeholders as placeholders"
+        >Expected {{ placeholders.length }} placeholders
+        <mat-icon [matTooltip]="placeholders.join('\n')" matTooltipClass="tooltip-linebreak"
+          >info</mat-icon
+        >
+      </mat-hint>
+    </mat-form-field>
+
+    <mat-form-field appearance="standard">
+      <mat-label>State</mat-label>
+      <mat-select formControlName="state">
+        <mat-option *ngIf="formGroup.get('state').value === 'initial'" value="initial"
+          >Initial</mat-option
+        >
+        <mat-option value="translated">Translated</mat-option>
+        <mat-option value="reviewed">Reviewed</mat-option>
+        <mat-option value="final">Final</mat-option>
+      </mat-select>
+    </mat-form-field>
+  </form>
+</ng-container>
+
+<a mat-raised-button color="primary" routerLink="../.." [queryParams]="params | async">
+  <mat-icon>keyboard_backspace</mat-icon> Back
+</a>