Merge branch 'dev' into feature-websockets-status

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

@@ -22,4 +22,12 @@
     </div>
   </div>
   <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
+  <small *ngIf="getSuggestions().length > 0">
+    <span i18n>Suggestions:</span>&nbsp;
+    <ng-container *ngFor="let s of getSuggestions()">
+      <a (click)="value = s.id; onChange(value)" [routerLink]="">{{s.name}}</a>&nbsp;
+    </ng-container>
+    
+    
+  </small>
 </div>

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

@@ -30,11 +30,22 @@ export class SelectComponent extends AbstractInputComponent<number> {
   @Input()
   allowNull: boolean = false
 
+  @Input()
+  suggestions: number[]
+
   @Output()
   createNew = new EventEmitter()
-  
+
   showPlusButton(): boolean {
     return this.createNew.observers.length > 0
   }
 
+  getSuggestions() {
+    if (this.suggestions && this.items) {
+      return this.suggestions.filter(id => id != this.value).map(id => this.items.find(item => item.id == id))
+    } else {
+      return []
+    }
+  }
+
 }

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

@@ -2,30 +2,25 @@
   <label for="tags" i18n>Tags</label>
 
   <div class="input-group flex-nowrap">
-    <ng-select name="tags" [items]="tags" bindLabel="name" bindValue="id" [(ngModel)]="displayValue"
+    <ng-select name="tags" [items]="tags" bindLabel="name" bindValue="id" [(ngModel)]="value"
       [multiple]="true"
       [closeOnSelect]="false"
       [clearSearchOnAdd]="true"
-      [disabled]="disabled"
       [hideSelected]="true"
-      (change)="ngSelectChange()">
+      (change)="onChange(value)"
+      (blur)="onTouched()">
 
       <ng-template ng-label-tmp let-item="item">
         <span class="tag-wrap tag-wrap-delete" (click)="removeTag(item.id)">
           <svg width="1.2em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
             <use xlink:href="assets/bootstrap-icons.svg#x"/>
           </svg>
-          <app-tag style="background-color: none;" [tag]="getTag(item.id)"></app-tag>
+          <app-tag *ngIf="item.id && tags" style="background-color: none;" [tag]="getTag(item.id)"></app-tag>
         </span>
       </ng-template>
       <ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm">
         <div class="tag-wrap">
-          <div class="selected-icon d-inline-block mr-1">
-            <svg *ngIf="displayValue.includes(item.id)" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-              <use xlink:href="assets/bootstrap-icons.svg#check"/>
-            </svg>
-          </div>
-          <app-tag class="mr-2" [tag]="getTag(item.id)"></app-tag>
+          <app-tag *ngIf="item.id && tags" class="mr-2" [tag]="getTag(item.id)"></app-tag>
         </div>
       </ng-template>
     </ng-select>
@@ -39,5 +34,13 @@
     </div>
   </div>
   <small class="form-text text-muted" *ngIf="hint">{{hint}}</small>
+  <small *ngIf="getSuggestions().length > 0">
+    <span i18n>Suggestions:</span>&nbsp;
+    <ng-container *ngFor="let tag of getSuggestions()">
+      <a (click)="addTag(tag.id)" [routerLink]="">{{tag.name}}</a>&nbsp;
+    </ng-container>
+    
+    
+  </small>
 
 </div>

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

@@ -26,9 +26,6 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
 
   writeValue(newValue: number[]): void {
     this.value = newValue
-    if (this.tags) {
-      this.displayValue = newValue
-    }
   }
   registerOnChange(fn: any): void {
     this.onChange = fn;
@@ -43,7 +40,6 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
   ngOnInit(): void {
     this.tagService.listAll().subscribe(result => {
       this.tags = result.results
-      this.displayValue = this.value
     })
   }
 
@@ -53,23 +49,28 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
   @Input()
   hint
 
-  value: number[]
+  @Input()
+  suggestions: number[]
 
-  displayValue: number[] = []
+  value: number[]
 
   tags: PaperlessTag[]
 
   getTag(id) {
-    return this.tags.find(tag => tag.id == id)
+    if (this.tags) {
+      return this.tags.find(tag => tag.id == id)
+    } else {
+      return null
+    }
   }
 
   removeTag(id) {
-    let index = this.displayValue.indexOf(id)
+    let index = this.value.indexOf(id)
     if (index > -1) {
-      let oldValue = this.displayValue
+      let oldValue = this.value
       oldValue.splice(index, 1)
-      this.displayValue = [...oldValue]
-      this.onChange(this.displayValue)
+      this.value = [...oldValue]
+      this.onChange(this.value)
     }
   }
 
@@ -79,15 +80,23 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
     modal.componentInstance.success.subscribe(newTag => {
       this.tagService.listAll().subscribe(tags => {
         this.tags = tags.results
-        this.displayValue = [...this.displayValue, newTag.id]
-        this.onChange(this.displayValue)
+        this.value = [...this.value, newTag.id]
+        this.onChange(this.value)
       })
     })
   }
 
-  ngSelectChange() {
-    this.value = this.displayValue
-    this.onChange(this.displayValue)
+  getSuggestions() {
+    if (this.suggestions && this.tags) {
+      return this.suggestions.filter(id => !this.value.includes(id)).map(id => this.tags.find(tag => tag.id == id))
+    } else {
+      return []
+    }
+  }
+
+  addTag(id) {
+    this.value = [...this.value, id]
+    this.onChange(this.value)
   }
 
 }