geonetwork-ui 2.4.0-dev.fdf8f64b → 2.4.1-dev.4e8752d34

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

@@ -14,10 +14,15 @@ import {
   TermBucket,
 } from '../../../../../../../libs/common/domain/src/lib/model/search'
 import {
+  DateRange,
   ElasticsearchService,
+  isDateRange,
   METADATA_LANGUAGE,
 } from '../../../../../../../libs/api/repository/src'
 import { LangService } from '../../../../../../../libs/util/i18n/src'
+import { formatUserInfo } from '../../../../../../../libs/util/shared/src'
+
+export type FieldType = 'values' | 'dateRange'
 
 export type FieldValue = string | number
 export interface FieldAvailableValue {
@@ -26,9 +31,14 @@ export interface FieldAvailableValue {
 }
 
 export abstract class AbstractSearchField {
-  abstract getAvailableValues(): Observable<FieldAvailableValue[]>
-  abstract getFiltersForValues(values: FieldValue[]): Observable<FieldFilters>
-  abstract getValuesForFilter(filters: FieldFilters): Observable<FieldValue[]>
+  abstract getAvailableValues(): Observable<FieldAvailableValue[] | DateRange[]>
+  abstract getFiltersForValues(
+    values: FieldValue[] | DateRange[]
+  ): Observable<FieldFilters>
+  abstract getValuesForFilter(
+    filters: FieldFilters
+  ): Observable<FieldValue[] | FieldValue | DateRange>
+  abstract getType(): FieldType
 }
 
 export class SimpleSearchField implements AbstractSearchField {
@@ -74,22 +84,47 @@ export class SimpleSearchField implements AbstractSearchField {
       })
     )
   }
-  getFiltersForValues(values: FieldValue[]): Observable<FieldFilters> {
+  getFiltersForValues(
+    values: FieldValue[] | DateRange[]
+  ): Observable<FieldFilters> {
+    // FieldValue[]
+    if (this.getType() === 'values') {
+      return of({
+        [this.esFieldName]: (values as FieldValue[]).reduce((acc, val) => {
+          const value = val.toString()
+          if (value !== '') {
+            return { ...acc, [value]: true }
+          }
+          return acc
+        }, {}),
+      })
+    }
+    // DateRange
     return of({
-      [this.esFieldName]: values.reduce((acc, val) => {
-        return { ...acc, [val.toString()]: true }
-      }, {}),
+      [this.esFieldName]: values[0] !== '' ? values[0] : {},
     })
   }
-  getValuesForFilter(filters: FieldFilters): Observable<FieldValue[]> {
+  getValuesForFilter(
+    filters: FieldFilters
+  ): Observable<FieldValue[] | FieldValue | DateRange> {
     const filter = filters[this.esFieldName]
     if (!filter) return of([])
-    const values =
-      typeof filter === 'string'
-        ? [filter]
-        : Object.keys(filter).filter((v) => filter[v])
+    // filter by expression
+    if (typeof filter === 'string') {
+      return of([filter])
+    }
+    // filter by date range
+    if (isDateRange(filter)) {
+      return of(filter)
+    }
+    // filter by values
+    const values = Object.keys(filter).filter((v) => filter[v])
     return of(values)
   }
+
+  getType(): FieldType {
+    return 'values'
+  }
 }
 
 export class TranslatedSearchField extends SimpleSearchField {
@@ -163,6 +198,9 @@ export class FullTextSearchField implements AbstractSearchField {
   getValuesForFilter(filters: FieldFilters): Observable<FieldValue[]> {
     return of(filters.any ? [filters.any as FieldFilterByExpression] : [])
   }
+  getType(): FieldType {
+    return 'values'
+  }
 }
 
 marker('search.filters.isSpatial.yes')
@@ -336,6 +374,10 @@ export class OrganizationSearchField implements AbstractSearchField {
       )
     )
   }
+
+  getType(): FieldType {
+    return 'values'
+  }
 }
 export class OwnerSearchField extends SimpleSearchField {
   constructor(injector: Injector) {
@@ -346,3 +388,40 @@ export class OwnerSearchField extends SimpleSearchField {
     return of([])
   }
 }
+
+export class UserSearchField extends SimpleSearchField {
+  constructor(injector: Injector) {
+    super('userinfo.keyword', injector, 'asc')
+  }
+
+  getAvailableValues(): Observable<FieldAvailableValue[]> {
+    return super.getAvailableValues().pipe(
+      map((values) =>
+        values.map((v) => ({
+          ...v,
+          label: formatUserInfo(v.label, true),
+        }))
+      )
+    )
+  }
+}
+
+export class DateRangeSearchField extends SimpleSearchField {
+  constructor(
+    protected esFieldName: string,
+    protected injector: Injector,
+    protected order: 'asc' | 'desc' = 'asc',
+    protected orderType: 'key' | 'count' = 'key'
+  ) {
+    super(esFieldName, injector, order, orderType)
+  }
+
+  getAvailableValues(): Observable<FieldAvailableValue[]> {
+    // TODO: return an array of dates to show which one are available in the date picker
+    return of([])
+  }
+
+  getType(): FieldType {
+    return 'dateRange'
+  }
+}

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

@@ -1,4 +1,3 @@
-export * from './lib/ui-catalog.module'
 export * from './lib/catalog-title/catalog-title.component'
 export * from './lib/language-switcher/language-switcher.component'
 export * from './lib/organisation-preview/organisation-preview.component'

package/src/libs/ui/catalog/src/lib/catalog-title/catalog-title.component.ts

@@ -1,9 +1,12 @@
 import { Component, Input } from '@angular/core'
+import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-catalog-title',
   templateUrl: './catalog-title.component.html',
   styleUrls: ['./catalog-title.component.css'],
+  standalone: true,
+  imports: [CommonModule],
 })
 export class CatalogTitleComponent {
   @Input() name: string

package/src/libs/ui/catalog/src/lib/language-switcher/language-switcher.component.html

@@ -1,6 +1,6 @@
 <gn-ui-dropdown-selector
   [title]="'languages'"
-  [choices]="languageList"
+  [choices]="languageChoices"
   (selectValue)="changeLanguage($event)"
   [selected]="currentLang"
   ariaName="languages"

package/src/libs/ui/catalog/src/lib/language-switcher/language-switcher.component.ts

@@ -1,12 +1,7 @@
-import {
-  Component,
-  Inject,
-  InjectionToken,
-  OnInit,
-  Optional,
-} from '@angular/core'
+import { Component, Inject, InjectionToken, Optional } from '@angular/core'
 import { LANGUAGE_STORAGE_KEY } from '../../../../../../libs/util/i18n/src'
 import { TranslateService } from '@ngx-translate/core'
+import { DropdownSelectorComponent } from '../../../../../../libs/ui/inputs/src'
 
 export const LANGUAGES_LIST = new InjectionToken<string[]>('languages-list')
 
@@ -16,14 +11,21 @@ const DEFAULT_LANGUAGES = ['en', 'fr']
   selector: 'gn-ui-language-switcher',
   templateUrl: './language-switcher.component.html',
   styleUrls: ['./language-switcher.component.css'],
+  imports: [DropdownSelectorComponent],
+  standalone: true,
 })
-export class LanguageSwitcherComponent implements OnInit {
-  languageList = this.languagePlaceholder || DEFAULT_LANGUAGES
+export class LanguageSwitcherComponent {
+  languageChoices = (this.languagesList || DEFAULT_LANGUAGES).map(
+    (language) => ({
+      label: `${language}`.toUpperCase(),
+      value: language,
+    })
+  )
 
   constructor(
     @Optional()
     @Inject(LANGUAGES_LIST)
-    private languagePlaceholder,
+    private languagesList: string[],
     private translate: TranslateService
   ) {}
 
@@ -31,22 +33,14 @@ export class LanguageSwitcherComponent implements OnInit {
     return this.translate.currentLang
   }
 
-  ngOnInit(): void {
-    const languages = this.languagePlaceholder || DEFAULT_LANGUAGES
-    this.languageList = languages.map((language) => ({
-      label: `${language}`.toUpperCase(),
-      value: language,
-    }))
-  }
-
-  changeLanguage(value) {
+  changeLanguage(value: unknown) {
     try {
-      localStorage.setItem(LANGUAGE_STORAGE_KEY, value)
+      localStorage.setItem(LANGUAGE_STORAGE_KEY, value as string)
       location.reload()
     } catch (error) {
       console.warn(`Language choice could not be persisted`, error)
     }
 
-    this.translate.use(value)
+    this.translate.use(value as string)
   }
 }

package/src/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.html

@@ -27,9 +27,8 @@
         {{ organization.description }}
       </p>
       <div class="shrink-0 text-primary opacity-50 flex leading-6">
-        <mat-icon class="material-symbols-outlined text-primary opacity-50 mr-1"
-          >folder_open
-        </mat-icon>
+        <ng-icon class="text-primary opacity-50 mr-1" name="tablerFolderOpen">
+        </ng-icon>
         <span class="mx-1" data-cy="organizationRecordsCount">{{
           organization.recordCount
         }}</span>

package/src/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.ts

@@ -6,12 +6,23 @@ import {
   Output,
 } from '@angular/core'
 import { Organization } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { ThumbnailComponent } from '../../../../../../libs/ui/elements/src'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { tablerFolderOpen } from '@ng-icons/tabler-icons'
+import { TranslateModule } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-organisation-preview',
   templateUrl: './organisation-preview.component.html',
   styleUrls: ['./organisation-preview.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ThumbnailComponent, NgIcon, TranslateModule],
+  viewProviders: [
+    provideIcons({
+      tablerFolderOpen,
+    }),
+  ],
+  standalone: true,
 })
 export class OrganisationPreviewComponent {
   @Input() organization: Organization

package/src/libs/ui/catalog/src/lib/organisations-result/organisations-result.component.ts

@@ -1,9 +1,12 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { TranslateModule } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-organisations-result',
   templateUrl: './organisations-result.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [TranslateModule],
+  standalone: true,
 })
 export class OrganisationsResultComponent {
   @Input() hits: number

package/src/libs/ui/dataviz/src/lib/chart/chart.component.ts

@@ -88,7 +88,7 @@ export class ChartComponent implements OnChanges, AfterViewInit {
     const data = this.handlesSecondaryValue()
       ? (this.getDataProxy(this.valueProperty, this.secondaryValueProperty) as [
           number,
-          number
+          number,
         ][])
       : (this.getDataProxy(this.valueProperty) as number[])
     return {

package/src/libs/ui/dataviz/src/lib/figure/figure.component.html

@@ -9,14 +9,15 @@
     (title | translate: { count: figure })
   "
 >
-  <mat-icon
-    class="material-symbols-outlined {{ bgClass }} {{
+  <div
+    class="{{ bgClass }} {{
       textClass
-    }} text-[1.875em] rounded-full mr-[0.55em] p-[0.6em] w-[2.2em] h-[2.2em] shrink-0"
+    }} text-[1.875em] rounded-full mr-[0.55em] flex justify-center items-center w-[2.2em] h-[2.2em] shrink-0"
     style="width: 2.2em; height: 2.2em"
+    data-test="icon-container"
   >
-    {{ icon }}
-  </mat-icon>
+    <ng-icon class="text-[0.66em]" [name]="icon"> </ng-icon>
+  </div>
   <div class="shrink overflow-hidden">
     <div class="figure-block text-[1.5em] text-black">
       <span class="figure font-medium mr-[0.3em]" data-test="figure">{{

package/src/libs/ui/dataviz/src/lib/ui-dataviz.module.ts

@@ -1,11 +1,26 @@
 import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { FigureComponent } from './figure/figure.component'
-import { MatIconModule } from '@angular/material/icon'
 import { TranslateModule } from '@ngx-translate/core'
+import { NgIconsModule, provideNgIconsConfig } from '@ng-icons/core'
+import { matCorporateFare } from '@ng-icons/material-icons/baseline'
+import { tablerFolderOpen } from '@ng-icons/tabler-icons'
 
 @NgModule({
-  imports: [CommonModule, MatIconModule, TranslateModule.forChild()],
+  imports: [
+    CommonModule,
+    TranslateModule.forChild(),
+    // FIXME: these imports are required by non-standalone components and should be removed once all components have been made standalone
+    NgIconsModule.withIcons({
+      matCorporateFare,
+      tablerFolderOpen,
+    }),
+  ],
+  providers: [
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
+  ],
   declarations: [FigureComponent],
   exports: [FigureComponent],
 })

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

@@ -5,6 +5,7 @@ export * from './lib/content-ghost/content-ghost.component'
 export * from './lib/download-item/download-item.component'
 export * from './lib/downloads-list/downloads-list.component'
 export * from './lib/error/error.component'
+export * from './lib/image-input/image-input.component'
 export * from './lib/image-overlay-preview/image-overlay-preview.component'
 export * from './lib/link-card/link-card.component'
 export * from './lib/markdown-editor/markdown-editor.component'
@@ -15,11 +16,9 @@ export * from './lib/metadata-info/metadata-info.component'
 export * from './lib/metadata-quality-item/metadata-quality-item.component'
 export * from './lib/metadata-quality/metadata-quality.component'
 export * from './lib/notification/notification.component'
-export * from './lib/pagination-buttons/pagination-buttons.component'
-export * from './lib/pagination/pagination.component'
 export * from './lib/record-api-form/record-api-form.component'
 export * from './lib/related-record-card/related-record-card.component'
 export * from './lib/thumbnail/thumbnail.component'
 export * from './lib/ui-elements.module'
-export * from './lib/user-preview/user-preview.component'
 export * from './lib/user-feedback-item/user-feedback-item.component'
+export * from './lib/user-preview/user-preview.component'

package/src/libs/ui/elements/src/lib/api-card/api-card.component.html

@@ -9,12 +9,23 @@
   <div class="">
     <div class="flex flex-row justify-between">
       <span
+        *ngIf="link.accessServiceProtocol !== 'GPFDL'"
         class="bg-primary-opacity-50 uppercase inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded text-primary-lightest group-hover:bg-primary transition-colors"
         [ngClass]="{
-          '!bg-primary': currentlyActive
+          '!bg-primary': currentlyActive,
         }"
         >{{ link.accessServiceProtocol }}</span
       >
+      <span
+        *ngIf="link.accessServiceProtocol === 'GPFDL'"
+        class="bg-primary-opacity-50 uppercase inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded text-primary-lightest group-hover:bg-primary transition-colors"
+        [ngClass]="{
+          '!bg-primary': currentlyActive,
+        }"
+        translate
+      >
+        record.metadata.api.gpfdl</span
+      >
       <div class="flex flex-row gap-2 items-center">
         <gn-ui-copy-text-button
           [text]="link.url"
@@ -26,9 +37,8 @@
           type="button"
           [ngClass]="{
             'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':
-              displayText
+              displayText,
           }"
-          mat-raised-button
           [matTooltip]="
             !currentlyActive
               ? ('record.metadata.api.form.openForm' | translate)
@@ -37,13 +47,13 @@
           matTooltipPosition="above"
           (click)="openRecordApiFormPanel()"
         >
-          <mat-icon
-            class="material-symbols-outlined pointer-events-none align-middle card-icon"
+          <ng-icon
+            class="pointer-events-none align-middle card-icon"
+            name="matMoreHoriz"
             [ngClass]="{
-              'text-secondary opacity-100': currentlyActive
+              'text-secondary opacity-100': currentlyActive,
             }"
-            >more_horiz</mat-icon
-          >
+          ></ng-icon>
         </button>
       </div>
     </div>

package/src/libs/ui/elements/src/lib/api-card/api-card.component.ts

@@ -9,12 +9,31 @@ import {
   Output,
   SimpleChanges,
 } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { CopyTextButtonComponent } from '../../../../../../libs/ui/inputs/src'
+import { TranslateModule } from '@ngx-translate/core'
+import { MatTooltipModule } from '@angular/material/tooltip'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { matMoreHoriz } from '@ng-icons/material-icons/baseline'
 
 @Component({
   selector: 'gn-ui-api-card',
   templateUrl: './api-card.component.html',
   styleUrls: ['./api-card.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    CopyTextButtonComponent,
+    TranslateModule,
+    MatTooltipModule,
+    NgIcon,
+  ],
+  viewProviders: [
+    provideIcons({
+      matMoreHoriz,
+    }),
+  ],
 })
 export class ApiCardComponent implements OnInit, OnChanges {
   @Input() link: DatasetServiceDistribution
@@ -27,7 +46,8 @@ export class ApiCardComponent implements OnInit, OnChanges {
   ngOnInit() {
     this.displayApiFormButton =
       this.link.accessServiceProtocol === 'ogcFeatures' ||
-      this.link.accessServiceProtocol === 'wfs'
+      this.link.accessServiceProtocol === 'wfs' ||
+      this.link.accessServiceProtocol === 'GPFDL'
   }
 
   ngOnChanges(changes: SimpleChanges) {

package/src/libs/ui/elements/src/lib/content-ghost/content-ghost.component.ts

@@ -1,10 +1,13 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-content-ghost',
   templateUrl: './content-ghost.component.html',
   styleUrls: ['./content-ghost.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule],
 })
 export class ContentGhostComponent {
   @Input() showContent: boolean

package/src/libs/ui/elements/src/lib/download-item/download-item.component.html

@@ -20,15 +20,17 @@
       >
       <span
         class="pl-2 inline-flex items-center text-gray-800 text-sm"
-        *ngIf="isFromWfs"
+        *ngIf="isFromApi"
         translate=""
-        >datahub.search.filter.generatedByWfs</span
+        >datahub.search.filter.generatedByAPI</span
       >
     </div>
   </div>
   <div class="shrink-1 w-14 flex flex-col justify-center items-center">
-    <mat-icon class="!w-8 !h-8 card-icon text-3xl material-symbols-outlined">
-      cloud_download
-    </mat-icon>
+    <ng-icon
+      class="!w-8 !h-8 card-icon text-3xl"
+      name="matCloudDownloadOutline"
+    >
+    </ng-icon>
   </div>
 </a>

package/src/libs/ui/elements/src/lib/download-item/download-item.component.ts

@@ -6,18 +6,29 @@ import {
   Output,
 } from '@angular/core'
 import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { TranslateModule } from '@ngx-translate/core'
+import { CommonModule } from '@angular/common'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { matCloudDownloadOutline } from '@ng-icons/material-icons/outline'
 
 @Component({
   selector: 'gn-ui-download-item',
   templateUrl: './download-item.component.html',
   styleUrls: ['./download-item.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [CommonModule, TranslateModule, NgIcon],
+  standalone: true,
+  viewProviders: [
+    provideIcons({
+      matCloudDownloadOutline,
+    }),
+  ],
 })
 export class DownloadItemComponent {
   @Input() link: DatasetOnlineResource
   @Input() color: string
   @Input() format: string
-  @Input() isFromWfs: boolean
+  @Input() isFromApi: boolean
   @Output() exportUrl = new EventEmitter<string>()
 
   openUrl() {

package/src/libs/ui/elements/src/lib/downloads-list/downloads-list.component.html

@@ -31,6 +31,6 @@
     [link]="link"
     [color]="getLinkColor(link)"
     [format]="getLinkFormat(link)"
-    [isFromWfs]="isFromWfs(link)"
+    [isFromApi]="isFromApi(link)"
   ></gn-ui-download-item>
 </div>