Refactor to use ng-select addTag function

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

@@ -1,28 +1,29 @@
 <div class="form-group paperless-input-select">
   <label [for]="inputId">{{title}}</label>
-  <div [class.input-group]="showPlusButton()">
+  <div>
-    <ng-select name="inputId" [(ngModel)]="value"
+    <ng-select *ngIf="allowCreateNew; else noAddTag" name="inputId" [(ngModel)]="value"
       [disabled]="disabled"
       [style.color]="textColor"
       [style.background]="backgroundColor"
       [clearable]="allowNull"
       [items]="items"
+      [addTag]="addItemRef"
       bindLabel="name"
       bindValue="id"
-      (change)="onChange(value)"
+      (blur)="onTouched()">
-      (search)="onSearch($event)"
-      (focus)="clearLastSearchTerm()"
-      (clear)="clearLastSearchTerm()"
-      (blur)="onBlur()">
     </ng-select>
-
+    <ng-template #noAddTag>
-    <div *ngIf="showPlusButton()" class="input-group-append">
+      <ng-select name="inputId" [(ngModel)]="value"
-      <button class="btn btn-outline-secondary" type="button" (click)="clickNew()">
+        [disabled]="disabled"
-        <svg class="buttonicon" fill="currentColor">
+        [style.color]="textColor"
-          <use xlink:href="assets/bootstrap-icons.svg#plus" />
+        [style.background]="backgroundColor"
-        </svg>
+        [clearable]="allowNull"
-      </button>
+        [items]="items"
-    </div>
+        bindLabel="name"
+        bindValue="id"
+        (blur)="onTouched()">
+      </ng-select>
+    </ng-template>
   </div>
   <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
   <small *ngIf="getSuggestions().length > 0">

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

@@ -16,6 +16,7 @@ export class SelectComponent extends AbstractInputComponent<number> {
 
   constructor() {
     super()
+    this.addItemRef = this.addItem.bind(this)
    }
 
   @Input()
@@ -36,9 +37,9 @@ export class SelectComponent extends AbstractInputComponent<number> {
   @Output()
   createNew = new EventEmitter<string>()
 
-  private _lastSearchTerm: string
+  public addItemRef: (name) => void
 
-  showPlusButton(): boolean {
+  get allowCreateNew(): boolean {
     return this.createNew.observers.length > 0
   }
 
@@ -50,23 +51,8 @@ export class SelectComponent extends AbstractInputComponent<number> {
     }
   }
 
-  clickNew() {
+  addItem(name: string) {
-    this.createNew.next(this._lastSearchTerm)
+    this.createNew.next(name)
-    this.clearLastSearchTerm()
-  }
-
-  clearLastSearchTerm() {
-    this._lastSearchTerm = null
-  }
-
-  onSearch($event) {
-    this._lastSearchTerm = $event.term
-  }
-
-  onBlur() {
-    setTimeout(() => {
-      this.clearLastSearchTerm()
-    }, 3000);
   }
 
 }

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

@@ -1,17 +1,16 @@
 <div class="form-group paperless-input-select paperless-input-tags">
   <label for="tags" i18n>Tags</label>
 
-  <div class="input-group flex-nowrap">
+  <div class="flex-nowrap">
     <ng-select name="tags" [items]="tags" bindLabel="name" bindValue="id" [(ngModel)]="value"
       [multiple]="true"
       [closeOnSelect]="false"
       [clearSearchOnAdd]="true"
       [hideSelected]="true"
+      [addTag]="createTagRef"
+      addTagText="Add tag"
       (change)="onChange(value)"
-      (search)="onSearch($event)"
+      (blur)="onTouched()">
-      (focus)="clearLastSearchTerm()"
-      (clear)="clearLastSearchTerm()"
-      (blur)="onBlur()">
 
       <ng-template ng-label-tmp let-item="item">
         <span class="tag-wrap tag-wrap-delete" (click)="removeTag(item.id)">
@@ -27,14 +26,6 @@
         </div>
       </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>
   <small *ngIf="getSuggestions().length > 0">

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

@@ -17,8 +17,9 @@ import { TagService } from 'src/app/services/rest/tag.service';
 })
 export class TagsComponent implements OnInit, ControlValueAccessor {
 
-  constructor(private tagService: TagService, private modalService: NgbModal) { }
+  constructor(private tagService: TagService, private modalService: NgbModal) {
-
+    this.createTagRef = this.createTag.bind(this)
+  }
 
   onChange = (newValue: number[]) => {};
 
@@ -56,7 +57,7 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
 
   tags: PaperlessTag[]
   
-  private _lastSearchTerm: string
+  public createTagRef: (name) => void
 
   getTag(id) {
     if (this.tags) {
@@ -76,10 +77,10 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
     }
   }
 
-  createTag() {
+  createTag(name: string = null) {
     var modal = this.modalService.open(TagEditDialogComponent, {backdrop: 'static'})
     modal.componentInstance.dialogMode = 'create'
-    if (this._lastSearchTerm) modal.componentInstance.object = { name: this._lastSearchTerm }
+    if (name) modal.componentInstance.object = { name: name }
     modal.componentInstance.success.subscribe(newTag => {
       this.tagService.listAll().subscribe(tags => {
         this.tags = tags.results
@@ -102,18 +103,4 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
     this.onChange(this.value)
   }
 
-  clearLastSearchTerm() {
-    this._lastSearchTerm = null
-  }
-
-  onSearch($event) {
-    this._lastSearchTerm = $event.term
-  }
-
-  onBlur() {
-    setTimeout(() => {
-      this.clearLastSearchTerm()
-    }, 3000);
-  }
-
 }

src-ui/src/styles.scss

@@ -77,8 +77,6 @@ body {
 
     .ng-select-container {
       height: 100%;
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
 
       .ng-value-container .ng-input {
         top: 10px;