From 990f00b129c2b7f23e8ac41904d4778b4e07e702 Mon Sep 17 00:00:00 2001 From: FrancescoMolinaro Date: Fri, 24 Jan 2025 18:26:28 +0100 Subject: [PATCH] [DURACOM-303] adapt solution to older version of angular --- package.json | 2 +- .../browse-by-date-page.component.spec.ts | 4 +-- .../browse-by-date-page.component.ts | 4 +-- .../browse-by-metadata-page.component.ts | 4 +-- .../browse-by-title-page.component.spec.ts | 2 +- .../browse-by-title-page.component.ts | 4 +-- .../search-filter/search-filter.component.ts | 12 ++++---- .../search-filters.component.html | 3 +- .../search-filters.component.spec.ts | 4 +-- .../search-filters.component.ts | 15 ++++++---- .../search-results-skeleton.component.html | 30 +++++++++---------- .../search-results-skeleton.component.ts | 13 +------- .../search-results.component.html | 12 -------- .../search-results.component.spec.ts | 2 +- .../search-results.component.ts | 8 ++--- src/app/shared/search/search.component.ts | 2 +- src/app/shared/search/search.module.ts | 9 +++++- src/config/app-config.interface.ts | 2 +- src/config/default-app-config.ts | 4 +-- src/environments/environment.test.ts | 2 +- src/themes/custom/lazy-theme.module.ts | 7 ++--- yarn.lock | 15 ++++++++++ 22 files changed, 82 insertions(+), 78 deletions(-) diff --git a/package.json b/package.json index 86a506c57a..76ae2d5827 100644 --- a/package.json +++ b/package.json @@ -111,7 +111,7 @@ "ngx-infinite-scroll": "^15.0.0", "ngx-pagination": "6.0.3", "ngx-sortablejs": "^11.1.0", - "ngx-skeleton-loader": "^9.0.0", + "ngx-skeleton-loader": "^7.0.0", "ngx-ui-switch": "^14.1.0", "nouislider": "^15.8.1", "pem": "1.14.8", diff --git a/src/app/browse-by/browse-by-date-page/browse-by-date-page.component.spec.ts b/src/app/browse-by/browse-by-date-page/browse-by-date-page.component.spec.ts index 2fe673f821..f64091e41f 100644 --- a/src/app/browse-by/browse-by-date-page/browse-by-date-page.component.spec.ts +++ b/src/app/browse-by/browse-by-date-page/browse-by-date-page.component.spec.ts @@ -24,8 +24,8 @@ import { APP_CONFIG } from '../../../config/app-config.interface'; import { environment } from '../../../environments/environment'; import { SortDirection } from '../../core/cache/models/sort-options.model'; import { cold } from 'jasmine-marbles'; -import { Store } from "@ngrx/store"; -import { BrowseEntry } from "../../core/shared/browse-entry.model"; +import { Store } from '@ngrx/store'; +import { BrowseEntry } from '../../core/shared/browse-entry.model'; describe('BrowseByDatePageComponent', () => { let comp: BrowseByDatePageComponent; diff --git a/src/app/browse-by/browse-by-date-page/browse-by-date-page.component.ts b/src/app/browse-by/browse-by-date-page/browse-by-date-page.component.ts index 86a2f3dfa3..afb58e6ad2 100644 --- a/src/app/browse-by/browse-by-date-page/browse-by-date-page.component.ts +++ b/src/app/browse-by/browse-by-date-page/browse-by-date-page.component.ts @@ -19,8 +19,8 @@ import { APP_CONFIG, AppConfig } from '../../../config/app-config.interface'; import { RemoteData } from '../../core/data/remote-data'; import { Item } from '../../core/shared/item.model'; import { DSONameService } from '../../core/breadcrumbs/dso-name.service'; -import { isPlatformServer } from "@angular/common"; -import { environment } from "../../../environments/environment"; +import { isPlatformServer } from '@angular/common'; +import { environment } from '../../../environments/environment'; @Component({ selector: 'ds-browse-by-date-page', diff --git a/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.ts b/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.ts index a7357aaaf3..52cf3b9d7b 100644 --- a/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.ts +++ b/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.ts @@ -22,8 +22,8 @@ import { Collection } from '../../core/shared/collection.model'; import { Community } from '../../core/shared/community.model'; import { APP_CONFIG, AppConfig } from '../../../config/app-config.interface'; import { DSONameService } from '../../core/breadcrumbs/dso-name.service'; -import { isPlatformServer } from "@angular/common"; -import { environment } from "../../../environments/environment"; +import { isPlatformServer } from '@angular/common'; +import { environment } from '../../../environments/environment'; export const BBM_PAGINATION_ID = 'bbm'; diff --git a/src/app/browse-by/browse-by-title-page/browse-by-title-page.component.spec.ts b/src/app/browse-by/browse-by-title-page/browse-by-title-page.component.spec.ts index 653ad596c5..1b8eb352a3 100644 --- a/src/app/browse-by/browse-by-title-page/browse-by-title-page.component.spec.ts +++ b/src/app/browse-by/browse-by-title-page/browse-by-title-page.component.spec.ts @@ -22,7 +22,7 @@ import { PaginationService } from '../../core/pagination/pagination.service'; import { PaginationServiceStub } from '../../shared/testing/pagination-service.stub'; import { APP_CONFIG } from '../../../config/app-config.interface'; import { environment } from '../../../environments/environment'; -import { BrowseEntry } from "../../core/shared/browse-entry.model"; +import { BrowseEntry } from '../../core/shared/browse-entry.model'; describe('BrowseByTitlePageComponent', () => { diff --git a/src/app/browse-by/browse-by-title-page/browse-by-title-page.component.ts b/src/app/browse-by/browse-by-title-page/browse-by-title-page.component.ts index 74a109574c..518fdf8c15 100644 --- a/src/app/browse-by/browse-by-title-page/browse-by-title-page.component.ts +++ b/src/app/browse-by/browse-by-title-page/browse-by-title-page.component.ts @@ -15,8 +15,8 @@ import { of as observableOf } from 'rxjs'; import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model'; import { AppConfig, APP_CONFIG } from '../../../config/app-config.interface'; import { DSONameService } from '../../core/breadcrumbs/dso-name.service'; -import { isPlatformServer } from "@angular/common"; -import { environment } from "../../../environments/environment"; +import { isPlatformServer } from '@angular/common'; +import { environment } from '../../../environments/environment'; @Component({ selector: 'ds-browse-by-title-page', diff --git a/src/app/shared/search/search-filters/search-filter/search-filter.component.ts b/src/app/shared/search/search-filters/search-filter/search-filter.component.ts index 6f88d3924a..a440652fe5 100644 --- a/src/app/shared/search/search-filters/search-filter/search-filter.component.ts +++ b/src/app/shared/search/search-filters/search-filter/search-filter.component.ts @@ -93,7 +93,9 @@ export class SearchFilterComponent implements OnInit { */ ngOnInit() { this.selectedValues$ = this.getSelectedValues(); - this.active$ = this.isActive(); + this.active$ = this.isActive().pipe( + startWith(true) + ); this.collapsed$ = this.isCollapsed(); this.initializeFilter(); this.selectedValues$.pipe(take(1)).subscribe((selectedValues) => { @@ -101,9 +103,9 @@ export class SearchFilterComponent implements OnInit { this.filterService.expand(this.filter.name); } }); - this.active$.pipe(take(1)).subscribe(() => { + this.isActive().pipe(take(1)).subscribe(() => { this.isVisibilityComputed.emit(true); - }) + }); } /** @@ -192,7 +194,7 @@ export class SearchFilterComponent implements OnInit { } )); } - }), - startWith(true)); + }) + ); } } diff --git a/src/app/shared/search/search-filters/search-filters.component.html b/src/app/shared/search/search-filters/search-filters.component.html index 45875ad7ae..e1e54c683d 100644 --- a/src/app/shared/search/search-filters/search-filters.component.html +++ b/src/app/shared/search/search-filters/search-filters.component.html @@ -1,6 +1,7 @@

{{"search.filters.head" | translate}}

-
+
diff --git a/src/app/shared/search/search-filters/search-filters.component.spec.ts b/src/app/shared/search/search-filters/search-filters.component.spec.ts index c8ad89910c..864d7b583e 100644 --- a/src/app/shared/search/search-filters/search-filters.component.spec.ts +++ b/src/app/shared/search/search-filters/search-filters.component.spec.ts @@ -9,8 +9,8 @@ import { SearchFiltersComponent } from './search-filters.component'; import { SearchService } from '../../../core/shared/search/search.service'; import { SEARCH_CONFIG_SERVICE } from '../../../my-dspace-page/my-dspace-page.component'; import { SearchConfigurationServiceStub } from '../../testing/search-configuration-service.stub'; -import { APP_CONFIG } from "../../../../config/app-config.interface"; -import { environment } from "../../../../environments/environment"; +import { APP_CONFIG } from '../../../../config/app-config.interface'; +import { environment } from '../../../../environments/environment'; describe('SearchFiltersComponent', () => { let comp: SearchFiltersComponent; diff --git a/src/app/shared/search/search-filters/search-filters.component.ts b/src/app/shared/search/search-filters/search-filters.component.ts index 1f08a5ac5d..b491f21177 100644 --- a/src/app/shared/search/search-filters/search-filters.component.ts +++ b/src/app/shared/search/search-filters/search-filters.component.ts @@ -2,7 +2,7 @@ import { Component, Inject, Input, OnDestroy, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { BehaviorSubject, Observable } from 'rxjs'; -import { map } from 'rxjs/operators'; +import { map, tap } from 'rxjs/operators'; import { SearchService } from '../../../core/shared/search/search.service'; import { RemoteData } from '../../../core/data/remote-data'; @@ -12,7 +12,7 @@ import { SearchFilterService } from '../../../core/shared/search/search-filter.s import { SEARCH_CONFIG_SERVICE } from '../../../my-dspace-page/my-dspace-page.component'; import { currentPath } from '../../utils/route.utils'; import { hasValue } from '../../empty.util'; -import { APP_CONFIG, AppConfig } from "../../../../config/app-config.interface"; +import { APP_CONFIG, AppConfig } from '../../../../config/app-config.interface'; @Component({ selector: 'ds-search-filters', @@ -88,10 +88,13 @@ export class SearchFiltersComponent implements OnInit, OnDestroy { } ngOnInit(): void { - this.clearParams = this.searchConfigService.getCurrentFrontendFilters().pipe(map((filters) => { - Object.keys(filters).forEach((f) => filters[f] = null); - return filters; - })); + this.clearParams = this.searchConfigService.getCurrentFrontendFilters().pipe( + tap(() => this.filtersWithComputedVisibility = 0), + map((filters) => { + Object.keys(filters).forEach((f) => filters[f] = null); + return filters; + }) + ); this.searchLink = this.getSearchLink(); } diff --git a/src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.html b/src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.html index a42bda0674..bd98040257 100644 --- a/src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.html +++ b/src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.html @@ -4,16 +4,14 @@
-@if((viewMode$ | async) === ViewMode.ListElement) { - @for (result of loadingResults; track result; let first = $first) { -
- @if(showThumbnails) { -
-
- -
+ + +
+
+
+
- } +
@@ -23,16 +21,18 @@
- } -} @else if ((viewMode$ | async) === ViewMode.GridElement) { + + + +
- @for (result of loadingResults; track result) { +
- } - +
-} + + diff --git a/src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.ts b/src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.ts index 3fba70b119..179b26f1fd 100644 --- a/src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.ts +++ b/src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.ts @@ -1,13 +1,8 @@ -import { - AsyncPipe, - NgForOf, -} from '@angular/common'; import { Component, Input, OnInit, } from '@angular/core'; -import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; import { Observable } from 'rxjs'; import { SearchService } from '../../../../core/shared/search/search.service'; @@ -16,14 +11,8 @@ import { hasValue } from '../../../empty.util'; @Component({ selector: 'ds-search-results-skeleton', - standalone: true, - imports: [ - NgxSkeletonLoaderModule, - AsyncPipe, - NgForOf, - ], templateUrl: './search-results-skeleton.component.html', - styleUrl: './search-results-skeleton.component.scss', + styleUrls: ['./search-results-skeleton.component.scss'], }) /** * Component to show placeholders for search results while loading, to give a loading feedback to the user without layout shifting. diff --git a/src/app/shared/search/search-results/search-results.component.html b/src/app/shared/search/search-results/search-results.component.html index 71839d009b..a2bc91195c 100644 --- a/src/app/shared/search/search-results/search-results.component.html +++ b/src/app/shared/search/search-results/search-results.component.html @@ -1,15 +1,3 @@ -@if ((activeFilters$ | async).length > 0 && (appliedFilters$ | async).length === 0) { -
-
-
-
- -
-
-
-
-} -

{{ (configuration ? configuration + '.search.results.head' : 'search.results.head') | translate }}

diff --git a/src/app/shared/search/search-results/search-results.component.spec.ts b/src/app/shared/search/search-results/search-results.component.spec.ts index dc961c97cb..c2b181038a 100644 --- a/src/app/shared/search/search-results/search-results.component.spec.ts +++ b/src/app/shared/search/search-results/search-results.component.spec.ts @@ -7,7 +7,7 @@ import { TranslateModule } from '@ngx-translate/core'; import { SearchResultsComponent } from './search-results.component'; import { QueryParamsDirectiveStub } from '../../testing/query-params-directive.stub'; import { createFailedRemoteDataObject } from '../../remote-data.utils'; -import { SearchResultsSkeletonComponent } from "./search-results-skeleton/search-results-skeleton.component"; +import { SearchResultsSkeletonComponent } from './search-results-skeleton/search-results-skeleton.component'; describe('SearchResultsComponent', () => { let comp: SearchResultsComponent; diff --git a/src/app/shared/search/search-results/search-results.component.ts b/src/app/shared/search/search-results/search-results.component.ts index 1faf8dd778..9050ce9cd0 100644 --- a/src/app/shared/search/search-results/search-results.component.ts +++ b/src/app/shared/search/search-results/search-results.component.ts @@ -11,10 +11,10 @@ import { CollectionElementLinkType } from '../../object-collection/collection-el import { ViewMode } from '../../../core/shared/view-mode.model'; import { Context } from '../../../core/shared/context.model'; import { PaginatedSearchOptions } from '../models/paginated-search-options.model'; -import { SearchFilter } from "../models/search-filter.model"; -import { Observable } from "rxjs"; -import { SearchConfigurationService } from "../../../core/shared/search/search-configuration.service"; -import { SearchService } from "../../../core/shared/search/search.service"; +import { SearchFilter } from '../models/search-filter.model'; +import { Observable } from 'rxjs'; +import { SearchConfigurationService } from '../../../core/shared/search/search-configuration.service'; +import { SearchService } from '../../../core/shared/search/search.service'; export interface SelectionConfig { repeatable: boolean; diff --git a/src/app/shared/search/search.component.ts b/src/app/shared/search/search.component.ts index e69a183408..527d2d2719 100644 --- a/src/app/shared/search/search.component.ts +++ b/src/app/shared/search/search.component.ts @@ -48,7 +48,7 @@ import { ITEM_MODULE_PATH } from '../../item-page/item-page-routing-paths'; import { COLLECTION_MODULE_PATH } from '../../collection-page/collection-page-routing-paths'; import { COMMUNITY_MODULE_PATH } from '../../community-page/community-page-routing-paths'; import { AppConfig, APP_CONFIG } from '../../../config/app-config.interface'; -import { isPlatformServer } from "@angular/common"; +import { isPlatformServer } from '@angular/common'; import { environment } from 'src/environments/environment'; @Component({ diff --git a/src/app/shared/search/search.module.ts b/src/app/shared/search/search.module.ts index 69500999a8..e2075a5f56 100644 --- a/src/app/shared/search/search.module.ts +++ b/src/app/shared/search/search.module.ts @@ -34,6 +34,10 @@ import { ThemedSearchSettingsComponent } from './search-settings/themed-search-s import { NouisliderModule } from 'ng2-nouislider'; import { ThemedSearchFiltersComponent } from './search-filters/themed-search-filters.component'; import { ThemedSearchSidebarComponent } from './search-sidebar/themed-search-sidebar.component'; +import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; +import { + SearchResultsSkeletonComponent +} from './search-results/search-results-skeleton/search-results-skeleton.component'; const COMPONENTS = [ SearchComponent, @@ -62,6 +66,7 @@ const COMPONENTS = [ ThemedSearchSettingsComponent, ThemedSearchFiltersComponent, ThemedSearchSidebarComponent, + SearchResultsSkeletonComponent ]; const ENTRY_COMPONENTS = [ @@ -74,6 +79,7 @@ const ENTRY_COMPONENTS = [ SearchFacetSelectedOptionComponent, SearchFacetRangeOptionComponent, SearchAuthorityFilterComponent, + SearchResultsSkeletonComponent ]; /** @@ -93,11 +99,12 @@ export const MODELS = [ imports: [ CommonModule, TranslateModule.forChild({ - missingTranslationHandler: { provide: MissingTranslationHandler, useClass: MissingTranslationHelper }, + missingTranslationHandler: {provide: MissingTranslationHandler, useClass: MissingTranslationHelper}, useDefaultLang: true }), SharedModule.withEntryComponents(), NouisliderModule, + NgxSkeletonLoaderModule, ], exports: [ ...COMPONENTS diff --git a/src/config/app-config.interface.ts b/src/config/app-config.interface.ts index 8b8dcf74a7..af78d4ab88 100644 --- a/src/config/app-config.interface.ts +++ b/src/config/app-config.interface.ts @@ -23,7 +23,7 @@ import { MarkdownConfig } from './markdown-config.interface'; import { FilterVocabularyConfig } from './filter-vocabulary-config'; import { DiscoverySortConfig } from './discovery-sort.config'; import { LiveRegionConfig } from '../app/shared/live-region/live-region.config'; -import { SearchConfig } from "./search-page-config.interface"; +import { SearchConfig } from './search-page-config.interface'; interface AppConfig extends Config { ui: UIServerConfig; diff --git a/src/config/default-app-config.ts b/src/config/default-app-config.ts index 2384942e3b..de4f3bd56e 100644 --- a/src/config/default-app-config.ts +++ b/src/config/default-app-config.ts @@ -23,7 +23,7 @@ import { MarkdownConfig } from './markdown-config.interface'; import { FilterVocabularyConfig } from './filter-vocabulary-config'; import { DiscoverySortConfig } from './discovery-sort.config'; import { LiveRegionConfig } from '../app/shared/live-region/live-region.config'; -import { SearchConfig } from "./search-page-config.interface"; +import { SearchConfig } from './search-page-config.interface'; export class DefaultAppConfig implements AppConfig { production = false; @@ -446,5 +446,5 @@ export class DefaultAppConfig implements AppConfig { search: SearchConfig = { filterPlaceholdersCount: 5 - } + }; } diff --git a/src/environments/environment.test.ts b/src/environments/environment.test.ts index 4f832e1ac4..e6ffe85df6 100644 --- a/src/environments/environment.test.ts +++ b/src/environments/environment.test.ts @@ -325,6 +325,6 @@ export const environment: BuildConfig = { }, search: { - defaultFilterCount: 5 + filterPlaceholdersCount: 5 } }; diff --git a/src/themes/custom/lazy-theme.module.ts b/src/themes/custom/lazy-theme.module.ts index 1fe476c1e1..546d2dccbf 100644 --- a/src/themes/custom/lazy-theme.module.ts +++ b/src/themes/custom/lazy-theme.module.ts @@ -159,9 +159,8 @@ import { RequestCopyModule } from 'src/app/request-copy/request-copy.module'; import {UserMenuComponent} from './app/shared/auth-nav-menu/user-menu/user-menu.component'; import { BrowseByComponent } from './app/shared/browse-by/browse-by.component'; import { RegisterEmailFormComponent } from './app/register-email-form/register-email-form.component'; -import { - SearchResultsSkeletonComponent -} from "../../app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component"; +import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; + const DECLARATIONS = [ FileSectionComponent, @@ -248,7 +247,6 @@ const DECLARATIONS = [ UserMenuComponent, BrowseByComponent, RegisterEmailFormComponent, - SearchResultsSkeletonComponent, ]; @NgModule({ @@ -309,6 +307,7 @@ const DECLARATIONS = [ NgxGalleryModule, FormModule, RequestCopyModule, + NgxSkeletonLoaderModule ], declarations: DECLARATIONS, exports: [ diff --git a/yarn.lock b/yarn.lock index 7760902b72..39661b8d43 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8415,6 +8415,14 @@ ngx-pagination@6.0.3: dependencies: tslib "^2.3.0" +ngx-skeleton-loader@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/ngx-skeleton-loader/-/ngx-skeleton-loader-7.0.0.tgz#3b1325025a7208a20f3a0fdba6e578532a09cfcd" + integrity sha512-myc6GNcNhyksZrimIFkCxeihi0kQ8JhQVZiGbtiIv4gYrnnRk5nXbs3kYitK8E8OstHG+jlsmRofqGBxuIsYTA== + dependencies: + perf-marks "^1.13.4" + tslib "^2.0.0" + ngx-sortablejs@^11.1.0: version "11.1.0" resolved "https://registry.npmjs.org/ngx-sortablejs/-/ngx-sortablejs-11.1.0.tgz" @@ -9060,6 +9068,13 @@ pend@~1.2.0: resolved "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz" integrity sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg== +perf-marks@^1.13.4: + version "1.14.2" + resolved "https://registry.yarnpkg.com/perf-marks/-/perf-marks-1.14.2.tgz#7511c24239b9c2071717993a33ec3057f387b8c7" + integrity sha512-N0/bQcuTlETpgox/DsXS1voGjqaoamMoiyhncgeW3rSHy/qw8URVgmPRYfFDQns/+C6yFUHDbeSBGL7ixT6Y4A== + dependencies: + tslib "^2.1.0" + performance-now@^2.1.0: version "2.1.0" resolved "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz"