geonetwork-ui 2.3.0-dev.6e2b8bea → 2.3.0-dev.c22cb78a

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

@@ -15,7 +15,7 @@ import { propagateToDocumentOnly } from '../../../../../../libs/util/shared/src'
   standalone: true,
 })
 export class ButtonComponent {
-  private btnClass: string
+  private btnClass = 'gn-ui-btn-default'
 
   @Input() set type(
     value: 'primary' | 'secondary' | 'default' | 'outline' | 'light'

package/src/libs/ui/inputs/src/lib/files-drop/files-drop.directive.ts

@@ -0,0 +1,45 @@
+import { Directive, HostListener, Output, EventEmitter } from '@angular/core'
+
+@Directive({
+  selector: '[gnUiFilesDrop]',
+  standalone: true,
+})
+export class FilesDropDirective {
+  @Output() dragFilesOver: EventEmitter<boolean> = new EventEmitter()
+  @Output() dropFiles: EventEmitter<File[]> = new EventEmitter()
+
+  dragEnterCounter = 0
+
+  @HostListener('dragenter', ['$event'])
+  _onDragEnter(event: DragEvent) {
+    event.preventDefault()
+    this.dragEnterCounter++
+    this.dragFilesOver.emit(true)
+  }
+
+  @HostListener('dragover', ['$event'])
+  _onDragOver(event: DragEvent) {
+    event.preventDefault()
+  }
+
+  @HostListener('dragleave', ['$event'])
+  _onDragLeave(event: DragEvent) {
+    event.preventDefault()
+    this.dragEnterCounter = Math.max(0, this.dragEnterCounter - 1)
+    if (this.dragEnterCounter === 0) {
+      this.dragFilesOver.emit(false)
+    }
+  }
+
+  @HostListener('drop', ['$event'])
+  _onDrop(event: DragEvent) {
+    event.preventDefault()
+    this.dragEnterCounter = 0
+    this.dragFilesOver.emit(false)
+
+    const files = Array.from(event.dataTransfer.files)
+    if (files.length > 0) {
+      this.dropFiles.emit(files)
+    }
+  }
+}

package/src/libs/ui/inputs/src/lib/image-input/image-input.component.html

@@ -0,0 +1,146 @@
+<ng-container *ngIf="previewUrl; then withImage; else withoutImage">
+</ng-container>
+
+<ng-template #withImage>
+  <div class="w-full h-full flex flex-col gap-2">
+    <div class="flex-1 group relative">
+      <img
+        class="w-full h-full object-cover border-2 border-gray-300 rounded-lg"
+        [alt]="altText"
+        loading="lazy"
+        [src]="previewUrl"
+      />
+      <gn-ui-button
+        [extraClass]="
+          'bg-gray-200 absolute right-2 bottom-2 invisible group-hover:visible'
+        "
+        (buttonClick)="handleDelete()"
+      >
+        <mat-icon class="material-symbols-outlined">delete</mat-icon>
+      </gn-ui-button>
+    </div>
+    <input
+      *ngIf="showAltTextInput"
+      type="text"
+      class="py-3 px-2 border-2 border-gray-300 rounded-lg text-sm font-medium"
+      [placeholder]="'input.image.altTextPlaceholder' | translate"
+      [value]="altText"
+      (change)="handleAltTextChange($event)"
+    />
+    <div class="flex flex-row gap-2">
+      <gn-ui-button
+        [extraClass]="'bg-gray-200 font-bold'"
+        (buttonClick)="handleDelete()"
+      >
+        <mat-icon class="material-symbols-outlined me-1">delete</mat-icon>
+        {{ 'input.image.delete' | translate }}
+      </gn-ui-button>
+      <gn-ui-button
+        *ngIf="!showAltTextInput"
+        [extraClass]="'bg-gray-200 font-bold'"
+        (buttonClick)="toggleAltTextInput()"
+      >
+        <mat-icon class="material-symbols-outlined me-1">add</mat-icon>
+        {{ 'input.image.displayAltTextInput' | translate }}
+      </gn-ui-button>
+    </div>
+  </div>
+</ng-template>
+
+<ng-template #withoutImage>
+  <div class="w-full h-full flex flex-col gap-2">
+    <label
+      gnUiFilesDrop
+      class="block flex-1 border-2 border-dashed border-gray-300 rounded-lg p-6 flex flex-col items-center justify-center gap-4"
+      (dragFilesOver)="handleDragFilesOver($event)"
+      (dropFiles)="handleDropFiles($event)"
+    >
+      <div class="w-14 h-14 rounded-md bg-gray-200 grid">
+        <mat-icon
+          *ngIf="!dragFilesOver && !uploadProgress && !uploadError"
+          class="material-symbols-outlined place-self-center text-blue-500"
+          >image</mat-icon
+        >
+        <mat-icon
+          *ngIf="dragFilesOver && !uploadProgress && !uploadError"
+          class="material-symbols-outlined place-self-center text-blue-500"
+          >add_box</mat-icon
+        >
+        <div *ngIf="uploadProgress">
+          <mat-progress-spinner
+            class="place-self-center"
+            [diameter]="56"
+            [mode]="'determinate'"
+            [value]="uploadProgress"
+          ></mat-progress-spinner>
+          <span
+            class="text-sm font-medium relative inline-block width-[30px] bottom-[40px] left-[15px]"
+          >
+            {{ uploadProgress }}%
+          </span>
+        </div>
+        <mat-icon
+          *ngIf="uploadError"
+          class="material-symbols-outlined place-self-center text-rose-500"
+          >broken_image</mat-icon
+        >
+      </div>
+      <div class="flex flex-col items-center gap-1">
+        <p class="font-medium">{{ getPrimaryText() | translate }}</p>
+        <p
+          class="text-sm"
+          [class]="
+            uploadProgress || uploadError
+              ? 'font-bold text-blue-500 cursor-pointer'
+              : 'font-medium text-gray-500'
+          "
+          (click)="handleSecondaryTextClick()"
+        >
+          {{ getSecondaryText() | translate }}
+        </p>
+      </div>
+      <input
+        type="file"
+        class="hidden"
+        (change)="handleFileInput($event)"
+        [disabled]="showUrlInput || uploadProgress || uploadError"
+      />
+    </label>
+    <div *ngIf="!showUrlInput" class="flex-none">
+      <gn-ui-button
+        [extraClass]="'bg-gray-200 font-bold'"
+        (buttonClick)="displayUrlInput()"
+      >
+        <mat-icon class="material-symbols-outlined me-1">link</mat-icon>
+        {{ 'input.image.displayUrlInput' | translate }}
+      </gn-ui-button>
+    </div>
+    <div *ngIf="showUrlInput" class="flex-none flex flex-col gap-2">
+      <div class="h-2"></div>
+      <div class="flex gap-2 items-center">
+        <div class="flex-1 flex rounded-lg">
+          <span
+            class="material-symbols-outlined px-4 inline-flex items-center min-w-fit rounded-s-lg border-2 border-e-0 border-gray-300"
+            >link</span
+          >
+          <input
+            type="text"
+            class="py-3 ps-1 block w-full border-2 border-s-0 border-e-0 border-gray-300 text-sm font-medium"
+            placeholder="https://exemple.com/image.jpg"
+            (change)="handleUrlChange($event)"
+          />
+          <gn-ui-button
+            class="px-1 inline-flex items-center min-w-fit rounded-e-lg border-2 border-s-0 border-gray-300 text-white"
+            [extraClass]="
+              urlInputValue && !downloadError ? 'bg-blue-500' : 'bg-gray-500'
+            "
+            [disabled]="!urlInputValue || downloadError"
+            (buttonClick)="downloadUrl()"
+          >
+            <mat-icon class="material-symbols-outlined">arrow_upward</mat-icon>
+          </gn-ui-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</ng-template>

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

@@ -0,0 +1,193 @@
+import { CommonModule } from '@angular/common'
+import { HttpClient } from '@angular/common/http'
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import { MatIconModule } from '@angular/material/icon'
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'
+import { downgradeImage, megabytesToBytes } from '../../../../../../libs/util/shared/src'
+import { firstValueFrom } from 'rxjs'
+import { ButtonComponent } from '../button/button.component'
+import { FilesDropDirective } from '../files-drop/files-drop.directive'
+import { TranslateModule } from '@ngx-translate/core'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+
+@Component({
+  selector: 'gn-ui-image-input',
+  templateUrl: './image-input.component.html',
+  styleUrls: ['./image-input.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    ButtonComponent,
+    MatIconModule,
+    FilesDropDirective,
+    MatProgressSpinnerModule,
+    TranslateModule,
+  ],
+})
+export class ImageInputComponent {
+  @Input() maxSizeMB: number
+  @Input() previewUrl?: string
+  @Input() altText?: string
+  @Input() uploadProgress?: number
+  @Input() uploadError?: boolean
+  @Output() fileChange: EventEmitter<File> = new EventEmitter()
+  @Output() urlChange: EventEmitter<string> = new EventEmitter()
+  @Output() uploadCancel: EventEmitter<void> = new EventEmitter()
+  @Output() delete: EventEmitter<void> = new EventEmitter()
+  @Output() altTextChange: EventEmitter<string> = new EventEmitter()
+
+  dragFilesOver = false
+  showUrlInput = false
+  downloadError = false
+  showAltTextInput = false
+
+  urlInputValue?: string
+  lastUploadType?: 'file' | 'url'
+  lastUploadContent?: string | File
+
+  constructor(private http: HttpClient, private cd: ChangeDetectorRef) {}
+
+  getPrimaryText() {
+    if (this.uploadError) {
+      return marker('input.image.uploadErrorLabel')
+    }
+    if (this.uploadProgress) {
+      return marker('input.image.uploadProgressLabel')
+    }
+    return marker('input.image.selectFileLabel')
+  }
+
+  getSecondaryText() {
+    if (this.uploadError) {
+      return marker('input.image.uploadErrorRetry')
+    }
+    if (this.uploadProgress) {
+      return marker('input.image.uploadProgressCancel')
+    }
+    return marker('input.image.dropFileLabel')
+  }
+
+  handleDragFilesOver(dragFilesOver: boolean) {
+    if (!this.showUrlInput) {
+      this.dragFilesOver = dragFilesOver
+      this.cd.markForCheck()
+    }
+  }
+
+  handleDropFiles(files: File[]) {
+    if (!this.showUrlInput) {
+      const validFiles = this.filterTypeImage(files)
+      if (validFiles.length > 0) {
+        this.resizeAndEmit(validFiles[0])
+      }
+    }
+  }
+
+  handleFileInput(event: Event) {
+    const inputFiles = Array.from((event.target as HTMLInputElement).files)
+    const validFiles = this.filterTypeImage(inputFiles)
+    if (validFiles.length > 0) {
+      this.resizeAndEmit(validFiles[0])
+    }
+  }
+
+  displayUrlInput() {
+    this.uploadCancel.emit()
+    this.showUrlInput = true
+  }
+
+  handleUrlChange(event: Event) {
+    this.downloadError = false
+    this.urlInputValue = (event.target as HTMLInputElement).value
+  }
+
+  async downloadUrl() {
+    const name = this.urlInputValue.split('/').pop()
+
+    try {
+      const response = await firstValueFrom(
+        this.http.head(this.urlInputValue, { observe: 'response' })
+      )
+      if (
+        response.headers.get('content-type')?.startsWith('image/') &&
+        parseInt(response.headers.get('content-length')) <
+          megabytesToBytes(this.maxSizeMB)
+      ) {
+        this.http.get(this.urlInputValue, { responseType: 'blob' }).subscribe({
+          next: (blob) => {
+            this.cd.markForCheck()
+            const file = new File([blob], name)
+            this.fileChange.emit(file)
+          },
+          error: () => {
+            this.downloadError = true
+            this.cd.markForCheck()
+            this.urlChange.emit(this.urlInputValue)
+          },
+        })
+      }
+    } catch {
+      this.downloadError = true
+      this.cd.markForCheck()
+      return
+    }
+  }
+
+  handleSecondaryTextClick() {
+    if (this.uploadError) {
+      this.handleRetry()
+    } else if (this.uploadProgress) {
+      this.handleCancel()
+    }
+  }
+
+  handleCancel() {
+    this.uploadCancel.emit()
+  }
+
+  handleRetry() {
+    switch (this.lastUploadType) {
+      case 'file':
+        this.fileChange.emit(this.lastUploadContent as File)
+        break
+      case 'url':
+        this.urlChange.emit(this.lastUploadContent as string)
+        break
+    }
+  }
+
+  handleDelete() {
+    this.delete.emit()
+  }
+
+  toggleAltTextInput() {
+    this.showAltTextInput = !this.showAltTextInput
+  }
+
+  handleAltTextChange(event: Event) {
+    const input = event.target as HTMLInputElement
+    this.altTextChange.emit(input.value)
+  }
+
+  private filterTypeImage(files: File[]) {
+    return files.filter((file) => {
+      return file.type.startsWith('image/')
+    })
+  }
+
+  private resizeAndEmit(imageToResize: File) {
+    const maxSizeBytes = megabytesToBytes(this.maxSizeMB)
+    downgradeImage(imageToResize, maxSizeBytes).then((resizedImage) => {
+      const fileToEmit = new File([resizedImage], imageToResize.name)
+      this.fileChange.emit(fileToEmit)
+    })
+  }
+}

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

@@ -20,16 +20,6 @@ import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
 import { OverlayModule } from '@angular/cdk/overlay'
 import { MatCheckboxModule } from '@angular/material/checkbox'
 import { ViewportIntersectorComponent } from './viewport-intersector/viewport-intersector.component'
-import {
-  FormFieldArrayComponent,
-  FormFieldComponent,
-  FormFieldFileComponent,
-  FormFieldObjectComponent,
-  FormFieldRichComponent,
-  FormFieldSimpleComponent,
-  FormFieldSpatialExtentComponent,
-  FormFieldTemporalExtentComponent,
-} from './form-field'
 import { CheckToggleComponent } from './check-toggle/check-toggle.component'
 import { CopyTextButtonComponent } from './copy-text-button/copy-text-button.component'
 import { MatTooltipModule } from '@angular/material/tooltip'
@@ -42,6 +32,7 @@ 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'
+import { ImageInputComponent } from './image-input/image-input.component'
 
 @NgModule({
   declarations: [
@@ -54,14 +45,6 @@ import { EditableLabelDirective } from './editable-label/editable-label.directiv
     StarToggleComponent,
     DropdownMultiselectComponent,
     ViewportIntersectorComponent,
-    FormFieldComponent,
-    FormFieldSimpleComponent,
-    FormFieldArrayComponent,
-    FormFieldObjectComponent,
-    FormFieldRichComponent,
-    FormFieldFileComponent,
-    FormFieldSpatialExtentComponent,
-    FormFieldTemporalExtentComponent,
     CheckToggleComponent,
     CopyTextButtonComponent,
     CheckboxComponent,
@@ -89,6 +72,7 @@ import { EditableLabelDirective } from './editable-label/editable-label.directiv
     EditableLabelDirective,
     TextAreaComponent,
     ButtonComponent,
+    ImageInputComponent,
   ],
   exports: [
     DropdownSelectorComponent,
@@ -102,13 +86,13 @@ import { EditableLabelDirective } from './editable-label/editable-label.directiv
     StarToggleComponent,
     DropdownMultiselectComponent,
     ViewportIntersectorComponent,
-    FormFieldComponent,
     CheckToggleComponent,
     CopyTextButtonComponent,
     CheckboxComponent,
     SearchInputComponent,
     DateRangePickerComponent,
     EditableLabelDirective,
+    ImageInputComponent,
   ],
 })
 export class UiInputsModule {}

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

@@ -1,8 +1,9 @@
-export * from './lib/ui-layout.module'
 export * from './lib/anchor-link/anchor-link.directive'
 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/expandable-panel/expandable-panel.component'
+export * from './lib/form-field-wrapper/form-field-wrapper.component'
 export * from './lib/interactive-table/interactive-table-column/interactive-table-column.component'
+export * from './lib/interactive-table/interactive-table.component'
+export * from './lib/sticky-header/sticky-header.component'
+export * from './lib/ui-layout.module'

package/src/libs/ui/layout/src/lib/form-field-wrapper/form-field-wrapper.component.html

@@ -0,0 +1,18 @@
+<div class="h-full flex flex-col">
+  <div class="flex-none w-full flex flex-row items-center">
+    <span class="flex-none font-bold">{{ label }}</span>
+    <div class="flex-1 flex justify-end items-center">
+      <ng-content select="[form-field-interaction]"></ng-content>
+      <span
+        class="material-symbols-outlined m-2 gn-ui-icon-small"
+        [matTooltip]="hint"
+        matTooltipPosition="above"
+      >
+        help
+      </span>
+    </div>
+  </div>
+  <div class="flex-1">
+    <ng-content></ng-content>
+  </div>
+</div>

package/src/libs/ui/layout/src/lib/form-field-wrapper/form-field-wrapper.component.ts

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { MatIconModule } from '@angular/material/icon'
+import { MatTooltipModule } from '@angular/material/tooltip'
+
+@Component({
+  selector: 'gn-ui-form-field-wrapper',
+  templateUrl: './form-field-wrapper.component.html',
+  styleUrls: ['./form-field-wrapper.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [MatIconModule, MatTooltipModule],
+})
+export class FormFieldWrapperComponent {
+  @Input() label: string
+  @Input() hint: string
+}

package/src/libs/util/shared/src/lib/utils/bytes-convert.ts

@@ -0,0 +1,3 @@
+export function megabytesToBytes(megabytes) {
+  return megabytes * 1048576
+}

package/src/libs/util/shared/src/lib/utils/image-resize.ts

@@ -0,0 +1,72 @@
+export function downsizeImage(
+  blob: Blob,
+  maxWidth: number,
+  maxHeight: number
+): Promise<Blob> {
+  return new Promise((resolve, reject) => {
+    const image = new Image()
+    image.src = URL.createObjectURL(blob)
+    image.onload = () => {
+      let width = image.width
+      let height = image.height
+
+      if (width > maxWidth || height > maxHeight) {
+        if (width > height) {
+          height = height * (maxWidth / width)
+          width = maxWidth
+        } else {
+          width = width * (maxHeight / height)
+          height = maxHeight
+        }
+      }
+
+      const canvas = document.createElement('canvas')
+      canvas.width = width
+      canvas.height = height
+
+      const context = canvas.getContext('2d')
+      context.drawImage(image, 0, 0, width, height)
+
+      canvas.toBlob(resolve, blob.type)
+    }
+    image.onerror = reject
+  })
+}
+
+export function downgradeImage(
+  blob: Blob,
+  maxSizeBytes: number
+): Promise<Blob> {
+  return new Promise((resolve, reject) => {
+    const image = new Image()
+    image.src = URL.createObjectURL(blob)
+    image.onload = () => {
+      const width = image.width
+      const height = image.height
+      let quality = 1.0
+
+      const canvas = document.createElement('canvas')
+      canvas.width = width
+      canvas.height = height
+
+      const context = canvas.getContext('2d')
+      context.drawImage(image, 0, 0, width, height)
+
+      const compressAndResolveBlob = (blobToCompress: Blob) => {
+        if (blobToCompress.size <= maxSizeBytes) {
+          resolve(blobToCompress)
+        } else {
+          quality -= 0.1
+          if (quality >= 0) {
+            canvas.toBlob(compressAndResolveBlob, blob.type, quality)
+          } else {
+            reject('Unable to compress image below max size')
+          }
+        }
+      }
+
+      canvas.toBlob(compressAndResolveBlob, blob.type, quality)
+    }
+    image.onerror = reject
+  })
+}

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

@@ -1,9 +1,11 @@
+export * from './bytes-convert'
+export * from './event'
+export * from './fuzzy-filter'
+export * from './geojson'
+export * from './image-resize'
 export * from './parse'
-export * from './strip-html'
 export * from './remove-whitespace'
-export * from './geojson'
 export * from './sort-by'
-export * from './url'
-export * from './event'
-export * from './fuzzy-filter'
+export * from './strip-html'
 export * from './temporal-extent-union'
+export * from './url'

package/tailwind.base.css

@@ -9,6 +9,42 @@
     @apply shadow-xl hover:shadow-xl-hover transition-shadow;
   }
 
+  /* ICON CLASSES */
+  .gn-ui-icon-small {
+    font-size: 16px;
+    width: 16px;
+    height: 16px;
+  }
+
+  /* LINK CLASSES */
+  .gn-ui-link {
+    @apply text-blue-600 hover:text-blue-700 hover:underline;
+    text-underline-offset: 0.2em;
+    text-decoration-thickness: 1px;
+  }
+  .gn-ui-link-external-icon {
+    content: 'open_in_new';
+    font-family: 'Material Symbols Outlined';
+    font-size: 0.9em;
+    display: inline-block;
+    vertical-align: top;
+    padding-top: 0.1em;
+  }
+  .gn-ui-link-external {
+    @apply gn-ui-link;
+  }
+  .gn-ui-link-external::before {
+    @apply gn-ui-link-external-icon;
+    padding-right: 0.2em;
+  }
+  .gn-ui-link-external-after {
+    @apply gn-ui-link;
+  }
+  .gn-ui-link-external-after::after {
+    @apply gn-ui-link-external-icon;
+    padding-left: 0.2em;
+  }
+
   /* BUTTON CLASSES */
   /* these are used behind the scenes by the `gn-ui-button` component */
 

package/translations/de.json

@@ -144,7 +144,15 @@
   "downloads.format.unknown": "unbekannt",
   "downloads.wfs.featuretype.not.found": "Der Layer wurde nicht gefunden",
   "dropFile": "Datei ablegen",
+  "editor.record.loadError.body": "",
+  "editor.record.loadError.closeMessage": "",
+  "editor.record.loadError.title": "",
   "editor.record.publish": "",
+  "editor.record.publishError.body": "",
+  "editor.record.publishError.closeMessage": "",
+  "editor.record.publishError.title": "",
+  "editor.record.publishSuccess.body": "",
+  "editor.record.publishSuccess.title": "",
   "editor.record.upToDate": "",
   "externalviewer.dataset.unnamed": "Datensatz aus dem Datahub",
   "facets.block.title.OrgForResource": "Organisation",
@@ -159,6 +167,16 @@
   "facets.block.title.tag.default": "Stichwort",
   "facets.block.title.th_regions_tree.default": "Regionen",
   "favorite.not.authenticated.tooltip": "<div><a href=' {link} '>Anmelden</a>, um auf diese Funktion zuzugreifen</div>",
+  "input.image.altTextPlaceholder": "",
+  "input.image.delete": "",
+  "input.image.displayAltTextInput": "",
+  "input.image.displayUrlInput": "",
+  "input.image.dropFileLabel": "",
+  "input.image.selectFileLabel": "",
+  "input.image.uploadErrorLabel": "",
+  "input.image.uploadErrorRetry": "",
+  "input.image.uploadProgressCancel": "",
+  "input.image.uploadProgressLabel": "",
   "language.ca": "Katalanisch",
   "language.cs": "Tschechisch",
   "language.de": "Deutsch",