Display labels on the saved note

src/app/app.module.ts

@@ -123,6 +123,8 @@ import { ScrollingModule } from '@angular/cdk/scrolling';
 import { EditorComponent } from './editor/editor';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { ArticleComponent } from './article/article';
+import { LabelPipe } from './shared/label.pipe';
+import { LabelComponent } from './shared/label/label';
 
 @NgModule({
   declarations: [
@@ -199,6 +201,8 @@ import { ArticleComponent } from './article/article';
     UsernamePipe,
     EditorComponent,
     ArticleComponent,
+    LabelComponent,
+    LabelPipe,
   ],
   imports: [
     AboutModule,

src/app/notes/notes.html

@@ -8,6 +8,7 @@
     </div>
 
     <app-content [event]="note"></app-content>
+    <app-label [labels]="note.labels"></app-label>
     <!-- <div class="content">
         {{ note.content }}<span *ngIf="note.contentCut">... (message was truncated)</span>
         <div *ngIf="details">

src/app/services/label.ts

@@ -22,6 +22,16 @@ export class LabelService {
 
   constructor(private storage: StorageService) {}
 
+  getName(id: string) {
+    const label = this.labels.find((l) => l.id == id);
+
+    if (!label) {
+      return '';
+    }
+
+    return label.name;
+  }
+
   async initialize() {
     this.labels = await this.storage.storage.getLabels();
 

src/app/shared/label.pipe.ts

@@ -0,0 +1,15 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { LabelService } from '../services/label';
+
+@Pipe({ name: 'label' })
+export class LabelPipe implements PipeTransform {
+  constructor(private labelService: LabelService) {}
+
+  transform(value?: string): string {
+    if (!value) {
+      return '';
+    }
+
+    return this.labelService.getName(value);
+  }
+}

src/app/shared/label/label.html

@@ -0,0 +1 @@
+Labels: <span *ngFor="let label of labels; let i=index; let isLast=last"> <strong>{{ label | label }}</strong><span *ngIf="!isLast">, </span> </span>

src/app/shared/label/label.ts

@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+import { LabelService } from 'src/app/services/label';
+
+@Component({
+  selector: 'app-label',
+  templateUrl: 'label.html',
+})
+export class LabelComponent {
+  @Input() labels: string[] = [];
+
+  constructor(private labelService: LabelService) {}
+}

src/app/shared/labels/labels.ts

@@ -6,6 +6,7 @@ import { v4 as uuidv4 } from 'uuid';
 @Component({
   selector: 'app-labels',
   templateUrl: 'labels.html',
+  styleUrls: ['labels.css'],
 })
 export class LabelsComponent {
   showNewLabel?: boolean;

src/app/shared/reply-list/reply-list.ts

@@ -9,8 +9,8 @@ export interface ReplyEntry {
 
 @Component({
   selector: 'app-reply-list',
-  templateUrl: './reply-list.html',
-  styleUrls: ['./reply-list.css'],
+  templateUrl: 'reply-list.html',
+  styleUrls: ['reply-list.css'],
 })
 export class ReplyListComponent {
   @Input() keys: string[] = [];