geonetwork-ui 2.2.0-dev.c15a456d → 2.2.0-dev.ca028047

package/src/libs/ui/elements/src/lib/metadata-contact/metadata-contact.component.html

@@ -1,32 +1,98 @@
-<div *ngIf="shownOrganization" class="mb-6 sm:mb-12">
-  <p class="text-gray-700 text-xs mb-3 uppercase" translate>
-    record.metadata.contact
-  </p>
-  <div class="flex mb-1">
+<div class="py-5 px-5 rounded bg-gray-100 text-black mb-6">
+  <div class="grid gap-3">
+    <div>
+      <p class="text-sm font-medium" translate>record.metadata.contact</p>
+    </div>
     <div
-      class="text-primary font-title text-21 mr-2 cursor-pointer hover:underline"
-      (click)="onOrganizationClick()"
+      *ngIf="shownOrganization?.logoUrl?.href"
+      class="flex items-center justify-center border-solid border border-gray-300 rounded-md bg-white h-32 overflow-hidden"
     >
-      {{ shownOrganization.name }}
+      <gn-ui-thumbnail
+        class="relative h-full w-full"
+        [thumbnailUrl]="shownOrganization.logoUrl.href"
+        fit="contain"
+      ></gn-ui-thumbnail>
+    </div>
+    <div class="grid gap-1">
+      <div class="flex">
+        <div
+          class="text-primary font-title text-21 mr-2 cursor-pointer hover:underline"
+          (click)="onOrganizationClick()"
+          data-cy="organization-name"
+        >
+          {{ shownOrganization?.name }}
+        </div>
+      </div>
+      <div *ngIf="shownOrganization?.website">
+        <a
+          [href]="shownOrganization.website"
+          target="_blank"
+          class="contact-website text-primary text-sm cursor-pointer hover:underline transition-all"
+          >{{ shownOrganization.website }}
+          <mat-icon
+            class="material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0"
+            >open_in_new</mat-icon
+          >
+        </a>
+      </div>
+    </div>
+    <div class="grid gap-5 py-3 overflow-hidden">
+      <div *ngIf="contacts[0]?.phone">
+        <div class="flex">
+          <mat-icon
+            class="material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0"
+            >call_outline</mat-icon
+          >
+          <div class="flex flex-col ml-2">
+            <p class="text-sm">{{ contacts[0].phone }}</p>
+          </div>
+        </div>
+      </div>
+      <div *ngIf="contacts[0]?.email">
+        <div class="flex">
+          <mat-icon
+            class="material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0"
+          >
+            mail_outline</mat-icon
+          >
+          <a
+            *ngIf="contacts.length"
+            [href]="'mailto:' + contacts[0].email"
+            class="text-sm hover:underline ml-2"
+            target="_blank"
+            data-cy="contact-email"
+            >{{ contacts[0].email }}</a
+          >
+        </div>
+      </div>
+      <div *ngIf="contacts[0]?.firstName || contacts[0]?.lastName">
+        <div class="flex">
+          <mat-icon
+            class="material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0"
+            >person_outline</mat-icon
+          >
+          <div class="flex flex-col ml-2">
+            <p class="text-sm">
+              {{ contacts[0]?.firstName || '' }}
+              {{ contacts[0]?.lastName || '' }}
+            </p>
+          </div>
+        </div>
+      </div>
+      <div *ngIf="contacts[0]?.address">
+        <div class="flex">
+          <mat-icon
+            class="material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0"
+          >
+            location_on</mat-icon
+          >
+          <div class="flex flex-col ml-2">
+            <p *ngFor="let addressPart of address" class="text-sm">
+              {{ addressPart }}
+            </p>
+          </div>
+        </div>
+      </div>
     </div>
-  </div>
-  <a
-    *ngIf="contacts.length"
-    [href]="'mailto:' + contacts[0].email"
-    class="text-gray-700 text-sm hover:underline"
-    target="_blank"
-    >{{ contacts[0].email }}</a
-  >
-  <div *ngIf="shownOrganization.website" class="mb-2">
-    <a
-      [href]="shownOrganization.website"
-      target="_blank"
-      class="contact-website text-primary text-sm cursor-pointer hover:underline transition-all"
-      >{{ shownOrganization.website }}
-      <mat-icon
-        class="material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75"
-        >open_in_new</mat-icon
-      >
-    </a>
   </div>
 </div>

package/src/libs/ui/elements/src/lib/metadata-contact/metadata-contact.component.ts

@@ -34,6 +34,13 @@ export class MetadataContactComponent {
     )
   }
 
+  get address() {
+    const addressParts = this.contacts[0].address
+      .split(',')
+      .map((part) => part.trim())
+    return addressParts
+  }
+
   onOrganizationClick() {
     this.organizationClick.emit(this.shownOrganization)
   }

package/src/libs/ui/elements/src/lib/metadata-info/metadata-info.component.css

@@ -7,3 +7,7 @@
   padding-bottom: 10px;
   @apply border-b border-gray-300;
 }
+
+:host ::ng-deep gn-ui-copy-text-button button mat-icon {
+  transform: scale(0.8);
+}

package/src/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html

@@ -1,32 +1,10 @@
-<p
-  class="text-[28px] text-title text-center mb-6 font-title sm:text-left"
-  translate
->
-  record.metadata.about
-</p>
 <div class="mb-6 md-description sm:mb-4 sm:pr-16">
   <gn-ui-content-ghost ghostClass="h-32" [showContent]="fieldReady('abstract')">
     <gn-ui-max-lines [maxLines]="6" *ngIf="metadata.abstract">
       <div>
-        <p
-          class="whitespace-pre-line break-words sm:mb-4 sm:pr-16"
-          [innerHTML]="metadata.abstract"
-          gnUiLinkify
-        ></p>
-        <ng-container *ngIf="metadata.keywords?.length">
-          <p class="mb-3 font-medium text-primary text-sm" translate>
-            record.metadata.keywords
-          </p>
-          <div class="sm:pb-4 sm:pr-16">
-            <gn-ui-badge
-              class="inline-block mr-2 mb-2 lowercase"
-              (click)="onKeywordClick(keyword)"
-              [clickable]="true"
-              *ngFor="let keyword of metadata.keywords"
-              >{{ keyword }}</gn-ui-badge
-            >
-          </div>
-        </ng-container>
+        <gn-ui-markdown-parser
+          [textContent]="metadata.abstract"
+        ></gn-ui-markdown-parser>
       </div>
     </gn-ui-max-lines>
   </gn-ui-content-ghost>
@@ -97,12 +75,61 @@
   *ngIf="metadata.landingPage"
   [title]="'record.metadata.details' | translate"
 >
-  <div class="py-5 px-5 rounded bg-gray-100 text-gray-700">
-    <p class="text-sm" translate>record.metadata.sheet</p>
-    <p class="text-primary font-medium mt-1" translate>
-      <a [href]="metadata.landingPage" target="_blank">
-        <span class="break-all" gnUiLinkify>{{ metadata.landingPage }}</span>
-      </a>
-    </p>
+  <div class="flex flex-col gap-4 mr-4 py-5 rounded text-gray-700">
+    <div *ngIf="metadata.recordUpdated">
+      <p class="text-sm" translate>record.metadata.updatedOn</p>
+      <p class="text-primary font-medium">
+        {{ metadata.recordUpdated && metadata.recordUpdated.toLocaleString() }}
+      </p>
+    </div>
+    <div *ngIf="metadata.landingPage">
+      <p class="text-sm" translate>record.metadata.sheet</p>
+      <p class="text-primary font-medium" translate>
+        <a [href]="metadata.landingPage" target="_blank">
+          <span class="break-all" gnUiLinkify>{{ metadata.landingPage }}</span>
+        </a>
+      </p>
+    </div>
+    <div *ngIf="metadata.ownerOrganization">
+      <p class="text-sm" translate>record.metadata.owner</p>
+      <p class="text-primary font-medium">
+        {{ metadata.ownerOrganization.name }}
+      </p>
+    </div>
+    <div *ngIf="metadata.uniqueIdentifier">
+      <p class="text-sm" translate>record.metadata.uniqueId</p>
+      <div class="flex flex-row content-align items-end gap-1">
+        <gn-ui-copy-text-button
+          [text]="metadata.uniqueIdentifier"
+          [tooltipText]="'tooltip.id.copy' | translate"
+          [displayText]="false"
+        ></gn-ui-copy-text-button>
+        <p class="text-primary font-medium">
+          {{ metadata.uniqueIdentifier }}
+        </p>
+      </div>
+    </div>
+    <div *ngIf="metadata.themes?.length">
+      <p class="text-sm mb-1" translate>record.metadata.themes</p>
+      <div class="sm:pb-4 sm:pr-16">
+        <gn-ui-badge
+          class="inline-block mr-2 lowercase"
+          *ngFor="let theme of metadata.themes"
+          >{{ theme }}</gn-ui-badge
+        >
+      </div>
+    </div>
+    <div *ngIf="metadata.keywords?.length">
+      <p class="text-sm mb-1" translate>record.metadata.keywords</p>
+      <div class="sm:pb-4 sm:pr-16">
+        <gn-ui-badge
+          class="inline-block mr-2 mb-2 lowercase"
+          (click)="onKeywordClick(keyword)"
+          [clickable]="true"
+          *ngFor="let keyword of metadata.keywords"
+          >{{ keyword }}</gn-ui-badge
+        >
+      </div>
+    </div>
   </div>
 </gn-ui-expandable-panel>

package/src/libs/ui/elements/src/lib/metadata-info/metadata-info.component.ts

@@ -56,4 +56,9 @@ export class MetadataInfoComponent {
   onKeywordClick(keyword: string) {
     this.keyword.emit(keyword)
   }
+
+  copyText() {
+    navigator.clipboard.writeText(this.metadata.uniqueIdentifier)
+    ;(event.target as HTMLElement).blur()
+  }
 }

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

@@ -6,7 +6,7 @@
   <div class="h-52 bg-gray-100">
     <gn-ui-thumbnail
       class="h-52 w-full object-cover"
-      [thumbnailUrl]="record.overviews?.[0].url.toString()"
+      [thumbnailUrl]="record.overviews?.[0]?.url.toString()"
     ></gn-ui-thumbnail>
   </div>
   <div class="flex flex-col justify-between h-44 px-5 pt-4 pb-6">

package/src/libs/ui/elements/src/lib/thumbnail/thumbnail.component.ts

@@ -10,6 +10,8 @@ import {
   Optional,
   SimpleChanges,
   ViewChild,
+  Output,
+  EventEmitter,
 } from '@angular/core'
 
 export const THUMBNAIL_PLACEHOLDER = new InjectionToken<string>(
@@ -36,6 +38,7 @@ export class ThumbnailComponent implements OnInit, OnChanges {
   @Input() fit: FitOptions | FitOptions[] = 'cover'
   @ViewChild('imageElement') imgElement: ElementRef<HTMLImageElement>
   @ViewChild('containerElement') containerElement: ElementRef<HTMLDivElement>
+  @Output() placeholderShown = new EventEmitter<boolean>()
   imgUrl: string
   imgFit: FitOptions
   placeholderUrl = this.optionalPlaceholderUrl || DEFAULT_PLACEHOLDER
@@ -85,6 +88,7 @@ export class ThumbnailComponent implements OnInit, OnChanges {
   private setNewSrcImage(image: ThumbnailImageObject) {
     this.imgFit = image.fit
     this.imgUrl = image.url
+    this.placeholderShown.emit(this.isPlaceholder)
   }
 
   private setPlaceholder(): void {

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

@@ -29,6 +29,8 @@ import { GnUiLinkifyDirective } from './metadata-info/linkify.directive'
 import { PaginationButtonsComponent } from './pagination-buttons/pagination-buttons.component'
 import { MaxLinesComponent } from './max-lines/max-lines.component'
 import { RecordApiFormComponent } from './record-api-form/record-api-form.component'
+import { MarkdownParserComponent } from './markdown-parser/markdown-parser.component'
+import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-overlay-preview.component'
 
 @NgModule({
   imports: [
@@ -65,6 +67,8 @@ import { RecordApiFormComponent } from './record-api-form/record-api-form.compon
     PaginationButtonsComponent,
     MaxLinesComponent,
     RecordApiFormComponent,
+    MarkdownParserComponent,
+    ImageOverlayPreviewComponent,
   ],
   exports: [
     MetadataInfoComponent,
@@ -84,7 +88,10 @@ import { RecordApiFormComponent } from './record-api-form/record-api-form.compon
     AvatarComponent,
     UserPreviewComponent,
     PaginationButtonsComponent,
+    MaxLinesComponent,
     RecordApiFormComponent,
+    MarkdownParserComponent,
+    ImageOverlayPreviewComponent,
   ],
 })
 export class UiElementsModule {}

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

@@ -1,5 +1,5 @@
 /* makes sure icons will not make the buttons grow vertically */
-:host /deep/ mat-icon.mat-icon {
+:host ::ng-deep mat-icon.mat-icon {
   margin-top: -0.325em;
   margin-bottom: -0.325em;
 }

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

@@ -17,7 +17,10 @@ import {
 } from '@angular/cdk/overlay'
 import { take } from 'rxjs/operators'
 import { Choice } from './dropdown-multiselect.model'
-import { propagateToDocumentOnly } from '../../../../../../libs/util/shared/src'
+import {
+  createFuzzyFilter,
+  propagateToDocumentOnly,
+} from '../../../../../../libs/util/shared/src'
 
 @Component({
   selector: 'gn-ui-dropdown-multiselect',
@@ -74,9 +77,9 @@ export class DropdownMultiselectComponent {
   }
 
   get filteredChoicesByText() {
-    return this.choices.filter((choice) =>
-      choice.label.toLowerCase().includes(this.searchInputValue?.toLowerCase())
-    )
+    if (!this.searchInputValue) return this.choices
+    const filter = createFuzzyFilter(this.searchInputValue)
+    return this.choices.filter((choice) => filter(choice.label))
   }
 
   get focusedIndex(): number | -1 {

package/src/libs/ui/inputs/src/lib/editable-label/editable-label.directive.ts

@@ -0,0 +1,48 @@
+import {
+  Directive,
+  ElementRef,
+  Renderer2,
+  AfterViewInit,
+  EventEmitter,
+  Output,
+  Input,
+} from '@angular/core'
+
+@Directive({
+  selector: '[gnUiEditableLabel]',
+  standalone: true,
+})
+export class EditableLabelDirective implements AfterViewInit {
+  @Output() editableLabelChanged = new EventEmitter<string>()
+  @Input() gnUiEditableLabel?: boolean
+
+  constructor(private el: ElementRef, private renderer: Renderer2) {}
+
+  ngAfterViewInit() {
+    if (this.gnUiEditableLabel !== false) {
+      const appendedInput = this.renderer.createElement('input')
+
+      this.renderer.setStyle(appendedInput, 'background', 'inherit')
+      this.renderer.setStyle(appendedInput, 'color', 'inherit')
+      this.renderer.setStyle(appendedInput, 'font', 'inherit')
+      this.renderer.setStyle(appendedInput, 'border', 'inherit')
+      this.renderer.setStyle(appendedInput, 'width', '100%')
+      this.renderer.setStyle(appendedInput, 'padding', 'inherit')
+      this.renderer.setStyle(appendedInput, 'margin', '0')
+      this.renderer.setStyle(appendedInput, 'height', 'inherit')
+      this.renderer.setStyle(appendedInput, 'line-height', 'inherit')
+      this.renderer.setStyle(appendedInput, 'text-decoration', 'inherit')
+
+      const hostContent = this.el.nativeElement.textContent || ''
+      const formattedContent = hostContent.replace(/\s+/g, ' ').trim()
+      this.renderer.setProperty(appendedInput, 'value', formattedContent)
+      this.renderer.setProperty(this.el.nativeElement, 'innerHTML', '')
+
+      this.renderer.listen(appendedInput, 'input', (event) => {
+        this.editableLabelChanged.emit(event.target.value)
+      })
+
+      this.renderer.appendChild(this.el.nativeElement, appendedInput)
+    }
+  }
+}

package/src/libs/ui/inputs/src/lib/navigation-button/navigation-button.component.html

@@ -1,6 +1,11 @@
 <button
-  class="group flex items-center justify-center backdrop-blur p-1 bg-primary-opacity-50 text-white rounded"
+  class="group flex items-center justify-center gap-1 backdrop-blur p-1 bg-primary-opacity-30 text-white rounded content-center"
 >
-  <mat-icon class="material-symbols-outlined align-middle">{{ icon }}</mat-icon>
-  <span class="mx-2 hidden group-hover:inline">{{ label }}</span>
+  <mat-icon class="material-symbols-outlined align-middle w-[18px]">{{
+    icon
+  }}</mat-icon>
+  <span
+    class="mx-2 mt-0.5 text-[16px] tracking-widest content-center opacity-75"
+    >{{ label.toUpperCase() }}</span
+  >
 </button>

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

@@ -11,6 +11,7 @@ mat-icon {
   font-size: 1.5em;
   margin-top: -0.1em;
   font-variation-settings: 'opsz' 40;
+  stroke: var(--color-primary-darker);
 }
 
 .star-filled {

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

@@ -41,6 +41,7 @@ import { MatFormFieldModule } from '@angular/material/form-field'
 import { MatInputModule } from '@angular/material/input'
 import { MatDatepickerModule } from '@angular/material/datepicker'
 import { MatNativeDateModule } from '@angular/material/core'
+import { EditableLabelDirective } from './editable-label/editable-label.directive'
 
 @NgModule({
   declarations: [
@@ -87,6 +88,7 @@ import { MatNativeDateModule } from '@angular/material/core'
     MatInputModule,
     MatDatepickerModule,
     MatNativeDateModule,
+    EditableLabelDirective,
   ],
   exports: [
     DropdownSelectorComponent,
@@ -106,6 +108,7 @@ import { MatNativeDateModule } from '@angular/material/core'
     CheckboxComponent,
     SearchInputComponent,
     DateRangePickerComponent,
+    EditableLabelDirective,
   ],
 })
 export class UiInputsModule {}

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/search/src/lib/record-table/record-table.component.html

@@ -38,7 +38,7 @@
       </div>
       <div
         class="contents hover:text-gray-900 text-gray-800 cursor-pointer"
-        (click)="recordSelect.emit(record)"
+        (click)="recordsSelect.emit([record])"
         *ngFor="let record of records"
       >
         <div class="record-table-col text-16">
@@ -157,7 +157,7 @@
       </div>
       <div
         class="contents hover:text-gray-900 text-gray-800 cursor-pointer"
-        (click)="recordSelect.emit(record)"
+        (click)="recordsSelect.emit([record])"
         *ngFor="let record of records"
       >
         <div class="record-table-col">

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

@@ -5,3 +5,4 @@ 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 {

package/src/libs/util/shared/src/lib/utils/fuzzy-filter.ts

@@ -0,0 +1,32 @@
+type FuzzyFilter = (input: string) => boolean
+
+function normalize(input: string) {
+  return input
+    .toLowerCase()
+    .normalize('NFD') // explode composite chars (e.g. é) into multiple chars
+    .replace(/[\u0300-\u036f]/g, '') // remove accents
+    .replace(/œ/g, 'oe') // remove accents
+    .replace(/[^a-z0-9\s]/g, ' ') // replace special characters with space
+}
+
+function asNormalizedParts(input: string): string[] {
+  return normalize(input)
+    .split(/\s+/)
+    .map((part) => part.trim())
+    .filter((part) => part.length > 0)
+}
+
+/**
+ * This creates a filter function based on a pattern (typically a user-input
+ * search text).
+ * @param pattern
+ */
+export function createFuzzyFilter(pattern: string): FuzzyFilter {
+  const patternParts = asNormalizedParts(pattern)
+  return (input: string) => {
+    const inputParts = asNormalizedParts(input)
+    return patternParts.every((patternPart) =>
+      inputParts.some((part) => part.includes(patternPart))
+    )
+  }
+}

package/src/libs/util/shared/src/lib/utils/index.ts

@@ -5,3 +5,4 @@ export * from './geojson'
 export * from './sort-by'
 export * from './url'
 export * from './event'
+export * from './fuzzy-filter'