From 7dfcc7f47bc5204c20dd51120ee06a2ce564733a Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Sat, 19 Dec 2020 22:31:14 -0800
Subject: [PATCH] Refactor dropdown button component

---
 src-ui/src/app/app.module.ts                  |  4 +--
 ...lterable-dropdown-button.component.spec.ts | 25 -------------------
 .../filterable-dropdown.component.html        |  2 +-
 .../filterable-dropdown.component.ts          | 12 +--------
 ...toggleable-dropdown-button.component.html} |  0
 ...toggleable-dropdown-button.component.scss} |  0
 ...ggleable-dropdown-button.component.spec.ts | 25 +++++++++++++++++++
 .../toggleable-dropdown-button.component.ts}  | 20 +++++++++++----
 .../bulk-editor/bulk-editor.component.ts      |  3 ++-
 src-ui/src/app/pipes/filter.pipe.ts           |  2 +-
 10 files changed, 47 insertions(+), 46 deletions(-)
 delete mode 100644 src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.spec.ts
 rename src-ui/src/app/components/common/filterable-dropdown/{filterable-dropdown-button/filterable-dropdown-button.component.html => toggleable-dropdown-button/toggleable-dropdown-button.component.html} (100%)
 rename src-ui/src/app/components/common/filterable-dropdown/{filterable-dropdown-button/filterable-dropdown-button.component.scss => toggleable-dropdown-button/toggleable-dropdown-button.component.scss} (100%)
 create mode 100644 src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.spec.ts
 rename src-ui/src/app/components/common/filterable-dropdown/{filterable-dropdown-button/filterable-dropdown-button.component.ts => toggleable-dropdown-button/toggleable-dropdown-button.component.ts} (70%)

diff --git a/src-ui/src/app/app.module.ts b/src-ui/src/app/app.module.ts
index 97c547038..c78dc3cfe 100644
--- a/src-ui/src/app/app.module.ts
+++ b/src-ui/src/app/app.module.ts
@@ -28,7 +28,7 @@ import { AppFrameComponent } from './components/app-frame/app-frame.component';
 import { ToastsComponent } from './components/common/toasts/toasts.component';
 import { FilterEditorComponent } from './components/document-list/filter-editor/filter-editor.component';
 import { FilterableDropdownComponent } from './components/common/filterable-dropdown/filterable-dropdown.component';
-import { FilterableDropdownButtonComponent } from './components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component';
+import { ToggleableDropdownButtonComponent } from './components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component';
 import { DateDropdownComponent } from './components/common/date-dropdown/date-dropdown.component';
 import { DocumentCardLargeComponent } from './components/document-list/document-card-large/document-card-large.component';
 import { DocumentCardSmallComponent } from './components/document-list/document-card-small/document-card-small.component';
@@ -82,7 +82,7 @@ import { NgSelectModule } from '@ng-select/ng-select';
     ToastsComponent,
     FilterEditorComponent,
     FilterableDropdownComponent,
-    FilterableDropdownButtonComponent,
+    ToggleableDropdownButtonComponent,
     DateDropdownComponent,
     DocumentCardLargeComponent,
     DocumentCardSmallComponent,
diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.spec.ts b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.spec.ts
deleted file mode 100644
index c7f0b3293..000000000
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { FilterableDropodownButtonComponent } from './filterable-dropdown-button.component';
-
-describe('FilterableDropodownButtonComponent', () => {
-  let component: FilterableDropodownButtonComponent;
-  let fixture: ComponentFixture<FilterableDropodownButtonComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ FilterableDropodownButtonComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(FilterableDropodownButtonComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
index 052bca03d..9bc525684 100644
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
@@ -21,7 +21,7 @@
       </div>
       <div *ngIf="toggleableItems" class="items">
         <ng-container *ngFor="let toggleableItem of toggleableItems | filter: filterText">
-          <app-filterable-dropdown-button [toggleableItem]="toggleableItem" (toggle)="toggleItem($event)"></app-filterable-dropdown-button>
+          <app-toggleable-dropdown-button [toggleableItem]="toggleableItem" (toggle)="toggleItem($event)"></app-toggleable-dropdown-button>
         </ng-container>
       </div>
     </div>
diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts
index 76b588be5..dc1139783 100644
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts
@@ -5,17 +5,7 @@ import { PaperlessCorrespondent } from 'src/app/data/paperless-correspondent';
 import { PaperlessDocumentType } from 'src/app/data/paperless-document-type';
 import { FilterPipe } from  'src/app/pipes/filter.pipe';
 import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
-
-export interface ToggleableItem {
-  item: PaperlessTag | PaperlessDocumentType | PaperlessCorrespondent,
-  state: ToggleableItemState
-}
-
-export enum ToggleableItemState {
-  NotSelected = 0,
-  Selected = 1,
-  PartiallySelected = 2
-}
+import { ToggleableItem, ToggleableItemState } from './toggleable-dropdown-button/toggleable-dropdown-button.component';
 
 export enum FilterableDropdownType {
   Filtering = 'filtering',
diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.html b/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.html
similarity index 100%
rename from src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.html
rename to src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.html
diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.scss b/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.scss
similarity index 100%
rename from src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.scss
rename to src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.scss
diff --git a/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.spec.ts b/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.spec.ts
new file mode 100644
index 000000000..ec2868d7c
--- /dev/null
+++ b/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ToggleableDropdownButtonComponent } from './toggleable-dropdown-button.component';
+
+describe('ToggleableDropdownButtonComponent', () => {
+  let component: ToggleableDropdownButtonComponent;
+  let fixture: ComponentFixture<ToggleableDropdownButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ToggleableDropdownButtonComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ToggleableDropdownButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.ts b/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.ts
similarity index 70%
rename from src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.ts
rename to src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.ts
index 3486bdb46..7c9c02a49 100644
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown-button/filterable-dropdown-button.component.ts
+++ b/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.ts
@@ -2,14 +2,24 @@ import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
 import { PaperlessTag } from 'src/app/data/paperless-tag';
 import { PaperlessCorrespondent } from 'src/app/data/paperless-correspondent';
 import { PaperlessDocumentType } from 'src/app/data/paperless-document-type';
-import { ToggleableItem, ToggleableItemState } from '../filterable-dropdown.component';
+
+export interface ToggleableItem {
+  item: PaperlessTag | PaperlessDocumentType | PaperlessCorrespondent,
+  state: ToggleableItemState
+}
+
+export enum ToggleableItemState {
+  NotSelected = 0,
+  Selected = 1,
+  PartiallySelected = 2
+}
 
 @Component({
-  selector: 'app-filterable-dropdown-button',
-  templateUrl: './filterable-dropdown-button.component.html',
-  styleUrls: ['./filterable-dropdown-button.component.scss']
+  selector: 'app-toggleable-dropdown-button',
+  templateUrl: './toggleable-dropdown-button.component.html',
+  styleUrls: ['./toggleable-dropdown-button.component.scss']
 })
-export class FilterableDropdownButtonComponent {
+export class ToggleableDropdownButtonComponent {
 
   @Input()
   toggleableItem: ToggleableItem
diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts
index 5b9a4ff38..21355fe4c 100644
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts
@@ -8,7 +8,8 @@ import { TagService } from 'src/app/services/rest/tag.service';
 import { CorrespondentService } from 'src/app/services/rest/correspondent.service';
 import { DocumentTypeService } from 'src/app/services/rest/document-type.service';
 import { DocumentService } from 'src/app/services/rest/document.service';
-import { ToggleableItem, ToggleableItemState, FilterableDropdownType } from 'src/app/components/common/filterable-dropdown/filterable-dropdown.component';
+import { FilterableDropdownType } from 'src/app/components/common/filterable-dropdown/filterable-dropdown.component';
+import { ToggleableItem, ToggleableItemState } from 'src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component';
 
 @Component({
   selector: 'app-bulk-editor',
diff --git a/src-ui/src/app/pipes/filter.pipe.ts b/src-ui/src/app/pipes/filter.pipe.ts
index 1ea10c56e..a982e9019 100644
--- a/src-ui/src/app/pipes/filter.pipe.ts
+++ b/src-ui/src/app/pipes/filter.pipe.ts
@@ -1,5 +1,5 @@
 import { Pipe, PipeTransform } from '@angular/core';
-import { ToggleableItem } from 'src/app/components/common/filterable-dropdown/filterable-dropdown.component';
+import { ToggleableItem } from 'src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component';
 
 @Pipe({
   name: 'filter'