paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-04-02 13:45:10 -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 014859185c
commit 7cc3c73994
7 changed files with 18 additions and 21 deletions
Show Stats 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="card mb-3 shadow-sm" [class.card-selected]="selected" [class.document-card]="selectable">
<div class="row no-gutters"> <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"> <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 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"> <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> <label class="custom-control-label" for="smallCardCheck{{document.id}}"></label>
</div> </div>
</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() @Input()
selected = false selected = false
setSelected(value: boolean) {
this.selected = value
this.selectedChange.emit(value)
}
@Output() @Output()
selectedChange = new EventEmitter<boolean>() toggleSelected = new EventEmitter()
get selectable() { get selectable() {
return this.selectedChange.observers.length > 0 return this.toggleSelected.observers.length > 0
} }
@Input() @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="col p-2 h-100">
<div class="card h-100 shadow-sm document-card" [class.card-selected]="selected"> <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"> <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="border-right border-bottom bg-light p-1 rounded document-card-check">
<div class="custom-control custom-checkbox"> <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> <label class="custom-control-label" for="smallCardCheck{{document.id}}"></label>
</div> </div>
</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() @Input()
selected = false selected = false
setSelected(value: boolean) {
this.selected = value
this.selectedChange.emit(value)
}
@Output() @Output()
selectedChange = new EventEmitter<boolean>() toggleSelected = new EventEmitter()
@Input() @Input()
document: PaperlessDocument document: PaperlessDocument

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

@ -90,7 +90,7 @@
</div> </div>
<div *ngIf="displayMode == 'largeCards'"> <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> </app-document-card-large>
</div> </div>
@ -138,7 +138,7 @@
<tr *ngFor="let d of list.documents; trackBy: trackByDocumentId" [ngClass]="list.isSelected(d) ? 'table-row-selected' : ''"> <tr *ngFor="let d of list.documents; trackBy: trackByDocumentId" [ngClass]="list.isSelected(d) ? 'table-row-selected' : ''">
<td> <td>
<div class="custom-control custom-checkbox"> <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> <label class="custom-control-label" for="docCheck{{d.id}}"></label>
</div> </div>
</td> </td>
@ -170,5 +170,5 @@
</table> </table>
<div class="m-n2 row row-cols-paperless-cards" *ngIf="displayMode == 'smallCards'"> <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> </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 this.filterRulesModified = modified
} }
toggleSelected(document: PaperlessDocument, event: Event): void {
this.list.toggleSelected(document)
}
clickTag(tagID: number) { clickTag(tagID: number) {
this.list.selectNone() this.list.selectNone()
setTimeout(() => { setTimeout(() => {

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

@ -255,6 +255,9 @@ export class DocumentListViewService {
} else if (!value) { } else if (!value) {
this.selected.delete(d.id) 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) { constructor(private documentService: DocumentService, private settings: SettingsService, private router: Router) {