geonetwork-ui 2.8.0-dev.94b119e28 → 2.8.0-dev.b7a1670bc

package/src/libs/feature/record/src/lib/stac-view/utils.ts

@@ -0,0 +1,57 @@
+import { DatasetTemporalExtent } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { Extent } from '@geospatial-sdk/core/dist/model'
+import { StacFilterState } from './stac-view.component'
+
+export function areTemporalExtentsEqual(
+  previous: DatasetTemporalExtent | null,
+  current: DatasetTemporalExtent | null
+): boolean {
+  const previousStartTime = previous?.start?.getTime() ?? null
+  const previousEndTime = previous?.end?.getTime() ?? null
+
+  const currentStartTime = current?.start?.getTime() ?? null
+  const currentEndTime = current?.end?.getTime() ?? null
+
+  return (
+    previousStartTime === currentStartTime && previousEndTime === currentEndTime
+  )
+}
+
+export function areSpatialExtentsEqual(
+  previous: Extent | null,
+  current: Extent | null
+): boolean {
+  return (
+    previous?.[0] === current?.[0] &&
+    previous?.[1] === current?.[1] &&
+    previous?.[2] === current?.[2] &&
+    previous?.[3] === current?.[3]
+  )
+}
+
+export function areFilterStatesEqual(
+  previous: StacFilterState,
+  current: StacFilterState
+): boolean {
+  const sameTemporalExtents = areTemporalExtentsEqual(
+    previous.temporalExtent,
+    current.temporalExtent
+  )
+
+  const sameSpatialExtents =
+    !current.isSpatialExtentFilterEnabled ||
+    areSpatialExtentsEqual(previous.spatialExtent, current.spatialExtent)
+
+  const sameIsSpatialExtentFilterEnabled =
+    previous.isSpatialExtentFilterEnabled ===
+    current.isSpatialExtentFilterEnabled
+
+  const samePageUrl = previous.pageUrl === current.pageUrl
+
+  return (
+    sameTemporalExtents &&
+    sameSpatialExtents &&
+    sameIsSpatialExtentFilterEnabled &&
+    samePageUrl
+  )
+}

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

@@ -68,7 +68,7 @@ export class MdViewEffects {
       map((related) => {
         return MdViewActions.setRelated({ related })
       }),
-      catchError((error) => of(MdViewActions.setRelated({ related: null })))
+      catchError(() => of(MdViewActions.setRelated({ related: null })))
     )
   )
 

package/src/libs/feature/search/src/lib/constants.ts

@@ -19,6 +19,7 @@ export const FIELDS_SUMMARY: FieldName[] = [
   'userSavedCount',
   'cl_topic',
   'cl_maintenanceAndUpdateFrequency',
+  'cl_presentationForm',
   'MD_LegalConstraints*Object',
   'qualityScore',
   'allKeywords',

package/src/libs/feature/search/src/lib/utils/service/fields.service.ts

@@ -34,6 +34,7 @@ marker('search.filters.publicationYear')
 marker('search.filters.organization')
 marker('search.filters.representationType')
 marker('search.filters.resourceType')
+marker('search.filters.recordKind')
 marker('search.filters.standard')
 marker('search.filters.topic')
 marker('search.filters.contact')

package/src/libs/feature/search/src/lib/utils/service/fields.ts

@@ -505,11 +505,15 @@ export class ResourceTypeLegacyField extends TranslatedSearchField {
 
 export class RecordKindField extends SimpleSearchField {
   TYPE_MAPPING = {
-    dataset: ['dataset', 'series', 'featureCatalog'],
+    dataset: ['dataset', 'series', 'featureCatalog', 'document'],
     service: ['service'],
-    reuse: Object.entries(PossibleResourceTypes)
-      .filter(([_, v]) => v === 'reuse')
-      .map(([k]) => k), // = ['application', 'map', 'staticMap', 'interactiveMap', ...]
+    reuse: [
+      ...Object.entries(PossibleResourceTypes)
+        .filter(([_, v]) => v === 'reuse')
+        .map(([k]) => k), // = ['application', 'map', 'staticMap', 'interactiveMap', ...]
+      'dataset', // allow datasets and documents to be filtered as 'reuse' by cl_presentationForm
+      'document',
+    ],
   }
 
   constructor(injector: Injector) {
@@ -517,38 +521,25 @@ export class RecordKindField extends SimpleSearchField {
   }
 
   getAvailableValues(): Observable<FieldAvailableValue[]> {
-    return this.repository.aggregate(this.getAggregations()).pipe(
-      map(
-        (response) =>
-          (response[this.esFieldName] as AggregationBuckets).buckets || []
-      ),
-      map((buckets: TermBucket[]) => {
-        const counts = buckets.reduce(
-          (acc, { term, count }) => {
-            const value = term.toString()
-            const key = this.TYPE_MAPPING.reuse.includes(value)
-              ? 'reuse'
-              : this.TYPE_MAPPING.dataset.includes(value)
-                ? 'dataset'
-                : value
-
-            acc[key] = (acc[key] || 0) + count
-            return acc
-          },
-          {} as Record<string, number>
-        )
-
-        return Object.keys(this.TYPE_MAPPING).map((type) => ({
-          label: type,
-          value: type,
-          count: counts[type] ?? 0,
-        }))
-      })
-    )
+    // simplified as available values now depend on 'resourceType' and 'cl_presentationForm' fields
+    return of([
+      {
+        label: 'dataset',
+        value: 'dataset',
+      },
+      {
+        label: 'service',
+        value: 'service',
+      },
+      {
+        label: 'reuse',
+        value: 'reuse',
+      },
+    ])
   }
 
   getFiltersForValues(values: FieldValue[]): Observable<FieldFilters> {
-    const filters = {
+    const filters: FieldFilters = {
       [this.esFieldName]: values.reduce((acc, value) => {
         if (value === '') return { ...acc, [value]: true }
 
@@ -559,6 +550,19 @@ export class RecordKindField extends SimpleSearchField {
       }, {}),
     }
 
+    const presentationFormFilter = {}
+    if (values.includes('reuse') && !values.includes('dataset')) {
+      presentationFormFilter['mapDigital'] = true
+      presentationFormFilter['mapHardcopy'] = true
+    } else if (values.includes('dataset') && !values.includes('reuse')) {
+      presentationFormFilter['mapDigital'] = false
+      presentationFormFilter['mapHardcopy'] = false
+    }
+
+    if (Object.keys(presentationFormFilter).length > 0) {
+      filters['cl_presentationForm.key'] = presentationFormFilter
+    }
+
     return of(filters)
   }
 

package/src/libs/ui/elements/src/index.ts

@@ -27,3 +27,4 @@ export * from './lib/application-banner/application-banner.component'
 export * from './lib/internal-link-card/internal-link-card.component'
 export * from './lib/service-capabilities/service-capabilities.component'
 export * from './lib/record-feature-catalog/feature-catalog-list/feature-catalog-list.component'
+export * from './lib/stac-items-result-grid/stac-items-result-grid.component'

package/src/libs/ui/elements/src/lib/stac-items-result-grid/stac-items-result-grid.component.html

@@ -0,0 +1,13 @@
+<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-[10px]">
+  <div *ngFor="let item of items">
+    <div
+      data-cy="stac-item-card"
+      class="h-[173px] flex flex-col justify-between gap-4 bg-white rounded-lg border border-gray-300 px-5 py-3 mx-auto"
+    >
+      <h2 class="text-xl text-black line-clamp-4 break-words">
+        {{ item.id }}
+      </h2>
+      <p class="truncate">{{ item.properties.datetime }}</p>
+    </div>
+  </div>
+</div>

package/src/libs/ui/elements/src/lib/stac-items-result-grid/stac-items-result-grid.component.ts

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { StacItem } from '@camptocamp/ogc-client'
+
+@Component({
+  selector: 'gn-ui-stac-items-result-grid',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './stac-items-result-grid.component.html',
+  styleUrl: './stac-items-result-grid.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class StacItemsResultGridComponent {
+  @Input() items: StacItem[] = []
+}

package/src/libs/ui/inputs/src/index.ts

@@ -24,3 +24,4 @@ export * from './lib/text-input/text-input.component'
 export * from './lib/url-input/url-input.component'
 export * from './lib/viewport-intersector/viewport-intersector.component'
 export * from './lib/search-feature-catalog/search-feature-catalog.component'
+export * from './lib/date-range-inputs/date-range-inputs.component'

package/src/libs/ui/inputs/src/lib/check-toggle/check-toggle.component.html

@@ -1,8 +1,8 @@
 <label
-  class="inline-flex relative items-start cursor-pointer"
+  class="flex relative items-center cursor-pointer w-full"
   [title]="title || label"
 >
-  <span class="shrink-0">
+  <span class="shrink-0 relative">
     <input
       type="checkbox"
       class="sr-only peer"
@@ -18,5 +18,5 @@
       "
     ></div>
   </span>
-  <span class="ml-3 mt-[2px] text-sm font-medium">{{ label }}</span>
+  <span class="ml-3 mt-[2px] text-sm font-medium flex-1">{{ label }}</span>
 </label>

package/src/libs/ui/inputs/src/lib/date-picker/date-picker.component.ts

@@ -5,7 +5,11 @@ import {
   Input,
   Output,
 } from '@angular/core'
-import { MatNativeDateModule } from '@angular/material/core'
+import {
+  DateAdapter,
+  MAT_DATE_LOCALE,
+  MatNativeDateModule,
+} from '@angular/material/core'
 import { MatDatepickerModule } from '@angular/material/datepicker'
 import { ButtonComponent } from '../button/button.component'
 import {
@@ -14,6 +18,7 @@ import {
   provideNgIconsConfig,
 } from '@ng-icons/core'
 import { iconoirCalendar } from '@ng-icons/iconoir'
+import { TranslateService } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-date-picker',
@@ -32,9 +37,20 @@ import { iconoirCalendar } from '@ng-icons/iconoir'
     provideNgIconsConfig({
       size: '1.5rem',
     }),
+    {
+      provide: MAT_DATE_LOCALE,
+      useFactory: (locale: string) => locale,
+    },
   ],
 })
 export class DatePickerComponent {
   @Input() date: Date
   @Output() dateChange = new EventEmitter<Date>()
+
+  constructor(
+    private dateAdapter: DateAdapter<Date>,
+    private translate: TranslateService
+  ) {
+    this.dateAdapter.setLocale(this.translate.currentLang)
+  }
 }

package/src/libs/ui/inputs/src/lib/date-range-inputs/date-range-inputs.component.html

@@ -0,0 +1,15 @@
+<div class="m-8">
+  <p class="mb-4" translate>daterange.filter.period</p>
+  <p translate>daterange.filter.from</p>
+  <gn-ui-date-picker
+    id="start-date-picker"
+    [date]="temporalExtent?.start"
+    (dateChange)="onStartDateChange($event)"
+  ></gn-ui-date-picker>
+  <p class="mt-4" translate>daterange.filter.to</p>
+  <gn-ui-date-picker
+    id="end-date-picker"
+    [date]="temporalExtent?.end"
+    (dateChange)="onEndDateChange($event)"
+  ></gn-ui-date-picker>
+</div>

package/src/libs/ui/inputs/src/lib/date-range-inputs/date-range-inputs.component.ts

@@ -0,0 +1,41 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import { DatePickerComponent } from '../date-picker/date-picker.component'
+import { DatasetTemporalExtent } from '../../../../../../libs/common/domain/src/lib/model/record/metadata.model'
+import { TranslateDirective } from '@ngx-translate/core'
+import { CommonModule } from '@angular/common'
+
+@Component({
+  selector: 'gn-ui-date-range-inputs',
+  standalone: true,
+  imports: [CommonModule, TranslateDirective, DatePickerComponent],
+  templateUrl: './date-range-inputs.component.html',
+  styleUrl: './date-range-inputs.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DateRangeInputsComponent {
+  @Input() temporalExtent: DatasetTemporalExtent | null
+  @Output() temporalExtentChange =
+    new EventEmitter<DatasetTemporalExtent | null>()
+
+  onStartDateChange(date: Date) {
+    this.temporalExtent = {
+      ...this.temporalExtent,
+      start: date,
+    }
+    this.temporalExtentChange.emit(this.temporalExtent)
+  }
+
+  onEndDateChange(date: Date) {
+    this.temporalExtent = {
+      ...this.temporalExtent,
+      end: date,
+    }
+    this.temporalExtentChange.emit(this.temporalExtent)
+  }
+}

package/src/libs/ui/layout/src/lib/paginable.interface.ts

@@ -6,9 +6,9 @@
 export interface Paginable {
   isFirstPage: boolean
   isLastPage: boolean
-  pagesCount: number
-  currentPage: number
-  goToPage(index: number): void
+  pagesCount?: number
+  currentPage?: number
+  goToPage?(index: number): void
   goToNextPage(): void
   goToPrevPage(): void
 }

package/src/libs/ui/layout/src/lib/previous-next-buttons/previous-next-buttons.component.html

@@ -3,28 +3,34 @@
     data-test="previousButton"
     type="light"
     [extraClass]="
-      'w-10 h-8 px-2 py-1 rounded-lg ' +
+      'w-auto min-w-10 h-8 px-2 py-1 rounded-lg ' +
       (!listComponent.isFirstPage
-        ? 'border border-gray-300'
-        : 'border border-gray-100')
+        ? 'border border-gray-300 text-main'
+        : 'border border-gray-100 text-gray-300')
     "
     [disabled]="listComponent.isFirstPage"
     (buttonClick)="listComponent.goToPrevPage()"
   >
     <ng-icon name="matArrowBackIos"></ng-icon>
+    <span *ngIf="displayLabels" class="ml-2" translate
+      >pagination.previousPage</span
+    >
   </gn-ui-button>
   <gn-ui-button
     data-test="nextButton"
     type="light"
     [extraClass]="
-      'w-10 h-8 px-2 py-1 rounded-lg ' +
+      'w-auto min-w-10 h-8 px-2 py-1 rounded-lg ' +
       (!listComponent.isLastPage
-        ? 'border border-gray-300'
-        : 'border border-gray-100')
+        ? 'border border-gray-300 text-main'
+        : 'border border-gray-100 text-gray-300')
     "
     [disabled]="listComponent.isLastPage"
     (buttonClick)="listComponent.goToNextPage()"
   >
+    <span *ngIf="displayLabels" class="mr-2" translate
+      >pagination.nextPage</span
+    >
     <ng-icon name="matArrowForwardIos"></ng-icon>
   </gn-ui-button>
 </div>

package/src/libs/ui/layout/src/lib/previous-next-buttons/previous-next-buttons.component.ts

@@ -10,13 +10,15 @@ import {
 } from '@ng-icons/material-icons/baseline'
 import { Paginable } from '../paginable.interface'
 import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
+import { CommonModule } from '@angular/common'
+import { TranslateDirective } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-previous-next-buttons',
   templateUrl: './previous-next-buttons.component.html',
   styleUrls: ['./previous-next-buttons.component.css'],
   standalone: true,
-  imports: [ButtonComponent, NgIconComponent],
+  imports: [CommonModule, ButtonComponent, NgIconComponent, TranslateDirective],
   providers: [
     provideIcons({ matArrowBackIos, matArrowForwardIos }),
     provideNgIconsConfig({
@@ -26,4 +28,5 @@ import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
 })
 export class PreviousNextButtonsComponent {
   @Input() listComponent: Paginable
+  @Input() displayLabels = false
 }

package/src/libs/ui/map/src/lib/components/map-container/map-container.component.html

@@ -1,16 +1,18 @@
-<div class="h-full w-full" #map></div>
-<div
-  class="absolute inset-0 p-2 rounded z-40 transition-all flex flex-col justify-center items-center text-primary font-sans pointer-events-none"
-  [ngClass]="
-    (displayMessage$ | async) ? 'visible opacity-100' : 'invisible opacity-0'
-  "
->
+<div class="relative h-full w-full" #map>
+  <ng-content></ng-content>
   <div
-    class="absolute z-[-1] inset-0 bg-gradient-to-b from-white to-primary-lightest opacity-60"
-  ></div>
-  <ng-icon
-    class="!w-16 !h-16 text-[64px] mb-4"
-    name="matSwipeOutline"
-  ></ng-icon>
-  <p translate>map.navigation.message</p>
+    class="absolute inset-0 p-2 rounded z-40 transition-all flex flex-col justify-center items-center text-primary font-sans pointer-events-none"
+    [ngClass]="
+      (displayMessage$ | async) ? 'visible opacity-100' : 'invisible opacity-0'
+    "
+  >
+    <div
+      class="absolute z-[-1] inset-0 bg-gradient-to-b from-white to-primary-lightest opacity-60"
+    ></div>
+    <ng-icon
+      class="!w-16 !h-16 text-[64px] mb-4"
+      name="matSwipeOutline"
+    ></ng-icon>
+    <p translate>map.navigation.message</p>
+  </div>
 </div>