a new tag editor fixes #20

also: discard document changes button

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

@@ -0,0 +1,10 @@
+.tags-form-control {
+  height: auto;
+}
+
+
+.scrollable-menu {
+  height: auto;
+  max-height: 300px;
+  overflow-x: hidden;
+}

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

@@ -0,0 +1,30 @@
+<div class="form-group">
+  <label for="exampleFormControlTextarea1">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>
+
+    <div class="input-group-append" ngbDropdown placement="top-right">
+      <button class="btn btn-outline-secondary" type="button" ngbDropdownToggle></button>
+      <div ngbDropdownMenu class="scrollable-menu">
+        <button type="button" *ngFor="let tag of tags" ngbDropdownItem (click)="addTag(tag.id)">
+          <app-tag [tag]="tag"></app-tag>
+        </button>
+      </div>
+    </div>
+
+    <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>

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

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TagsComponent } from './tags.component';
+
+describe('TagsComponent', () => {
+  let component: TagsComponent;
+  let fixture: ComponentFixture<TagsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TagsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TagsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,96 @@
+import { ThrowStmt } from '@angular/compiler';
+import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { Observable } from 'rxjs';
+import { TagEditDialogComponent } from 'src/app/components/manage/tag-list/tag-edit-dialog/tag-edit-dialog.component';
+import { PaperlessTag } from 'src/app/data/paperless-tag';
+import { TagService } from 'src/app/services/rest/tag.service';
+
+@Component({
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => TagsComponent),
+    multi: true
+  }],
+  selector: 'app-input-tags',
+  templateUrl: './tags.component.html',
+  styleUrls: ['./tags.component.css']
+})
+export class TagsComponent implements OnInit, ControlValueAccessor {
+
+  constructor(private tagService: TagService, private modalService: NgbModal) { }
+
+
+  onChange = (newValue: number[]) => {};
+  
+  onTouched = () => {};
+
+  writeValue(newValue: number[]): void {
+    this.value = newValue
+    if (this.tags) {
+      this.displayValue = newValue
+    }
+  }
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  ngOnInit(): void {
+    this.tagService.listAll().subscribe(result => {
+      this.tags = result.results
+      this.displayValue = this.value
+    })
+  }
+
+  @Input()
+  disabled = false
+
+  @Input()
+  hint
+
+  value: number[]
+
+  displayValue: number[] = []
+
+  tags: PaperlessTag[]
+
+  getTag(id) {
+    return this.tags.find(tag => tag.id == id)
+  }
+
+  removeTag(id) {
+    let index = this.displayValue.indexOf(id)
+    if (index > -1) {
+      this.displayValue.splice(index, 1)
+      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.list().subscribe(tags => {
+        this.tags = tags.results
+        this.addTag(newTag.id)
+      })
+    })
+  }
+
+}