paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-08-14 00:26:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Chore: refactor loading stuff to be more DRY

Browse Source
This commit is contained in:
shamoon
2024-12-09 12:36:48 -08:00
parent c2e34b36ce
commit 0a7c296194
34 changed files with 87 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
View File

@@ -1,4 +1,4 @@
<div class="card document-card-large mb-3 shadow-sm bg-light placeholder-glow" [class.card-selected]="selected" [class.document-card]="selectable" (mouseleave)="mouseLeaveCard()">
<div class="card document-card-large mb-3 shadow-sm bg-light placeholder-glow fade" [class.show]="show" [class.card-selected]="selected" [class.document-card]="selectable" (mouseleave)="mouseLeaveCard()">
<div class="row g-0">
<div class="col-md-2 doc-img-container rounded-start" (click)="this.toggleSelected.emit($event)" (dblclick)="dblClickDocument.emit()">
@if (document) {

8
src-ui/src/app/components/document-list/document-card-large/document-card-large.component.spec.ts
View File

@@ -71,6 +71,14 @@ describe('DocumentCardLargeComponent', () => {
component = fixture.componentInstance
component.document = doc
fixture.detectChanges()
jest.useFakeTimers()
})
it('should show the card', () => {
expect(component.show).toBeFalsy()
component.ngAfterViewInit()
jest.advanceTimersByTime(100)
expect(component.show).toBeTruthy()
})
it('should display a document', () => {

14
src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts
View File

@@ -1,4 +1,5 @@
import {
AfterViewInit,
Component,
EventEmitter,
Input,
@@ -13,7 +14,7 @@ import {
import { DocumentService } from 'src/app/services/rest/document.service'
import { SettingsService } from 'src/app/services/settings.service'
import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
import { PreviewPopupComponent } from '../../common/preview-popup/preview-popup.component'
@Component({
@@ -21,7 +22,10 @@ import { PreviewPopupComponent } from '../../common/preview-popup/preview-popup.
templateUrl: './document-card-large.component.html',
styleUrls: ['./document-card-large.component.scss'],
})
export class DocumentCardLargeComponent extends ComponentWithPermissions {
export class DocumentCardLargeComponent
extends LoadingComponentWithPermissions
implements AfterViewInit
{
DisplayField = DisplayField
constructor(
@@ -70,6 +74,12 @@ export class DocumentCardLargeComponent extends ComponentWithPermissions {
mouseOnPreview = false
popoverHidden = true
ngAfterViewInit(): void {
setInterval(() => {
this.show = true
}, 100)
}
get searchScoreClass() {
if (this.document.__search_hit__) {
if (this.document.__search_hit__.score > 0.7) {

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

@@ -1,4 +1,4 @@
<div class="col p-2 h-100">
<div class="col p-2 h-100 fade" [class.show]="show">
<div class="card h-100 shadow-sm document-card" [class.placeholder-glow]="!document" [class.card-selected]="selected" (mouseleave)="mouseLeaveCard()">
<div class="border-bottom doc-img-container rounded-top" (click)="this.toggleSelected.emit($event)" (dblclick)="dblClickDocument.emit(this)">
@if (document) {

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

@@ -85,6 +85,14 @@ describe('DocumentCardSmallComponent', () => {
component = fixture.componentInstance
component.document = Object.assign({}, doc)
fixture.detectChanges()
jest.useFakeTimers()
})
it('should show the card', () => {
expect(component.show).toBeFalsy()
component.ngAfterViewInit()
jest.advanceTimersByTime(100)
expect(component.show).toBeTruthy()
})
it('should display page count', () => {

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

@@ -1,4 +1,5 @@
import {
AfterViewInit,
Component,
EventEmitter,
Input,
@@ -14,7 +15,7 @@ import {
import { DocumentService } from 'src/app/services/rest/document.service'
import { SettingsService } from 'src/app/services/settings.service'
import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
import { PreviewPopupComponent } from '../../common/preview-popup/preview-popup.component'
@Component({
@@ -22,7 +23,10 @@ import { PreviewPopupComponent } from '../../common/preview-popup/preview-popup.
templateUrl: './document-card-small.component.html',
styleUrls: ['./document-card-small.component.scss'],
})
export class DocumentCardSmallComponent extends ComponentWithPermissions {
export class DocumentCardSmallComponent
extends LoadingComponentWithPermissions
implements AfterViewInit
{
DisplayField = DisplayField
constructor(
@@ -63,6 +67,12 @@ export class DocumentCardSmallComponent extends ComponentWithPermissions {
@ViewChild('popupPreview') popupPreview: PreviewPopupComponent
ngAfterViewInit(): void {
setInterval(() => {
this.show = true
}, 50)
}
getIsThumbInverted() {
return this.settingsService.get(SETTINGS_KEYS.DARK_MODE_THUMB_INVERTED)
}

16
src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
View File

@@ -1,6 +1,6 @@
<div class="row flex-wrap row-gap-3" tourAnchor="tour.documents-filter-editor">
<div class="col">
<div class="form-inline d-flex align-items-center fade" [class.reveal]="reveal">
<div class="form-inline d-flex align-items-center fade" [class.show]="show">
<div class="input-group input-group-sm flex-fill w-auto flex-nowrap">
<div ngbDropdown>
<button class="btn btn-sm btn-outline-primary" ngbDropdownToggle>{{textFilterTargetName}}</button>
@@ -36,7 +36,7 @@
<div class="d-flex flex-wrap gap-3">
<div class="d-flex flex-wrap gap-2">
@if (permissionsService.currentUserCan(PermissionAction.View, PermissionType.Tag) && tags.length > 0) {
<pngx-filterable-dropdown class="flex-fill fade" [class.reveal]="reveal" title="Tags" icon="tag-fill" i18n-title
<pngx-filterable-dropdown class="flex-fill fade" [class.show]="show" title="Tags" icon="tag-fill" i18n-title
filterPlaceholder="Filter tags" i18n-filterPlaceholder
[items]="tags"
[manyToOne]="true"
@@ -49,7 +49,7 @@
shortcutKey="t"></pngx-filterable-dropdown>
}
@if (permissionsService.currentUserCan(PermissionAction.View, PermissionType.Correspondent) && correspondents.length > 0) {
<pngx-filterable-dropdown class="flex-fill fade" [class.reveal]="reveal" title="Correspondent" icon="person-fill" i18n-title
<pngx-filterable-dropdown class="flex-fill fade" [class.show]="show" title="Correspondent" icon="person-fill" i18n-title
filterPlaceholder="Filter correspondents" i18n-filterPlaceholder
[items]="correspondents"
[(selectionModel)]="correspondentSelectionModel"
@@ -61,7 +61,7 @@
shortcutKey="y"></pngx-filterable-dropdown>
}
@if (permissionsService.currentUserCan(PermissionAction.View, PermissionType.DocumentType) && documentTypes.length > 0) {
<pngx-filterable-dropdown class="flex-fill fade" [class.reveal]="reveal" title="Document type" icon="file-earmark-fill" i18n-title
<pngx-filterable-dropdown class="flex-fill fade" [class.show]="show" title="Document type" icon="file-earmark-fill" i18n-title
filterPlaceholder="Filter document types" i18n-filterPlaceholder
[items]="documentTypes"
[(selectionModel)]="documentTypeSelectionModel"
@@ -73,7 +73,7 @@
shortcutKey="u"></pngx-filterable-dropdown>
}
@if (permissionsService.currentUserCan(PermissionAction.View, PermissionType.StoragePath) && storagePaths.length > 0) {
<pngx-filterable-dropdown class="flex-fill fade" [class.reveal]="reveal" title="Storage path" icon="folder-fill" i18n-title
<pngx-filterable-dropdown class="flex-fill fade" [class.show]="show" title="Storage path" icon="folder-fill" i18n-title
filterPlaceholder="Filter storage paths" i18n-filterPlaceholder
[items]="storagePaths"
[(selectionModel)]="storagePathSelectionModel"
@@ -86,12 +86,12 @@
}
@if (permissionsService.currentUserCan(PermissionAction.View, PermissionType.CustomField) && customFields.length > 0) {
<pngx-custom-fields-query-dropdown class="flex-fill fade" [class.reveal]="reveal" title="Custom fields" icon="ui-radios" i18n-title
<pngx-custom-fields-query-dropdown class="flex-fill fade" [class.show]="show" title="Custom fields" icon="ui-radios" i18n-title
[(selectionModel)]="customFieldQueriesModel"
(selectionModelChange)="updateRules()"
></pngx-custom-fields-query-dropdown>
}
<pngx-dates-dropdown class="flex-fill fade" [class.reveal]="reveal"
<pngx-dates-dropdown class="flex-fill fade" [class.show]="show"
title="Dates" i18n-title
(datesSet)="updateRules()"
[(createdDateBefore)]="dateCreatedBefore"
@@ -101,7 +101,7 @@
[(addedDateAfter)]="dateAddedAfter"
[(addedRelativeDate)]="dateAddedRelativeDate">
</pngx-dates-dropdown>
<pngx-permissions-filter-dropdown class="flex-fill fade" [class.reveal]="reveal"
<pngx-permissions-filter-dropdown class="flex-fill fade" [class.show]="show"
title="Permissions" i18n-title
(ownerFilterSet)="updateRules()"
[(selectionModel)]="permissionsSelectionModel"></pngx-permissions-filter-dropdown>

4
src-ui/src/app/components/document-list/filter-editor/filter-editor.component.scss
View File

@@ -25,7 +25,3 @@ input[type="text"] {
.z-10 {
z-index: 10;
}
.reveal {
opacity: 1;
}

2
src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
View File

@@ -961,7 +961,7 @@ export class FilterEditorComponent
this.loadingCount++
if (this.loadingCount == this.loadingCountTotal) {
this.loading = false
this.reveal = true
this.show = true
}
}