Basic bulk editor component

src-ui/src/app/app.module.ts

@@ -32,6 +32,7 @@ import { FilterDropdownButtonComponent } from './components/filter-editor/filter
 import { FilterDropdownDateComponent } from './components/filter-editor/filter-dropdown-date/filter-dropdown-date.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';
+import { BulkEditorComponent } from './components/document-list/bulk-editor/bulk-editor.component';
 import { NgxFileDropModule } from 'ngx-file-drop';
 import { TextComponent } from './components/common/input/text/text.component';
 import { SelectComponent } from './components/common/input/select/select.component';
@@ -84,6 +85,7 @@ import { SelectDialogComponent } from './components/common/select-dialog/select-
     FilterDropdownDateComponent,
     DocumentCardLargeComponent,
     DocumentCardSmallComponent,
+    BulkEditorComponent,
     TextComponent,
     SelectComponent,
     CheckComponent,

src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html

@@ -0,0 +1,16 @@
+<div class="btn-group mr-lg-2" role="group" aria-label="Select">
+  <button class="btn btn-sm btn-outline-primary" (click)="this.selectPage.next()">Select page</button>
+  <button class="btn btn-sm btn-outline-primary" (click)="this.selectAll.next()">Select all</button>
+  <button class="btn btn-sm btn-outline-primary" (click)="this.selectNone.next()">Select none</button>
+</div>
+<div class="btn-group mr-lg-2" role="group" aria-label="Actions">
+  <button class="btn btn-sm btn-outline-primary" (click)="this.setCorrespondent.next()">Set correspondent</button>
+  <button class="btn btn-sm btn-outline-primary" (click)="this.removeCorrespondent.next()">Remove correspondent</button>
+  <button class="btn btn-sm btn-outline-primary" (click)="this.setDocumentType.next()">Set document type</button>
+  <button class="btn btn-sm btn-outline-primary" (click)="this.removeDocumentType.next()">Remove document type</button>
+  <button class="btn btn-sm btn-outline-primary" (click)="this.addTag.next()">Add tag</button>
+  <button class="btn btn-sm btn-outline-primary" (click)="this.removeTag.next()">Remove tag</button>
+</div>
+<div class="btn-group mr-lg-2" role="group" aria-label="Delete">
+  <button class="btn btn-sm btn-outline-primary" (click)="this.delete.next()">Delete</button>
+</div>

src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.spec.ts

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

src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts

@@ -0,0 +1,46 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { DocumentListViewService } from 'src/app/services/document-list-view.service';
+
+@Component({
+  selector: 'app-bulk-editor',
+  templateUrl: './bulk-editor.component.html',
+  styleUrls: ['./bulk-editor.component.scss']
+})
+export class BulkEditorComponent {
+
+  @Input()
+  list: DocumentListViewService
+
+  @Output()
+  selectPage = new EventEmitter()
+
+  @Output()
+  selectAll = new EventEmitter()
+
+  @Output()
+  selectNone = new EventEmitter()
+
+  @Output()
+  setCorrespondent = new EventEmitter()
+
+  @Output()
+  removeCorresponden = new EventEmitter()
+
+  @Output()
+  setDocumentType = new EventEmitter()
+
+  @Output()
+  removeDocumentType = new EventEmitter()
+
+  @Output()
+  addTag = new EventEmitter()
+
+  @Output()
+  removeTag = new EventEmitter()
+
+  @Output()
+  delete = new EventEmitter()
+
+  constructor( ) { }
+
+}

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

@@ -1,25 +1,16 @@
 <app-page-header [title]="getTitle()">
 
   <div ngbDropdown class="d-inline-block mr-2">
-    <button class="btn btn-sm btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>
+    <button class="btn btn-sm btn-outline-primary" id="dropdownSelect" ngbDropdownToggle>
       <svg class="toolbaricon" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#text-indent-left" />
       </svg>
-      Bulk edit
+      Select
     </button>
-    <div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="shadow">
+    <div ngbDropdownMenu aria-labelledby="dropdownSelect" class="shadow">
       <button ngbDropdownItem (click)="list.selectPage()">Select page</button>
       <button ngbDropdownItem (click)="list.selectAll()">Select all</button>
       <button ngbDropdownItem (click)="list.selectNone()">Select none</button>
-      <div class="dropdown-divider"></div>
-      <button ngbDropdownItem [disabled]="list.selected.size == 0" (click)="bulkSetCorrespondent()">Set correspondent</button>
-      <button ngbDropdownItem [disabled]="list.selected.size == 0" (click)="bulkRemoveCorrespondent()">Remove correspondent</button>
-      <button ngbDropdownItem [disabled]="list.selected.size == 0" (click)="bulkSetDocumentType()">Set document type</button>
-      <button ngbDropdownItem [disabled]="list.selected.size == 0" (click)="bulkRemoveDocumentType()">Remove document type</button>
-      <button ngbDropdownItem [disabled]="list.selected.size == 0" (click)="bulkAddTag()">Add tag</button>
-      <button ngbDropdownItem [disabled]="list.selected.size == 0" (click)="bulkRemoveTag()">Remove tag</button>
-      <div class="dropdown-divider"></div>
-      <button ngbDropdownItem [disabled]="list.selected.size == 0" (click)="bulkDelete()">Delete</button>
     </div>
   </div>
 
@@ -96,6 +87,21 @@
   [rotate]="true" (pageChange)="list.reload()" aria-label="Default pagination"></ngb-pagination>
 </div>
 
+<div class="w-100 mb-2" [ngbCollapse]="!isBulkEditing">
+  <app-bulk-editor
+    (selectPage)="list.selectPage()"
+    (selectAll)="list.selectAll()"
+    (selectNone)="list.selectNone()"
+    (setCorrespondent)="bulkSetCorrespondent()"
+    (removeCorrespondent)="bulkRemoveCorrespondent()"
+    (setDocumentType)="bulkSetDocumentType()"
+    (removeDocumentType)="bulkRemoveDocumentType()"
+    (addTag)="bulkAddTag()"
+    (removeTag)="bulkRemoveTag()"
+    (delete)="bulkDelete()">
+  </app-bulk-editor>
+</div>
+
 <div *ngIf="displayMode == 'largeCards'">
   <app-document-card-large *ngFor="let d of list.documents" [document]="d" [details]="d.content" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)">
   </app-document-card-large>

src-ui/src/app/components/document-list/document-list.component.ts

@@ -52,6 +52,10 @@ export class DocumentListComponent implements OnInit {
     return DOCUMENT_SORT_FIELDS
   }
 
+  get isBulkEditing(): boolean {
+    return this.list.selected.size > 0
+  }
+
   saveDisplayMode() {
     localStorage.setItem('document-list:displayMode', this.displayMode)
   }