Use ng-select for document detail screen tags

src-ui/src/app/components/common/input/tags/tags.component.html

@@ -1,30 +1,34 @@
-<div class="form-group">
-  <label for="exampleFormControlTextarea1">Tags</label>
+<div class="form-group paperless-input-select paperless-input-tags">
+  <label for="tags">Tags</label>
 
   <div class="input-group">
-    <div class="form-control tags-form-control" id="tags">
-      <app-tag class="mr-2" *ngFor="let id of displayValue" [tag]="getTag(id)" (click)="removeTag(id)"></app-tag>
-    </div>
+    <ng-select name="tags" [items]="tags" bindLabel="name" bindValue="id" [(ngModel)]="displayValue"
+      [multiple]="true"
+      [closeOnSelect]="false"
+      [disabled]="disabled"
+      (change)="ngSelectChange()">
 
-    <div class="input-group-append" ngbDropdown placement="top-right">
-      <button class="btn btn-outline-secondary" type="button" ngbDropdownToggle></button>
-      <div ngbDropdownMenu class="scrollable-menu shadow">
-        <button type="button" *ngFor="let tag of tags" ngbDropdownItem (click)="addTag(tag.id)">
-          <app-tag [tag]="tag"></app-tag>
-        </button>
-      </div>
-    </div>
+      <ng-template ng-label-tmp let-item="item">
+          <app-tag style="background-color: none;" [tag]="getTag(item.id)" (click)="removeTag(item.id)"></app-tag>
+      </ng-template>
+      <ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm">
+        <div class="selected-icon d-inline-block mr-1">
+          <svg *ngIf="displayValue.includes(item.id)" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>
+          </svg>
+        </div>
+        <app-tag class="mr-2" [tag]="getTag(item.id)"></app-tag>
+      </ng-template>
+    </ng-select>
 
     <div class="input-group-append">
-
       <button class="btn btn-outline-secondary" type="button" (click)="createTag()">
         <svg class="buttonicon" fill="currentColor">
           <use xlink:href="assets/bootstrap-icons.svg#plus" />
         </svg>
       </button>
     </div>
-
   </div>
   <small class="form-text text-muted" *ngIf="hint">{{hint}}</small>
 
-</div>
+</div>

src-ui/src/app/components/common/input/tags/tags.component.scss

@@ -1,10 +1,4 @@
-.tags-form-control {
-  height: auto;
+.selected-icon {
+  min-width: 1em;
+  min-height: 1em;
 }
-
-
-.scrollable-menu {
-  height: auto;
-  max-height: 300px;
-  overflow-x: hidden;
-}

src-ui/src/app/components/common/input/tags/tags.component.ts

@@ -21,7 +21,7 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
 
 
   onChange = (newValue: number[]) => {};
-  
+
   onTouched = () => {};
 
   writeValue(newValue: number[]): void {
@@ -66,29 +66,28 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
   removeTag(id) {
     let index = this.displayValue.indexOf(id)
     if (index > -1) {
-      this.displayValue.splice(index, 1)
+      let oldValue = this.displayValue
+      oldValue.splice(index, 1)
+      this.displayValue = [...oldValue]
       this.onChange(this.displayValue)
     }
   }
 
-  addTag(id) {
-    let index = this.displayValue.indexOf(id)
-    if (index == -1) {
-      this.displayValue.push(id)
-      this.onChange(this.displayValue)
-    }
-  }
-
-
   createTag() {
     var modal = this.modalService.open(TagEditDialogComponent, {backdrop: 'static'})
     modal.componentInstance.dialogMode = 'create'
     modal.componentInstance.success.subscribe(newTag => {
       this.tagService.listAll().subscribe(tags => {
         this.tags = tags.results
-        this.addTag(newTag.id)
+        this.displayValue = [...this.displayValue, newTag.id]
+        this.onChange(this.displayValue)
       })
     })
   }
 
+  ngSelectChange() {
+    this.value = this.displayValue
+    this.onChange(this.displayValue)
+  }
+
 }

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

@@ -52,9 +52,9 @@
                         </div>
                         <app-input-date-time titleDate="Date created" formControlName="created"></app-input-date-time>
                         <app-input-select [items]="correspondents" title="Correspondent" formControlName="correspondent"
-                            allowNull="true" (createNew)="createCorrespondent()"></app-input-select>
+                            (createNew)="createCorrespondent()"></app-input-select>
                         <app-input-select [items]="documentTypes" title="Document type" formControlName="document_type"
-                            allowNull="true" (createNew)="createDocumentType()"></app-input-select>
+                            (createNew)="createDocumentType()"></app-input-select>
                         <app-input-tags formControlName="tags" title="Tags"></app-input-tags>
 
                     </ng-template>

src-ui/src/styles.scss

@@ -1,7 +1,5 @@
 @import "theme";
-
 @import "node_modules/bootstrap/scss/bootstrap";
-
 @import "~@ng-select/ng-select/themes/default.theme.css";
 
 .toolbaricon {
@@ -21,7 +19,7 @@
 }
 
 body {
-  font-size: .875rem;
+  font-size: 0.875rem;
 }
 
 .form-control-dark {
@@ -85,5 +83,16 @@ body {
         top: 8px;
       }
     }
+
+    .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,
+    .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked {
+      background: none;
+    }
+  }
+}
+
+.paperless-input-tags {
+  .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value {
+    background-color: transparent;
   }
 }