From a6b0f75d1bcc84e36dc830b785570623a4cb501c Mon Sep 17 00:00:00 2001 From: nsemets Date: Thu, 2 Oct 2025 16:55:32 +0300 Subject: [PATCH 1/3] fix(files): added reset pagination trigger --- angular.json | 5 +++-- .../files/pages/files/files.component.html | 22 +++++-------------- .../files/pages/files/files.component.ts | 17 ++++++++------ .../files-widget/files-widget.component.html | 1 + .../files-widget/files-widget.component.ts | 2 ++ .../files-control.component.html | 21 +++++------------- .../files-control/files-control.component.ts | 5 ++--- .../file-upload-dialog.component.html | 14 ++++++++++++ .../file-upload-dialog.component.scss | 3 +++ .../file-upload-dialog.component.ts | 20 +++++++++++++++++ .../files-tree/files-tree.component.ts | 8 +++++++ src/app/shared/components/index.ts | 1 + 12 files changed, 75 insertions(+), 44 deletions(-) create mode 100644 src/app/shared/components/file-upload-dialog/file-upload-dialog.component.html create mode 100644 src/app/shared/components/file-upload-dialog/file-upload-dialog.component.scss create mode 100644 src/app/shared/components/file-upload-dialog/file-upload-dialog.component.ts diff --git a/angular.json b/angular.json index 7f0feeb64..3eea998dd 100644 --- a/angular.json +++ b/angular.json @@ -29,7 +29,8 @@ "cedar-embeddable-editor", "cedar-artifact-viewer", "markdown-it-video", - "ace-builds/src-noconflict/ext-language_tools" + "ace-builds/src-noconflict/ext-language_tools", + "@traptitech/markdown-it-katex" ], "assets": [ "src/assets", @@ -63,7 +64,7 @@ "budgets": [ { "type": "initial", - "maximumWarning": "7MB", + "maximumWarning": "9MB", "maximumError": "10MB" }, { diff --git a/src/app/features/files/pages/files/files.component.html b/src/app/features/files/pages/files/files.component.html index 229824a20..4497dfd96 100644 --- a/src/app/features/files/pages/files/files.component.html +++ b/src/app/features/files/pages/files/files.component.html @@ -102,22 +102,11 @@ -
- -
- {{ fileName() }} -
- -
-

{{ progress() }} %

-
- -
+ (''); readonly sortControl = new FormControl(ALL_SORT_OPTIONS[0].value); + readonly resetPaginationTrigger = signal(false); currentRootFolder = model(null); @@ -297,6 +297,7 @@ export class FilesComponent { } this.actions.setCurrentProvider(provider ?? FileProvider.OsfStorage); this.actions.setCurrentFolder(currentRootFolder.folder); + this.resetPaginationTrigger.update((v) => !v); } }); @@ -307,16 +308,18 @@ export class FilesComponent { }); this.searchControl.valueChanges - .pipe(skip(1), takeUntilDestroyed(this.destroyRef), distinctUntilChanged(), debounceTime(500)) + .pipe(takeUntilDestroyed(this.destroyRef), distinctUntilChanged(), debounceTime(500)) .subscribe((searchText) => { this.actions.setSearch(searchText ?? ''); + this.resetPaginationTrigger.update((v) => !v); if (!this.isFolderOpening()) { this.updateFilesList(); } }); - this.sortControl.valueChanges.pipe(skip(1), takeUntilDestroyed(this.destroyRef)).subscribe((sort) => { + this.sortControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((sort) => { this.actions.setSort(sort ?? ''); + this.resetPaginationTrigger.update((v) => !v); if (!this.isFolderOpening()) { this.updateFilesList(); } @@ -488,7 +491,7 @@ export class FilesComponent { }); } - public updateFilesList = (): Observable => { + updateFilesList(): Observable { const currentFolder = this.currentFolder(); if (currentFolder?.relationships.filesLink) { this.filesTreeActions.setFilesIsLoading?.(true); @@ -496,7 +499,7 @@ export class FilesComponent { } return EMPTY; - }; + } folderIsOpening(value: boolean): void { this.isFolderOpening.set(value); diff --git a/src/app/features/project/overview/components/files-widget/files-widget.component.html b/src/app/features/project/overview/components/files-widget/files-widget.component.html index 5e7cc1f2d..18f0260a0 100644 --- a/src/app/features/project/overview/components/files-widget/files-widget.component.html +++ b/src/app/features/project/overview/components/files-widget/files-widget.component.html @@ -43,6 +43,7 @@

{{ 'project.overview.files.filesPreview' | translate }}

[actions]="filesTreeActions" [resourceId]="selectedRoot!" [provider]="provider()" + [resetPaginationTrigger]="resetPaginationTrigger()" (entryFileClicked)="navigateToFile($event)" (filesPageChange)="onFilesPageChange($event)" > diff --git a/src/app/features/project/overview/components/files-widget/files-widget.component.ts b/src/app/features/project/overview/components/files-widget/files-widget.component.ts index 3097d9dd0..326445052 100644 --- a/src/app/features/project/overview/components/files-widget/files-widget.component.ts +++ b/src/app/features/project/overview/components/files-widget/files-widget.component.ts @@ -71,6 +71,7 @@ export class FilesWidgetComponent { currentRootFolder = model(null); pageNumber = signal(1); + readonly resetPaginationTrigger = signal(false); readonly osfStorageLabel = 'OSF Storage'; @@ -144,6 +145,7 @@ export class FilesWidgetComponent { const currentRootFolder = this.currentRootFolder(); if (currentRootFolder) { this.actions.setCurrentFolder(currentRootFolder.folder); + this.resetPaginationTrigger.update((v) => !v); } }); diff --git a/src/app/features/registries/components/files-control/files-control.component.html b/src/app/features/registries/components/files-control/files-control.component.html index 172236d64..b2efd64d4 100644 --- a/src/app/features/registries/components/files-control/files-control.component.html +++ b/src/app/features/registries/components/files-control/files-control.component.html @@ -33,22 +33,11 @@ } -
- -
- {{ fileName() }} -
- -
-

{{ progress() }} %

-
- -
+ +
+ {{ fileName() }} +
+ +
+

{{ progress() }} %

+
+ diff --git a/src/app/shared/components/file-upload-dialog/file-upload-dialog.component.scss b/src/app/shared/components/file-upload-dialog/file-upload-dialog.component.scss new file mode 100644 index 000000000..cf49a8d3f --- /dev/null +++ b/src/app/shared/components/file-upload-dialog/file-upload-dialog.component.scss @@ -0,0 +1,3 @@ +.filename { + word-break: break-all; +} diff --git a/src/app/shared/components/file-upload-dialog/file-upload-dialog.component.ts b/src/app/shared/components/file-upload-dialog/file-upload-dialog.component.ts new file mode 100644 index 000000000..7445517c1 --- /dev/null +++ b/src/app/shared/components/file-upload-dialog/file-upload-dialog.component.ts @@ -0,0 +1,20 @@ +import { TranslatePipe } from '@ngx-translate/core'; + +import { DialogModule } from 'primeng/dialog'; + +import { ChangeDetectionStrategy, Component, input, model } from '@angular/core'; + +import { LoadingSpinnerComponent } from '../loading-spinner/loading-spinner.component'; + +@Component({ + selector: 'osf-file-upload-dialog', + imports: [DialogModule, TranslatePipe, LoadingSpinnerComponent], + templateUrl: './file-upload-dialog.component.html', + styleUrl: './file-upload-dialog.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class FileUploadDialogComponent { + visible = model(false); + fileName = input(''); + progress = input(0); +} diff --git a/src/app/shared/components/files-tree/files-tree.component.ts b/src/app/shared/components/files-tree/files-tree.component.ts index 013178590..01bccb036 100644 --- a/src/app/shared/components/files-tree/files-tree.component.ts +++ b/src/app/shared/components/files-tree/files-tree.component.ts @@ -85,6 +85,7 @@ export class FilesTreeComponent implements OnDestroy, AfterViewInit { provider = input(); allowedMenuActions = input({} as FileMenuFlags); supportUpload = input(true); + resetPaginationTrigger = input(false); isDragOver = signal(false); hasViewOnly = computed(() => hasViewOnlyParam(this.router) || this.viewOnly()); @@ -136,6 +137,13 @@ export class FilesTreeComponent implements OnDestroy, AfterViewInit { this.foldersStack = []; } }); + + effect(() => { + const trigger = this.resetPaginationTrigger(); + if (trigger) { + this.resetPagination(); + } + }); } ngAfterViewInit(): void { diff --git a/src/app/shared/components/index.ts b/src/app/shared/components/index.ts index 594f14d55..9415be536 100644 --- a/src/app/shared/components/index.ts +++ b/src/app/shared/components/index.ts @@ -12,6 +12,7 @@ export { EducationHistoryDialogComponent } from './education-history-dialog/educ export { EmploymentHistoryComponent } from './employment-history/employment-history.component'; export { EmploymentHistoryDialogComponent } from './employment-history-dialog/employment-history-dialog.component'; export { FileMenuComponent } from './file-menu/file-menu.component'; +export { FileUploadDialogComponent } from './file-upload-dialog/file-upload-dialog.component'; export { FilesTreeComponent } from './files-tree/files-tree.component'; export { FilterChipsComponent } from './filter-chips/filter-chips.component'; export { FormSelectComponent } from './form-select/form-select.component'; From 4e75715026a3132eb337eb86ed477a1d1b5e8c3c Mon Sep 17 00:00:00 2001 From: nsemets Date: Thu, 2 Oct 2025 17:22:59 +0300 Subject: [PATCH 2/3] fix(files): updated reset pagination --- src/app/features/files/pages/files/files.component.html | 2 +- src/app/features/files/pages/files/files.component.ts | 2 ++ .../components/files-widget/files-widget.component.html | 2 +- src/app/shared/components/files-tree/files-tree.component.ts | 4 +++- 4 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/app/features/files/pages/files/files.component.html b/src/app/features/files/pages/files/files.component.html index 4497dfd96..225e9e5f4 100644 --- a/src/app/features/files/pages/files/files.component.html +++ b/src/app/features/files/pages/files/files.component.html @@ -120,7 +120,7 @@ [resourceId]="resourceId()" [provider]="provider()" [allowedMenuActions]="allowedMenuActions()" - [resetPaginationTrigger]="resetPaginationTrigger()" + [(resetPaginationTrigger)]="resetPaginationTrigger" (folderIsOpening)="folderIsOpening($event)" (entryFileClicked)="navigateToFile($event)" (uploadFilesConfirmed)="uploadFiles($event)" diff --git a/src/app/features/files/pages/files/files.component.ts b/src/app/features/files/pages/files/files.component.ts index 296efbba4..17f1f8633 100644 --- a/src/app/features/files/pages/files/files.component.ts +++ b/src/app/features/files/pages/files/files.component.ts @@ -312,6 +312,7 @@ export class FilesComponent { .subscribe((searchText) => { this.actions.setSearch(searchText ?? ''); this.resetPaginationTrigger.update((v) => !v); + if (!this.isFolderOpening()) { this.updateFilesList(); } @@ -320,6 +321,7 @@ export class FilesComponent { this.sortControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((sort) => { this.actions.setSort(sort ?? ''); this.resetPaginationTrigger.update((v) => !v); + if (!this.isFolderOpening()) { this.updateFilesList(); } diff --git a/src/app/features/project/overview/components/files-widget/files-widget.component.html b/src/app/features/project/overview/components/files-widget/files-widget.component.html index 18f0260a0..c7a3f444c 100644 --- a/src/app/features/project/overview/components/files-widget/files-widget.component.html +++ b/src/app/features/project/overview/components/files-widget/files-widget.component.html @@ -43,7 +43,7 @@

{{ 'project.overview.files.filesPreview' | translate }}

[actions]="filesTreeActions" [resourceId]="selectedRoot!" [provider]="provider()" - [resetPaginationTrigger]="resetPaginationTrigger()" + [(resetPaginationTrigger)]="resetPaginationTrigger" (entryFileClicked)="navigateToFile($event)" (filesPageChange)="onFilesPageChange($event)" > diff --git a/src/app/shared/components/files-tree/files-tree.component.ts b/src/app/shared/components/files-tree/files-tree.component.ts index 01bccb036..4c5f29e9d 100644 --- a/src/app/shared/components/files-tree/files-tree.component.ts +++ b/src/app/shared/components/files-tree/files-tree.component.ts @@ -20,6 +20,7 @@ import { HostBinding, inject, input, + model, OnDestroy, output, signal, @@ -85,7 +86,7 @@ export class FilesTreeComponent implements OnDestroy, AfterViewInit { provider = input(); allowedMenuActions = input({} as FileMenuFlags); supportUpload = input(true); - resetPaginationTrigger = input(false); + resetPaginationTrigger = model(false); isDragOver = signal(false); hasViewOnly = computed(() => hasViewOnlyParam(this.router) || this.viewOnly()); @@ -482,6 +483,7 @@ export class FilesTreeComponent implements OnDestroy, AfterViewInit { resetPagination() { this.first = 0; this.filesPageChange.emit(1); + this.resetPaginationTrigger.set(false); } onFilesPageChange(event: PaginatorState): void { From 50df5749ce60c8757d4759678bf157bf35ee216c Mon Sep 17 00:00:00 2001 From: nsemets Date: Thu, 2 Oct 2025 17:36:18 +0300 Subject: [PATCH 3/3] fix(files): changed reset pagination fix --- .../add-to-collection.component.ts | 21 ++++++++++--------- .../files/pages/files/files.component.html | 1 - .../files/pages/files/files.component.ts | 14 ++++++------- .../files-widget/files-widget.component.html | 1 - .../files-widget/files-widget.component.ts | 12 +++++------ .../configure-addon.component.ts | 6 ++---- .../storage-item-selector.component.ts | 6 ++---- .../files-tree/files-tree.component.ts | 10 --------- .../resource-citations.component.ts | 4 ++-- 9 files changed, 29 insertions(+), 46 deletions(-) diff --git a/src/app/features/collections/components/add-to-collection/add-to-collection.component.ts b/src/app/features/collections/components/add-to-collection/add-to-collection.component.ts index ff3512069..95d51b8d4 100644 --- a/src/app/features/collections/components/add-to-collection/add-to-collection.component.ts +++ b/src/app/features/collections/components/add-to-collection/add-to-collection.component.ts @@ -93,6 +93,7 @@ export class AddToCollectionComponent implements CanDeactivateComponent { constructor() { this.initializeProvider(); this.setupEffects(); + this.setupCleanup(); } handleProjectSelected(): void { @@ -154,16 +155,6 @@ export class AddToCollectionComponent implements CanDeactivateComponent { } private setupEffects(): void { - effect(() => { - this.destroyRef.onDestroy(() => { - this.actions.clearAddToCollectionState(); - this.allowNavigation.set(false); - - HeaderStyleHelper.resetToDefaults(); - BrandService.resetBranding(); - }); - }); - effect(() => { const provider = this.collectionProvider(); @@ -174,6 +165,16 @@ export class AddToCollectionComponent implements CanDeactivateComponent { }); } + private setupCleanup() { + this.destroyRef.onDestroy(() => { + this.actions.clearAddToCollectionState(); + this.allowNavigation.set(false); + + HeaderStyleHelper.resetToDefaults(); + BrandService.resetBranding(); + }); + } + @HostListener('window:beforeunload', ['$event']) onBeforeUnload($event: BeforeUnloadEvent): boolean { $event.preventDefault(); diff --git a/src/app/features/files/pages/files/files.component.html b/src/app/features/files/pages/files/files.component.html index 225e9e5f4..aa85e6279 100644 --- a/src/app/features/files/pages/files/files.component.html +++ b/src/app/features/files/pages/files/files.component.html @@ -120,7 +120,6 @@ [resourceId]="resourceId()" [provider]="provider()" [allowedMenuActions]="allowedMenuActions()" - [(resetPaginationTrigger)]="resetPaginationTrigger" (folderIsOpening)="folderIsOpening($event)" (entryFileClicked)="navigateToFile($event)" (uploadFilesConfirmed)="uploadFiles($event)" diff --git a/src/app/features/files/pages/files/files.component.ts b/src/app/features/files/pages/files/files.component.ts index 7a8a7fd12..722ccb7fc 100644 --- a/src/app/features/files/pages/files/files.component.ts +++ b/src/app/features/files/pages/files/files.component.ts @@ -103,6 +103,7 @@ import { FilesSelectors } from '../../store'; }) export class FilesComponent { googleFilePickerComponent = viewChild(GoogleFilePickerComponent); + filesTree = viewChild(FilesTreeComponent); @HostBinding('class') classes = 'flex flex-column flex-1 w-full h-full'; @@ -163,7 +164,6 @@ export class FilesComponent { readonly dataLoaded = signal(false); readonly searchControl = new FormControl(''); readonly sortControl = new FormControl(ALL_SORT_OPTIONS[0].value); - readonly resetPaginationTrigger = signal(false); currentRootFolder = model(null); @@ -297,7 +297,7 @@ export class FilesComponent { } this.actions.setCurrentProvider(provider ?? FileProvider.OsfStorage); this.actions.setCurrentFolder(currentRootFolder.folder); - this.resetPaginationTrigger.update((v) => !v); + this.filesTree()?.resetPagination(); } }); @@ -311,7 +311,7 @@ export class FilesComponent { .pipe(takeUntilDestroyed(this.destroyRef), distinctUntilChanged(), debounceTime(500)) .subscribe((searchText) => { this.actions.setSearch(searchText ?? ''); - this.resetPaginationTrigger.update((v) => !v); + this.filesTree()?.resetPagination(); if (!this.isFolderOpening()) { this.updateFilesList(); @@ -320,17 +320,15 @@ export class FilesComponent { this.sortControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((sort) => { this.actions.setSort(sort ?? ''); - this.resetPaginationTrigger.update((v) => !v); + this.filesTree()?.resetPagination(); if (!this.isFolderOpening()) { this.updateFilesList(); } }); - effect(() => { - this.destroyRef.onDestroy(() => { - this.actions.resetState(); - }); + this.destroyRef.onDestroy(() => { + this.actions.resetState(); }); } diff --git a/src/app/features/project/overview/components/files-widget/files-widget.component.html b/src/app/features/project/overview/components/files-widget/files-widget.component.html index c7a3f444c..5e7cc1f2d 100644 --- a/src/app/features/project/overview/components/files-widget/files-widget.component.html +++ b/src/app/features/project/overview/components/files-widget/files-widget.component.html @@ -43,7 +43,6 @@

{{ 'project.overview.files.filesPreview' | translate }}

[actions]="filesTreeActions" [resourceId]="selectedRoot!" [provider]="provider()" - [(resetPaginationTrigger)]="resetPaginationTrigger" (entryFileClicked)="navigateToFile($event)" (filesPageChange)="onFilesPageChange($event)" > diff --git a/src/app/features/project/overview/components/files-widget/files-widget.component.ts b/src/app/features/project/overview/components/files-widget/files-widget.component.ts index 326445052..da5f4b006 100644 --- a/src/app/features/project/overview/components/files-widget/files-widget.component.ts +++ b/src/app/features/project/overview/components/files-widget/files-widget.component.ts @@ -16,6 +16,7 @@ import { input, model, signal, + viewChild, } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; @@ -50,6 +51,8 @@ import { ProjectModel } from '@osf/shared/models/projects'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class FilesWidgetComponent { + filesTree = viewChild(FilesTreeComponent); + rootOption = input.required(); components = input.required(); areComponentsLoading = input(false); @@ -71,7 +74,6 @@ export class FilesWidgetComponent { currentRootFolder = model(null); pageNumber = signal(1); - readonly resetPaginationTrigger = signal(false); readonly osfStorageLabel = 'OSF Storage'; @@ -145,14 +147,12 @@ export class FilesWidgetComponent { const currentRootFolder = this.currentRootFolder(); if (currentRootFolder) { this.actions.setCurrentFolder(currentRootFolder.folder); - this.resetPaginationTrigger.update((v) => !v); + this.filesTree()?.resetPagination(); } }); - effect(() => { - this.destroyRef.onDestroy(() => { - this.actions.resetState(); - }); + this.destroyRef.onDestroy(() => { + this.actions.resetState(); }); } diff --git a/src/app/features/project/project-addons/components/configure-addon/configure-addon.component.ts b/src/app/features/project/project-addons/components/configure-addon/configure-addon.component.ts index 13e91adad..c30d2c0f2 100644 --- a/src/app/features/project/project-addons/components/configure-addon/configure-addon.component.ts +++ b/src/app/features/project/project-addons/components/configure-addon/configure-addon.component.ts @@ -120,10 +120,8 @@ export class ConfigureAddonComponent implements OnInit { constructor() { this.initializeAddon(); - effect(() => { - this.destroyRef.onDestroy(() => { - this.actions.clearOperationInvocations(); - }); + this.destroyRef.onDestroy(() => { + this.actions.clearOperationInvocations(); }); effect(() => { diff --git a/src/app/shared/components/addons/storage-item-selector/storage-item-selector.component.ts b/src/app/shared/components/addons/storage-item-selector/storage-item-selector.component.ts index fb3fbd92f..66f6738a6 100644 --- a/src/app/shared/components/addons/storage-item-selector/storage-item-selector.component.ts +++ b/src/app/shared/components/addons/storage-item-selector/storage-item-selector.component.ts @@ -138,10 +138,8 @@ export class StorageItemSelectorComponent implements OnInit { } }); - effect(() => { - this.destroyRef.onDestroy(() => { - this.actions.clearOperationInvocations(); - }); + this.destroyRef.onDestroy(() => { + this.actions.clearOperationInvocations(); }); } diff --git a/src/app/shared/components/files-tree/files-tree.component.ts b/src/app/shared/components/files-tree/files-tree.component.ts index 7f2702682..7c058f37a 100644 --- a/src/app/shared/components/files-tree/files-tree.component.ts +++ b/src/app/shared/components/files-tree/files-tree.component.ts @@ -21,7 +21,6 @@ import { HostBinding, inject, input, - model, OnDestroy, output, signal, @@ -90,7 +89,6 @@ export class FilesTreeComponent implements OnDestroy, AfterViewInit { provider = input(); allowedMenuActions = input({} as FileMenuFlags); supportUpload = input(true); - resetPaginationTrigger = model(false); isDragOver = signal(false); hasViewOnly = computed(() => hasViewOnlyParam(this.router) || this.viewOnly()); @@ -142,13 +140,6 @@ export class FilesTreeComponent implements OnDestroy, AfterViewInit { this.foldersStack = []; } }); - - effect(() => { - const trigger = this.resetPaginationTrigger(); - if (trigger) { - this.resetPagination(); - } - }); } ngAfterViewInit(): void { @@ -490,7 +481,6 @@ export class FilesTreeComponent implements OnDestroy, AfterViewInit { resetPagination() { this.first = 0; this.filesPageChange.emit(1); - this.resetPaginationTrigger.set(false); } onFilesPageChange(event: PaginatorState): void { diff --git a/src/app/shared/components/resource-citations/resource-citations.component.ts b/src/app/shared/components/resource-citations/resource-citations.component.ts index 9c3460096..7b5d51bd5 100644 --- a/src/app/shared/components/resource-citations/resource-citations.component.ts +++ b/src/app/shared/components/resource-citations/resource-citations.component.ts @@ -104,7 +104,7 @@ export class ResourceCitationsComponent { this.setupFilterDebounce(); this.setupDefaultCitationsEffect(); this.setupCitationStylesEffect(); - this.setupDestroyEffect(); + this.setupCleanup(); } setupDefaultCitationsEffect(): void { @@ -210,7 +210,7 @@ export class ResourceCitationsComponent { }); } - private setupDestroyEffect(): void { + private setupCleanup(): void { this.destroyRef.onDestroy(() => { this.destroy$.next(); this.destroy$.complete();