geonetwork-ui 2.3.0-dev.3d65a13b → 2.3.0-dev.c3722986

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

@@ -42,6 +42,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: [
@@ -89,6 +90,7 @@ import { EditableLabelDirective } from './editable-label/editable-label.directiv
     EditableLabelDirective,
     TextAreaComponent,
     ButtonComponent,
+    ImageInputComponent,
   ],
   exports: [
     DropdownSelectorComponent,
@@ -109,6 +111,7 @@ import { EditableLabelDirective } from './editable-label/editable-label.directiv
     SearchInputComponent,
     DateRangePickerComponent,
     EditableLabelDirective,
+    ImageInputComponent,
   ],
 })
 export class UiInputsModule {}

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/translations/de.json

@@ -159,6 +159,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",

package/translations/en.json

@@ -159,6 +159,16 @@
   "facets.block.title.tag.default": "Tag",
   "facets.block.title.th_regions_tree.default": "Regions",
   "favorite.not.authenticated.tooltip": "<div><a href=' {link} '>Login</a> to access this feature</div>",
+  "input.image.altTextPlaceholder": "Image alternate text",
+  "input.image.delete": "Delete",
+  "input.image.displayAltTextInput": "Alternate text",
+  "input.image.displayUrlInput": "Enter a URL",
+  "input.image.dropFileLabel": "or drop it here",
+  "input.image.selectFileLabel": "Select an image",
+  "input.image.uploadErrorLabel": "The image could not be uploaded",
+  "input.image.uploadErrorRetry": "Retry",
+  "input.image.uploadProgressCancel": "Cancel",
+  "input.image.uploadProgressLabel": "Upload in progress...",
   "language.ca": "Catalan",
   "language.cs": "Czech",
   "language.de": "German",

package/translations/es.json

@@ -159,6 +159,16 @@
   "facets.block.title.tag.default": "",
   "facets.block.title.th_regions_tree.default": "",
   "favorite.not.authenticated.tooltip": "",
+  "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": "Catalán",
   "language.cs": "Checo",
   "language.de": "Alemán",

package/translations/fr.json

@@ -159,6 +159,16 @@
   "facets.block.title.tag.default": "Tag",
   "facets.block.title.th_regions_tree.default": "Régions",
   "favorite.not.authenticated.tooltip": "<div><a href=' {link} '>Connectez-vous</a> pour avoir accès à cette fonctionnalité</div>",
+  "input.image.altTextPlaceholder": "Texte alternatif de l'image",
+  "input.image.delete": "Supprimer",
+  "input.image.displayAltTextInput": "Texte alternatif",
+  "input.image.displayUrlInput": "Saisir une URL",
+  "input.image.dropFileLabel": "ou la glisser ici",
+  "input.image.selectFileLabel": "Sélectionner une image",
+  "input.image.uploadErrorLabel": "L'image n'a pas pu être chargée",
+  "input.image.uploadErrorRetry": "Réessayer",
+  "input.image.uploadProgressCancel": "Annuler",
+  "input.image.uploadProgressLabel": "Chargement en cours...",
   "language.ca": "Catalan",
   "language.cs": "Tchèque",
   "language.de": "Allemand",

package/translations/it.json

@@ -159,6 +159,16 @@
   "facets.block.title.tag.default": "Tag",
   "facets.block.title.th_regions_tree.default": "Regioni",
   "favorite.not.authenticated.tooltip": "<div><a href=' {link} '>Login</a> per accedere a questa funzionalità</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": "Catalano",
   "language.cs": "Ceco",
   "language.de": "Tedesco",

package/translations/nl.json

@@ -159,6 +159,16 @@
   "facets.block.title.tag.default": "",
   "facets.block.title.th_regions_tree.default": "",
   "favorite.not.authenticated.tooltip": "",
+  "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": "Catalaans",
   "language.cs": "Tsjechisch",
   "language.de": "Duits",

package/translations/pt.json

@@ -159,6 +159,16 @@
   "facets.block.title.tag.default": "",
   "facets.block.title.th_regions_tree.default": "",
   "favorite.not.authenticated.tooltip": "",
+  "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": "Catalão",
   "language.cs": "Tcheco",
   "language.de": "Alemão",

package/translations/sk.json

@@ -159,6 +159,16 @@
   "facets.block.title.tag.default": "Štítok",
   "facets.block.title.th_regions_tree.default": "Regióny",
   "favorite.not.authenticated.tooltip": "<div><a href='{link}'>Prihlásiť sa</a> pre prístup k tejto funkcii</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": "Catalánsky",
   "language.cs": "Čeština",
   "language.de": "Nemecky",

package/esm2022/libs/data-access/gn4/src/openapi/model/inlineObject3.api.model.mjs

@@ -1,13 +0,0 @@
-/**
- * GeoNetwork 4.2.7 OpenAPI Documentation
- * This is the description of the GeoNetwork OpenAPI. Use this API to manage your catalog.
- *
- * The version of the OpenAPI document: 4.2.7
- * Contact: geonetwork-users@lists.sourceforge.net
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
-export {};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5saW5lT2JqZWN0My5hcGkubW9kZWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2RhdGEtYWNjZXNzL2duNC9zcmMvb3BlbmFwaS9tb2RlbC9pbmxpbmVPYmplY3QzLmFwaS5tb2RlbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7OztHQVVHIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW9OZXR3b3JrIDQuMi43IE9wZW5BUEkgRG9jdW1lbnRhdGlvblxuICogVGhpcyBpcyB0aGUgZGVzY3JpcHRpb24gb2YgdGhlIEdlb05ldHdvcmsgT3BlbkFQSS4gVXNlIHRoaXMgQVBJIHRvIG1hbmFnZSB5b3VyIGNhdGFsb2cuXG4gKlxuICogVGhlIHZlcnNpb24gb2YgdGhlIE9wZW5BUEkgZG9jdW1lbnQ6IDQuMi43XG4gKiBDb250YWN0OiBnZW9uZXR3b3JrLXVzZXJzQGxpc3RzLnNvdXJjZWZvcmdlLm5ldFxuICpcbiAqIE5PVEU6IFRoaXMgY2xhc3MgaXMgYXV0byBnZW5lcmF0ZWQgYnkgT3BlbkFQSSBHZW5lcmF0b3IgKGh0dHBzOi8vb3BlbmFwaS1nZW5lcmF0b3IudGVjaCkuXG4gKiBodHRwczovL29wZW5hcGktZ2VuZXJhdG9yLnRlY2hcbiAqIERvIG5vdCBlZGl0IHRoZSBjbGFzcyBtYW51YWxseS5cbiAqL1xuXG5leHBvcnQgaW50ZXJmYWNlIElubGluZU9iamVjdDNBcGlNb2RlbCB7XG4gIC8qKlxuICAgKiBUaGUgZmlsZSB0byB1cGxvYWRcbiAgICovXG4gIGZpbGU6IEJsb2Jcbn1cbiJdfQ==

package/libs/data-access/gn4/src/openapi/model/inlineObject3.api.model.d.ts

@@ -1,18 +0,0 @@
-/**
- * GeoNetwork 4.2.7 OpenAPI Documentation
- * This is the description of the GeoNetwork OpenAPI. Use this API to manage your catalog.
- *
- * The version of the OpenAPI document: 4.2.7
- * Contact: geonetwork-users@lists.sourceforge.net
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
-export interface InlineObject3ApiModel {
-    /**
-     * The file to upload
-     */
-    file: Blob;
-}
-//# sourceMappingURL=inlineObject3.api.model.d.ts.map

package/libs/data-access/gn4/src/openapi/model/inlineObject3.api.model.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"inlineObject3.api.model.d.ts","sourceRoot":"","sources":["../../../../../../src/libs/data-access/gn4/src/openapi/model/inlineObject3.api.model.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,IAAI,EAAE,IAAI,CAAA;CACX"}

package/src/libs/data-access/gn4/src/openapi/model/inlineObject3.api.model.ts

@@ -1,18 +0,0 @@
-/**
- * GeoNetwork 4.2.7 OpenAPI Documentation
- * This is the description of the GeoNetwork OpenAPI. Use this API to manage your catalog.
- *
- * The version of the OpenAPI document: 4.2.7
- * Contact: geonetwork-users@lists.sourceforge.net
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
-
-export interface InlineObject3ApiModel {
-  /**
-   * The file to upload
-   */
-  file: Blob
-}