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/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 229824a20..aa85e6279 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() }} %

-
- -
+ (FilesTreeComponent); @HostBinding('class') classes = 'flex flex-column flex-1 w-full h-full'; @@ -297,6 +297,7 @@ export class FilesComponent { } this.actions.setCurrentProvider(provider ?? FileProvider.OsfStorage); this.actions.setCurrentFolder(currentRootFolder.folder); + this.filesTree()?.resetPagination(); } }); @@ -307,25 +308,27 @@ 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.filesTree()?.resetPagination(); + 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.filesTree()?.resetPagination(); + if (!this.isFolderOpening()) { this.updateFilesList(); } }); - effect(() => { - this.destroyRef.onDestroy(() => { - this.actions.resetState(); - }); + this.destroyRef.onDestroy(() => { + this.actions.resetState(); }); } @@ -491,7 +494,7 @@ export class FilesComponent { }); } - public updateFilesList = (): Observable => { + updateFilesList(): Observable { const currentFolder = this.currentFolder(); if (currentFolder?.relationships.filesLink) { this.filesTreeActions.setFilesIsLoading?.(true); @@ -499,7 +502,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.ts b/src/app/features/project/overview/components/files-widget/files-widget.component.ts index 3097d9dd0..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); @@ -144,13 +147,12 @@ export class FilesWidgetComponent { const currentRootFolder = this.currentRootFolder(); if (currentRootFolder) { this.actions.setCurrentFolder(currentRootFolder.folder); + 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/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() }} %

-
- -
+ { - this.destroyRef.onDestroy(() => { - this.actions.clearOperationInvocations(); - }); + this.destroyRef.onDestroy(() => { + this.actions.clearOperationInvocations(); }); } diff --git a/src/app/shared/components/file-upload-dialog/file-upload-dialog.component.html b/src/app/shared/components/file-upload-dialog/file-upload-dialog.component.html new file mode 100644 index 000000000..17a4bccec --- /dev/null +++ b/src/app/shared/components/file-upload-dialog/file-upload-dialog.component.html @@ -0,0 +1,14 @@ + +
+ {{ 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/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'; 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();