feat: display contact and overview side by side (#25)

camptocamp · Jan 20, 2025 · 71a4558 · 71a4558
1 parent d617000
commit 71a4558
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 27 deletions.
diff --git a/apps/webcomponents/src/app/components/gn-record-view/gn-record-view.component.html b/apps/webcomponents/src/app/components/gn-record-view/gn-record-view.component.html
@@ -8,18 +8,23 @@
     </div>
 
     <gn-ui-metadata-info [metadata]="record"></gn-ui-metadata-info>
+    <div class="grid grid-cols-2 items-center mt-5">
+      <gn-ui-image-overlay-preview
+        class="block h-[185px] mb-5 mr-2"
+        *ngIf="record?.overviews?.length > 0"
+        [imageUrl]="record?.overviews?.[0]?.url"
+      >
+      </gn-ui-image-overlay-preview>
 
-    <gn-ui-image-overlay-preview
-      class="block h-[185px] mb-5"
-      *ngIf="record?.overviews?.length > 0"
-      [imageUrl]="record?.overviews?.[0]?.url"
-    >
-    </gn-ui-image-overlay-preview>
-
-    <gn-ui-metadata-contact [metadata]="record"></gn-ui-metadata-contact>
-
+      <gn-ui-metadata-contact
+        class="pl-2"
+        [metadata]="record"
+      ></gn-ui-metadata-contact>
+    </div>
     <div *ngIf="getDownloads(record?.onlineResources)?.length > 0">
-      <div class="font-title text-lg mt-4 mb-2 flex flex-row gap-4 items-center">
+      <div
+        class="font-title text-lg mt-4 mb-2 flex flex-row gap-4 items-center"
+      >
         <span translate>record.metadata.download</span>
         <gn-ui-previous-next-buttons
           *ngIf="downloads?.pagesCount > 1"
@@ -39,7 +44,9 @@
     </div>
 
     <div *ngIf="getLinks(record?.onlineResources)?.length > 0">
-      <div class="font-title text-lg mt-4 mb-2 flex flex-row gap-4 items-center">
+      <div
+        class="font-title text-lg mt-4 mb-2 flex flex-row gap-4 items-center"
+      >
         <span translate>record.metadata.links</span>
         <gn-ui-previous-next-buttons
           *ngIf="links?.pagesCount > 1"
@@ -56,7 +63,9 @@
     </div>
 
     <div *ngIf="getAPIs(record?.onlineResources)?.length > 0">
-      <div class="font-title text-lg mt-4 mb-2 flex flex-row gap-4 items-center">
+      <div
+        class="font-title text-lg mt-4 mb-2 flex flex-row gap-4 items-center"
+      >
         <span translate>record.metadata.api</span>
         <gn-ui-previous-next-buttons
           *ngIf="apis?.pagesCount > 1"

diff --git a/apps/webcomponents/src/app/components/gn-record-view/gn-record-view.component.ts b/apps/webcomponents/src/app/components/gn-record-view/gn-record-view.component.ts
@@ -26,42 +26,41 @@ import {
   encapsulation: ViewEncapsulation.ShadowDom,
   providers: [SearchFacade],
 })
-
 export class GnRecordViewComponent extends BaseComponent implements OnInit {
-  @Input() recordId!: string;
-  record$: Observable<CatalogRecord | null>;
-  downloads$: Observable<OnlineResource[]>;
-  links$: Observable<OnlineResource[]>;
-  apis$: Observable<OnlineResource[]>;
+  @Input() recordId!: string
+  record$: Observable<CatalogRecord | null>
+  downloads$: Observable<OnlineResource[]>
+  links$: Observable<OnlineResource[]>
+  apis$: Observable<OnlineResource[]>
 
   constructor(injector: Injector) {
-    super(injector);
+    super(injector)
   }
 
   ngOnInit() {
-    super.ngOnInit();
-    this.record$ = this.recordsRepository.getRecord(this.recordId);
+    super.ngOnInit()
+    this.record$ = this.recordsRepository.getRecord(this.recordId)
 
     this.downloads$ = this.record$.pipe(
       map((record) => this.getDownloads(record?.onlineResources || []))
-    );
+    )
     this.links$ = this.record$.pipe(
       map((record) => this.getLinks(record?.onlineResources || []))
-    );
+    )
     this.apis$ = this.record$.pipe(
       map((record) => this.getAPIs(record?.onlineResources || []))
-    );
+    )
   }
 
   getDownloads(onlineResources: OnlineResource[]): OnlineResource[] {
-    return onlineResources.filter((resource) => resource.type === 'download');
+    return onlineResources.filter((resource) => resource.type === 'download')
   }
 
   getLinks(onlineResources: OnlineResource[]): OnlineResource[] {
-    return onlineResources.filter((resource) => resource.type === 'link');
+    return onlineResources.filter((resource) => resource.type === 'link')
   }
 
   getAPIs(onlineResources: OnlineResource[]): OnlineResource[] {
-    return onlineResources.filter((resource) => resource.type === 'service');
+    return onlineResources.filter((resource) => resource.type === 'service')
   }
 }