[DURACOM-303] adapt solution to older version of angular

2025-10-18 23:43:01 +00:00 · 2025-01-24 18:26:28 +01:00
parent 483b97d9c1
commit 990f00b129
22 changed files with 82 additions and 78 deletions
--- 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",
--- 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;
--- 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',
--- 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';

--- 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', () => {
--- 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',
--- 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));
+      })
+    );
  }
 }
--- 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 @@
 <h3>{{"search.filters.head" | translate}}</h3>
 <div *ngIf="(filters | async)?.hasSucceeded">
-    <div *ngFor="let filter of (filters | async)?.payload; trackBy: trackUpdate">
+    <div [class.visually-hidden]="filtersWithComputedVisibility !== (filters | async)?.payload?.length"
+         *ngFor="let filter of (filters | async)?.payload; trackBy: trackUpdate">
        <ds-search-filter (isVisibilityComputed)="countFiltersWithComputedVisibility($event)" [scope]="currentScope" [filter]="filter" [inPlaceSearch]="inPlaceSearch" [refreshFilters]="refreshFilters"></ds-search-filter>
    </div>
 </div>
--- 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;
--- 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();
  }

--- 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 @@
  </div>
 </div>

-@if((viewMode$ | async) === ViewMode.ListElement) {
-  @for (result of loadingResults; track result; let first = $first) {
-      <div [class.my-4]="!first" class="row">
-      @if(showThumbnails) {
-        <div class="col-3 col-md-2">
-          <div class="thumbnail-skeleton position-relative">
-            <ngx-skeleton-loader/>
-          </div>
+<ng-container *ngIf="(viewMode$ | async) === ViewMode.ListElement; else grid">
+  <ng-container *ngFor="let result of loadingResults; let first = $first">
+    <div [class.my-4]="!first" class="row">
+      <div *ngIf="showThumbnails" class="col-3 col-md-2">
+        <div class="thumbnail-skeleton position-relative">
+          <ngx-skeleton-loader/>
        </div>
-      }
+      </div>
      <div [class.col-9]="showThumbnails" [class.col-md-10]="showThumbnails" [class.col-md-12]="!showThumbnails">
        <div class="badge-skeleton">
          <ngx-skeleton-loader/>
@@ -23,16 +21,18 @@
        </div>
      </div>
    </div>
-  }
-} @else if ((viewMode$ | async) === ViewMode.GridElement) {
+  </ng-container>
+</ng-container>
+
+<ng-template #grid>
  <div class="card-columns row">
-    @for (result of loadingResults; track result) {
+    <ng-container *ngFor="let result of loadingResults">
      <div class="card-column col col-sm-6 col-lg-4">
        <div class="card-skeleton">
          <ngx-skeleton-loader/>
        </div>
      </div>
-    }
-
+    </ng-container>
  </div>
-}
+</ng-template>
+
--- 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.
--- 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) {
-  <div class="row">
-    <div class="col-12">
-      <div class="filters-badge-skeleton-container">
-          <div class="filter-badge-skeleton">
-            <ngx-skeleton-loader [count]="(activeFilters$ | async).length" />
-          </div>
-      </div>
-    </div>
-  </div>
-}
-
 <div class="d-flex justify-content-between">
    <h1 *ngIf="!disableHeader">{{ (configuration ? configuration + '.search.results.head' : 'search.results.head') | translate }}</h1>
    <ds-search-export-csv *ngIf="showCsvExport" [searchConfig]="searchConfig"></ds-search-export-csv>
--- 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;
--- 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;
--- 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({
--- 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
--- 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;
--- 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
-  }
+  };
 }
--- 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
  }
 };
--- 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: [
--- 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"