fixes the-paperless-project#115

src-ui/src/app/app.module.ts

@@ -48,6 +48,7 @@ import { WidgetFrameComponent } from './components/dashboard/widgets/widget-fram
 import { WelcomeWidgetComponent } from './components/dashboard/widgets/welcome-widget/welcome-widget.component';
 import { YesNoPipe } from './pipes/yes-no.pipe';
 import { FileSizePipe } from './pipes/file-size.pipe';
+import { DocumentTitlePipe } from './pipes/document-title.pipe';
 
 @NgModule({
   declarations: [
@@ -88,7 +89,8 @@ import { FileSizePipe } from './pipes/file-size.pipe';
     WidgetFrameComponent,
     WelcomeWidgetComponent,
     YesNoPipe,
-    FileSizePipe
+    FileSizePipe,
+    DocumentTitlePipe
   ],
   imports: [
     BrowserModule,

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html

@@ -12,7 +12,7 @@ <h5 class="card-title">
               <a *ngIf="clickCorrespondent.observers.length ; else nolink" [routerLink]="" title="Filter by correspondent" (click)="clickCorrespondent.emit(document.correspondent)" class="font-weight-bold">{{(document.correspondent$ | async)?.name}}</a>
               <ng-template #nolink>{{(document.correspondent$ | async)?.name}}</ng-template>:
             </ng-container>
-            {{document.title}}
+            {{document.title | documentTitle}}
             <app-tag [tag]="t" linkTitle="Filter by tag" *ngFor="let t of document.tags$ | async" class="ml-1" (click)="clickTag.emit(t.id)" [clickable]="clickTag.observers.length"></app-tag>
           </h5>
           <h5 class="card-title" *ngIf="document.archive_serial_number">#{{document.archive_serial_number}}</h5>

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html

@@ -17,7 +17,7 @@
         <ng-container *ngIf="document.correspondent">
           <a [routerLink]="" title="Filter by correspondent" (click)="clickCorrespondent.emit(document.correspondent)" class="font-weight-bold">{{(document.correspondent$ | async)?.name}}</a>:
         </ng-container>
-        {{document.title}}
+        {{document.title | documentTitle}}
       </p>
     </div>
     <div class="card-footer">

src-ui/src/app/components/document-list/document-list.component.html

@@ -105,7 +105,7 @@ <h5 class="card-title">Filter</h5>
         </ng-container>
       </td>
       <td>
-        <a routerLink="/documents/{{d.id}}" title="Edit document" style="overflow-wrap: anywhere;">{{d.title}}</a>
+        <a routerLink="/documents/{{d.id}}" title="Edit document" style="overflow-wrap: anywhere;">{{d.title | documentTitle}}</a>
         <app-tag [tag]="t" *ngFor="let t of d.tags$ | async" class="ml-1" clickable="true" linkTitle="Filter by tag" (click)="filterByTag(t.id)"></app-tag>
       </td>
       <td class="d-none d-xl-table-cell">

src-ui/src/app/pipes/document-title.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { DocumentTitlePipe } from './document-title.pipe';
+
+describe('DocumentTitlePipe', () => {
+  it('create an instance', () => {
+    const pipe = new DocumentTitlePipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src-ui/src/app/pipes/document-title.pipe.ts

@@ -0,0 +1,16 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'documentTitle'
+})
+export class DocumentTitlePipe implements PipeTransform {
+
+  transform(value: string): unknown {
+    if (value) {
+      return value
+    } else {
+      return "(no title)"
+    }
+  }
+
+}