Cutlery/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-11-03 19:17:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

addresses #107

Browse Source
This commit is contained in:
jonaswinkler 2020-12-07 22:29:51 +01:00
parent d4febbc40f
commit dfd844124d
3 changed files with 28 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,8 +1,14 @@
<div class="col p-2 h-100" style="width: 16rem;"> <div class="col p-2 h-100" style="width: 16rem;">
<div class="card h-100 shadow-sm"> <div class="card h-100 shadow-sm">
<div class=" border-bottom doc-img pr-1" [ngStyle]="{'background-image': 'url(' + getThumbUrl() + ')'}"> <div class=" border-bottom pr-1">
<div class="row" *ngFor="let t of document.tags$ | async"> <img class="card-img doc-img" [src]="getThumbUrl()">
<app-tag style="font-size: large;" [tag]="t" class="col text-right" (click)="clickTag.emit(t.id)" [clickable]="true" linkTitle="Filter by tag"></app-tag> <div style="top: 0; right: 0; font-size: large" class="text-right position-absolute mr-1">
<div *ngFor="let t of getTagsLimited$() | async">
<app-tag [tag]="t" (click)="clickTag.emit(t.id)" [clickable]="true" linkTitle="Filter by tag"></app-tag>
</div>
<div *ngIf="moreTags">
<span class="badge badge-secondary">+ {{moreTags}}</span>
</div>
</div> </div>
</div> </div>

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

@ -1,5 +1,5 @@
.doc-img { .doc-img {
background-size: cover; object-fit: cover;
background-position: top; object-position: top;
height: 200px; height: 200px;
} }

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

@ -1,4 +1,5 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { map } from 'rxjs/operators';
import { PaperlessDocument } from 'src/app/data/paperless-document'; import { PaperlessDocument } from 'src/app/data/paperless-document';
import { PaperlessTag } from 'src/app/data/paperless-tag'; import { PaperlessTag } from 'src/app/data/paperless-tag';
import { DocumentService } from 'src/app/services/rest/document.service'; import { DocumentService } from 'src/app/services/rest/document.service';
@ -21,6 +22,8 @@ export class DocumentCardSmallComponent implements OnInit {
@Output() @Output()
clickCorrespondent = new EventEmitter<number>() clickCorrespondent = new EventEmitter<number>()
moreTags: number = null
ngOnInit(): void { ngOnInit(): void {
} }
@ -35,4 +38,18 @@ export class DocumentCardSmallComponent implements OnInit {
getPreviewUrl() { getPreviewUrl() {
return this.documentService.getPreviewUrl(this.document.id) return this.documentService.getPreviewUrl(this.document.id)
} }
getTagsLimited$() {
return this.document.tags$.pipe(
map(tags => {
if (tags.length > 7) {
this.moreTags = tags.length - 6
return tags.slice(0, 6)
} else {
return tags
}
})
)
}
} }