paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-07-28 18:24:38 -05:00
Code Issues Packages Projects Releases Wiki Activity

Enhancement: slightly nicer filter editor loading

Browse Source
This commit is contained in:
shamoon
2024-12-09 09:52:36 -08:00
parent e4f69dc945
commit 084f2f2822
4 changed files with 88 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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">
<div class="form-inline d-flex align-items-center fade" [class.reveal]="reveal">
<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" title="Tags" icon="tag-fill" i18n-title
<pngx-filterable-dropdown class="flex-fill fade" [class.reveal]="reveal" 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" title="Correspondent" icon="person-fill" i18n-title
<pngx-filterable-dropdown class="flex-fill fade" [class.reveal]="reveal" 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" title="Document type" icon="file-earmark-fill" i18n-title
<pngx-filterable-dropdown class="flex-fill fade" [class.reveal]="reveal" 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" title="Storage path" icon="folder-fill" i18n-title
<pngx-filterable-dropdown class="flex-fill fade" [class.reveal]="reveal" 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" title="Custom fields" icon="ui-radios" i18n-title
<pngx-custom-fields-query-dropdown class="flex-fill fade" [class.reveal]="reveal" title="Custom fields" icon="ui-radios" i18n-title
[(selectionModel)]="customFieldQueriesModel"
(selectionModelChange)="updateRules()"
></pngx-custom-fields-query-dropdown>
}
<pngx-dates-dropdown
<pngx-dates-dropdown class="flex-fill fade" [class.reveal]="reveal"
title="Dates" i18n-title
(datesSet)="updateRules()"
[(createdDateBefore)]="dateCreatedBefore"
@@ -101,7 +101,7 @@
[(addedDateAfter)]="dateAddedAfter"
[(addedRelativeDate)]="dateAddedRelativeDate">
</pngx-dates-dropdown>
<pngx-permissions-filter-dropdown
<pngx-permissions-filter-dropdown class="flex-fill fade" [class.reveal]="reveal"
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,3 +25,7 @@ input[type="text"] {
.z-10 {
z-index: 10;
}
.reveal {
opacity: 1;
}

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

@@ -101,6 +101,7 @@ import {
CustomFieldQueryExpression,
CustomFieldQueryAtom,
} from 'src/app/utils/custom-field-query-element'
import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
const TEXT_FILTER_TARGET_TITLE = 'title'
const TEXT_FILTER_TARGET_TITLE_CONTENT = 'title-content'
@@ -187,7 +188,7 @@ const DEFAULT_TEXT_FILTER_MODIFIER_OPTIONS = [
styleUrls: ['./filter-editor.component.scss'],
})
export class FilterEditorComponent
extends ComponentWithPermissions
extends LoadingComponentWithPermissions
implements OnInit, OnDestroy, AfterViewInit
{
generateFilterName() {
@@ -289,8 +290,6 @@ export class FilterEditorComponent
_moreLikeId: number
_moreLikeDoc: Document
unsubscribeNotifier: Subject<any> = new Subject()
get textFilterTargets() {
if (this.textFilterTarget == TEXT_FILTER_TARGET_FULLTEXT_MORELIKE) {
return DEFAULT_TEXT_FILTER_TARGET_OPTIONS.concat([
@@ -955,16 +954,30 @@ export class FilterEditorComponent
@Input()
public disabled: boolean = false
private loadingCountTotal: number = 0
private loadingCount: number = 0
private maybeCompleteLoading() {
this.loadingCount++
if (this.loadingCount == this.loadingCountTotal) {
this.loading = false
this.reveal = true
}
}
ngOnInit() {
this.loading = true
if (
this.permissionsService.currentUserCan(
PermissionAction.View,
PermissionType.Tag
)
) {
this.tagService
.listAll()
.subscribe((result) => (this.tags = result.results))
this.loadingCountTotal++
this.tagService.listAll().subscribe((result) => {
this.tags = result.results
this.maybeCompleteLoading()
})
}
if (
this.permissionsService.currentUserCan(
@@ -972,9 +985,11 @@ export class FilterEditorComponent
PermissionType.Correspondent
)
) {
this.correspondentService
.listAll()
.subscribe((result) => (this.correspondents = result.results))
this.loadingCountTotal++
this.correspondentService.listAll().subscribe((result) => {
this.correspondents = result.results
this.maybeCompleteLoading()
})
}
if (
this.permissionsService.currentUserCan(
@@ -982,9 +997,11 @@ export class FilterEditorComponent
PermissionType.DocumentType
)
) {
this.documentTypeService
.listAll()
.subscribe((result) => (this.documentTypes = result.results))
this.loadingCountTotal++
this.documentTypeService.listAll().subscribe((result) => {
this.documentTypes = result.results
this.maybeCompleteLoading()
})
}
if (
this.permissionsService.currentUserCan(
@@ -992,9 +1009,11 @@ export class FilterEditorComponent
PermissionType.StoragePath
)
) {
this.storagePathService
.listAll()
.subscribe((result) => (this.storagePaths = result.results))
this.loadingCountTotal++
this.storagePathService.listAll().subscribe((result) => {
this.storagePaths = result.results
this.maybeCompleteLoading()
})
}
if (
this.permissionsService.currentUserCan(
@@ -1002,9 +1021,11 @@ export class FilterEditorComponent
PermissionType.CustomField
)
) {
this.customFieldService
.listAll()
.subscribe((result) => (this.customFields = result.results))
this.loadingCountTotal++
this.customFieldService.listAll().subscribe((result) => {
this.customFields = result.results
this.maybeCompleteLoading()
})
}
this.textFilterDebounce = new Subject<string>()