Merge pull request #506 from geonetwork/1.0.x-backport-fixes

Fixes (1.0.x): Backport #496 and #499 to 1.0.x
geonetwork · Jun 20, 2023 · d676f74 · d676f74
2 parents 0cfe3e3 + 5f19be3
commit d676f74
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 6 deletions.
diff --git a/libs/feature/search/src/lib/utils/mapper/atomic-operations.ts b/libs/feature/search/src/lib/utils/mapper/atomic-operations.ts
@@ -105,12 +105,16 @@ export const mapLink = (
   }
 }
 
+const mapLogo = (source: SourceWithUnknownProps) => {
+  const logo = selectField(source, 'logo')
+  return logo ? getAsUrl(`/geonetwork${logo}`) : null
+}
 export const mapContact = (
   sourceContact: SourceWithUnknownProps,
   sourceRecord: SourceWithUnknownProps
 ): MetadataContact => {
   const website = getAsUrl(selectField<string>(sourceContact, 'website'))
-  const logoUrl = getAsUrl(`/geonetwork${selectField(sourceRecord, 'logo')}`)
+  const logoUrl = mapLogo(sourceRecord)
   const address = selectField<string>(sourceContact, 'address')
   const phone = selectField<string>(sourceContact, 'phone')
   return {

diff --git a/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.html b/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.html
@@ -14,7 +14,9 @@
 </div>
 <div
   class="content duration-500 overflow-hidden transition-[max-height]"
-  [ngClass]="collapsed ? 'max-h-0 ease-out' : 'ease-in max-h-[300px]'"
+  [ngClass]="collapsed ? 'ease-out' : 'ease-in'"
+  [style.maxHeight]="maxHeight"
+  #contentDiv
 >
   <ng-content></ng-content>
 </div>
diff --git a/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.spec.ts b/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.spec.ts
@@ -47,17 +47,23 @@ describe('ExpandablePanelComponent', () => {
       })
       it('hides content', () => {
         const el = fixture.debugElement.query(By.css('.content'))
-        expect(el.classes['max-h-0']).toBeTruthy()
+        expect(el.styles.getPropertyValue('max-height')).toEqual('0px')
+      })
+      it('should have ease-out transition', () => {
+        const el = fixture.debugElement.query(By.css('.content'))
+        expect(el.classes['ease-out']).toBeTruthy()
+        expect(el.classes['ease-in']).toBeFalsy()
       })
     })
     describe('when not collapsed', () => {
       beforeEach(() => {
         component.collapsed = false
         fixture.detectChanges()
       })
-      it('shows content', () => {
+      it('should have ease-in transition', () => {
         const el = fixture.debugElement.query(By.css('.content'))
-        expect(el.classes['max-h-[300px]']).toBeTruthy()
+        expect(el.classes['ease-in']).toBeTruthy()
+        expect(el.classes['ease-out']).toBeFalsy()
       })
     })
   })

diff --git a/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.ts b/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.ts
@@ -1,4 +1,10 @@
-import { Component, ChangeDetectionStrategy, Input } from '@angular/core'
+import {
+  Component,
+  ChangeDetectionStrategy,
+  Input,
+  ViewChild,
+  ElementRef,
+} from '@angular/core'
 
 @Component({
   selector: 'gn-ui-expandable-panel',
@@ -9,8 +15,17 @@ import { Component, ChangeDetectionStrategy, Input } from '@angular/core'
 export class ExpandablePanelComponent {
   @Input() title: string
   @Input() collapsed = true
+  @ViewChild('contentDiv') contentDiv: ElementRef
+  maxHeight = this.setMaxHeight()
 
   toggle(): void {
     this.collapsed = !this.collapsed
+    this.maxHeight = this.setMaxHeight()
+  }
+
+  setMaxHeight() {
+    return `${
+      this.collapsed ? '0' : this.contentDiv.nativeElement.scrollHeight
+    }px`
   }
 }