geonetwork-ui 2.6.0-dev.025a2f85d → 2.6.0-dev.02631a41f

package/src/libs/ui/elements/src/lib/record-feature-catalog/feature-catalog-list/feature-catalog-list.component.ts

@@ -0,0 +1,83 @@
+import { Component, ElementRef, Input, ViewChild } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { TranslatePipe } from '@ngx-translate/core'
+import {
+  DatasetFeatureAttribute,
+  DatasetFeatureCatalog,
+} from '../../../../../../../libs/common/domain/src/lib/model/record'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { ButtonComponent } from '../../../../../../../libs/ui/inputs/src'
+import {
+  CellPopinComponent,
+  ExpandablePanelComponent,
+  TruncatedTextComponent,
+} from '../../../../../../../libs/ui/layout/src'
+import { CdkScrollable, ScrollingModule } from '@angular/cdk/scrolling'
+import { NgIconComponent, provideIcons } from '@ng-icons/core'
+import { iconoirList } from '@ng-icons/iconoir'
+
+marker('feature.catalog.attribute.type')
+marker('feature.catalog.attribute.name')
+marker('feature.catalog.attribute.code')
+marker('feature.catalog.attribute.definition')
+marker('feature.catalog.attribute.values')
+
+interface ColumnDefinition {
+  key: string
+  width: string
+  class?: string
+}
+
+@Component({
+  selector: 'gn-ui-feature-catalog-list',
+  templateUrl: './feature-catalog-list.component.html',
+  styleUrls: [],
+  standalone: true,
+  imports: [
+    ButtonComponent,
+    CellPopinComponent,
+    CommonModule,
+    TranslatePipe,
+    ExpandablePanelComponent,
+    TruncatedTextComponent,
+    NgIconComponent,
+    ScrollingModule,
+  ],
+  providers: [provideIcons({ iconoirList })],
+})
+export class FeatureCatalogListComponent {
+  @Input() filteredFeatureCatalog!: DatasetFeatureCatalog
+
+  @ViewChild('scrollContainer') scrollContainer!: ElementRef
+  @ViewChild(CdkScrollable, { static: true }) scrollable!: CdkScrollable
+  @ViewChild('expanel', { read: ExpandablePanelComponent, static: true })
+  panelComponent: ExpandablePanelComponent
+
+  readonly COLUMNS_DEFAULT: ColumnDefinition[] = [
+    { key: 'type', width: '17%' },
+    { key: 'name', width: '32%' },
+    { key: 'code', width: '17%' },
+    { key: 'definition', width: 'minmax(0px, 1fr)' },
+  ]
+
+  readonly COLUMN_VALUES: ColumnDefinition = {
+    key: 'values',
+    width: '73px',
+    class: 'text-center',
+  }
+
+  getColumnsDefinition(attrs: DatasetFeatureAttribute[]): ColumnDefinition[] {
+    const hasValues = attrs.some((a) => a.values?.length > 0)
+    return [...this.COLUMNS_DEFAULT, ...(hasValues ? [this.COLUMN_VALUES] : [])]
+  }
+
+  getGridTemplateColumns(attributes: DatasetFeatureAttribute[]) {
+    return this.getColumnsDefinition(attributes)
+      .map((col) => col.width)
+      .join(' ')
+  }
+
+  trackByColumn(_i: number, col: { key: string }) {
+    return col.key
+  }
+}

package/src/libs/ui/elements/src/lib/service-capabilities/service-capabilities.component.html

@@ -1,5 +1,5 @@
 <div style="height: 652px" id="preview" *ngIf="apiLinks.length > 0">
-  <div class="bg-primary-opacity-10 overflow-visible" style="height: 512px">
+  <div class="bg-primary-opacity-10 overflow-visible" style="height: 420px">
     <div class="container-lg px-4 lg:mx-auto">
       <div>
         <div class="gn-ui-section-title mb-6" translate>
@@ -16,17 +16,31 @@
             <div class="h-14 md:w-2/5 w-full mb-4 flex flex-row relative">
               <gn-ui-text-input
                 class="w-full"
+                [(value)]="searchQuery"
                 [extraClass]="getExtraInputClass()"
                 [placeholder]="'service.metadata.search' | translate"
                 (input)="onSearchChange($event)"
                 (keydown.enter)="onSearchEnter($event)"
               >
               </gn-ui-text-input>
+              <div
+                class="absolute right-14 h-14 w-14 flex items-center justify-center"
+              >
+                <button
+                  #inputBtn
+                  *ngIf="searchQuery"
+                  [aria-label]="'service.metadata.search.clear' | translate"
+                  (click)="clearSearch()"
+                  class="h-12 w-12 border-0 flex items-center justify-center"
+                >
+                  <ng-icon name="matClose"></ng-icon>
+                </button>
+              </div>
               <div class="border-l absolute border-gray-200 right-0 h-14 w-14">
                 <gn-ui-button
                   #inputBtn
                   type="outline"
-                  extraClass="h-12 w-12 border-0 absolute right-1 top-1"
+                  extraClass="h-12 w-12 border-0 absolute right-1 top-1 bg-white"
                   (buttonClick)="searchLayers()"
                 >
                   <ng-icon name="iconoirSearch"></ng-icon>

package/src/libs/ui/elements/src/lib/service-capabilities/service-capabilities.component.ts

@@ -1,6 +1,10 @@
 import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import {
+  TranslateDirective,
+  TranslatePipe,
+  TranslateService,
+} from '@ngx-translate/core'
 import { getLayers } from '../../../../../../libs/util/shared/src'
 import { ButtonComponent, TextInputComponent } from '../../../../../../libs/ui/inputs/src'
 import { NgIcon, provideIcons } from '@ng-icons/core'
@@ -16,6 +20,7 @@ import {
   WmsLayerFull,
   WmtsLayer,
 } from '@camptocamp/ogc-client'
+import { matClose } from '@ng-icons/material-icons/baseline'
 
 marker(`service.metadata.search`)
 marker(`service.metadata.capabilities.title`)
@@ -37,7 +42,8 @@ marker(`service.metadata.capabilities.attribution`)
   standalone: true,
   imports: [
     CommonModule,
-    TranslateModule,
+    TranslateDirective,
+    TranslatePipe,
     ButtonComponent,
     TextInputComponent,
     NgIcon,
@@ -48,6 +54,7 @@ marker(`service.metadata.capabilities.attribution`)
     provideIcons({
       iconoirSearch,
       matInfoOutline,
+      matClose,
     }),
   ],
   templateUrl: './service-capabilities.component.html',
@@ -104,6 +111,12 @@ export class ServiceCapabilitiesComponent implements OnInit {
     }
   }
 
+  clearSearch() {
+    this.searchActive = false
+    this.searchQuery = ''
+    this.filteredLayers = this.availableLayers
+  }
+
   async loadLayers() {
     if (
       this.apiLinks.length > 0 &&
@@ -176,7 +189,7 @@ export class ServiceCapabilitiesComponent implements OnInit {
   }
 
   getExtraClass(layerItem) {
-    return layerItem.title === this.selectedLayer?.title
+    return layerItem === this.selectedLayer
       ? `h-8 rounded-lg bg-primary-darker text-white hover:text-primary-darker hover:bg-white`
       : `h-8 rounded-lg`
   }

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

@@ -14,7 +14,7 @@ import { UserModel } from '../../../../../../libs/common/domain/src/lib/model/us
 import { TimeSincePipe } from './time-since.pipe'
 import { CommonModule } from '@angular/common'
 import { ButtonComponent, TextAreaComponent } from '../../../../../../libs/ui/inputs/src'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslatePipe } from '@ngx-translate/core'
 import { SpinningLoaderComponent } from '../../../../../../libs/ui/widgets/src'
 import { NgIcon, provideIcons } from '@ng-icons/core'
 import { matSendOutline } from '@ng-icons/material-icons/outline'
@@ -29,7 +29,7 @@ import { matSendOutline } from '@ng-icons/material-icons/outline'
     CommonModule,
     TimeSincePipe,
     TextAreaComponent,
-    TranslateModule,
+    TranslatePipe,
     ButtonComponent,
     SpinningLoaderComponent,
     NgIcon,

package/src/libs/ui/elements/src/lib/user-preview/user-preview.component.ts

@@ -1,10 +1,14 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { UserModel } from '../../../../../../libs/common/domain/src/lib/model/user/user.model'
+import { AvatarComponent } from '../avatar/avatar.component'
+import { MatTooltipModule } from '@angular/material/tooltip'
 
 @Component({
   selector: 'gn-ui-user-preview',
   templateUrl: './user-preview.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [AvatarComponent, MatTooltipModule],
+  standalone: true,
 })
 export class UserPreviewComponent {
   @Input() user: UserModel

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

@@ -15,11 +15,12 @@ export * from './lib/dropdown-selector/dropdown-selector.model'
 export * from './lib/editable-label/editable-label.directive'
 export * from './lib/file-input/file-input.component'
 export * from './lib/files-drop/files-drop.directive'
+export * from './lib/inline-filter/inline-filter.component'
 export * from './lib/search-input/search-input.component'
 export * from './lib/star-toggle/star-toggle.component'
 export * from './lib/switch-toggle/switch-toggle.component'
 export * from './lib/text-area/text-area.component'
 export * from './lib/text-input/text-input.component'
-export * from './lib/ui-inputs.module'
 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'

package/src/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.html

@@ -14,7 +14,7 @@
       [placeholder]="placeholder"
       [formControl]="control"
       [matAutocomplete]="auto"
-      (keyup.enter)="handleEnter(searchInput.value)"
+      (keyup.enter)="handleSearch()"
       [ngClass]="{
         'text-primary': searchActive && enterButton,
         'text-gray-900': !searchActive,
@@ -54,7 +54,7 @@
     aria-label="Trigger search"
     *ngIf="allowSubmit"
     data-test="autocomplete-submit-btn"
-    (buttonClick)="handleClickSearch()"
+    (buttonClick)="handleSearch()"
   >
     <ng-icon name="iconoirSearch"></ng-icon>
   </gn-ui-button>
@@ -79,7 +79,7 @@
   <mat-option
     *ngFor="let suggestion of suggestions$ | async"
     [value]="suggestion"
-    class="p-2 suggestion"
+    class="p-2 suggestion text-start"
   >
     {{ displayWithFnInternal(suggestion) }}
   </mat-option>

package/src/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.ts

@@ -34,7 +34,7 @@ import {
 } from 'rxjs/operators'
 import { PopupAlertComponent } from '../../../../../../libs/ui/widgets/src'
 import { CommonModule } from '@angular/common'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslateDirective } from '@ngx-translate/core'
 import { ButtonComponent } from '../button/button.component'
 import {
   NgIconComponent,
@@ -56,7 +56,7 @@ export type AutocompleteItem = unknown
     PopupAlertComponent,
     MatAutocompleteModule,
     CommonModule,
-    TranslateModule,
+    TranslateDirective,
     ReactiveFormsModule,
     ButtonComponent,
     NgIconComponent,
@@ -183,7 +183,7 @@ export class AutocompleteComponent
       switchMap((value) => this.action(value)),
       tap((suggestions) => {
         // forcing the panel to open if there are suggestions
-        if (suggestions.length > 0) {
+        if (suggestions.length > 0 && !this.isSearchActive) {
           this.triggerRef?.openPanel()
         }
       }),
@@ -296,16 +296,13 @@ export class AutocompleteComponent
     this.inputRef.nativeElement.focus()
   }
 
-  handleEnter(any: string) {
+  handleSearch() {
     if (!this.cancelEnter && this.allowSubmit) {
       this.isSearchActive.emit(true)
       this.searchActive = true
-      this.inputSubmitted.emit(any)
+      this.inputSubmitted.emit(this.inputRef.nativeElement.value)
     }
-  }
-
-  handleClickSearch() {
-    this.inputSubmitted.emit(this.inputRef.nativeElement.value)
+    this.triggerRef?.closePanel()
   }
 
   /**

package/src/libs/ui/inputs/src/lib/button/button.component.ts

@@ -56,14 +56,14 @@ export class ButtonComponent {
 
   @Input() disabled = false
   @Input() extraClass = ''
-  @Output() buttonClick = new EventEmitter<void>()
+  @Output() buttonClick = new EventEmitter<Event>()
 
   get classList() {
     return `${this.btnClass} ${this.extraClass}`
   }
 
   handleClick(event: MouseEvent) {
-    this.buttonClick.emit()
+    this.buttonClick.emit(event)
     event.preventDefault()
     ;(event.currentTarget as HTMLElement).blur()
     propagateToDocumentOnly(event)

package/src/libs/ui/inputs/src/lib/checkbox/checkbox.component.ts

@@ -5,12 +5,15 @@ import {
   Input,
   Output,
 } from '@angular/core'
+import { MatCheckboxModule } from '@angular/material/checkbox'
 
 @Component({
   selector: 'gn-ui-checkbox',
   templateUrl: './checkbox.component.html',
   styleUrls: ['./checkbox.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [MatCheckboxModule],
 })
 export class CheckboxComponent {
   @Input() type: 'primary' | 'secondary' | 'default' = 'default'

package/src/libs/ui/inputs/src/lib/drag-and-drop-file-input/drag-and-drop-file-input.component.html

@@ -1,7 +1,7 @@
 <div class="flex h-full">
   <ngx-dropzone
     class="flex-1"
-    multiple="false"
+    [multiple]="false"
     (change)="selectFile($event)"
     [accept]="accept"
   >

package/src/libs/ui/inputs/src/lib/drag-and-drop-file-input/drag-and-drop-file-input.component.ts

@@ -1,5 +1,7 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { NgxDropzoneModule } from 'ngx-dropzone'
+import { CommonModule } from '@angular/common'
 
 export const placeholder = 'dropFile'
 marker('dropFile')
@@ -8,6 +10,8 @@ marker('dropFile')
   selector: 'gn-ui-drag-and-drop-file-input',
   templateUrl: './drag-and-drop-file-input.component.html',
   styleUrls: ['./drag-and-drop-file-input.component.css'],
+  standalone: true,
+  imports: [NgxDropzoneModule, CommonModule],
 })
 export class DragAndDropFileInputComponent {
   @Input() placeholder = placeholder

package/src/libs/ui/inputs/src/lib/dropdown-multiselect/dropdown-multiselect.component.html

@@ -59,7 +59,7 @@
     #overlayContainer
   >
     <div
-      class="border border-gray-300 rounded mb-2 mx-2 min-h-[44px] flex flex-row flex-wrap p-2 focus-within:rounded focus-within:border-2 focus-within:border-primary"
+      class="border border-gray-300 rounded mb-2 mx-2 min-h-[44px] flex flex-row gap-[2px] flex-wrap p-2 focus-within:rounded focus-within:border-2 focus-within:border-primary"
     >
       <button
         type="button"

package/src/libs/ui/inputs/src/lib/dropdown-multiselect/dropdown-multiselect.component.ts

@@ -13,6 +13,7 @@ import {
   CdkConnectedOverlay,
   CdkOverlayOrigin,
   ConnectedPosition,
+  OverlayModule,
   ScrollStrategyOptions,
 } from '@angular/cdk/overlay'
 import { take } from 'rxjs/operators'
@@ -21,12 +22,38 @@ import {
   createFuzzyFilter,
   propagateToDocumentOnly,
 } from '../../../../../../libs/util/shared/src'
+import { ButtonComponent } from '../button/button.component'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { FormsModule } from '@angular/forms'
+import { TranslatePipe } from '@ngx-translate/core'
+import { CommonModule } from '@angular/common'
+import {
+  matClose,
+  matExpandLess,
+  matExpandMore,
+} from '@ng-icons/material-icons/baseline'
 
 @Component({
   selector: 'gn-ui-dropdown-multiselect',
   templateUrl: './dropdown-multiselect.component.html',
   styleUrls: ['./dropdown-multiselect.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    CommonModule,
+    ButtonComponent,
+    NgIcon,
+    OverlayModule,
+    FormsModule,
+    TranslatePipe,
+  ],
+  providers: [
+    provideIcons({
+      matClose,
+      matExpandMore,
+      matExpandLess,
+    }),
+  ],
+  standalone: true,
 })
 export class DropdownMultiselectComponent {
   @Input() title: string

package/src/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.html

@@ -19,7 +19,7 @@
     (keydown)="handleTriggerKeydown($event)"
     [disabled]="disabled"
   >
-    <div class="grow font-medium truncate py-1 mr-2 text-left">
+    <div class="grow truncate py-1 mr-2 text-left">
       {{ getChoiceLabel() | translate }}
     </div>
     <ng-icon

package/src/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.ts

@@ -19,7 +19,7 @@ import {
 import { firstValueFrom } from 'rxjs'
 import { DropdownChoice } from './dropdown-selector.model'
 import { CommonModule } from '@angular/common'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslatePipe } from '@ngx-translate/core'
 import { ButtonComponent } from '../button/button.component'
 import {
   NgIconComponent,
@@ -40,7 +40,7 @@ const DEFAULT_ROW_NUMBERS = 6
     CommonModule,
     ButtonComponent,
     OverlayModule,
-    TranslateModule,
+    TranslatePipe,
     NgIconComponent,
   ],
   providers: [

package/src/libs/ui/inputs/src/lib/file-input/file-input.component.ts

@@ -8,9 +8,8 @@ import {
   Output,
 } from '@angular/core'
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'
-import { ButtonComponent } from '../button/button.component'
 import { FilesDropDirective } from '../files-drop/files-drop.directive'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { UrlInputComponent } from '../url-input/url-input.component'
 import {
@@ -28,12 +27,12 @@ import { iconoirCloudUpload, iconoirFramePlusIn } from '@ng-icons/iconoir'
   standalone: true,
   imports: [
     CommonModule,
-    ButtonComponent,
     FilesDropDirective,
     MatProgressSpinnerModule,
-    TranslateModule,
     UrlInputComponent,
     NgIconComponent,
+    TranslatePipe,
+    TranslateDirective,
   ],
   providers: [
     provideIcons({

package/src/libs/ui/inputs/src/lib/inline-filter/inline-filter.component.html

@@ -0,0 +1,23 @@
+<ul class="flex flex-wrap list-none gap-2">
+  <li *ngFor="let choice of choices">
+    <label
+      class=""
+      [ngClass]="{
+        selected: isSelected(choice),
+      }"
+    >
+      <input
+        class="hidden"
+        type="checkbox"
+        #checkBox
+        [checked]="isSelected(choice)"
+        (change)="select(choice, checkBox.checked)"
+        [attr.data-cy]="'inlineFilter-' + choice.value"
+      />
+      <ng-container
+        *ngTemplateOutlet="itemTemplate; context: { $implicit: choice }"
+      >
+      </ng-container>
+    </label>
+  </li>
+</ul>

package/src/libs/ui/inputs/src/lib/inline-filter/inline-filter.component.ts

@@ -0,0 +1,47 @@
+import {
+  Component,
+  ContentChild,
+  EventEmitter,
+  Input,
+  Output,
+  TemplateRef,
+} from '@angular/core'
+import { Choice } from './inline-filter.model'
+import { CommonModule } from '@angular/common'
+
+@Component({
+  selector: 'gn-ui-inline-filter',
+  templateUrl: './inline-filter.component.html',
+  standalone: true,
+  imports: [CommonModule],
+})
+export class InlineFilterComponent {
+  @Input() choices: Choice[]
+  @Input() selected: unknown[] = []
+
+  @Output() selectValues = new EventEmitter<unknown[]>()
+
+  @ContentChild(TemplateRef) itemTemplate: TemplateRef<any>
+
+  isSelected(choice: Choice) {
+    return (
+      this.selected.indexOf(choice.value) > -1 ||
+      (this.selected.length === 0 && choice.value === 'all')
+    )
+  }
+
+  select(choice: Choice, selected: boolean) {
+    if (choice.value === 'all' && selected) {
+      this.selected = [choice.value]
+    } else {
+      this.selected = selected
+        ? [...this.selected.filter((v) => v !== choice.value), choice.value]
+        : this.selected.filter((v) => v !== choice.value)
+
+      // If any value selected, unselect all
+      this.selected = this.selected.filter((v) => v !== 'all')
+    }
+
+    this.selectValues.emit(this.selected)
+  }
+}

package/src/libs/ui/inputs/src/lib/inline-filter/inline-filter.model.ts

@@ -0,0 +1,5 @@
+export interface Choice {
+  value: unknown
+  label: string
+  icon?: string
+}

package/src/libs/ui/inputs/src/lib/search-feature-catalog/search-feature-catalog.component.html

@@ -0,0 +1,43 @@
+<div
+  class="flex items-center justify-between p-3 mt-8 bg-white rounded-lg border-b solid border-gray-300"
+>
+  <div
+    class="relative shrink-0"
+    *ngIf="featureCatalog?.featureTypes?.length > 1"
+  >
+    <input
+      type="text"
+      [placeholder]="'search.filter.into.feature.catalog' | translate"
+      class="w-[220px] h-8 pl-3 pr-10 py-2 border rounded-md"
+      [(ngModel)]="searchTerm"
+      (ngModelChange)="filterAction(searchTerm)"
+    />
+    <ng-icon
+      class="absolute right-2.5 top-1 w-6 h-6 text-black"
+      name="iconoirSearch"
+    ></ng-icon>
+  </div>
+  <div class="text-sm px-1 ml-auto hidden sm:inline">
+    <ng-container *ngIf="featureCatalog?.featureTypes?.length > 1">
+      <span
+        class="text-sm font-medium text-gray-900"
+        data-cy="total-objects-label"
+        translate
+        >record.feature.catalog.number.total.object</span
+      ><span
+        class="text-sm font-bold px-1 text-gray-900"
+        data-cy="total-objects"
+        >{{ totalObjects }}</span
+      >
+      <span class="px-1.5">|</span>
+    </ng-container>
+    <span
+      class="text-sm font-medium px-1 text-gray-900"
+      data-cy="total-attributes-label"
+      translate
+      >record.feature.catalog.number.total.attribute</span
+    ><span class="text-sm font-bold text-gray-900" data-cy="total-attributes">{{
+      totalAttributes
+    }}</span>
+  </div>
+</div>