geonetwork-ui 2.2.0-dev.auto-publish-npm-package → 2.2.0-dev.f866474c

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 sm:mb-12">
+  <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/inputs/src/lib/button/button.component.ts

@@ -14,14 +14,37 @@ import { propagateToDocumentOnly } from '../../../../../../libs/util/shared/src'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ButtonComponent {
-  @Input() type: 'primary' | 'secondary' | 'default' | 'outline' | 'light' =
-    'default'
+  private btnClass: string
+
+  // btn-classes are explicited to allow tailwind recognize them and add it in css.
+  @Input() set type(
+    value: 'primary' | 'secondary' | 'default' | 'outline' | 'light'
+  ) {
+    switch (value) {
+      case 'primary':
+        this.btnClass = 'btn-primary'
+        break
+      case 'secondary':
+        this.btnClass = 'btn-secondary'
+        break
+      case 'outline':
+        this.btnClass = 'btn-outline'
+        break
+      case 'light':
+        this.btnClass = 'btn-light'
+        break
+      default:
+        this.btnClass = 'btn-default'
+        break
+    }
+  }
+
   @Input() disabled = false
   @Input() extraClass = ''
   @Output() buttonClick = new EventEmitter<void>()
 
   get classList() {
-    return `btn-${this.type} ${this.extraClass}`
+    return `${this.btnClass} ${this.extraClass}`
   }
 
   handleClick(event: Event) {

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/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/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'

package/translations/de.json

@@ -175,10 +175,14 @@
   "map.add.layer.file": "Aus einer Datei",
   "map.add.layer.wfs": "Aus WFS",
   "map.add.layer.wms": "Aus WMS",
+  "map.layer.add": "",
+  "map.layers.available": "",
   "map.layers.list": "Ebenen",
   "map.loading.data": "Kartendaten werden geladen...",
+  "map.loading.service": "",
   "map.navigation.message": "Bitte verwenden Sie STRG + Maus (oder zwei Finger auf einem Mobilgerät), um die Karte zu navigieren",
   "map.select.layer": "Datenquelle",
+  "map.wms.urlInput.hint": "",
   "multiselect.filter.placeholder": "Suche",
   "nav.back": "Zurück",
   "next": "weiter",

package/translations/en.json

@@ -175,10 +175,14 @@
   "map.add.layer.file": "From a file",
   "map.add.layer.wfs": "From WFS",
   "map.add.layer.wms": "From WMS",
+  "map.layer.add": "Add",
+  "map.layers.available": "Available Layers",
   "map.layers.list": "Layers",
   "map.loading.data": "Loading map data...",
+  "map.loading.service": "Loading service...",
   "map.navigation.message": "Please use CTRL + mouse (or two fingers on mobile) to navigate the map",
   "map.select.layer": "Data source",
+  "map.wms.urlInput.hint": "Enter WMS service URL",
   "multiselect.filter.placeholder": "Search",
   "nav.back": "Back",
   "next": "next",

package/translations/es.json

@@ -175,10 +175,14 @@
   "map.add.layer.file": "",
   "map.add.layer.wfs": "",
   "map.add.layer.wms": "",
+  "map.layer.add": "",
+  "map.layers.available": "",
   "map.layers.list": "",
   "map.loading.data": "",
+  "map.loading.service": "",
   "map.navigation.message": "",
   "map.select.layer": "",
+  "map.wms.urlInput.hint": "",
   "multiselect.filter.placeholder": "",
   "nav.back": "",
   "next": "",

package/translations/fr.json

@@ -175,10 +175,14 @@
   "map.add.layer.file": "",
   "map.add.layer.wfs": "",
   "map.add.layer.wms": "",
+  "map.layer.add": "",
+  "map.layers.available": "",
   "map.layers.list": "",
   "map.loading.data": "Chargement des données...",
+  "map.loading.service": "",
   "map.navigation.message": "Veuillez utiliser CTRL + souris (ou deux doigts sur mobile) pour naviguer sur la carte",
   "map.select.layer": "Source de données",
+  "map.wms.urlInput.hint": "",
   "multiselect.filter.placeholder": "Rechercher",
   "nav.back": "Retour",
   "next": "suivant",

package/translations/it.json

@@ -175,10 +175,14 @@
   "map.add.layer.file": "Da un file",
   "map.add.layer.wfs": "Da un WFS",
   "map.add.layer.wms": "Da un WMS",
+  "map.layer.add": "",
+  "map.layers.available": "",
   "map.layers.list": "Layers",
   "map.loading.data": "Caricamento dati...",
+  "map.loading.service": "",
   "map.navigation.message": "Si prega di utilizzare CTRL + mouse (o due dita su mobile) per navigare sulla mappa",
   "map.select.layer": "Sorgente dati",
+  "map.wms.urlInput.hint": "",
   "multiselect.filter.placeholder": "Cerca",
   "nav.back": "Indietro",
   "next": "successivo",

package/translations/nl.json

@@ -175,10 +175,14 @@
   "map.add.layer.file": "",
   "map.add.layer.wfs": "",
   "map.add.layer.wms": "",
+  "map.layer.add": "",
+  "map.layers.available": "",
   "map.layers.list": "",
   "map.loading.data": "",
+  "map.loading.service": "",
   "map.navigation.message": "",
   "map.select.layer": "",
+  "map.wms.urlInput.hint": "",
   "multiselect.filter.placeholder": "",
   "nav.back": "",
   "next": "",

package/translations/pt.json

@@ -175,10 +175,14 @@
   "map.add.layer.file": "",
   "map.add.layer.wfs": "",
   "map.add.layer.wms": "",
+  "map.layer.add": "",
+  "map.layers.available": "",
   "map.layers.list": "",
   "map.loading.data": "",
+  "map.loading.service": "",
   "map.navigation.message": "",
   "map.select.layer": "",
+  "map.wms.urlInput.hint": "",
   "multiselect.filter.placeholder": "",
   "nav.back": "",
   "next": "",

package/translations/sk.json

@@ -175,10 +175,14 @@
   "map.add.layer.file": "Zo súboru",
   "map.add.layer.wfs": "Z WFS",
   "map.add.layer.wms": "Z WMS",
+  "map.layer.add": "",
+  "map.layers.available": "",
   "map.layers.list": "Vrstvy",
   "map.loading.data": "Načítavanie dát mapy...",
+  "map.loading.service": "",
   "map.navigation.message": "Použite prosím CTRL + myš (alebo dva prsty na mobilnom zariadení) na navigáciu po mape",
   "map.select.layer": "Zdroj dát",
+  "map.wms.urlInput.hint": "",
   "multiselect.filter.placeholder": "Hľadať",
   "nav.back": "Späť",
   "next": "Ďalej",