geonetwork-ui 2.2.0-dev.4983265e → 2.2.0-dev.4db0b597

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

@@ -4,3 +4,5 @@ export * from './lib/carousel/carousel.component'
 export * from './lib/expandable-panel/expandable-panel.component'
 export * from './lib/sticky-header/sticky-header.component'
 export * from './lib/expandable-panel-button/expandable-panel-button.component'
+export * from './lib/interactive-table/interactive-table.component'
+export * from './lib/interactive-table/interactive-table-column/interactive-table-column.component'

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

@@ -1,4 +1,4 @@
-:host .carousel-container /deep/ > * {
+:host .carousel-container ::ng-deep > * {
   flex-shrink: 0;
 }
 :host {

package/src/libs/ui/layout/src/lib/interactive-table/interactive-table-column/interactive-table-column.component.html

@@ -0,0 +1 @@
+<span>empty</span>

package/src/libs/ui/layout/src/lib/interactive-table/interactive-table-column/interactive-table-column.component.ts

@@ -0,0 +1,33 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ContentChild,
+  EventEmitter,
+  Input,
+  Output,
+  TemplateRef,
+} from '@angular/core'
+import { CommonModule } from '@angular/common'
+
+@Component({
+  selector: 'gn-ui-interactive-table-column',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './interactive-table-column.component.html',
+  styleUrls: ['./interactive-table-column.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class InteractiveTableColumnComponent {
+  @ContentChild('header') header: TemplateRef<unknown>
+  @ContentChild('cell') cell: TemplateRef<unknown>
+
+  @Input() grow = false
+  @Input() sortable = false
+  @Input() activeSort: 'asc' | 'desc' | null = null
+  @Output() sortChange = new EventEmitter<'asc' | 'desc'>()
+
+  handleSortChange() {
+    this.activeSort = this.activeSort === 'asc' ? 'desc' : 'asc'
+    this.sortChange.emit(this.activeSort)
+  }
+}

package/src/libs/ui/layout/src/lib/interactive-table/interactive-table.component.css

@@ -0,0 +1,15 @@
+.sort-button mat-icon {
+  padding: 0;
+  margin: 0;
+  height: 8px;
+  line-height: 8px;
+  font-size: 18px;
+}
+
+.table-header-cell {
+  @apply text-gray-700 px-4 py-5 flex items-center truncate bg-white;
+}
+
+button.table-header-cell {
+  @apply transition-colors duration-75 hover:text-main hover:bg-gray-50 focus:text-main focus:bg-gray-50;
+}

package/src/libs/ui/layout/src/lib/interactive-table/interactive-table.component.html

@@ -0,0 +1,54 @@
+<div class="grid w-full" [ngStyle]="gridStyle">
+  <div class="contents">
+    <ng-container *ngFor="let column of columns">
+      <button
+        *ngIf="column.sortable"
+        type="button"
+        class="table-header-cell"
+        (click)="column.sortable && column.handleSortChange()"
+      >
+        <ng-container *ngTemplateOutlet="column.header"></ng-container>
+        <div class="sort-button flex flex-col" *ngIf="column.sortable">
+          <mat-icon
+            class="material-symbols-outlined text-gray-600"
+            [ngClass]="{ 'text-main': column.activeSort === 'asc' }"
+            >expand_less</mat-icon
+          >
+          <mat-icon
+            class="material-symbols-outlined text-gray-600"
+            [ngClass]="{ 'text-main': column.activeSort === 'desc' }"
+            >expand_more</mat-icon
+          >
+        </div>
+      </button>
+      <div *ngIf="!column.sortable" class="table-header-cell">
+        <ng-container *ngTemplateOutlet="column.header"></ng-container>
+      </div>
+    </ng-container>
+  </div>
+  <div
+    class="contents text-gray-900 cursor-pointer group"
+    *ngFor="let item of items"
+    (click)="handleRowClick(item)"
+  >
+    <div
+      class="relative h-0"
+      [ngStyle]="{ 'grid-column': 'span ' + this.columns.length }"
+    >
+      <!-- this element is only used in keyboard navigation -->
+      <button
+        type="button"
+        class="absolute inset-x-0 h-[50px] bg-transparent pointer-events-none"
+      ></button>
+    </div>
+    <ng-container *ngFor="let column of columns">
+      <div
+        class="table-row-cell px-4 py-3 flex items-center bg-white transition-colors duration-75 truncate group-hover:text-main group-hover:bg-gray-50 border-b border-gray-200"
+      >
+        <ng-container
+          *ngTemplateOutlet="column.cell; context: { $implicit: item }"
+        ></ng-container>
+      </div>
+    </ng-container>
+  </div>
+</div>

package/src/libs/ui/layout/src/lib/interactive-table/interactive-table.component.ts

@@ -0,0 +1,42 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ContentChildren,
+  EventEmitter,
+  Input,
+  Output,
+  QueryList,
+} from '@angular/core'
+import { InteractiveTableColumnComponent } from './interactive-table-column/interactive-table-column.component'
+import { CommonModule } from '@angular/common'
+import { MatIconModule } from '@angular/material/icon'
+
+@Component({
+  selector: 'gn-ui-interactive-table',
+  templateUrl: './interactive-table.component.html',
+  styleUrls: ['./interactive-table.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, InteractiveTableColumnComponent, MatIconModule],
+})
+export class InteractiveTableComponent {
+  @ContentChildren(InteractiveTableColumnComponent)
+  columns: QueryList<InteractiveTableColumnComponent>
+
+  @Input() items: unknown[] = []
+  @Output() itemClick = new EventEmitter<unknown>()
+
+  get gridStyle() {
+    return {
+      'grid-template-columns': this.columns
+        .map((column) =>
+          column.grow ? `minmax(0px,1fr)` : `minmax(0px,max-content)`
+        )
+        .join(' '),
+    }
+  }
+
+  handleRowClick(item: unknown) {
+    this.itemClick.emit(item)
+  }
+}

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

@@ -14,7 +14,6 @@ export * from './lib/record-preview-card/record-preview-card.component'
 export * from './lib/record-preview-list/record-preview-list.component'
 export * from './lib/record-preview-text/record-preview-text.component'
 export * from './lib/record-preview-title/record-preview-title.component'
-export * from './lib/record-table/record-table.component'
 export * from './lib/record-metric/record-metric.component'
 export * from './lib/results-list-item/results-list-item.component'
 export * from './lib/results-hits-number/results-hits-number.component'

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

@@ -24,10 +24,10 @@ import { ResultsListItemComponent } from './results-list-item/results-list-item.
 import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
 import { UiElementsModule } from '../../../../../libs/ui/elements/src'
 import { RecordPreviewFeedComponent } from './record-preview-feed/record-preview-feed.component'
-import { RecordTableComponent } from './record-table/record-table.component'
 import { CommonModule } from '@angular/common'
 import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
 import { MatCheckboxModule } from '@angular/material/checkbox'
+import { InteractiveTableComponent } from '../../../../../libs/ui/layout/src'
 
 @NgModule({
   declarations: [
@@ -42,7 +42,6 @@ import { MatCheckboxModule } from '@angular/material/checkbox'
     ResultsListItemComponent,
     RecordPreviewFeedComponent,
     RecordPreviewRowComponent,
-    RecordTableComponent,
   ],
   imports: [
     CommonModule,
@@ -59,6 +58,7 @@ import { MatCheckboxModule } from '@angular/material/checkbox'
     MatIconModule,
     MatCheckboxModule,
     RouterLink,
+    InteractiveTableComponent,
   ],
   exports: [
     RecordPreviewListComponent,
@@ -72,7 +72,6 @@ import { MatCheckboxModule } from '@angular/material/checkbox'
     ResultsHitsNumberComponent,
     RecordPreviewFeedComponent,
     RecordPreviewRowComponent,
-    RecordTableComponent,
   ],
   providers: [
     { provide: RESULTS_LAYOUT_CONFIG, useValue: DEFAULT_RESULTS_LAYOUT_CONFIG },

package/src/libs/util/i18n/src/index.ts

@@ -3,6 +3,5 @@ export * from './lib/i18n.constants'
 export * from './lib/i18n.interceptor'
 export * from './lib/lang.service'
 export * from './lib/file.translate.loader'
-export * from './lib/testing/test.translate.module'
 export * from './lib/embedded.translate.loader'
 export * from './lib/translate.loader.utils'

package/src/libs/util/shared/src/lib/links/link-utils.ts

@@ -43,9 +43,15 @@ export const FORMATS = {
     color: '#328556',
     mimeTypes: ['x-gis/x-shapefile'],
   },
+  gml: {
+    extensions: ['gml'],
+    priority: 5,
+    color: '#c92bce',
+    mimeTypes: ['application/gml+xml', 'text/xml; subtype=gml'],
+  },
   kml: {
     extensions: ['kml', 'kmz'],
-    priority: 5,
+    priority: 6,
     color: '#348009',
     mimeTypes: [
       'application/vnd.google-earth.kml+xml',
@@ -54,34 +60,40 @@ export const FORMATS = {
   },
   gpkg: {
     extensions: ['gpkg', 'geopackage'],
-    priority: 6,
+    priority: 7,
     color: '#ea79ba',
     mimeTypes: ['application/geopackage+sqlite3'],
   },
   zip: {
     extensions: ['zip', 'tar.gz'],
-    priority: 7,
+    priority: 8,
     color: '#f2bb3a',
     mimeTypes: ['application/zip', 'application/x-zip'],
   },
   pdf: {
     extensions: ['pdf'],
-    priority: 8,
+    priority: 9,
     color: '#db544a',
     mimeTypes: ['application/pdf'],
   },
   jpg: {
     extensions: ['jpg', 'jpeg', 'jfif', 'pjpeg', 'pjp'],
-    priority: 8,
+    priority: 9,
     color: '#673ab7',
     mimeTypes: ['image/jpg'],
   },
   svg: {
     extensions: ['svg'],
-    priority: 9,
+    priority: 10,
     color: '#d98294',
     mimeTypes: ['image/svg+xml'],
   },
+  dxf: {
+    extensions: ['dxf'],
+    priority: 11,
+    color: '#de630b',
+    mimeTypes: ['application/x-dxf', 'image/x-dxf'],
+  },
 } as const
 
 export type FileFormat = keyof typeof FORMATS
@@ -102,13 +114,24 @@ export function getLinkPriority(link: DatasetDistribution): number {
   return getFormatPriority(getFileFormat(link))
 }
 
-export function extensionToFormat(extension: string): FileFormat {
-  for (const format in FORMATS) {
-    for (const alias of FORMATS[format].extensions) {
-      if (alias === extension.toLowerCase()) return format as FileFormat
+export function getFileFormatFromServiceOutput(
+  serviceOutput: string
+): FileFormat | null {
+  function formatMatcher(format: typeof FORMATS[FileFormat]): boolean {
+    const output = serviceOutput.toLowerCase()
+    return (
+      format.extensions.some((extension: string) =>
+        output.includes(extension)
+      ) ||
+      format.mimeTypes.some((mimeType: string) => output.includes(mimeType))
+    )
+  }
+  for (const formatName in FORMATS) {
+    if (formatMatcher(FORMATS[formatName])) {
+      return formatName as FileFormat
     }
   }
-  return undefined
+  return null
 }
 
 export function getFileFormat(link: DatasetDistribution): FileFormat {