From 6c4f5a4de9c1711e911f545868a279366b24176f Mon Sep 17 00:00:00 2001
From: Paolo Cozzi <bunop@libero.it>
Date: Fri, 15 Sep 2023 14:51:37 +0200
Subject: [PATCH] :lipstick: write sample locations as sub-lists

---
 .../sample-detail/sample-detail.component.html        | 11 ++++++++---
 .../sample-detail/sample-detail.component.scss        |  4 ++++
 src/app/shared/locations-list.pipe.ts                 |  6 +++---
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/app/samples/sample-detail/sample-detail.component.html b/src/app/samples/sample-detail/sample-detail.component.html
index 8da15aa..3bc795a 100644
--- a/src/app/samples/sample-detail/sample-detail.component.html
+++ b/src/app/samples/sample-detail/sample-detail.component.html
@@ -55,9 +55,14 @@ <h2>id: {{ sample._id.$oid }}</h2>
           Type: {{ sample.type }}
         </mat-list-item>
 
-        <mat-list-item role="listitem" *ngIf="sample.locations">
-          Locations: {{ sample.locations | locationsList }}
-        </mat-list-item>
+        <ng-container *ngIf="sample.locations">
+          <mat-list-item>Locations: </mat-list-item>
+          <mat-list class="subitem">
+            <div *ngFor="let location of sample.locations | locationsList">
+              <mat-list-item>{{ location }}</mat-list-item>
+            </div>
+          </mat-list>
+        </ng-container>
 
         <mat-expansion-panel
             *ngIf="sample.metadata"
diff --git a/src/app/samples/sample-detail/sample-detail.component.scss b/src/app/samples/sample-detail/sample-detail.component.scss
index 984e863..79adffe 100644
--- a/src/app/samples/sample-detail/sample-detail.component.scss
+++ b/src/app/samples/sample-detail/sample-detail.component.scss
@@ -1,3 +1,7 @@
 .mat-expansion-panel-header-title {
   font-size: 16px;
 }
+
+.subitem {
+  margin-left: 30px;
+}
diff --git a/src/app/shared/locations-list.pipe.ts b/src/app/shared/locations-list.pipe.ts
index ccd5676..48b92d0 100644
--- a/src/app/shared/locations-list.pipe.ts
+++ b/src/app/shared/locations-list.pipe.ts
@@ -7,11 +7,11 @@ import { Multipoint } from '../samples/samples.model';
 })
 export class LocationsListPipe implements PipeTransform {
 
-  transform(value: Multipoint): string {
-    let result = '';
+  transform(value: Multipoint): string[] {
+    let result: string[] = [];
 
     value.coordinates.forEach(position => {
-      result += `latitude: ${position[1]}, longitude: ${position[0]} `
+      result.push(`latitude: ${position[1]}, longitude: ${position[0]}`);
     });
 
     return result;