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

Maximum limit of alerts

Browse Source
This commit is contained in:
Michael Shamoon 2021-01-26 14:48:39 -08:00
parent 52f17a9ba6
commit 51dc40ae73
3 changed files with 39 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html
View File

@ -1,4 +1,4 @@
<app-widget-frame title="Upload new documents" i18n-title [class.has-multiple-status]="getStatus().length > 1"> <app-widget-frame title="Upload new documents" i18n-title [class.has-multiple-status]="(getStatus().length + getStatusesHidden().length)> 1">
<div header-buttons> <div header-buttons>
<button type="button" class="btn btn-link dismiss-all" [disabled]="!getStatus().length" (click)="dismissAll()"> <button type="button" class="btn btn-link dismiss-all" [disabled]="!getStatus().length" (click)="dismissAll()">
<small class="mr-1">Hide all</small> <small class="mr-1">Hide all</small>
@ -17,19 +17,31 @@
</ngx-file-drop> </ngx-file-drop>
</form> </form>
<div *ngFor="let status of getStatus()"> <div *ngFor="let status of getStatus()">
<ngb-alert type="secondary" class="mt-2 mb-0" [dismissible]="isFinished(status)" (closed)="dismiss(status)"> <ng-container [ngTemplateOutlet]="consumerAlert" [ngTemplateOutletContext]="{ $implicit: status }"></ng-container>
<h6 class="alert-heading">{{status.filename}}</h6> </div>
<p class="mb-0 pb-1" *ngIf="!isFinished(status) || (isFinished(status) && !status.documentId)">{{status.message}}</p> <div *ngIf="getStatusesHidden().length" class="alerts-hidden">
<ngb-progressbar [value]="status.getProgress()" [max]="1" [type]="getStatusColor(status)"></ngb-progressbar> <p *ngIf="!alertsExpanded" class="mt-3 mb-0 text-center">{{getStatusesHidden().length}} more hidden <button class="btn btn-sm btn-link py-0" (click)="alertsExpanded = !alertsExpanded" aria-controls="hiddenAlerts" [attr.aria-expanded]="alertsExpanded">Show all</button></p>
<div *ngIf="isFinished(status)"> <div #hiddenAlerts="ngbCollapse" [(ngbCollapse)]="!alertsExpanded">
<button *ngIf="status.documentId" class="btn btn-sm btn-outline-primary btn-open" routerLink="/documents/{{status.documentId}}" (click)="dismiss(status)"> <div *ngFor="let status of getStatusesHidden()">
<small>Open document</small> <ng-container [ngTemplateOutlet]="consumerAlert" [ngTemplateOutletContext]="{ $implicit: status }"></ng-container>
<svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" fill="currentColor" class="bi bi-arrow-right-short" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/>
</svg>
</button>
</div> </div>
</ngb-alert> </div>
</div> </div>
</div> </div>
</app-widget-frame> </app-widget-frame>
<ng-template #consumerAlert let-status>
<ngb-alert type="secondary" class="mt-2 mb-0" [dismissible]="isFinished(status)" (closed)="dismiss(status)">
<h6 class="alert-heading">{{status.filename}}</h6>
<p class="mb-0 pb-1" *ngIf="!isFinished(status) || (isFinished(status) && !status.documentId)">{{status.message}}</p>
<ngb-progressbar [value]="status.getProgress()" [max]="1" [type]="getStatusColor(status)"></ngb-progressbar>
<div *ngIf="isFinished(status)">
<button *ngIf="status.documentId" class="btn btn-sm btn-outline-primary btn-open" routerLink="/documents/{{status.documentId}}" (click)="dismiss(status)">
<small>Open document</small>
<svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" fill="currentColor" class="bi bi-arrow-right-short" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/>
</svg>
</button>
</div>
</ngb-alert>
</ng-template>

6
src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.scss
View File

@ -9,6 +9,12 @@ form {
font-weight: bold; font-weight: bold;
} }
.alerts-hidden {
.btn {
line-height: 1;
}
}
.btn-open { .btn-open {
line-height: 1; line-height: 1;

9
src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.ts
View File

@ -4,6 +4,7 @@ import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop';
import { ConsumerStatusService, FileStatus, FileStatusPhase } from 'src/app/services/consumer-status.service'; import { ConsumerStatusService, FileStatus, FileStatusPhase } from 'src/app/services/consumer-status.service';
import { DocumentService } from 'src/app/services/rest/document.service'; import { DocumentService } from 'src/app/services/rest/document.service';
const MAX_ALERTS = 5
@Component({ @Component({
selector: 'app-upload-file-widget', selector: 'app-upload-file-widget',
@ -11,6 +12,7 @@ import { DocumentService } from 'src/app/services/rest/document.service';
styleUrls: ['./upload-file-widget.component.scss'] styleUrls: ['./upload-file-widget.component.scss']
}) })
export class UploadFileWidgetComponent implements OnInit { export class UploadFileWidgetComponent implements OnInit {
alertsExpanded = false
constructor( constructor(
private documentService: DocumentService, private documentService: DocumentService,
@ -18,7 +20,12 @@ export class UploadFileWidgetComponent implements OnInit {
) { } ) { }
getStatus() { getStatus() {
return this.consumerStatusService.getConsumerStatus() return this.consumerStatusService.getConsumerStatus().slice(0, MAX_ALERTS)
}
getStatusesHidden() {
if (this.consumerStatusService.getConsumerStatus().length < MAX_ALERTS) return []
else return this.consumerStatusService.getConsumerStatus().slice(MAX_ALERTS)
} }
getStatusUploading() { getStatusUploading() {