add a chip list to the note editing for references.

src/src/app/app.module.ts

@@ -37,6 +37,7 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
 import { MatDividerModule } from '@angular/material/divider';
+import {MatChipsModule} from '@angular/material/chips';
 import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
 import { ClipboardModule } from '@angular/cdk/clipboard';
 
@@ -104,6 +105,7 @@ import { AddToPageModalComponent } from './components/add-to-page-modal/add-to-p
 
     DragDropModule,
     MatSidenavModule,
+    MatChipsModule,
     MatToolbarModule,
     MatIconModule,
     MatAutocompleteModule,

src/src/app/components/note/edit-modal/note-edit-modal.component.html

@@ -11,9 +11,26 @@
       <input formControlName="title" matInput />
     </mat-form-field>
     <mat-form-field class="note-xrefs">
-      <mat-label>References</mat-label>
+      <mat-label>Cross References</mat-label>
-      <input formControlName="xref" matInput />
+      <mat-chip-list #chipList aria-label="Cross References">
+        <mat-chip
+          *ngFor="let ref of references"
+          [selectable]="selectable"
+          [removable]="removable"
+          (removed)="remove(ref)"
+        >
+          {{ ref }}
+          <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
+        </mat-chip>
+        <input
+          [matChipInputFor]="chipList"
+          [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+          [matChipInputAddOnBlur]="addOnBlur"
+          (matChipInputTokenEnd)="add($event)"
+        />
+      </mat-chip-list>
     </mat-form-field>
+
     <mat-form-field class="note-content">
       <mat-label>Content</mat-label>
       <textarea formControlName="content" matInput></textarea>

src/src/app/components/note/edit-modal/note-edit-modal.component.scss

@@ -20,6 +20,6 @@
   min-width: 75vw;
 
   textarea {
-    min-height: 15rem;
+    min-height: 50vh;
   }
 }

src/src/app/components/note/edit-modal/note-edit-modal.component.ts

@@ -2,6 +2,9 @@ import { Component, Inject } from '@angular/core';
 import { FormGroup, FormBuilder } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
+import { COMMA, ENTER, SEMICOLON } from '@angular/cdk/keycodes';
+import { MatChipInputEvent } from '@angular/material/chips';
+
 import { UUID } from 'angular2-uuid';
 
 import { NoteItem } from 'src/app/models/note-state';
@@ -18,6 +21,15 @@ export class NoteEditModalComponent {
   data: NoteItem;
   isNew = false;
 
+  //#region Cross References
+  visible = true;
+  selectable = true;
+  removable = true;
+  addOnBlur = true;
+  readonly separatorKeysCodes: number[] = [ENTER, COMMA, SEMICOLON];
+  references: string[] = [];
+  //#endregion
+
   constructor(
     @Inject(MAT_DIALOG_DATA) public cardItem: CardItem,
     public dialogRef: MatDialogRef<NoteEditModalComponent>,
@@ -26,6 +38,7 @@ export class NoteEditModalComponent {
   ) {
     if (cardItem) {
       this.data = cardItem.data as NoteItem;
+      this.references = this.data.xref.split(';').map((v) => v.trim());
     } else {
       this.isNew = true;
       this.data = {
@@ -38,6 +51,31 @@ export class NoteEditModalComponent {
     this.noteForm = this.fb.group(this.data);
   }
 
+  //#region cross refs
+
+  add(event: MatChipInputEvent): void {
+    const input = event.input;
+    const value = event.value;
+
+    if ((value || '').trim()) {
+      this.references.push(value.trim());
+    }
+
+    if (input) {
+      input.value = '';
+    }
+  }
+
+  remove(reference: string): void {
+    const index = this.references.indexOf(reference);
+
+    if (index >= 0) {
+      this.references.splice(index, 1);
+    }
+  }
+
+  //#endregion
+
   cancel() {
     this.dialogRef.close();
   }
@@ -46,7 +84,7 @@ export class NoteEditModalComponent {
     this.appService.saveNote({
       ...this.data,
       title: this.noteForm.get('title').value,
-      xref: this.noteForm.get('xref').value,
+      xref: this.references.reduce((p, c) => `${p};${c}`),
       content: this.noteForm.get('content').value,
     });