add popover html content

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflow.vue

@@ -44,11 +44,12 @@
          <!--
           Etape actuelle: {{ w.currentStep.currentStep.text }}
           <ul>
-             <li v-for="w in w.steps">
+             <li v-for="step in w.steps">
-                 Etape: {{ w.currentStep.text }},
+                 Etape: {{ step.currentStep.text }},
-                 <span v-if="w.transitionPrevious != null">
+                 <span v-if="step.transitionPrevious != null">
-                     transition pour arriver à cette étape : {{ w.transitionPrevious.text }},
+                     transition pour arriver à cette étape : {{ step.transitionPrevious.text }},
-                     par: {{ w.transitionPreviousBy.text }}, le {{ w.transitionPreviousAt.datetime }}
+                     par: {{ step.transitionPreviousBy.text }},
+                     le {{ step.transitionPreviousAt.datetime }}
                  </span>
              </li>
           </ul>
@@ -81,8 +82,20 @@
 <script>
 import Popover from 'bootstrap/js/src/popover';
 
+const i18n = {
+   messages: {
+      fr: {
+         you_subscribed_to_all_steps: "Vous recevrez une notification à chaque étape",
+         you_subscribed_to_final_step: "Vous recevrez une notification à l'étape finale",
+         by: "Par",
+         at: "Le"
+      }
+   }
+}
+
 export default {
    name: "ListWorkflow",
+   i18n: i18n,
    props: {
       workflows: {
          type: Array,
@@ -93,13 +106,20 @@ export default {
       goToUrl(w) {
          return `/fr/main/workflow/${w.id}/show`;
       },
-      getPopTitle(w) {
+      getPopTitle(step) {
-         // todo
+         if (step.transitionPrevious != null) {
-         return 'title'
+            let freezed = step.isFreezed ? `<i class="fa fa-snowflake-o fa-sm me-1"></i>` : ``;
+            return `${freezed}${step.currentStep.text}`; // or step.transitionPrevious.text ??
+         }
       },
-      getPopContent(w) {
+      getPopContent(step) {
-         // todo
+         if (step.transitionPrevious != null) {
-         return 'content'
+            return `<ul class="small_in_title">
+              <li><span class="item-key">${i18n.messages.fr.by} : </span><b>${step.transitionPreviousBy.text}</b></li>
+              <li><span class="item-key">${i18n.messages.fr.at} : </span><b>${step.transitionPreviousAt.datetime}</b></li>
+              </ul>`
+            ;
+         }
       },
       isUserSubscribedToStep(w) {
          // todo
@@ -118,14 +138,6 @@ export default {
             html: true,
          });
       });
-   },
-   i18n: {
-      messages: {
-         fr: {
-            you_subscribed_to_all_steps: "Vous recevrez une notification à chaque étape",
-            you_subscribed_to_final_step: "Vous recevrez une notification à l'étape finale",
-         }
-      }
    }
 }
 </script>