geonetwork-ui 2.6.0-dev.0739ca76d → 2.6.0-dev.0cd426aa4

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>

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

@@ -0,0 +1,83 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
+import { NgIcon, provideIcons, provideNgIconsConfig } from '@ng-icons/core'
+import { DatasetFeatureCatalog } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { FormsModule } from '@angular/forms'
+import { of } from 'rxjs'
+import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators'
+import { createFuzzyFilter } from '../../../../../../libs/util/shared/src'
+import { iconoirSearch } from '@ng-icons/iconoir'
+
+@Component({
+  selector: 'gn-ui-search-feature-catalog',
+  templateUrl: './search-feature-catalog.component.html',
+  styleUrls: ['./search-feature-catalog.component.css'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    NgIcon,
+    TranslateDirective,
+    TranslatePipe,
+    FormsModule,
+  ],
+  viewProviders: [
+    provideIcons({ iconoirSearch }),
+    provideNgIconsConfig({
+      size: '1.5rem',
+    }),
+  ],
+})
+export class SearchFeatureCatalogComponent {
+  private _featureCatalog: DatasetFeatureCatalog
+  searchTerm: any
+  @Input() set featureCatalog(value: DatasetFeatureCatalog) {
+    this._featureCatalog = value
+    this.filteredFeatureCatalog = value
+  }
+  get featureCatalog(): DatasetFeatureCatalog {
+    return this._featureCatalog
+  }
+
+  @Output() filteredFeatureCatalogChange =
+    new EventEmitter<DatasetFeatureCatalog>()
+  filteredFeatureCatalog: DatasetFeatureCatalog
+
+  filterAction = (searchTerm: string): void => {
+    of(searchTerm)
+      .pipe(
+        debounceTime(300),
+        distinctUntilChanged(),
+        tap(() => {
+          const filtered = (this.featureCatalog?.featureTypes || []).filter(
+            (featureType) => {
+              const fuzzyFilter = createFuzzyFilter(searchTerm)
+              return (
+                fuzzyFilter(featureType.name) ||
+                (featureType.definition && fuzzyFilter(featureType.definition))
+              )
+            }
+          )
+          this.filteredFeatureCatalog = {
+            ...this.featureCatalog,
+            featureTypes: filtered,
+          }
+          this.filteredFeatureCatalogChange.emit(this.filteredFeatureCatalog)
+        })
+      )
+      .subscribe()
+  }
+
+  get totalObjects(): number {
+    return this.filteredFeatureCatalog?.featureTypes?.length || 0
+  }
+
+  get totalAttributes(): number {
+    return (
+      this.filteredFeatureCatalog?.featureTypes?.reduce(
+        (total, featureType) => total + (featureType.attributes?.length || 0),
+        0
+      ) || 0
+    )
+  }
+}

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

@@ -1,13 +1,12 @@
-<div class="inline-block relative align-middle" style="line-height: 0.7em">
+<div class="inline-block relative align-middle">
   <gn-ui-button
     [type]="'outline'"
-    class="-m-[8px] p-[8px]"
+    [disabled]="disabled"
     (buttonClick)="toggle($event)"
     [ngClass]="{
       enabled: toggled,
-      disabled: !toggled,
+      disabled: !toggled || disabled,
       'transition hover:scale-125 will-change-transform': !disabled,
-      'cursor-default': disabled,
     }"
   >
     <ng-icon [name]="toggled ? 'matStar' : 'matStarBorder'"></ng-icon>

package/src/libs/ui/inputs/src/lib/switch-toggle/switch-toggle.component.ts

@@ -7,7 +7,7 @@ import {
   Output,
 } from '@angular/core'
 import { MatButtonToggleModule } from '@angular/material/button-toggle'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslatePipe } from '@ngx-translate/core'
 
 export type SwitchToggleOption = {
   label: string
@@ -21,7 +21,7 @@ export type SwitchToggleOption = {
   styleUrls: ['./switch-toggle.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [MatButtonToggleModule, CommonModule, TranslateModule],
+  imports: [MatButtonToggleModule, CommonModule, TranslatePipe],
 })
 export class SwitchToggleComponent {
   @Input() options: SwitchToggleOption[]

package/src/libs/ui/inputs/src/lib/viewport-intersector/viewport-intersector.component.ts

@@ -13,6 +13,7 @@ import { Observable } from 'rxjs'
   selector: 'gn-ui-viewport-intersector',
   templateUrl: './viewport-intersector.component.html',
   styleUrls: ['./viewport-intersector.component.css'],
+  standalone: true,
 })
 export class ViewportIntersectorComponent implements OnInit, OnDestroy {
   @Output() isInViewport = new EventEmitter<boolean>()

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

@@ -1,5 +1,6 @@
 export * from './lib/anchor-link/anchor-link.directive'
 export * from './lib/carousel/carousel.component'
+export * from './lib/cell-popin/cell-popin.component'
 export * from './lib/expandable-panel-button/expandable-panel-button.component'
 export * from './lib/expandable-panel/expandable-panel.component'
 export * from './lib/form-field-wrapper/form-field-wrapper.component'
@@ -15,4 +16,4 @@ export * from './lib/pagination-buttons/pagination-buttons.component'
 export * from './lib/pagination-dots/pagination-dots.component'
 export * from './lib/previous-next-buttons/previous-next-buttons.component'
 export * from './lib/paginable.interface'
-export * from './lib/ui-layout.module'
+export * from './lib/truncated-text/truncated-text.component'

package/src/libs/ui/layout/src/lib/anchor-link/anchor-link.directive.ts

@@ -11,6 +11,7 @@ import {
 
 @Directive({
   selector: '[gnUiAnchorLink]',
+  standalone: true,
 })
 export class AnchorLinkDirective
   implements OnInit, AfterViewChecked, OnDestroy

package/src/libs/ui/layout/src/lib/block-list/block-list.component.css

@@ -5,3 +5,25 @@
 :host {
   position: relative;
 }
+
+@media screen and (min-width: 769px) {
+  .size-L {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+    grid-auto-rows: minmax(0, min-content);
+  }
+
+  .size-M {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-auto-rows: minmax(0, min-content);
+  }
+
+  .size-S {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-auto-rows: minmax(0, min-content);
+  }
+
+  .size-XS {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-auto-rows: minmax(0, min-content);
+  }
+}

package/src/libs/ui/layout/src/lib/block-list/block-list.component.html

@@ -1,7 +1,7 @@
 <div
-  class="block-list-container flex flex-col"
+  class="grid gap-4 w-full md:grid-cols-2"
   #blockContainer
-  [ngClass]="containerClass"
+  [ngClass]="[containerClass, 'size-' + subComponentSize]"
   [ngStyle]="{ minHeight: minHeight + 'px' }"
 >
   <ng-content></ng-content>

package/src/libs/ui/layout/src/lib/block-list/block-list.component.ts

@@ -5,7 +5,9 @@ import {
   Component,
   ContentChildren,
   ElementRef,
+  EventEmitter,
   Input,
+  Output,
   QueryList,
   ViewChild,
 } from '@angular/core'
@@ -13,6 +15,7 @@ import { CommonModule } from '@angular/common'
 import { Paginable } from '../paginable.interface'
 import { PaginationDotsComponent } from '../pagination-dots/pagination-dots.component'
 
+type ComponentSize = 'L' | 'M' | 'S' | 'XS'
 @Component({
   selector: 'gn-ui-block-list',
   templateUrl: './block-list.component.html',
@@ -22,15 +25,16 @@ import { PaginationDotsComponent } from '../pagination-dots/pagination-dots.comp
   imports: [CommonModule, PaginationDotsComponent],
 })
 export class BlockListComponent implements AfterViewInit, Paginable {
-  @Input() pageSize = 5
+  pageSize = 4
   @Input() containerClass = ''
   @Input() paginationContainerClass = 'w-full bottom-0 top-auto'
   @ContentChildren('block', { read: ElementRef }) blocks: QueryList<
     ElementRef<HTMLElement>
   >
   @ViewChild('blockContainer') blockContainer: ElementRef<HTMLElement>
-
   protected minHeight = 0
+  @Output() listChanges = new EventEmitter<BlockListComponent>()
+  subComponentSize: ComponentSize = 'M'
 
   protected currentPage_ = 0
   protected get pages() {
@@ -47,18 +51,26 @@ export class BlockListComponent implements AfterViewInit, Paginable {
     return this.blocks ? Math.ceil(this.blocks.length / this.pageSize) : 1
   }
   get currentPage() {
-    return this.currentPage_ + 1 // this is 1-based
+    return this.currentPage_ + 1
   }
 
   constructor(private changeDetector: ChangeDetectorRef) {}
 
   ngAfterViewInit() {
-    this.blocks.changes.subscribe(this.refreshBlocksVisibility)
+    this.blocks.changes.subscribe(() => {
+      this.updateSizes()
+      this.refreshBlocksVisibility()
+      this.goToPage(1)
+      this.changeDetector.detectChanges()
+      this.listChanges.emit(this)
+    })
+    this.updateSizes()
     this.refreshBlocksVisibility()
 
     // we store the first height as the min-height of the list container
     this.minHeight = this.blockContainer.nativeElement.clientHeight
     this.changeDetector.detectChanges()
+    this.listChanges.emit(this)
   }
 
   protected refreshBlocksVisibility = () => {
@@ -71,7 +83,33 @@ export class BlockListComponent implements AfterViewInit, Paginable {
     })
   }
 
-  // pageIndex is 1-based
+  protected updateSizes() {
+    this.subComponentSize = this.computeSubComponentSize()
+    this.pageSize = this.computePageSize()
+  }
+
+  protected computeSubComponentSize(): ComponentSize {
+    if (!this.blocks) return 'M'
+    const subComponentsCount = this.blocks.length
+    if (subComponentsCount <= 3) return 'L'
+    if (subComponentsCount <= 12) return 'M'
+    if (subComponentsCount <= 18) return 'S'
+    return 'XS'
+  }
+
+  protected computePageSize(): number {
+    switch (this.subComponentSize) {
+      case 'L':
+        return 3
+      case 'S':
+        return 6
+      case 'XS':
+        return 8
+      default:
+        return 4
+    }
+  }
+
   public goToPage(pageIndex: number) {
     this.currentPage_ = Math.max(
       Math.min(pageIndex - 1, this.pagesCount - 1),

package/src/libs/ui/layout/src/lib/carousel/carousel.component.css

@@ -1,4 +1,3 @@
 :host {
   position: relative;
-  display: block;
 }

package/src/libs/ui/layout/src/lib/carousel/carousel.component.html

@@ -1,4 +1,4 @@
-<div #carouselOverflowContainer class="w-full">
+<div #carouselOverflowContainer class="w-full block">
   <div class="carousel-container flex" [ngClass]="containerClass">
     <ng-content></ng-content>
   </div>

package/src/libs/ui/layout/src/lib/cell-popin/cell-popin.component.html

@@ -0,0 +1,40 @@
+<div
+  class="h-full flex items-center justify-center"
+  cdkOverlayOrigin
+  #anchorRef
+  #trigger="cdkOverlayOrigin"
+  [class]="extraClass"
+  data-cy="cell-popin"
+>
+  <ng-content select="[cellContent]"></ng-content>
+  <ng-template
+    *ngIf="activePopin"
+    cdkConnectedOverlay
+    [cdkConnectedOverlayPush]="false"
+    [cdkConnectedOverlayOrigin]="trigger"
+    [cdkConnectedOverlayOpen]="isOpen"
+    [cdkConnectedOverlayPositions]="overlayPositions"
+    [cdkConnectedOverlayWidth]="'auto'"
+    [cdkConnectedOverlayFlexibleDimensions]="true"
+    [cdkConnectedOverlayGrowAfterOpen]="true"
+    (detach)="closeOverlay()"
+  >
+    <div
+      *ngIf="activePopin && isVisible"
+      class="bg-white shadow-lg border border-gray-300 relative"
+      data-cy="cell-popin-content"
+    >
+      <ng-content select="[popinContent]"></ng-content>
+      <gn-ui-button
+        data-cy="cell-popin-close"
+        [style.--gn-ui-button-background]="'bg-transparent'"
+        class="absolute top-2 right-2"
+        type="light"
+        (buttonClick)="closeOverlay()"
+        extraClass="w-10 h-8 px-1"
+      >
+        <ng-icon name="iconoirReduce" size="24"></ng-icon>
+      </gn-ui-button>
+    </div>
+  </ng-template>
+</div>