paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-10-30 03:56:23 -05:00
Code Issues Packages Projects Releases Wiki Activity

Convert selection functions on cards to toggling, let service handle setting selected

Browse Source 
Also because we need to capture mouseevents
This commit is contained in:
Michael Shamoon
2021-01-14 10:56:30 -08:00
parent 35b7346d39
commit 1d88b86238
7 changed files with 18 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
View File

@@ -1,11 +1,11 @@
<div class="card mb-3 shadow-sm" [class.card-selected]="selected" [class.document-card]="selectable">
<div class="row no-gutters">
<div class="col-md-2 d-none d-lg-block doc-img-background rounded-left" [class.doc-img-background-selected]="selected">
<img [src]="getThumbUrl()" class="card-img doc-img border-right rounded-left" (click)="setSelected(selectable ? !selected : false)">
<img [src]="getThumbUrl()" class="card-img doc-img border-right rounded-left" (click)="toggleSelected.emit($event)">
<div style="top: 0; left: 0" class="position-absolute border-right border-bottom bg-light p-1" [class.document-card-check]="!selected">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="smallCardCheck{{document.id}}" [checked]="selected" (change)="setSelected($event.target.checked)">
<input type="checkbox" class="custom-control-input" id="smallCardCheck{{document.id}}" [checked]="selected" (click)="toggleSelected.emit($event)">
<label class="custom-control-label" for="smallCardCheck{{document.id}}"></label>
</div>
</div>

9
src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts
View File

@@ -15,16 +15,11 @@ export class DocumentCardLargeComponent implements OnInit {
@Input()
selected = false
setSelected(value: boolean) {
this.selected = value
this.selectedChange.emit(value)
}
@Output()
selectedChange = new EventEmitter<boolean>()
toggleSelected = new EventEmitter()
get selectable() {
return this.selectedChange.observers.length > 0
return this.toggleSelected.observers.length > 0
}
@Input()

4
src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
View File

@@ -1,11 +1,11 @@
<div class="col p-2 h-100">
<div class="card h-100 shadow-sm document-card" [class.card-selected]="selected">
<div class="border-bottom doc-img-container" [class.doc-img-background-selected]="selected">
<img class="card-img doc-img rounded-top" [src]="getThumbUrl()" (click)="setSelected(!selected)">
<img class="card-img doc-img rounded-top" [src]="getThumbUrl()" (click)="toggleSelected.emit($event)">
<div class="border-right border-bottom bg-light p-1 rounded document-card-check">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="smallCardCheck{{document.id}}" [checked]="selected" (change)="setSelected($event.target.checked)">
<input type="checkbox" class="custom-control-input" id="smallCardCheck{{document.id}}" [checked]="selected" (click)="toggleSelected.emit($event)">
<label class="custom-control-label" for="smallCardCheck{{document.id}}"></label>
</div>
</div>

9
src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts
View File

@@ -14,14 +14,9 @@ export class DocumentCardSmallComponent implements OnInit {
@Input()
selected = false
setSelected(value: boolean) {
this.selected = value
this.selectedChange.emit(value)
}
@Output()
selectedChange = new EventEmitter<boolean>()
toggleSelected = new EventEmitter()
@Input()
document: PaperlessDocument

6
src-ui/src/app/components/document-list/document-list.component.html
View File

@@ -90,7 +90,7 @@
</div>
<div *ngIf="displayMode == 'largeCards'">
<app-document-card-large [selected]="list.isSelected(d)" (selectedChange)="list.setSelected(d, $event)" *ngFor="let d of list.documents; trackBy: trackByDocumentId" [document]="d" [details]="d.content" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)">
<app-document-card-large [selected]="list.isSelected(d)" (toggleSelected)="toggleSelected(d, $event)" *ngFor="let d of list.documents; trackBy: trackByDocumentId" [document]="d" [details]="d.content" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)">
</app-document-card-large>
</div>
@@ -138,7 +138,7 @@
<tr *ngFor="let d of list.documents; trackBy: trackByDocumentId" [ngClass]="list.isSelected(d) ? 'table-row-selected' : ''">
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="docCheck{{d.id}}" [checked]="list.isSelected(d)" (change)="list.setSelected(d, $event.target.checked)">
<input type="checkbox" class="custom-control-input" id="docCheck{{d.id}}" [checked]="list.isSelected(d)" (click)="toggleSelected(d, $event)">
<label class="custom-control-label" for="docCheck{{d.id}}"></label>
</div>
</td>
@@ -170,5 +170,5 @@
</table>
<div class="m-n2 row row-cols-paperless-cards" *ngIf="displayMode == 'smallCards'">
<app-document-card-small [selected]="list.isSelected(d)" (selectedChange)="list.setSelected(d, $event)" [document]="d" *ngFor="let d of list.documents; trackBy: trackByDocumentId" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)"></app-document-card-small>
<app-document-card-small [selected]="list.isSelected(d)" (toggleSelected)="toggleSelected(d, $event)" [document]="d" *ngFor="let d of list.documents; trackBy: trackByDocumentId" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)"></app-document-card-small>
</div>

4
src-ui/src/app/components/document-list/document-list.component.ts
View File

@@ -160,6 +160,10 @@ export class DocumentListComponent implements OnInit {
this.filterRulesModified = modified
}
toggleSelected(document: PaperlessDocument, event: Event): void {
this.list.toggleSelected(document)
}
clickTag(tagID: number) {
this.list.selectNone()
setTimeout(() => {

3
src-ui/src/app/services/document-list-view.service.ts
View File

@@ -255,6 +255,9 @@ export class DocumentListViewService {
} else if (!value) {
this.selected.delete(d.id)
}
toggleSelected(d: PaperlessDocument): void {
if (this.selected.has(d.id)) this.selected.delete(d.id)
else this.selected.add(d.id)
}
constructor(private documentService: DocumentService, private settings: SettingsService, private router: Router) {