ListWorkflow: styles for list (like in twig)

src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss

@@ -474,6 +474,7 @@ div.workflow {
 // Override bootstrap popover styles
 div.popover {
     box-shadow: 0 0 10px -5px $dark;
+    z-index: 9999;
     .popover-arrow {}
     .popover-header {}
     .popover-body {}

src/Bundle/ChillMainBundle/Resources/public/module/entity-workflow-pick/index.js

@@ -7,7 +7,6 @@ const i18n = _createI18n({});
 // list workflow
 document.querySelectorAll('[data-list-workflows]')
     .forEach(function (el) {
-        console.log('allowCreate', el.dataset.allowCreate);
         const app = {
             components: {
                 ListWorkflowModalVue,

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

@@ -1,37 +1,86 @@
 <template>
-<div class="list-group my-2 workflow workflow-box">
+   <div class="flex-table workflow" id="workflow-list">
-   <div class="list-group-item">
+      <div v-for="(w, i) in workflows" :key="`workflow-${i}`"
-      <h4>Workflow associés</h4>
+         class="item-bloc">
+         
+         <div>
+            <div class="item-row col">
+               <h2>Workflow</h2>
+               <div class="flex-grow-1 ms-3 h3">
+                  <div>
+                     {{ w.relatedEntityClass }}
+                     {{ w.relatedEntityId }}
+                  </div>
+               </div>
+            </div>
+            
+            <div class="breadcrumb">
+               <template v-for="(step, j) in w.steps">
+                  <span class="mx-2"
+                     :key="`step-${j}`"
+                     tabindex="0"
+                     data-bs-trigger="focus hover"
+                     data-bs-toggle="popover"
+                     data-bs-placement="bottom"
+                     data-bs-custom-class="workflow-transition"
+                     :title="getPopTitle(step)"
+                     :data-bs-content="getPopContent(step)">
+                     
+                     <i v-if="step.currentStep.text === 'initial'"
+                        class="fa fa-circle me-1 text-chill-yellow">
+                     </i>
+                     <i v-if="step.isFreezed"
+                        class="fa fa-snowflake-o fa-sm me-1">
+                     </i>
+                     {{ step.currentStep.text }}
+                  </span>
+                  <span v-if="j !== Object.keys(w.steps).length - 1">
+                     →
+                  </span>
+               </template>
+            </div>
+         </div>
+   
+         <!--
+          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 }}
+                 </span>
+             </li>
+          </ul>
+         -->
+         
+         <div class="item-row">
+            <div class="item-col flex-grow-1">
+               <p v-if="isUserSubscribedToStep(w)">
+                  <i class="fa fa-check fa-fw"></i>
+                  {{ $t('you_subscribed_to_all_steps') }}
+               </p>
+               <p v-if="isUserSubscribedToFinal(w)">
+                  <i class="fa fa-check fa-fw"></i>
+                  {{ $t('you_subscribed_to_final_step') }}
+               </p>
+            </div>
+            <div class="item-col">
+               <ul class="record_actions">
+                  <li>
+                     <a :href="goToUrl(w)" class="btn btn-sm btn-show" :title="$t('action.show')"></a>
+                  </li>
+               </ul>
+            </div>
+         </div>
+         
+      </div>
    </div>
-   <div class="list-group-item" v-for="w in workflows">
-      {{ w.id }}
-
-       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 }}
-              </span>
-          </li>
-       </ul>
-
-      <ul class="record_actions">
-         <li>
-            <a class="btn btn-sm btn-outline-primary"
-               title="voir"
-               :href="goToUrl(w)">
-               <i class="fa fa-eye fa-fw"></i>
-            </a>
-         </li>
-      </ul>
-   </div>
-</div>
 </template>
 
 <script>
+import Popover from 'bootstrap/js/src/popover';
+
 export default {
    name: "ListWorkflow",
    props: {
@@ -43,6 +92,39 @@ export default {
    methods: {
       goToUrl(w) {
          return `/fr/main/workflow/${w.id}/show`;
+      },
+      getPopTitle(w) {
+         // todo
+         return 'title'
+      },
+      getPopContent(w) {
+         // todo
+         return 'content'
+      },
+      isUserSubscribedToStep(w) {
+         // todo
+         return false;
+      },
+      isUserSubscribedToFinal(w) {
+         // todo
+         return false;
+      },
+   },
+   mounted() {
+      const triggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
+      const popoverList = triggerList.map(function (el) {
+         console.log('popover', el)
+         return new Popover(el, {
+            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",
+         }
       }
    }
 }

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

@@ -18,7 +18,7 @@
          @close="modal.showModal = false">
          
          <template v-slot:header>
-            Liste des workflows
+            <h2 class="modal-title">{{ $t('workflow_list') }}</h2>
          </template>
          
          <template v-slot:body>
@@ -94,8 +94,12 @@ export default {
          this.modal.showModal = true;
       },
    },
-   mounted() {
+   i18n: {
-      console.log('allowCreate', this.allowCreate);
+      messages: {
+         fr: {
+            workflow_list: "Liste des workflows",
+         }
+      }
    }
 }
 </script>