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

truncate long mime types + limit total types displayed

Browse Source
This commit is contained in:
shamoon 2023-03-18 14:25:37 -07:00
parent f3eedec402
commit 2bc7f0b8e0
4 changed files with 27 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src-ui/messages.xlf
View File

@ -2244,6 +2244,13 @@
<context context-type="linenumber">17</context>
</context-group>
</trans-unit>
<trans-unit id="3881818169480672345" datatype="html">
<source>other</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.ts</context>
<context context-type="linenumber">56</context>
</context-group>
</trans-unit>
<trans-unit id="8187573012244728580" datatype="html">
<source>Upload new documents</source>
<context-group purpose="location">

23
src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.html
View File

@ -15,32 +15,13 @@
</div>
<div class="list-group-item d-flex justify-content-between align-items-center">
<div class="flex-grow-1"><ng-container i18n>File types</ng-container>:</div>
<div class="d-flex flex-column flex-grow-1">
<div class="d-flex flex-column flex-grow-1 filetypes-list">
<div *ngFor="let filetype of statistics?.document_file_type_counts; let i = index" class="d-flex justify-content-between align-items-center">
<span class="fst-italic text-muted">{{filetype.mime_type}}</span>
<span class="fst-italic text-muted text-truncate pe-3">{{filetype.mime_type}}</span>
<span class="badge bg-secondary text-light rounded-pill">{{getFileTypePercent(filetype) | number: '1.0-1'}}%</span>
</div>
</div>
</div>
<!-- <div class="list-group-item border-dark d-flex justify-content-between align-items-center">
<span class="me-3" i18n>File types:</span>
<div class="progress flex-grow-1">
<div *ngFor="let filetype of statistics?.document_file_type_counts; let i = index"
class="progress-bar bg-primary text-primary-contrast"
[class.me-1]="i < statistics?.document_file_type_counts.length - 1"
role="progressbar"
[ngbPopover]="filetype.mime_type"
i18n-ngbPopover
triggers="mouseenter:mouseleave"
[attr.aria-label]="filetype.mime_type"
[style.width]="getFileTypePercent(filetype) + '%'"
[attr.aria-valuenow]="getFileTypePercent(filetype)"
aria-valuemin="0"
aria-valuemax="100">
<ng-container *ngIf="getFileTypePercent(filetype) > 25">{{filetype.mime_type}}</ng-container>
</div>
</div>
</div> -->
</div>
</ng-container>
</app-widget-frame>

4
src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.scss
View File

@ -1,3 +1,7 @@
.flex-column {
row-gap: 0.2rem;
}
.filetypes-list {
max-width: 75%;
}

14
src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.ts
View File

@ -48,6 +48,20 @@ export class StatisticsWidgetComponent implements OnInit, OnDestroy {
this.loading = true
this.getStatistics().subscribe((statistics) => {
this.loading = false
// truncate the list and sum others
if (statistics.document_file_type_counts?.length > 4) {
let others = statistics.document_file_type_counts.slice(4)
statistics.document_file_type_counts =
statistics.document_file_type_counts.slice(0, 4)
statistics.document_file_type_counts.push({
mime_type: $localize`other`,
mime_type_count: others.reduce(
(currentValue, documentFileType) =>
documentFileType.mime_type_count + currentValue,
0
),
})
}
this.statistics = statistics
})
}