From de45555c5a2e69bb4e687dabe5c673c4cf8277e9 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Sun, 30 Jan 2022 16:35:47 +0100
Subject: [PATCH] add popover html content

---
 .../EntityWorkflow/ListWorkflow.vue           | 50 ++++++++++++-------
 1 file changed, 31 insertions(+), 19 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflow.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflow.vue
index 7ed91dede..823f2af46 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/EntityWorkflow/ListWorkflow.vue
+++ b/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">
-                 Etape: {{ w.currentStep.text }},
-                 <span v-if="w.transitionPrevious != null">
-                     transition pour arriver à cette étape : {{ w.transitionPrevious.text }},
-                     par: {{ w.transitionPreviousBy.text }}, le {{ w.transitionPreviousAt.datetime }}
+             <li v-for="step in w.steps">
+                 Etape: {{ step.currentStep.text }},
+                 <span v-if="step.transitionPrevious != null">
+                     transition pour arriver à cette étape : {{ step.transitionPrevious.text }},
+                     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) {
-         // todo
-         return 'title'
+      getPopTitle(step) {
+         if (step.transitionPrevious != null) {
+            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) {
-         // todo
-         return 'content'
+      getPopContent(step) {
+         if (step.transitionPrevious != null) {
+            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>