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

Merge pull request #899 from paperless-ngx/feature-dashboard-loading-indicators

Browse Source 
Feature: initial app loading indicators
This commit is contained in:
shamoon 2022-05-10 17:01:37 -07:00 committed by GitHub
commit 2510216f21
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 40 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src-ui/src/app/components/app-frame/app-frame.component.html
View File

@ -70,8 +70,9 @@
</li>
</ul>
<h6 class="sidebar-heading px-3 mt-4 mb-1 text-muted" *ngIf='savedViewService.sidebarViews.length > 0'>
<h6 class="sidebar-heading px-3 mt-4 mb-1 text-muted" *ngIf='savedViewService.loading || savedViewService.sidebarViews.length > 0'>
<ng-container i18n>Saved views</ng-container>
<div *ngIf="savedViewService.loading" class="spinner-border spinner-border-sm fw-normal ms-2" role="status"></div>
</h6>
<ul class="nav flex-column mb-2">
<li class="nav-item w-100" *ngFor="let view of savedViewService.sidebarViews">

5
src-ui/src/app/components/app-frame/app-frame.component.scss
View File

@ -9,6 +9,11 @@
z-index: 995; /* Behind the navbar */
padding: 50px 0 0; /* Height of navbar */
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
.sidebar-heading .spinner-border {
width: 0.8em;
height: 0.8em;
}
}
@media (max-width: 767.98px) {
.sidebar {

9
src-ui/src/app/components/dashboard/dashboard.component.html
View File

@ -21,9 +21,14 @@
<div class='row'>
<div class="col-lg-8">
<app-welcome-widget *ngIf="savedViews.length == 0"></app-welcome-widget>
<ng-container *ngIf="savedViewService.loading">
<div class="spinner-border spinner-border-sm me-2" role="status"></div>
<ng-container i18n>Loading...</ng-container>
</ng-container>
<ng-container *ngFor="let v of savedViews">
<app-welcome-widget *ngIf="!savedViewService.loading && savedViewService.dashboardViews.length == 0"></app-welcome-widget>
<ng-container *ngFor="let v of savedViewService.dashboardViews">
<app-saved-view-widget [savedView]="v"></app-saved-view-widget>
</ng-container>

15
src-ui/src/app/components/dashboard/dashboard.component.ts
View File

@ -1,6 +1,5 @@
import { Component, OnInit } from '@angular/core'
import { Meta } from '@angular/platform-browser'
import { PaperlessSavedView } from 'src/app/data/paperless-saved-view'
import { SavedViewService } from 'src/app/services/rest/saved-view.service'
@Component({
@ -8,8 +7,8 @@ import { SavedViewService } from 'src/app/services/rest/saved-view.service'
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss'],
})
export class DashboardComponent implements OnInit {
constructor(private savedViewService: SavedViewService, private meta: Meta) {}
export class DashboardComponent {
constructor(public savedViewService: SavedViewService, private meta: Meta) {}
get displayName() {
let tagFullName = this.meta.getTag('name=full_name')
@ -30,14 +29,4 @@ export class DashboardComponent implements OnInit {
return $localize`Welcome to Paperless-ngx!`
}
}
savedViews: PaperlessSavedView[] = []
ngOnInit(): void {
this.savedViewService.listAll().subscribe((results) => {
this.savedViews = results.results.filter(
(savedView) => savedView.show_on_dashboard
)
})
}
}

2
src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html
View File

@ -1,4 +1,4 @@
<app-widget-frame [title]="savedView.name">
<app-widget-frame [title]="savedView.name" [loading]="loading">
<a class="btn-link" header-buttons [routerLink]="[]" (click)="showAll()" i18n>Show all</a>

4
src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts
View File

@ -15,6 +15,8 @@ import { QueryParamsService } from 'src/app/services/query-params.service'
styleUrls: ['./saved-view-widget.component.scss'],
})
export class SavedViewWidgetComponent implements OnInit, OnDestroy {
loading: boolean = true
constructor(
private documentService: DocumentService,
private router: Router,
@ -43,6 +45,7 @@ export class SavedViewWidgetComponent implements OnInit, OnDestroy {
}
reload() {
this.loading = true
this.documentService
.listFiltered(
1,
@ -52,6 +55,7 @@ export class SavedViewWidgetComponent implements OnInit, OnDestroy {
this.savedView.filter_rules
)
.subscribe((result) => {
this.loading = false
this.documents = result.results
})
}

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

@ -1,4 +1,4 @@
<app-widget-frame title="Statistics" i18n-title>
<app-widget-frame title="Statistics" [loading]="loading" i18n-title>
<ng-container content>
<p class="card-text" i18n *ngIf="statistics?.documents_inbox != null">Documents in inbox: {{statistics?.documents_inbox}}</p>
<p class="card-text" i18n>Total documents: {{statistics?.documents_total}}</p>

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

@ -15,6 +15,8 @@ export interface Statistics {
styleUrls: ['./statistics-widget.component.scss'],
})
export class StatisticsWidgetComponent implements OnInit, OnDestroy {
loading: boolean = true
constructor(
private http: HttpClient,
private consumerStatusService: ConsumerStatusService
@ -29,7 +31,9 @@ export class StatisticsWidgetComponent implements OnInit, OnDestroy {
}
reload() {
this.loading = true
this.getStatistics().subscribe((statistics) => {
this.loading = false
this.statistics = statistics
})
}

4
src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html
View File

@ -2,6 +2,10 @@
<div class="card-header">
<div class="d-flex justify-content-between align-items-center">
<h5 class="card-title mb-0">{{title}}</h5>
<ng-container *ngIf="loading">
<div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
<div class="visually-hidden" i18n>Loading...</div>
</ng-container>
<ng-content select ="[header-buttons]"></ng-content>
</div>

3
src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.ts
View File

@ -11,5 +11,8 @@ export class WidgetFrameComponent implements OnInit {
@Input()
title: string
@Input()
loading: boolean = false
ngOnInit(): void {}
}

8
src-ui/src/app/services/rest/saved-view.service.ts
View File

@ -9,13 +9,19 @@ import { AbstractPaperlessService } from './abstract-paperless-service'
providedIn: 'root',
})
export class SavedViewService extends AbstractPaperlessService<PaperlessSavedView> {
loading: boolean
constructor(http: HttpClient) {
super(http, 'saved_views')
this.reload()
}
private reload() {
this.listAll().subscribe((r) => (this.savedViews = r.results))
this.loading = true
this.listAll().subscribe((r) => {
this.savedViews = r.results
this.loading = false
})
}
private savedViews: PaperlessSavedView[] = []