Merge pull request #959 from geonetwork/ME/fix-graphic-overview

ME: revert image input component

libs/feature/editor/src/lib/components/overview-upload/overview-upload.component.html

@@ -2,7 +2,6 @@
   [maxSizeMB]="5"
   [previewUrl]="resourceUrl"
   [altText]="resourceAltText"
-  [formControl]="formControl"
   (fileChange)="handleFileChange($event)"
   (urlChange)="handleUrlChange($event)"
   (altTextChange)="handleAltTextChange($event)"

libs/feature/editor/src/lib/components/overview-upload/overview-upload.component.spec.ts

@@ -68,7 +68,7 @@ describe('OverviewUploadComponent', () => {
     expect(recordsApiService.getAllResources).toHaveBeenCalledWith(metadataUuid)
     expect(component.resourceAltText).toEqual(imageFileName)
     expect(component.resourceFileName).toEqual(imageFileName)
-    expect(component.resourceUrl.href).toEqual(imageUrl)
+    expect(component.resourceUrl).toEqual(imageUrl)
   })
 
   it('should put the file resource on file change', () => {
@@ -80,7 +80,7 @@ describe('OverviewUploadComponent', () => {
       'public'
     )
     expect(component.resourceAltText).toEqual(imageFileName)
-    expect(component.resourceUrl.href).toEqual(imageUrl)
+    expect(component.resourceUrl).toEqual(imageUrl)
   })
 
   it('should put the file resource on alt text change', () => {
@@ -105,7 +105,7 @@ describe('OverviewUploadComponent', () => {
       'public'
     )
     expect(component.resourceAltText).toEqual(imageFileName)
-    expect(component.resourceUrl.href).toEqual(imageUrl)
+    expect(component.resourceUrl).toEqual(imageUrl)
   })
 
   it('should delete the resource corresponding to the metadata UUID on delete', () => {
@@ -115,7 +115,7 @@ describe('OverviewUploadComponent', () => {
       metadataUuid,
       imageFileName
     )
-    expect(component.resourceAltText).toBeNull()
-    expect(component.resourceUrl).toBeNull()
+    expect(component.resourceAltText).toEqual('')
+    expect(component.resourceUrl).toEqual('')
   })
 })

libs/feature/editor/src/lib/components/overview-upload/overview-upload.component.ts

@@ -15,12 +15,6 @@ import { UiInputsModule } from '@geonetwork-ui/ui/inputs'
 import { FormControl } from '@angular/forms'
 import { GraphicOverview } from '@geonetwork-ui/common/domain/model/record'
 
-const extractFileNameFromUrl = (url: string): string => {
-  const pattern = new RegExp(`attachments/([^/?#]+)(?:[/?#]|$)`, 'i')
-  const match = url.match(pattern)
-  return match ? match[1] : ''
-}
-
 @Component({
   selector: 'gn-ui-overview-upload',
   standalone: true,
@@ -35,9 +29,9 @@ export class OverviewUploadComponent implements OnInit, OnChanges {
   @Output() overviewChange = new EventEmitter<GraphicOverview | null>()
   @Output() altTextChange: EventEmitter<string> = new EventEmitter()
 
-  resourceAltText = '' // = ressourceFileName by default
-  resourceFileName = ''
-  resourceUrl: URL
+  resourceAltText: string
+  resourceFileName: string
+  resourceUrl: string
 
   constructor(
     private recordsApiService: RecordsApiService,
@@ -48,14 +42,13 @@ export class OverviewUploadComponent implements OnInit, OnChanges {
     this.recordsApiService.getAllResources(this.metadataUuid).subscribe({
       next: (resources) => {
         if (resources && resources.length > 0) {
-          this.resourceUrl = new URL(resources[0]?.url)
-          this.resourceAltText =
-            this.resourceAltText === ''
-              ? resources[0].filename
-              : this.resourceAltText
-          this.resourceFileName = extractFileNameFromUrl(resources[0]?.url)
+          this.resourceUrl = resources[0].url
+          this.resourceFileName = resources[0].filename
+          if (!this.resourceAltText) {
+            this.resourceAltText = this.resourceFileName
+          }
         } else {
-          this.resourceUrl = null
+          this.resourceUrl = ''
           this.resourceAltText = ''
           this.resourceFileName = ''
         }
@@ -71,7 +64,7 @@ export class OverviewUploadComponent implements OnInit, OnChanges {
       .putResource(this.metadataUuid, file, 'public')
       .subscribe({
         next: (resource) => {
-          this.resourceUrl = new URL(resource.url)
+          this.resourceUrl = resource.url
           this.resourceAltText = resource.filename
 
           this.overviewChange.emit({
@@ -90,7 +83,7 @@ export class OverviewUploadComponent implements OnInit, OnChanges {
       .putResourceFromURL(this.metadataUuid, url, 'public')
       .subscribe({
         next: (resource) => {
-          this.resourceUrl = new URL(resource.url)
+          this.resourceUrl = resource.url
           this.resourceAltText = resource.filename
 
           this.overviewChange.emit({
@@ -108,19 +101,21 @@ export class OverviewUploadComponent implements OnInit, OnChanges {
     this.resourceAltText = newAltText
 
     this.overviewChange.emit({
-      url: this.resourceUrl,
+      url: new URL(this.resourceUrl),
       description: this.resourceAltText,
     })
+
     this.cd.markForCheck()
   }
 
   handleDelete() {
+    //this.formControl.markAsDirty()
     this.recordsApiService
       .delResource(this.metadataUuid, this.resourceFileName)
       .subscribe({
         next: () => {
-          this.resourceAltText = null
-          this.resourceUrl = null
+          this.resourceAltText = ''
+          this.resourceUrl = ''
 
           this.overviewChange.emit(null)
 
@@ -133,7 +128,7 @@ export class OverviewUploadComponent implements OnInit, OnChanges {
   private errorHandle = (error: never) => {
     console.error(error)
 
-    this.resourceUrl = null
+    this.resourceUrl = ''
     this.resourceAltText = ''
     this.resourceFileName = ''
 
@@ -157,7 +152,7 @@ export class OverviewUploadComponent implements OnInit, OnChanges {
       } else {
         return
       }
-      if (overview.description && overview.description !== '') {
+      if (overview.description) {
         this.resourceAltText = overview.description
         this.cd.markForCheck()
       }

libs/feature/editor/src/lib/components/record-form/record-form.component.ts

@@ -24,7 +24,6 @@ export class RecordFormComponent {
     if (!model) {
       return
     }
-    console.log(newValue)
     this.facade.updateRecordField(model, newValue)
   }
 

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

@@ -51,7 +51,7 @@
   <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 hover:cursor-pointer"
+      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)"
     >

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

@@ -16,7 +16,6 @@ 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'
-import { FormControl, ReactiveFormsModule } from '@angular/forms'
 
 @Component({
   selector: 'gn-ui-image-input',
@@ -31,13 +30,11 @@ import { FormControl, ReactiveFormsModule } from '@angular/forms'
     FilesDropDirective,
     MatProgressSpinnerModule,
     TranslateModule,
-    ReactiveFormsModule,
   ],
 })
 export class ImageInputComponent {
-  @Input() formControl!: FormControl
   @Input() maxSizeMB: number
-  @Input() previewUrl?: URL
+  @Input() previewUrl?: string
   @Input() altText?: string
   @Input() uploadProgress?: number
   @Input() uploadError?: boolean
@@ -130,8 +127,7 @@ export class ImageInputComponent {
             const file = new File([blob], name)
             this.fileChange.emit(file)
           },
-          error: (error) => {
-            console.error(error)
+          error: () => {
             this.downloadError = true
             this.cd.markForCheck()
             this.urlChange.emit(this.urlInputValue)
@@ -169,7 +165,6 @@ export class ImageInputComponent {
   }
 
   handleDelete() {
-    this.formControl.markAsDirty()
     this.delete.emit()
   }