Rename dropdown type enum & add pass as variable to use like an Enum

This commit is contained in:
Michael Shamoon 2020-12-19 20:19:37 -08:00
parent 561db8607a
commit 9a4190bedf
4 changed files with 11 additions and 8 deletions

View File

@ -1,12 +1,12 @@
<div class="btn-group" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #dropdown="ngbDropdown"> <div class="btn-group" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #dropdown="ngbDropdown">
<button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="type !== 'actions' && itemsSelected?.length > 0 ? 'btn-primary' : 'btn-outline-primary'"> <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="type !== types.Editing && itemsSelected?.length > 0 ? 'btn-primary' : 'btn-outline-primary'">
<div class="d-none d-md-inline">{{title}}</div> <div class="d-none d-md-inline">{{title}}</div>
<div class="d-inline-block d-md-none"> <div class="d-inline-block d-md-none">
<svg class="toolbaricon" fill="currentColor"> <svg class="toolbaricon" fill="currentColor">
<use attr.xlink:href="assets/bootstrap-icons.svg#{{icon}}" /> <use attr.xlink:href="assets/bootstrap-icons.svg#{{icon}}" />
</svg> </svg>
</div> </div>
<ng-container *ngIf="type !== 'actions' && itemsSelected?.length > 0"> <ng-container *ngIf="type !== types.Editing && itemsSelected?.length > 0">
<div class="badge bg-secondary text-light rounded-pill badge-corner"> <div class="badge bg-secondary text-light rounded-pill badge-corner">
{{itemsSelected?.length}} {{itemsSelected?.length}}
</div> </div>

View File

@ -19,7 +19,7 @@ export enum SelectableItemState {
export enum FilterableDropdownType { export enum FilterableDropdownType {
Filtering = 'filtering', Filtering = 'filtering',
Actions = 'actions' Editing = 'editing'
} }
@Component({ @Component({
@ -47,7 +47,7 @@ export class FilterableDropdownComponent {
@Input() @Input()
set selectableItems (selectableItems: SelectableItem[]) { set selectableItems (selectableItems: SelectableItem[]) {
if (this.type == FilterableDropdownType.Actions && this.dropdown?.isOpen()) return if (this.type == FilterableDropdownType.Editing && this.dropdown?.isOpen()) return
else this._selectableItems = selectableItems else this._selectableItems = selectableItems
} }
@ -75,6 +75,8 @@ export class FilterableDropdownComponent {
@Input() @Input()
type: FilterableDropdownType = FilterableDropdownType.Filtering type: FilterableDropdownType = FilterableDropdownType.Filtering
types = FilterableDropdownType
@Input() @Input()
singular: boolean = false singular: boolean = false

View File

@ -26,9 +26,9 @@
<div class="col mb-2 mb-xl-0"> <div class="col mb-2 mb-xl-0">
<div class="d-flex"> <div class="d-flex">
<label class="ml-auto mt-1 mr-2">Apply:</label> <label class="ml-auto mt-1 mr-2">Apply:</label>
<app-filterable-dropdown class="mr-2 mr-md-3" title="Tags" icon="tag-fill" [selectableItems]="tagsSelectableItems" type="actions" (close)="applyTags($event)"></app-filterable-dropdown> <app-filterable-dropdown class="mr-2 mr-md-3" title="Tags" icon="tag-fill" [selectableItems]="tagsSelectableItems" [type]="dropdownTypes.Editing" (close)="applyTags($event)"></app-filterable-dropdown>
<app-filterable-dropdown class="mr-2 mr-md-3" title="Correspondent" icon="person-fill" [selectableItems]="correspondentsSelectableItems" type="actions" singular="true" (close)="applyCorrespondent($event)"></app-filterable-dropdown> <app-filterable-dropdown class="mr-2 mr-md-3" title="Correspondent" icon="person-fill" [selectableItems]="correspondentsSelectableItems" [type]="dropdownTypes.Editing" singular="true" (close)="applyCorrespondent($event)"></app-filterable-dropdown>
<app-filterable-dropdown class="mr-2 mr-md-3" title="Document Type" icon="file-earmark-fill" [selectableItems]="documentTypesSelectableItems" type="actions" singular="true" (close)="applyDocumentType($event)"></app-filterable-dropdown> <app-filterable-dropdown class="mr-2 mr-md-3" title="Document Type" icon="file-earmark-fill" [selectableItems]="documentTypesSelectableItems" [type]="dropdownTypes.Editing" singular="true" (close)="applyDocumentType($event)"></app-filterable-dropdown>
</div> </div>
</div> </div>
<div class="w-100 d-xl-none"></div> <div class="w-100 d-xl-none"></div>

View File

@ -7,7 +7,7 @@ import { TagService } from 'src/app/services/rest/tag.service';
import { CorrespondentService } from 'src/app/services/rest/correspondent.service'; import { CorrespondentService } from 'src/app/services/rest/correspondent.service';
import { DocumentTypeService } from 'src/app/services/rest/document-type.service'; import { DocumentTypeService } from 'src/app/services/rest/document-type.service';
import { DocumentService } from 'src/app/services/rest/document.service'; import { DocumentService } from 'src/app/services/rest/document.service';
import { SelectableItem, SelectableItemState } from 'src/app/components/common/filterable-dropdown/filterable-dropdown.component'; import { SelectableItem, SelectableItemState, FilterableDropdownType } from 'src/app/components/common/filterable-dropdown/filterable-dropdown.component';
@Component({ @Component({
selector: 'app-bulk-editor', selector: 'app-bulk-editor',
@ -47,6 +47,7 @@ export class BulkEditorComponent {
correspondents: PaperlessCorrespondent[] correspondents: PaperlessCorrespondent[]
documentTypes: PaperlessDocumentType[] documentTypes: PaperlessDocumentType[]
dropdownTypes = FilterableDropdownType
get tagsSelectableItems(): SelectableItem[] { get tagsSelectableItems(): SelectableItem[] {
let tagsSelectableItems = [] let tagsSelectableItems = []
let selectedDocuments: PaperlessDocument[] = this.allDocuments.filter(d => this.selectedDocuments.has(d.id)) let selectedDocuments: PaperlessDocument[] = this.allDocuments.filter(d => this.selectedDocuments.has(d.id))