feat(project-list): Add few front adjustements on sheet view + map link

CartONG · Oct 18, 2024 · 201dc57 · 201dc57
1 parent db480bc
commit 201dc57
Show file tree

Hide file tree

Showing 18 changed files with 254 additions and 143 deletions.
diff --git a/symfony/src/Entity/Project.php b/symfony/src/Entity/Project.php
@@ -109,6 +109,7 @@ class Project
     private ?string $projectManagerPosition = null;
 
     #[ORM\Column(length: 255, nullable: true)]
+    #[Groups([self::PROJECT_READ])]
     private ?string $projectManagerEmail = null;
 
     #[ORM\Column(length: 255, nullable: true)]
@@ -120,6 +121,7 @@ class Project
     private ?string $projectManagerPhoto = null;
 
     #[ORM\Column(length: 255, nullable: true)]
+    #[Groups([self::PROJECT_READ])]
     private ?string $website = null;
 
     #[ORM\Column(length: 255, nullable: true)]
@@ -196,7 +198,7 @@ public function getCoords(): ?array {
         if (preg_match('/POINT\(([-\d\.]+) ([-\d\.]+)\)/', $this->coords, $matches)) {
             return [
                 'lat' => (float)$matches[1],
-                'long' => (float)$matches[2],
+                'lng' => (float)$matches[2],
             ];
         }
         return null;

diff --git a/vue/src/assets/styles/global/utils.scss b/vue/src/assets/styles/global/utils.scss
@@ -10,31 +10,32 @@
   cursor: pointer;
 
   &:hover {
-      font-weight: 500;
+    font-weight: 500;
   }
 }
 
 :root {
   .half-circle {
-      --dim-half-circle-more: 0rem;
-      --dim-half-circle: calc(1.5rem + var(--dim-half-circle-more));
-      --dim-half-circle-margin: calc(1rem + var(--dim-half-circle-more));
-      --dim-half-circle-offset: calc(var(--dim-half-circle) + var(--dim-half-circle-margin));
+    --dim-half-circle-more: 0rem;
+    --dim-half-circle: calc(1.5rem + var(--dim-half-circle-more));
+    --dim-half-circle-margin: calc(1rem + var(--dim-half-circle-more));
+    --dim-half-circle-offset: calc(var(--dim-half-circle) + var(--dim-half-circle-margin));
   }
+
   .half-circle--big {
-      --dim-half-circle-more: .5rem;
+    --dim-half-circle-more: .5rem;
   }
 
   @media (max-width: $bp-xl) {
-      .half-circle {
-          --dim-half-circle: 1.25rem;
-          --dim-half-circle-margin: 1rem;
-
-          &--big {
-              --dim-half-circle-margin: 1rem;
-              --dim-half-circle: 1.5rem;
-          }
+    .half-circle {
+      --dim-half-circle: 1.25rem;
+      --dim-half-circle-margin: 1rem;
+
+      &--big {
+        --dim-half-circle-margin: 1rem;
+        --dim-half-circle: 1.5rem;
       }
+    }
   }
 }
 
@@ -48,20 +49,20 @@
   margin-top: 1.5rem;
   padding-left: var(--dim-half-circle-offset);
 
-  & ~ * {
-      padding-left: var(--dim-half-circle-offset);
+  &~* {
+    padding-left: var(--dim-half-circle-offset);
   }
 
   &::before {
-      content: "";
-      display: inline-block;
-      margin: 0 auto;
-      left: 0;
-      width: var(--dim-half-circle);
-      height: calc(var(--dim-half-circle) * 2);
-      background-color: rgb(var(--v-theme-main-yellow));
-      border-radius: 0 var(--dim-half-circle) var(--dim-half-circle) 0;
-      position: absolute;
+    content: "";
+    display: inline-block;
+    margin: 0 auto;
+    left: 0;
+    width: var(--dim-half-circle);
+    height: calc(var(--dim-half-circle) * 2);
+    background-color: rgb(var(--v-theme-main-yellow));
+    border-radius: 0 var(--dim-half-circle) var(--dim-half-circle) 0;
+    position: absolute;
   }
 }
 
@@ -71,48 +72,51 @@
 
 @media (max-width: $bp-xl) {
   .hide-sm {
-      display: none !important;
+    display: none !important;
   }
+
   .show-sm {
-      display: flex !important;
+    display: flex !important;
   }
+
   .half-circle {
-      &--big {
+    &--big {
 
-          align-items: flex-start;
-          &::before {
-              top: -0.125em;
-          }
-      }
-  }
+      align-items: flex-start;
 
-  .fixed-btn {
-      position: fixed;
-      bottom: 0;
-      right: 0;
-      border-radius: 50%;
-      $dim-btn: 2.875rem;
-      max-width: $dim-btn;
-      min-height: $dim-btn;
-      min-width: $dim-btn;
-      width: $dim-btn;
-      height: $dim-btn;
-      padding: 0;
-      margin: 1.5rem;
-      z-index: 1000;
-      box-shadow: 0 .25rem .25rem -.125rem rgba(0, 0, 0, .25);
-
-      .v-icon {
-          font-size: 1.675rem;
+      &::before {
+        top: -0.125em;
       }
+    }
+  }
 
-      .v-btn__content {
-          display: none !important;
-      }
+  button.fixed-btn {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    border-radius: 50%;
+    $dim-btn: 2.875rem;
+    max-width: $dim-btn;
+    min-height: $dim-btn;
+    min-width: $dim-btn;
+    width: $dim-btn;
+    height: $dim-btn;
+    padding: 0;
+    margin: 1.5rem !important;
+    z-index: 1000;
+    box-shadow: 0 .25rem .25rem -.125rem rgba(0, 0, 0, .25);
+
+    .v-icon {
+      font-size: 1.675rem;
+    }
+
+    .v-btn__content {
+      display: none !important;
+    }
 
-      .v-btn__prepend {
-          margin: 0;
-      }
+    .v-btn__prepend {
+      margin: 0;
+    }
   }
 }
 
@@ -127,12 +131,13 @@
 
 .Card {
   background: white;
-  box-shadow:  0px 0px 0px 1px rgb(var(--v-theme-main-blue)), 0px 2px 0px 1px rgb(var(--v-theme-main-blue));
+  box-shadow: 0px 0px 0px 1px rgb(var(--v-theme-main-blue)), 0px 2px 0px 1px rgb(var(--v-theme-main-blue));
   transition: all .1s ease-in;
   border: none;
   cursor: pointer;
 
-  &:hover, &[active="true"] {
-      box-shadow: 0px 0px 0px 2px rgb(var(--v-theme-main-blue)), 0px 4px 0px 2px rgb(var(--v-theme-main-blue));
+  &:hover,
+  &[active="true"] {
+    box-shadow: 0px 0px 0px 2px rgb(var(--v-theme-main-blue)), 0px 4px 0px 2px rgb(var(--v-theme-main-blue));
   }
 }
diff --git a/vue/src/assets/styles/views/SheetView.scss b/vue/src/assets/styles/views/SheetView.scss
@@ -54,9 +54,11 @@
         font-weight: 700;
         width: 100%;
         padding-bottom: .5rem;
+        margin-bottom: .25rem;
 
         &--divider {
             border-bottom: solid 4px rgb(var(--v-theme-light-yellow));
+            margin-bottom: .5rem;
         }
     }
 

diff --git a/vue/src/assets/translations/fr/common.json b/vue/src/assets/translations/fr/common.json
@@ -15,7 +15,7 @@
         "commentPanel": "Commentaires"
     },
     "header": {
-        "title": "Platerforme",
+        "title": "Plateforme",
         "title2": "Urbaine",
         "help": "Aide",
         "contact": "Contact",

diff --git a/vue/src/components/global/BasicCard.vue b/vue/src/components/global/BasicCard.vue
@@ -16,7 +16,9 @@ defineProps<{
 
 <style lang="scss">
 .BasicCard.Card {
-    height: 72px;
+    $dim-basic-card-h: 72px;
+    height: $dim-basic-card-h;
+    max-height: $dim-basic-card-h;
     display: flex;
     align-items: center;
     justify-content: center;

diff --git a/vue/src/components/global/InfoCard.vue b/vue/src/components/global/InfoCard.vue
@@ -75,7 +75,6 @@ defineProps<{
             display: flex;
             align-items: center;
             flex-flow: row nowrap;
-            gap: .5rem;
         }
     }
     

diff --git a/vue/src/components/global/LikeButton.vue b/vue/src/components/global/LikeButton.vue
@@ -1,6 +1,10 @@
 <template>
     <div class="LikeButton">
-        <v-icon icon="mdi mdi-heart-outline" color="main-blue"></v-icon>
+        <v-btn
+            variant="text"
+            density="comfortable"
+            icon="mdi mdi-heart-outline"
+            color="main-blue"></v-btn>
     </div>
 </template>
 

diff --git a/vue/src/components/global/ShareButton.vue b/vue/src/components/global/ShareButton.vue
@@ -1,5 +1,10 @@
 <template>
-    <v-icon icon="mdi mdi-share-variant" color="main-blue" @click.stop="copyURL"></v-icon>
+    <v-btn
+        @click.stop="copyURL"
+        variant="text"
+        density="comfortable"
+        icon="mdi mdi-share-variant"
+        color="main-blue"></v-btn>
 </template>
 
 <script setup lang="ts">

diff --git a/vue/src/components/map/Map.vue b/vue/src/components/map/Map.vue
@@ -97,24 +97,35 @@ const addImage = async (path: string, name: string) => {
     return
 }
 
+const addPopup = (coordinates: maplibregl.LngLatLike, popupHtml: any) => {
+    if (map.value == null) return
+    flyTo(coordinates)
+    popup.value.setLngLat(coordinates).setDOMContent(popupHtml.$el).addTo(map.value);
+    popup.value.addClassName('show');
+    popup.value._onClose = () => {
+        activeFeatureId.value = null;
+        popup.value.removeClassName('show');
+    }
+}
+
 const addPopupOnClick = (layerName: string, popupHtml: any) => {
     if (map.value == null) return
     map.value.on('click', layerName, (e: any) => {
         if (map.value == null) return
         activeFeatureId.value = e.features[0].properties.id;
-        console.log('activeFeatureId', activeFeatureId.value);
-        
         const coordinates = e.features[0].geometry.coordinates.slice();
-
-        popup.value.setLngLat(coordinates).setDOMContent(popupHtml.$el).addTo(map.value);
-        popup.value.addClassName('show');
-        popup.value._onClose = () => {
-            activeFeatureId.value = null;
-            popup.value.removeClassName('show');
-        }
+        addPopup(coordinates, popupHtml);
     })
 }
 
+const flyTo = (coordinates: maplibregl.LngLatLike) => {
+    if (map.value == null) return
+    map.value.flyTo({
+        center: coordinates,
+        zoom: 7,
+        speed: 0.5,
+    });
+}
 
 const listenToHoveredFeature = (layerName: string) => {
     if (map.value == null) return
@@ -148,6 +159,7 @@ defineExpose({
     activeFeatureId,
     hoveredFeatureId,
     addSource,
+    addPopup,
     addPopupOnClick,
     addImage,
     addLayer,

diff --git a/vue/src/models/enums/app/ProjectListType.ts b/vue/src/models/enums/app/ProjectListType.ts
@@ -0,0 +1,4 @@
+export enum ProjectListDisplay {
+  LIST = 'list',
+  MAP = 'map'
+}
diff --git a/vue/src/models/interfaces/Project.ts b/vue/src/models/interfaces/Project.ts
@@ -11,7 +11,10 @@ export interface Project extends Timestampable {
   slug: string;
   createdBy: User;
   location: string;
-  coords: string;
+  coords: {
+    lng: number,
+    lat: number
+  };
   calendar: string;
   deliverables: string;
   status: Status;

diff --git a/vue/src/router/index.ts b/vue/src/router/index.ts
@@ -9,7 +9,7 @@ import { useAdminStore } from '@/stores/adminStore'
 import { AdministrationPanels } from '@/models/enums/app/AdministrationPanels'
 import { DialogKey } from '@/models/enums/app/DialogKey'
 import { useProjectStore } from '@/stores/projectStore'
-import { onBeforeUnmount, onBeforeMount } from 'vue';
+import { ProjectListDisplay } from '@/models/enums/app/ProjectListType';
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -35,7 +35,13 @@ const router = createRouter({
     {
       path: '/projects',
       name: 'projects',
-      component: () => import('@/views/projects/ProjectListView.vue')
+      component: () => import('@/views/projects/ProjectListView.vue'),
+      beforeEnter: (to, from, next) => {
+        const projectStore = useProjectStore()
+        projectStore.isProjectMapFullWidth = to.query.type === ProjectListDisplay.MAP ? true : false
+        projectStore.activeProjectId = to.query.project ? +to.query.project : null
+        next()
+      }
     },
     {
       path: '/projects/:slug',

diff --git a/vue/src/services/map/MapService.ts b/vue/src/services/map/MapService.ts
@@ -13,7 +13,7 @@ export default class MapService {
         },
         'geometry': {
           'type': 'Point',
-          'coordinates': [item.coords.long, item.coords.lat]
+          'coordinates': [item.coords.lng, item.coords.lat]
         }
       })
     })