fixed mdi icons, added recit icon on map-popup

package.json

@@ -9,8 +9,10 @@
   },
   "dependencies": {
     "@csstools/normalize.css": "^12.0.0",
+    "@jamescoyle/vue-icon": "^0.1.2",
     "@material-design-icons/svg": "^0.14.2",
     "@mdi/font": "^7.1.96",
+    "@mdi/js": "^7.2.96",
     "@tweenjs/tween.js": "^19.0.0",
     "fabric": "^6.0.0-beta7",
     "granim": "^2.0.0",

src/assets/main.scss

@@ -234,11 +234,14 @@ body{
     // left: 0;
 
     .popup-content-wrapper{
+      display: flex;
+      flex-direction: row;
+      align-items:center;
+      .concernement-map-popup{
         background-color: white;
         padding: 1em;
         border-radius: 3px;
         max-width: 30em;
-      .concernement-map-popup{
         ul.icons{
           display: flex;
           flex-direction: row;
@@ -251,7 +254,25 @@ body{
           }
         }
       }
+      .concernement-map-popup-recit{
+        padding-left: 0.8em;
+        >svg{
+          display: inline-block;
+          $d: 55px; 
+          width:$d; height:$d;
+          border-radius: $d * 0.5;
+          background-color: #fff;
+          padding: 10px;
+          box-sizing: border-box;
+          color: #333;
+          // font-size: 2em;
+        }
+      }
       .reponse-map-popup{
+        background-color: white;
+        padding: 1em;
+        border-radius: 3px;
+        max-width: 30em;
         >div{
           margin-bottom: 0.5em;
           label{
@@ -265,6 +286,9 @@ body{
         font-size: 1em;
         font-weight: 400;
       }
+      h1{
+        padding-bottom: 0.5em;
+      }
     }
 
     &:before{

src/components/ConcernementMapPopup.vue

@@ -1,6 +1,9 @@
 <script>
 // import { RouterLink, RouterView } from 'vue-router'
 
+import SvgIcon from '@jamescoyle/vue-icon';
+import { mdiHeadphones } from '@mdi/js';
+
 import { mapState, mapActions } from 'pinia'
 // import { UserStore } from '@/stores/user'
 import { ConcernementsStore } from '@/stores/concernements'
@@ -15,7 +18,8 @@ export default {
       concernement: null,
       entite: null,
       besoin: null,
-      reponse: null
+      reponse: null,
+      headphones_path: mdiHeadphones
     }
   },
   created () {
@@ -104,6 +108,7 @@ export default {
     }
   },
   components: {
+    SvgIcon
   }
 }
 
@@ -123,6 +128,10 @@ export default {
           <li v-if="concernement.has_doleance" ><span class="icon doleancer"></span></li>
         </ul>
       </section>
+      <section v-if="infos.type === 'concernement' && concernement.has_recit" class="concernement-map-popup-recit">
+        <svg-icon type="mdi" :path="headphones_path"></svg-icon>
+      </section>
+      
       <section v-if="infos.type === 'entite'" class="entite-map-popup">
         <h1>{{ entite.entite.title }}</h1>
       </section>

src/components/block/UserTools.vue

@@ -1,4 +1,11 @@
 <script>
+
+import SvgIcon from '@jamescoyle/vue-icon';
+import { mdiAccount } from '@mdi/js';
+import { mdiLogout } from '@mdi/js';
+import { mdiCogOutline } from '@mdi/js';
+
+
 import { mapState } from 'pinia'
 import { UserStore } from '@/stores/user'
 
@@ -8,6 +15,13 @@ export default {
 
     return { userStore }
   },
+  data() {
+    return {
+      account_path: mdiAccount,
+      cogoutline_path: mdiCogOutline,
+      logout_path: mdiLogout
+    }
+  },
   computed: {
     ...mapState(UserStore,['isloggedin', 'isAdmin', 'mail', 'name'])
   },
@@ -23,7 +37,7 @@ export default {
     }
   },
   components: {
-    // Loggout
+    SvgIcon
   }
 }
 </script>
@@ -31,6 +45,7 @@ export default {
 <template>
   <div id="user-tools">
     <a class="mdi mdi-account" href="/api/user">
+      <svg-icon type="mdi" :path="account_path"></svg-icon>
       <span>{{ name }}</span>
       <!-- <span v-else>{{ mail }}</span> -->
     </a><br/>
@@ -38,13 +53,16 @@ export default {
       v-if="isAdmin"
       class="api" 
       href="/api/admin/content/concernements">
+      <svg-icon type="mdi" :path="cogoutline_path"></svg-icon>
       <span>API</span>
     </a><br/>
     <a href="/user/logout"
       @click.prevent="onLogout()"
       class="mdi mdi-logout"
       title="logout"
-    />
+    >
+      <svg-icon type="mdi" :path="logout_path"></svg-icon>
+    </a>
   </div>
 </template>
 
@@ -56,6 +74,9 @@ export default {
     gap: 0em;
     a{
       padding: $pad_btn;
+      svg{
+        height:0.8em;
+      }
     }
   }
 </style>

src/stores/concernements.js

@@ -88,9 +88,13 @@ export const ConcernementsStore = defineStore({
               // doleance
               concernement.has_doleance = concernement.doleances.length ? true : false;
               
+              // recit
+              concernement.has_recit = concernement.recit !== null;
+
               // common
               this.concernements.push(concernement);
               this.concernementsByID[concernement.id] = concernement;
+
             });
             this.concernements_loaded = true;
           })