Merge pull request #142 from PnEcrins/improve-observations-list-ui

improve observations list ui
PnEcrins · Oct 17, 2024 · 915a02e · 915a02e
2 parents 8882ac7 + f066d04
commit 915a02e
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 11 deletions.
diff --git a/front-end/src/app/pages/my-observations/my-observations.component.html b/front-end/src/app/pages/my-observations/my-observations.component.html
@@ -41,14 +41,19 @@
   <mat-list class="mat-expansion-panel-body-visible">
     @for (observation of myObservations.features; track observation.id) {
       <mat-list-item>
+        <span matListItemIcon class="event-type-container"
+          ><img
+            [src]="getEventType(observation.properties.category)!.pictogram"
+        /></span>
         <span matListItemTitle>{{
           observation.properties.name && observation.properties.name !== ""
             ? observation.properties.name
             : getEventType(observation.properties.category)!.label
         }}</span>
-        <span matListItemLine>{{
-          observation.properties.event_date | date: "dd/MM/yyyy"
-        }}</span>
+        <span matListItemLine
+          >{{ observation.properties.event_date | date: "dd/MM/yyyy" }} -
+          {{ getEventType(observation.properties.category)!.label }}</span
+        >
         <span matListItemMeta>
           <button
             mat-icon-button

diff --git a/front-end/src/app/pages/my-observations/my-observations.component.scss b/front-end/src/app/pages/my-observations/my-observations.component.scss
@@ -9,3 +9,16 @@
   justify-content: center;
   align-items: center;
 }
+
+.event-type-container {
+  margin-inline-start: 0px;
+  margin-inline-end: 8px;
+  padding: calc(
+    calc(
+        var(--mdc-icon-button-state-layer-size, 48px) - var(
+            --mdc-icon-button-icon-size,
+            24px
+          )
+      ) / 2
+  );
+}
diff --git a/front-end/src/app/pages/synthesis-interface/synthesis-interface.component.html b/front-end/src/app/pages/synthesis-interface/synthesis-interface.component.html
@@ -45,15 +45,19 @@
               <mat-icon>place</mat-icon>
             </button></span
           >
-
+          <span matListItemIcon class="event-type-container"
+            ><img
+              [src]="getEventType(observation.properties.category)!.pictogram"
+          /></span>
           <span matListItemTitle>{{
             observation.properties.name && observation.properties.name !== ""
               ? observation.properties.name
               : getEventType(observation.properties.category)!.label
           }}</span>
-          <span matListItemLine>{{
-            observation.properties.event_date | date: "dd/MM/yyyy"
-          }}</span>
+          <span matListItemLine
+            >{{ observation.properties.event_date | date: "dd/MM/yyyy" }} -
+            {{ getEventType(observation.properties.category)!.label }}</span
+          >
           <span matListItemMeta>
             <button
               mat-icon-button

diff --git a/front-end/src/app/pages/synthesis-interface/synthesis-interface.component.scss b/front-end/src/app/pages/synthesis-interface/synthesis-interface.component.scss
@@ -46,3 +46,16 @@ $panel-height: 100vh;
     }
   }
 }
+
+.event-type-container {
+  margin-inline-start: 0px;
+  margin-inline-end: 8px;
+  padding: calc(
+    calc(
+        var(--mdc-icon-button-state-layer-size, 48px) - var(
+            --mdc-icon-button-icon-size,
+            24px
+          )
+      ) / 2
+  );
+}
diff --git a/front-end/src/app/pages/synthesis-interface/synthesis-interface.component.ts b/front-end/src/app/pages/synthesis-interface/synthesis-interface.component.ts
@@ -384,10 +384,10 @@ export class SynthesisInterfaceComponent {
   sortObservations(observations: observationsFeatureCollection) {
     observations.features.sort(
       (a: ObservationFeature, b: ObservationFeature) => {
-        return a.properties.name!.localeCompare(b.properties.name!, undefined, {
-          numeric: true,
-          sensitivity: 'base',
-        });
+        return (
+          new Date(b.properties.event_date).getTime() -
+          new Date(a.properties.event_date).getTime()
+        );
       },
     );
   }