Enhancement: slightly nicer filter editor loading

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

View File

@ -1086,7 +1086,7 @@
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.ts</context>
<context context-type="linenumber">152</context>
<context context-type="linenumber">153</context>
</context-group>
</trans-unit>
<trans-unit id="5775451530782446954" datatype="html">
@ -2935,7 +2935,7 @@
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/document-list/document-card-small/document-card-small.component.html</context>
<context context-type="linenumber">147</context>
<context context-type="linenumber">143</context>
</context-group>
</trans-unit>
<trans-unit id="6329940072345709724" datatype="html">
@ -2969,7 +2969,7 @@
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/document-list/document-card-small/document-card-small.component.html</context>
<context context-type="linenumber">153</context>
<context context-type="linenumber">149</context>
</context-group>
</trans-unit>
<trans-unit id="searchResults.noResults" datatype="html">
@ -6259,7 +6259,7 @@
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.ts</context>
<context context-type="linenumber">140</context>
<context context-type="linenumber">141</context>
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/app/data/document.ts</context>
@ -6870,7 +6870,7 @@
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.ts</context>
<context context-type="linenumber">148</context>
<context context-type="linenumber">149</context>
</context-group>
</trans-unit>
<trans-unit id="6475890479659129881" datatype="html">
@ -7227,11 +7227,11 @@
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/document-list/document-card-small/document-card-small.component.html</context>
<context context-type="linenumber">80,81</context>
<context context-type="linenumber">76,77</context>
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/document-list/document-card-small/document-card-small.component.html</context>
<context context-type="linenumber">95,96</context>
<context context-type="linenumber">91,92</context>
</context-group>
</trans-unit>
<trans-unit id="2030261243264601523" datatype="html">
@ -7242,11 +7242,11 @@
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/document-list/document-card-small/document-card-small.component.html</context>
<context context-type="linenumber">81,82</context>
<context context-type="linenumber">77,78</context>
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/document-list/document-card-small/document-card-small.component.html</context>
<context context-type="linenumber">96,97</context>
<context context-type="linenumber">92,93</context>
</context-group>
</trans-unit>
<trans-unit id="4235671847487610290" datatype="html">
@ -7257,11 +7257,11 @@
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/document-list/document-card-small/document-card-small.component.html</context>
<context context-type="linenumber">82,83</context>
<context context-type="linenumber">78,79</context>
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/document-list/document-card-small/document-card-small.component.html</context>
<context context-type="linenumber">97,98</context>
<context context-type="linenumber">93,94</context>
</context-group>
</trans-unit>
<trans-unit id="197162226430950645" datatype="html">
@ -7272,7 +7272,7 @@
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/document-list/document-card-small/document-card-small.component.html</context>
<context context-type="linenumber">110</context>
<context context-type="linenumber">106</context>
</context-group>
</trans-unit>
<trans-unit id="5739581984228459958" datatype="html">
@ -7283,7 +7283,7 @@
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/document-list/document-card-small/document-card-small.component.html</context>
<context context-type="linenumber">129</context>
<context context-type="linenumber">125</context>
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/app/data/document.ts</context>
@ -7319,14 +7319,14 @@
<source>Toggle document type filter</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/document-list/document-card-small/document-card-small.component.html</context>
<context context-type="linenumber">63</context>
<context context-type="linenumber">59</context>
</context-group>
</trans-unit>
<trans-unit id="8950368321707344185" datatype="html">
<source>Toggle storage path filter</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/document-list/document-card-small/document-card-small.component.html</context>
<context context-type="linenumber">70</context>
<context context-type="linenumber">66</context>
</context-group>
</trans-unit>
<trans-unit id="5145213156408463657" datatype="html">
@ -7458,7 +7458,7 @@
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.ts</context>
<context context-type="linenumber">145</context>
<context context-type="linenumber">146</context>
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/app/data/document.ts</context>
@ -7662,147 +7662,147 @@
<source>Title &amp; content</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.ts</context>
<context context-type="linenumber">143</context>
<context context-type="linenumber">144</context>
</context-group>
</trans-unit>
<trans-unit id="2649431021108393503" datatype="html">
<source>More like</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.ts</context>
<context context-type="linenumber">158</context>
<context context-type="linenumber">159</context>
</context-group>
</trans-unit>
<trans-unit id="3697582909018473071" datatype="html">
<source>equals</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.ts</context>
<context context-type="linenumber">164</context>
<context context-type="linenumber">165</context>
</context-group>
</trans-unit>
<trans-unit id="5325481293405718739" datatype="html">
<source>is empty</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.ts</context>
<context context-type="linenumber">168</context>
<context context-type="linenumber">169</context>
</context-group>
</trans-unit>
<trans-unit id="6166785695326182482" datatype="html">
<source>is not empty</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.ts</context>
<context context-type="linenumber">172</context>
<context context-type="linenumber">173</context>
</context-group>
</trans-unit>
<trans-unit id="4686622206659266699" datatype="html">
<source>greater than</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.ts</context>
<context context-type="linenumber">176</context>
<context context-type="linenumber">177</context>
</context-group>
</trans-unit>
<trans-unit id="8014012170270529279" datatype="html">
<source>less than</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.ts</context>
<context context-type="linenumber">180</context>
<context context-type="linenumber">181</context>
</context-group>
</trans-unit>
<trans-unit id="5195932016807797291" datatype="html">
<source>Correspondent: <x id="PH" equiv-text="this.correspondents.find((c) =&gt; c.id == +rule.value)?.name"/></source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.ts</context>
<context context-type="linenumber">200,202</context>
<context context-type="linenumber">201,203</context>
</context-group>
</trans-unit>
<trans-unit id="8170755470576301659" datatype="html">
<source>Without correspondent</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.ts</context>
<context context-type="linenumber">204</context>
<context context-type="linenumber">205</context>
</context-group>
</trans-unit>
<trans-unit id="317796810569008208" datatype="html">
<source>Document type: <x id="PH" equiv-text="this.documentTypes.find((dt) =&gt; dt.id == +rule.value)?.name"/></source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.ts</context>
<context context-type="linenumber">210,212</context>
<context context-type="linenumber">211,213</context>
</context-group>
</trans-unit>
<trans-unit id="4362173610367509215" datatype="html">
<source>Without document type</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.ts</context>
<context context-type="linenumber">214</context>
<context context-type="linenumber">215</context>
</context-group>
</trans-unit>
<trans-unit id="232202047340644471" datatype="html">
<source>Storage path: <x id="PH" equiv-text="this.storagePaths.find((sp) =&gt; sp.id == +rule.value)?.name"/></source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.ts</context>
<context context-type="linenumber">220,222</context>
<context context-type="linenumber">221,223</context>
</context-group>
</trans-unit>
<trans-unit id="1562820715074533164" datatype="html">
<source>Without storage path</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.ts</context>
<context context-type="linenumber">224</context>
<context context-type="linenumber">225</context>
</context-group>
</trans-unit>
<trans-unit id="8180755793012580465" datatype="html">
<source>Tag: <x id="PH" equiv-text="this.tags.find((t) =&gt; t.id == +rule.value)?.name"/></source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.ts</context>
<context context-type="linenumber">228,230</context>
<context context-type="linenumber">229,231</context>
</context-group>
</trans-unit>
<trans-unit id="6494566478302448576" datatype="html">
<source>Without any tag</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.ts</context>
<context context-type="linenumber">234</context>
<context context-type="linenumber">235</context>
</context-group>
</trans-unit>
<trans-unit id="8644099678903817943" datatype="html">
<source>Custom fields query</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.ts</context>
<context context-type="linenumber">238</context>
<context context-type="linenumber">239</context>
</context-group>
</trans-unit>
<trans-unit id="6523384805359286307" datatype="html">
<source>Title: <x id="PH" equiv-text="rule.value"/></source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.ts</context>
<context context-type="linenumber">241</context>
<context context-type="linenumber">242</context>
</context-group>
</trans-unit>
<trans-unit id="1872523635812236432" datatype="html">
<source>ASN: <x id="PH" equiv-text="rule.value"/></source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.ts</context>
<context context-type="linenumber">244</context>
<context context-type="linenumber">245</context>
</context-group>
</trans-unit>
<trans-unit id="102674688969746976" datatype="html">
<source>Owner: <x id="PH" equiv-text="rule.value"/></source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.ts</context>
<context context-type="linenumber">247</context>
<context context-type="linenumber">248</context>
</context-group>
</trans-unit>
<trans-unit id="3550877650686009106" datatype="html">
<source>Owner not in: <x id="PH" equiv-text="rule.value"/></source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.ts</context>
<context context-type="linenumber">250</context>
<context context-type="linenumber">251</context>
</context-group>
</trans-unit>
<trans-unit id="1082034558646673343" datatype="html">
<source>Without an owner</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/document-list/filter-editor/filter-editor.component.ts</context>
<context context-type="linenumber">253</context>
<context context-type="linenumber">254</context>
</context-group>
</trans-unit>
<trans-unit id="7210076240260527720" datatype="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>

View File

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

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>()