geonetwork-ui 2.7.0-dev.4fe76116d → 2.7.0-dev.652a07b0d

package/src/libs/feature/catalog/src/lib/source-label/source-label.component.ts

@@ -1,12 +1,15 @@
 import { Component, ChangeDetectionStrategy, Input } from '@angular/core'
 import { Observable } from 'rxjs'
 import { SourcesService } from '../sources/sources.service'
+import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-source-label',
   templateUrl: './source-label.component.html',
   styleUrls: ['./source-label.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule],
 })
 export class SourceLabelComponent {
   sourceLabel$: Observable<string>

package/src/libs/feature/dataviz/src/lib/service/data.service.ts

@@ -211,21 +211,21 @@ export class DataService {
 
   async getDownloadUrlsFromOgcApi(url: string): Promise<OgcApiCollectionInfo> {
     const endpoint = new OgcApiEndpoint(url)
-    return await endpoint.allCollections
+    return await endpoint.featureCollections
       .then((collections) => {
-        return endpoint.getCollectionInfo(collections[0].name)
+        return endpoint.getCollectionInfo(collections[0])
       })
       .catch((error) => {
         throw new Error(`ogc.unreachable.unknown`)
       })
   }
 
-  async getItemsFromOgcApi(url: string): Promise<OgcApiRecord> {
+  async getItemsFromOgcApi(url: string): Promise<OgcApiRecord[]> {
     const endpoint = new OgcApiEndpoint(url)
     return await endpoint.featureCollections
       .then((collections) => {
         return collections.length
-          ? endpoint.getCollectionItem(collections[0], '1')
+          ? endpoint.getCollectionItems(collections[0])
           : null
       })
       .catch(() => {

package/src/libs/feature/editor/src/lib/+state/editor.effects.ts

@@ -11,14 +11,14 @@ import {
   selectRecordSource,
 } from './editor.selectors'
 import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
-import { Gn4PlatformService } from '../../../../../../libs/api/repository/src'
+import { PlatformServiceInterface } from '../../../../../../libs/common/domain/src/lib/platform.service.interface'
 
 @Injectable()
 export class EditorEffects {
   private actions$ = inject(Actions)
   private editorService = inject(EditorService)
   private recordsRepository = inject(RecordsRepositoryInterface)
-  private gn4PlateformService = inject(Gn4PlatformService)
+  private plateformService = inject(PlatformServiceInterface)
   private store = inject(Store)
 
   saveRecord$ = createEffect(() =>
@@ -64,7 +64,7 @@ export class EditorEffects {
         withLatestFrom(this.store.select(selectRecord)),
         switchMap(([_, record]) => {
           if (record.uniqueIdentifier !== null) {
-            this.gn4PlateformService.cleanRecordAttachments(record).subscribe({
+            this.plateformService.cleanRecordAttachments(record).subscribe({
               next: (_) => undefined,
               error: (err) => {
                 console.error(err)

package/src/libs/feature/editor/src/lib/components/generic-keywords/generic-keywords.component.ts

@@ -12,7 +12,11 @@ import { map } from 'rxjs'
 import { Keyword } from '../../../../../../../libs/common/domain/src/lib/model/record'
 import { KeywordType } from '../../../../../../../libs/common/domain/src/lib/model/thesaurus'
 import { TranslatePipe } from '@ngx-translate/core'
-import { NgIconComponent, provideIcons } from '@ng-icons/core'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
 import { matWarningAmberOutline } from '@ng-icons/material-icons/outline'
 
 type AutocompleteItem = { title: string; value: Keyword }
@@ -34,6 +38,9 @@ type AutocompleteItem = { title: string; value: Keyword }
     provideIcons({
       matWarningAmberOutline,
     }),
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
   ],
 })
 export class GenericKeywordsComponent {

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-inspire-field/form-field-inspire-theme.component.html

@@ -1,13 +1,15 @@
 <div class="flex flex-col gap-3">
   <div class="flex flex-col gap-4">
-    <gn-ui-autocomplete
-      [placeholder]="'editor.record.form.inspire.placeholder' | translate"
-      [displayWithFn]="displayWithFn"
-      [action]="autoCompleteAction"
-      (itemSelected)="handleItemSelection($event)"
-      [minCharacterCount]="1"
-      [clearOnSelection]="true"
-    ></gn-ui-autocomplete>
+    <gn-ui-dropdown-multiselect
+      class="w-full"
+      [title]="'editor.record.form.inspire.placeholder' | translate"
+      [maxRows]="6"
+      [selected]="themes"
+      [choices]="availableThemes || []"
+      [allowSearch]="true"
+      (selectValues)="handleItemSelection($event)"
+    >
+    </gn-ui-dropdown-multiselect>
     <div class="flex gap-2 flex-wrap">
       <gn-ui-badge
         *ngFor="let theme of themes"

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field-inspire-field/form-field-inspire-theme.component.ts

@@ -1,12 +1,13 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { AutocompleteComponent, BadgeComponent } from '../../../../../../../../../libs/ui/inputs/src'
+import {
+  AutocompleteComponent,
+  BadgeComponent,
+  DropdownMultiselectComponent,
+} from '../../../../../../../../../libs/ui/inputs/src'
 import { NgIconComponent } from '@ng-icons/core'
 import { INSPIRE_THEMES } from '../../../../fields.config'
 import { TranslatePipe, TranslateService } from '@ngx-translate/core'
-import { of } from 'rxjs'
-
-type AutocompleteItem = { title: string; value: string }
 
 @Component({
   selector: 'gn-ui-form-field-inspire-theme',
@@ -17,6 +18,7 @@ type AutocompleteItem = { title: string; value: string }
     NgIconComponent,
     BadgeComponent,
     TranslatePipe,
+    DropdownMultiselectComponent,
   ],
   templateUrl: './form-field-inspire-theme.component.html',
   styleUrl: './form-field-inspire-theme.component.css',
@@ -27,51 +29,21 @@ export class FormFieldInspireThemeComponent {
     this.themes = themes
   }
   @Output() valueChange: EventEmitter<string[]> = new EventEmitter()
-  availableThemes = INSPIRE_THEMES
-
-  displayWithFn = (item: AutocompleteItem) => {
-    return item?.title ? `${item.title}` : ''
-  }
-
-  autoCompleteAction = (query: string) => {
-    return of(
-      this.availableThemes
-        .filter((theme) =>
-          theme.value.toLowerCase().includes(query.toLowerCase())
-        )
-        .sort((a, b) => {
-          const aStarts = a.value.startsWith(query)
-          const bStarts = b.value.startsWith(query)
-
-          if (aStarts && !bStarts) return -1
-          if (!aStarts && bStarts) return 1
-          return 0
-        })
-        .map((theme) => {
-          return {
-            title: this.translateService.instant(theme.label),
-            value: theme.value,
-          }
-        })
-    )
-  }
+  availableThemes = INSPIRE_THEMES.map((theme) => {
+    return {
+      label: this.translateService.instant(theme.label),
+      value: theme.value,
+    }
+  })
 
   constructor(private translateService: TranslateService) {}
 
-  handleItemSelection(item: AutocompleteItem) {
-    this.addTheme(item.value)
-  }
-
-  addTheme(theme: string) {
-    const duplicatedTheme = this.themes.find((t) => t === theme)
-    if (!duplicatedTheme) {
-      this.themes = [...this.themes, theme]
-      this.valueChange.emit(this.themes)
-    }
+  handleItemSelection(selectedItems: string[]) {
+    this.themes = selectedItems
+    this.valueChange.emit(this.themes)
   }
 
   removeTheme(theme: string) {
-    console.log(this.themes)
     this.themes = this.themes.filter((t) => t !== theme)
     this.valueChange.emit(this.themes)
   }

package/src/libs/feature/editor/src/lib/feature-editor.module.ts

@@ -1,35 +1,19 @@
-import { CommonModule } from '@angular/common'
-import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http'
+import { provideHttpClient } from '@angular/common/http'
 import { NgModule } from '@angular/core'
-import { MatNativeDateModule } from '@angular/material/core'
-import { MatDatepickerModule } from '@angular/material/datepicker'
-import { MatFormFieldModule } from '@angular/material/form-field'
-import { TextInputComponent } from '../../../../../libs/ui/inputs/src'
 import { EffectsModule } from '@ngrx/effects'
 import { StoreModule } from '@ngrx/store'
-import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import { EditorEffects } from './+state/editor.effects'
 import { EditorFacade } from './+state/editor.facade'
 import * as fromEditor from './+state/editor.reducer'
-import { Gn4PlatformService } from '../../../../../libs/api/repository/src'
 
 @NgModule({
   imports: [
-    CommonModule,
-    TranslateDirective,
-    TranslatePipe,
-    MatDatepickerModule,
-    MatNativeDateModule,
-    MatFormFieldModule,
-    HttpClientModule,
-    HttpClientXsrfModule,
     StoreModule.forFeature(
       fromEditor.EDITOR_FEATURE_KEY,
       fromEditor.editorReducer
     ),
     EffectsModule.forFeature([EditorEffects]),
-    TextInputComponent,
   ],
-  providers: [EditorFacade, Gn4PlatformService],
+  providers: [EditorFacade, provideHttpClient()],
 })
 export class FeatureEditorModule {}

package/src/libs/feature/editor/src/lib/fields.config.ts

@@ -383,6 +383,7 @@ export const INSPIRE_THEMES: INSPIRE_theme[] = [
     value: 'imageryBaseMapsEarthCover',
     label: 'editor.record.form.inspire.imagery',
   },
+  { value: 'inlandWaters', label: 'editor.record.form.inspire.waters' },
   {
     value: 'intelligenceMilitary',
     label: 'editor.record.form.inspire.intelligence',
@@ -403,7 +404,6 @@ export const INSPIRE_THEMES: INSPIRE_theme[] = [
     value: 'utilitiesCommunication',
     label: 'editor.record.form.inspire.utilities',
   },
-  { value: 'inlandWaters', label: 'editor.record.form.inspire.waters' },
 ]
 
 marker('editor.record.form.inspire.biota')

package/src/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-from-catalog.component.ts

@@ -3,6 +3,7 @@ import {
   FeatureSearchModule,
   FIELDS_BRIEF,
   FuzzySearchComponent,
+  ResultsListContainerComponent,
   SearchFacade,
   SearchService,
 } from '../../../../../../libs/feature/search/src'
@@ -11,6 +12,7 @@ import {
   ResultsLayoutConfigItem,
 } from '../../../../../../libs/ui/search/src'
 import { AddLayerRecordPreviewComponent } from './add-layer-record-preview/add-layer-record-preview.component'
+import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-add-layer-from-catalog',
@@ -33,7 +35,12 @@ import { AddLayerRecordPreviewComponent } from './add-layer-record-preview/add-l
       },
     },
   ],
-  imports: [FeatureSearchModule, FuzzySearchComponent],
+  imports: [
+    CommonModule,
+    FeatureSearchModule,
+    FuzzySearchComponent,
+    ResultsListContainerComponent,
+  ],
 })
 export class AddLayerFromCatalogComponent implements OnInit {
   constructor(private searchFacade: SearchFacade) {}

package/src/libs/feature/notifications/src/index.ts

@@ -1,3 +1,2 @@
-export * from './lib/feature-notifications.module'
 export * from './lib/notifications.service'
 export * from './lib/notifications-container/notifications-container.component'

package/src/libs/feature/record/src/lib/data-view/data-view.component.ts

@@ -57,7 +57,9 @@ export class DataViewComponent {
     }
   }
   @Input() set datavizConfig(value: any) {
-    this._selectedView = value.view
+    if ((value && value.view === 'table') || value.view === 'chart') {
+      this._selectedView = value.view
+    }
     if (this.mode === value.view) {
       if (!value.source) {
         this.linkSelected.emit(this.selectedLink$.value)

package/src/libs/feature/record/src/lib/external-viewer-button/external-viewer-button.component.ts

@@ -11,7 +11,7 @@ import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { TranslatePipe, TranslateService } from '@ngx-translate/core'
 import { getFileFormat } from '../../../../../../libs/util/shared/src'
 import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
-import { NgIcon, provideIcons } from '@ng-icons/core'
+import { NgIcon, provideIcons, provideNgIconsConfig } from '@ng-icons/core'
 import { CommonModule } from '@angular/common'
 import { matOpenInNew } from '@ng-icons/material-icons/baseline'
 
@@ -32,7 +32,12 @@ export const EXTERNAL_VIEWER_OPEN_NEW_TAB = new InjectionToken<boolean>(
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [CommonModule, ButtonComponent, NgIcon, TranslatePipe],
-  viewProviders: [provideIcons({ matOpenInNew })],
+  viewProviders: [
+    provideIcons({ matOpenInNew }),
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
+  ],
 })
 export class ExternalViewerButtonComponent {
   @Input() link: DatasetOnlineResource

package/src/libs/feature/record/src/lib/feature-record.module.ts

@@ -1,40 +1,20 @@
 import { NgModule } from '@angular/core'
-import { CommonModule } from '@angular/common'
 import { StoreModule } from '@ngrx/store'
 import { EffectsModule } from '@ngrx/effects'
 import { FeatureMapModule } from '../../../../../libs/feature/map/src'
-import { DropdownSelectorComponent } from '../../../../../libs/ui/inputs/src'
 import { MdViewFacade } from './state'
 import { MdViewEffects } from './state/mdview.effects'
 import {
   METADATA_VIEW_FEATURE_STATE_KEY,
   reducer,
 } from './state/mdview.reducer'
-import { MatTabsModule } from '@angular/material/tabs'
-import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
-import { FeatureCatalogModule } from '../../../../../libs/feature/catalog/src'
-import { DataTableComponent } from '../../../../../libs/ui/dataviz/src'
-import { NgIconsModule, provideNgIconsConfig } from '@ng-icons/core'
 
 @NgModule({
   imports: [
-    CommonModule,
     StoreModule.forFeature(METADATA_VIEW_FEATURE_STATE_KEY, reducer),
     EffectsModule.forFeature([MdViewEffects]),
     FeatureMapModule,
-    FeatureCatalogModule,
-    MatTabsModule,
-    TranslateDirective,
-    TranslatePipe,
-    DataTableComponent,
-    NgIconsModule,
-    DropdownSelectorComponent,
-  ],
-  providers: [
-    MdViewFacade,
-    provideNgIconsConfig({
-      size: '1.5em',
-    }),
   ],
+  providers: [MdViewFacade],
 })
 export class FeatureRecordModule {}

package/src/libs/feature/record/src/lib/gpf-api-dl-list-item/gpf-api-dl-list-item.component.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common'
 import { HttpClient } from '@angular/common/http'
 import { Component, Input, OnInit } from '@angular/core'
-import { NgIconsModule, provideIcons } from '@ng-icons/core'
+import { NgIcon, provideIcons, provideNgIconsConfig } from '@ng-icons/core'
 import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import { map, mergeMap, Observable } from 'rxjs'
 import { matCloudDownloadOutline } from '@ng-icons/material-icons/outline'
@@ -11,11 +11,14 @@ import { matCloudDownloadOutline } from '@ng-icons/material-icons/outline'
   templateUrl: './gpf-api-dl-list-item.component.html',
   styleUrls: ['./gpf-api-dl-list-item.component.css'],
   standalone: true,
-  imports: [CommonModule, TranslateDirective, TranslatePipe, NgIconsModule],
+  imports: [CommonModule, TranslateDirective, TranslatePipe, NgIcon],
   providers: [
     provideIcons({
       matCloudDownloadOutline,
     }),
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
   ],
 })
 export class GpfApiDlListItemComponent implements OnInit {

package/src/libs/feature/record/src/lib/map-view/map-view.component.ts

@@ -49,7 +49,11 @@ import {
   prioritizePageScroll,
 } from '../../../../../../libs/ui/map/src'
 import { Feature } from 'geojson'
-import { NgIconComponent, provideIcons } from '@ng-icons/core'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
 import { matClose } from '@ng-icons/material-icons/baseline'
 import { CommonModule } from '@angular/common'
 import {
@@ -94,7 +98,12 @@ marker('map.select.style')
     ButtonComponent,
     MapLegendComponent,
   ],
-  viewProviders: [provideIcons({ matClose })],
+  viewProviders: [
+    provideIcons({ matClose }),
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
+  ],
 })
 export class MapViewComponent implements AfterViewInit {
   @Input() set exceedsLimit(value: boolean) {
@@ -109,7 +118,7 @@ export class MapViewComponent implements AfterViewInit {
     this.selectedView$.next(value)
   }
   @Input() set datavizConfig(value: any) {
-    if (value.view === 'map') {
+    if (value && value.view === 'map') {
       this.selectedView$.next(value.view)
       if (value.styleTMSIndex) {
         this._styleFromConfig = value.styleTMSIndex

package/src/libs/feature/record/src/lib/record-meta/record-meta.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
   Component,
@@ -13,6 +14,7 @@ import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/mode
   template: '',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
+  imports: [CommonModule],
 })
 export class RecordMetaComponent implements OnDestroy, OnChanges {
   @Input() metadata: CatalogRecord

package/src/libs/feature/record/src/lib/state/mdview.facade.ts

@@ -139,8 +139,10 @@ export class MdViewFacade {
               return from(
                 this.dataService.getItemsFromOgcApi(link.url.href)
               ).pipe(
-                map((collectionRecords: OgcApiRecord) => {
-                  return collectionRecords && collectionRecords.geometry
+                map((collectionRecords: OgcApiRecord[]) => {
+                  return collectionRecords &&
+                    collectionRecords[0] &&
+                    collectionRecords[0].geometry
                     ? link
                     : null
                 }),

package/src/libs/feature/router/src/lib/default/container/search-router.container.directive.ts

@@ -11,6 +11,7 @@ import { RouterSearchService } from '../services/router-search.service'
       useClass: RouterSearchService,
     },
   ],
+  standalone: true,
 })
 export class SearchRouterContainerDirective implements OnInit {
   @Input('gnUiSearchRouterContainer') searchId: string

package/src/libs/feature/router/src/lib/default/router.module.ts

@@ -8,7 +8,6 @@ import {
 } from '@ngrx/router-store'
 import { StoreModule } from '@ngrx/store'
 import { ROUTER_STATE_KEY } from './constants'
-import { SearchRouterContainerDirective } from './container/search-router.container.directive'
 import { RouterService } from './router.service'
 import { SearchRouteReuseStrategy } from './SearchRouteReuseStrategy'
 import { RouterFacade } from './state/router.facade'
@@ -16,8 +15,6 @@ import { RouterEffects } from './state/router.effects'
 import { ROUTER_CONFIG, RouterConfigModel } from './router.config'
 
 @NgModule({
-  declarations: [SearchRouterContainerDirective],
-  exports: [SearchRouterContainerDirective],
   imports: [
     StoreModule.forFeature(ROUTER_STATE_KEY, routerReducer),
     StoreRouterConnectingModule.forRoot({

package/src/libs/feature/search/src/index.ts

@@ -13,7 +13,6 @@ export * from './lib/results-list/results-list.container.component'
 export * from './lib/filter-dropdown/filter-dropdown.component'
 export * from './lib/constants'
 export * from './lib/fuzzy-search/fuzzy-search.component'
-export * from './lib/facets/facets.module'
 export * from './lib/facets/facets-container/facets-container.component'
 export * from './lib/records-metrics/records-metrics.component'
 export * from './lib/favorites/favorite-star/favorite-star.component'

package/src/libs/feature/search/src/lib/facets/facets-container/facets-container.component.ts

@@ -1,5 +1,9 @@
 import { Component, OnInit } from '@angular/core'
-import { FacetSelectEvent, ModelBlock } from '../../../../../../../libs/ui/search/src'
+import {
+  FacetListComponent,
+  FacetSelectEvent,
+  ModelBlock,
+} from '../../../../../../../libs/ui/search/src'
 import { combineLatest, Observable } from 'rxjs'
 import { map, take } from 'rxjs/operators'
 import { SearchFacade } from '../../state/search.facade'
@@ -7,6 +11,8 @@ import { FacetsService } from '../facets.service'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { FieldFilters } from '../../../../../../../libs/common/domain/src/lib/model/search'
 import { EsRequestAggTerm } from '../../../../../../../libs/api/metadata-converter/src'
+import { CommonModule } from '@angular/common'
+import { TranslateModule } from '@ngx-translate/core'
 
 marker('facets.block.title.OrgForResource')
 marker('facets.block.title.availableInServices')
@@ -24,6 +30,13 @@ marker('facets.block.title.th_regions_tree.default')
   selector: 'gn-ui-facets-container',
   templateUrl: './facets-container.component.html',
   styleUrls: ['./facets-container.component.css'],
+  standalone: true,
+  imports: [
+    FacetListComponent,
+    CommonModule,
+    TranslateModule,
+    FacetListComponent,
+  ],
 })
 export class FacetsContainerComponent implements OnInit {
   selectedPaths$: Observable<string[][]>

package/src/libs/feature/search/src/lib/favorites/favorite-star/favorite-star.component.ts

@@ -48,6 +48,7 @@ export class FavoriteStarComponent implements AfterViewInit, OnDestroy {
   isFavorite$ = this.favoritesService.myFavoritesUuid$.pipe(
     map((favorites) => favorites.indexOf(this.record.uniqueIdentifier) > -1)
   )
+  supportsAuthentication = this.platformService.supportsAuthentication()
   isAnonymous$ = this.platformService.isAnonymous()
   record_: Partial<CatalogRecord>
   favoriteCount: number | null
@@ -79,20 +80,22 @@ export class FavoriteStarComponent implements AfterViewInit, OnDestroy {
   ) {}
 
   ngAfterViewInit(): void {
-    this.subscription = this.isAnonymous$
-      .pipe(withLatestFrom(this.loginMessage$))
-      .subscribe(([anonymous, loginMessage]) => {
-        if (anonymous) {
-          tippy(this.starToggleRef.nativeElement, {
-            appendTo: () => document.body,
-            content: loginMessage,
-            allowHTML: true,
-            interactive: true,
-            zIndex: 60,
-            maxWidth: 250,
-          })
-        }
-      })
+    if (this.supportsAuthentication) {
+      this.subscription = this.isAnonymous$
+        .pipe(withLatestFrom(this.loginMessage$))
+        .subscribe(([anonymous, loginMessage]) => {
+          if (anonymous) {
+            tippy(this.starToggleRef.nativeElement, {
+              appendTo: () => document.body,
+              content: loginMessage,
+              allowHTML: true,
+              interactive: true,
+              zIndex: 60,
+              maxWidth: 250,
+            })
+          }
+        })
+    }
     this.countSubscription = this.favoritesService.myFavoritesUuid$
       .pipe(pairwise())
       .subscribe(([oldFavs, newFavs]) => {
@@ -115,8 +118,12 @@ export class FavoriteStarComponent implements AfterViewInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    this.subscription.unsubscribe()
-    this.countSubscription.unsubscribe()
+    if (this.subscription) {
+      this.subscription.unsubscribe()
+    }
+    if (this.countSubscription) {
+      this.countSubscription.unsubscribe()
+    }
   }
 
   toggleFavorite(isFavorite) {