Resolve merge with master

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

@@ -31,6 +31,8 @@
 // Specific templates
 @import './scss/notification';
 
+@import './scss/hover.scss';
+
 /*
  *    BASE LAYOUT POSITION
  */
@@ -496,6 +498,7 @@ div.workflow {
     div.breadcrumb {
         display: initial;
         margin-bottom: 0;
+        margin-right: .5rem;
         padding-right: 0.5em;
         background-color: tint-color($chill-yellow, 90%);
         border: 1px solid $chill-yellow;

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

@@ -233,7 +233,7 @@ div.wrap-header {
         }
         &:last-child {}
 
-        div.wh-col {
+        & > div.wh-col {
             &:first-child {
                 flex-grow: 0; flex-shrink: 1; flex-basis: auto;
             }

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

@@ -0,0 +1,11 @@
+
+
+.row.row-hover {
+    padding: 0.3rem;
+
+    &:hover {
+        background-color: $gray-100;
+        border-top: 1px solid $gray-400;
+        border-bottom: 1px solid $gray-400;
+    }
+}

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

@@ -17,6 +17,10 @@ ul.record_actions {
         display: inline-block;
     }
 
+    &.slim {
+        margin-bottom: 0;
+    }
+
    &.column {
       flex-direction: column;
    }

src/Bundle/ChillMainBundle/Resources/public/lib/entity-workflow/api.js

@@ -1,14 +0,0 @@
-const buildLinkCreate = function (
-  workflowName,
-  relatedEntityClass,
-  relatedEntityId,
-) {
-  let params = new URLSearchParams();
-  params.set("entityClass", relatedEntityClass);
-  params.set("entityId", relatedEntityId);
-  params.set("workflow", workflowName);
-
-  return `/fr/main/workflow/create?` + params.toString();
-};
-
-export { buildLinkCreate };

src/Bundle/ChillMainBundle/Resources/public/lib/entity-workflow/api.ts

@@ -0,0 +1,22 @@
+/**
+ * Constructs a URL for creating a workflow link associated with a specific entity.
+ *
+ * @param {string} workflowName - The name of the workflow to associate.
+ * @param {string} relatedEntityClass - The class/type of the related entity.
+ * @param {number|undefined} relatedEntityId - The unique identifier of the related entity. Must be defined.
+ *
+ * @returns {string} The constructed URL containing query parameters based on the provided arguments.
+ *
+ * @throws {Error} If the related entity ID is undefined.
+ */
+export const buildLinkCreate = (workflowName: string, relatedEntityClass: string, relatedEntityId: number|undefined): string => {
+    if (typeof (relatedEntityId) === 'undefined') {
+        throw new Error("the related entity id is not set");
+    }
+    let params = new URLSearchParams();
+    params.set('entityClass', relatedEntityClass);
+    params.set('entityId', relatedEntityId.toString(10));
+    params.set('workflow', workflowName);
+
+    return `/fr/main/workflow/create?`+params.toString();
+};

src/Bundle/ChillMainBundle/Resources/public/module/collection/index.ts

@@ -28,7 +28,13 @@
  * });
  * ```
  */
-import "./collection.scss";
+import './collection.scss';
+
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'show-hide-show': CustomEvent<{id: number, froms: HTMLElement[], container: HTMLElement}>,
+    }
+}
 
 export class CollectionEventPayload {
     collection: HTMLUListElement;
@@ -41,31 +47,27 @@ export class CollectionEventPayload {
 }
 
 export const handleAdd = (button: any): void => {
-    const form_name = button.dataset.collectionAddTarget,
+    let
+        form_name = button.dataset.collectionAddTarget,
         prototype = button.dataset.formPrototype,
-        collection: HTMLUListElement | null = document.querySelector(
-            'ul[data-collection-name="' + form_name + '"]',
-        );
+        collection: HTMLUListElement | null = document.querySelector('ul[data-collection-name="' + form_name + '"]');
 
     if (collection === null) {
         return;
     }
 
-    const empty_explain: HTMLLIElement | null = collection.querySelector(
-            "li[data-collection-empty-explain]",
-        ),
-        entry = document.createElement("li"),
-        counter = collection.querySelectorAll("li.entry").length, // Updated counter logic
+    let
+        empty_explain: HTMLLIElement | null = collection.querySelector('li[data-collection-empty-explain]'),
+        entry = document.createElement('li'),
+        counter = collection.querySelectorAll('li.entry').length, // Updated counter logic
         content = prototype.replace(/__name__/g, counter.toString()),
-        event = new CustomEvent("collection-add-entry", {
-            detail: new CollectionEventPayload(collection, entry),
-        });
+        event = new CustomEvent('collection-add-entry', {detail: new CollectionEventPayload(collection, entry)});
 
-    console.log(counter);
-    console.log(content);
+    console.log(counter)
+    console.log(content)
 
     entry.innerHTML = content;
-    entry.classList.add("entry");
+    entry.classList.add('entry');
 
     if ("collectionRegular" in collection.dataset) {
         initializeRemove(collection, entry);
@@ -79,10 +81,7 @@ export const handleAdd = (button: any): void => {
     window.dispatchEvent(event);
 };
 
-const initializeRemove = (
-    collection: HTMLUListElement,
-    entry: HTMLLIElement,
-): void => {
+const initializeRemove = (collection: HTMLUListElement, entry: HTMLLIElement): void => {
     const button = buildRemoveButton(collection, entry);
     if (null === button) {
         return;
@@ -90,24 +89,21 @@ const initializeRemove = (
     entry.appendChild(button);
 };
 
-export const buildRemoveButton = (
-    collection: HTMLUListElement,
-    entry: HTMLLIElement,
-): HTMLButtonElement | null => {
-    const button = document.createElement("button"),
-        isPersisted = entry.dataset.collectionIsPersisted || "",
-        content = collection.dataset.collectionButtonRemoveLabel || "",
-        allowDelete = collection.dataset.collectionAllowDelete || "",
-        event = new CustomEvent("collection-remove-entry", {
-            detail: new CollectionEventPayload(collection, entry),
-        });
+export const buildRemoveButton = (collection: HTMLUListElement, entry: HTMLLIElement): HTMLButtonElement|null => {
 
-    if (allowDelete === "0" && isPersisted === "1") {
+    let
+        button = document.createElement('button'),
+        isPersisted = entry.dataset.collectionIsPersisted || '',
+        content = collection.dataset.collectionButtonRemoveLabel || '',
+        allowDelete = collection.dataset.collectionAllowDelete || '',
+        event = new CustomEvent('collection-remove-entry', {detail: new CollectionEventPayload(collection, entry)});
+
+    if (allowDelete === '0' && isPersisted === '1') {
         return null;
     }
-    button.classList.add("btn", "btn-delete", "remove-entry");
+    button.classList.add('btn', 'btn-delete', 'remove-entry');
     button.textContent = content;
-    button.addEventListener("click", (e: Event) => {
+    button.addEventListener('click', (e: Event) => {
         e.preventDefault();
         entry.remove();
         collection.dispatchEvent(event);
@@ -115,26 +111,36 @@ export const buildRemoveButton = (
     });
 
     return button;
-};
+}
 
-window.addEventListener("load", () => {
-    const addButtons: NodeListOf<HTMLButtonElement> = document.querySelectorAll(
-            "button[data-collection-add-target]",
-        ),
-        collections: NodeListOf<HTMLUListElement> = document.querySelectorAll(
-            "ul[data-collection-regular]",
-        );
+const collectionsInit = new Set<string>;
+const buttonsInit = new Set<string>();
+
+const initialize = function (target: Document|Element): void {
+    let
+        addButtons: NodeListOf<HTMLButtonElement> = document.querySelectorAll("button[data-collection-add-target]"),
+        collections: NodeListOf<HTMLUListElement> = document.querySelectorAll("ul[data-collection-regular]");
 
     for (let i = 0; i < addButtons.length; i++) {
         const addButton = addButtons[i];
-        addButton.addEventListener("click", (e: Event) => {
+        const uniqid = addButton.dataset.uniqid as string;
+        if (buttonsInit.has(uniqid)) {
+            continue;
+        }
+        buttonsInit.add(uniqid);
+        addButton.addEventListener('click', (e: Event) => {
             e.preventDefault();
             handleAdd(e.target);
         });
     }
     for (let i = 0; i < collections.length; i++) {
-        const entries: NodeListOf<HTMLLIElement> =
-            collections[i].querySelectorAll(":scope > li");
+        const collection = collections[i];
+        const uniqid = collection.dataset.uniqid as string;
+        if (collectionsInit.has(uniqid)) {
+            continue;
+        }
+        collectionsInit.add(uniqid);
+        let entries: NodeListOf<HTMLLIElement> = collection.querySelectorAll(':scope > li');
         for (let j = 0; j < entries.length; j++) {
             if (entries[j].dataset.collectionEmptyExplain === "1") {
                 continue;
@@ -142,4 +148,13 @@ window.addEventListener("load", () => {
             initializeRemove(collections[i], entries[j]);
         }
     }
+};
+
+window.addEventListener('DOMContentLoaded', () => {
+    initialize(document);
 });
+
+window.addEventListener('show-hide-show', (event: CustomEvent<{id: number; container: HTMLElement; froms: HTMLElement[]}>) => {
+    const container = event.detail.container as HTMLElement;
+    initialize(container);
+})

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

@@ -1,7 +1,7 @@
-import { createApp } from "vue";
-import PickEntity from "ChillMainAssets/vuejs/PickEntity/PickEntity.vue";
-import { _createI18n } from "ChillMainAssets/vuejs/_js/i18n";
-import { appMessages } from "ChillMainAssets/vuejs/PickEntity/i18n";
+import { createApp } from 'vue';
+import PickEntity from 'ChillMainAssets/vuejs/PickEntity/PickEntity.vue';
+import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n';
+import { appMessages } from 'ChillMainAssets/vuejs/PickEntity/i18n';
 
 const i18n = _createI18n(appMessages);
 
@@ -9,169 +9,158 @@ let appsOnPage = new Map();
 let appsPerInput = new Map();
 
 function loadDynamicPicker(element) {
-  let apps = element.querySelectorAll('[data-module="pick-dynamic"]');
 
-  apps.forEach(function (el) {
-    const isMultiple = parseInt(el.dataset.multiple) === 1,
-      uniqId = el.dataset.uniqid,
-      input = element.querySelector(
-        '[data-input-uniqid="' + el.dataset.uniqid + '"]',
-      ),
-      // the "picked" will always be an array, even if multiple is false
-      picked = isMultiple
-        ? JSON.parse(input.value)
-        : input.value === "[]" || input.value === ""
-          ? null
-          : [JSON.parse(input.value)];
-    (suggested = JSON.parse(el.dataset.suggested)),
-      (as_id = parseInt(el.dataset.asId) === 1),
-      (submit_on_adding_new_entity =
-        parseInt(el.dataset.submitOnAddingNewEntity) === 1);
-    label = el.dataset.label;
+    let apps = element.querySelectorAll('[data-module="pick-dynamic"]');
 
-    if (!isMultiple) {
-      if (input.value === "[]") {
-        input.value = null;
-      }
-    }
+    apps.forEach(function(el) {
 
-    const app = createApp({
-      template:
-        "<pick-entity " +
-        ':multiple="multiple" ' +
-        ':types="types" ' +
-        ':picked="picked" ' +
-        ':uniqid="uniqid" ' +
-        ':suggested="notPickedSuggested" ' +
-        ':label="label" ' +
-        '@addNewEntity="addNewEntity" ' +
-        '@removeEntity="removeEntity"></pick-entity>',
-      components: {
-        PickEntity,
-      },
-      data() {
-        return {
-          multiple: isMultiple,
-          types: JSON.parse(el.dataset.types),
-          picked: picked === null ? [] : picked,
-          uniqid: el.dataset.uniqid,
-          suggested,
-          as_id,
-          submit_on_adding_new_entity,
-          label,
-        };
-      },
-      computed: {
-        notPickedSuggested() {
-          const pickedIds = new Set();
-          for (const p of this.picked) {
-            pickedIds.add(`${p.type}${p.id}`);
-          }
-          return this.suggested.filter(
-            (e) => !pickedIds.has(`${e.type}${e.id}`),
-          );
-        },
-      },
-      methods: {
-        addNewEntity({ entity }) {
-          if (this.multiple) {
-            if (
-              !this.picked.some((el) => {
-                return el.type === entity.type && el.id === entity.id;
-              })
-            ) {
-              this.picked.push(entity);
-              if (!as_id) {
-                input.value = JSON.stringify(this.picked);
-              } else {
-                const ids = this.picked.map((el) => el.id);
-                input.value = ids.join(",");
-              }
-              console.log(entity);
+        const
+            isMultiple = parseInt(el.dataset.multiple) === 1,
+            uniqId = el.dataset.uniqid,
+            input = element.querySelector('[data-input-uniqid="'+ el.dataset.uniqid +'"]'),
+            // the "picked" will always be an array, even if multiple is false
+            picked = isMultiple ?
+                JSON.parse(input.value) : (
+                    (input.value === '[]' || input.value === '') ?
+                        null : [ JSON.parse(input.value) ]
+                )
+            suggested = JSON.parse(el.dataset.suggested),
+            as_id = parseInt(el.dataset.asId) === 1,
+            submit_on_adding_new_entity = parseInt(el.dataset.submitOnAddingNewEntity) === 1
+            label = el.dataset.label;
+
+        if (!isMultiple) {
+            if (input.value === '[]'){
+                input.value = null;
             }
-          } else {
-            if (
-              !this.picked.some((el) => {
-                return el.type === entity.type && el.id === entity.id;
-              })
-            ) {
-              this.picked.splice(0, this.picked.length);
-              this.picked.push(entity);
-              if (!as_id) {
-                input.value = JSON.stringify(this.picked[0]);
-              } else {
-                input.value = this.picked.map((el) => el.id);
+        }
+
+        const app = createApp({
+            template: '<pick-entity ' +
+                ':multiple="multiple" ' +
+                ':types="types" ' +
+                ':picked="picked" ' +
+                ':uniqid="uniqid" ' +
+                ':suggested="notPickedSuggested" ' +
+                ':label="label" ' +
+                '@addNewEntity="addNewEntity" ' +
+                '@removeEntity="removeEntity" ' +
+                '@addNewEntityProcessEnded="addNewEntityProcessEnded"' +
+              '></pick-entity>',
+            components: {
+                PickEntity,
+            },
+            data() {
+                return {
+                    multiple: isMultiple,
+                    types: JSON.parse(el.dataset.types),
+                    picked: picked === null ? [] : picked,
+                    uniqid: el.dataset.uniqid,
+                    suggested,
+                    as_id,
+                    submit_on_adding_new_entity,
+                    label,
+                }
+            },
+            computed: {
+              notPickedSuggested() {
+                const pickedIds = new Set();
+                for (const p of this.picked) {
+                  pickedIds.add(`${p.type}${p.id}`);
+                }
+                return this.suggested.filter(e => !pickedIds.has(`${e.type}${e.id}`))
               }
+            },
+            methods: {
+                addNewEntity({entity}) {
+                    if (this.multiple) {
+                        if (!this.picked.some(el => {
+                            return el.type === entity.type && el.id === entity.id;
+                        })) {
+                            this.picked.push(entity);
+                            if (!as_id) {
+                              input.value = JSON.stringify(this.picked);
+                            } else {
+                              const ids = this.picked.map(el => el.id);
+                              input.value = ids.join(',');
+                            }
+                            console.log(entity)
+                        }
+                    } else {
+                        if (!this.picked.some(el => {
+                            return el.type === entity.type && el.id === entity.id;
+                        })) {
+                            this.picked.splice(0, this.picked.length);
+                            this.picked.push(entity);
+                            if (!as_id) {
+                              input.value = JSON.stringify(this.picked[0]);
+                            } else {
+                              input.value = this.picked.map(el => el.id);
+                            }
+                        }
+                    }
+                },
+                addNewEntityProcessEnded() {
+                  if (this.submit_on_adding_new_entity) {
+                    input.form.submit();
+                  }
+                },
+                removeEntity({entity}) {
+                    if (-1 === this.suggested.findIndex(e => e.type === entity.type && e.id === entity.id)) {
+                      this.suggested.push(entity);
+                    }
+                    this.picked = this.picked.filter(e => !(e.type === entity.type && e.id === entity.id));
+                    if (this.multiple) {
+                      input.value = JSON.stringify(this.picked);
+                    } else {
+                      input.value = "";
+                    }
+                },
             }
-          }
+        })
+        .use(i18n)
+        .mount(el);
 
-          if (this.submit_on_adding_new_entity) {
-            input.form.submit();
-          }
-        },
-        removeEntity({ entity }) {
-          if (
-            -1 ===
-            this.suggested.findIndex(
-              (e) => e.type === entity.type && e.id === entity.id,
-            )
-          ) {
-            this.suggested.push(entity);
-          }
-          this.picked = this.picked.filter(
-            (e) => !(e.type === entity.type && e.id === entity.id),
-          );
-          if (this.multiple) {
-            input.value = JSON.stringify(this.picked);
-          } else {
-            input.value = "";
-          }
-        },
-      },
-    })
-      .use(i18n)
-      .mount(el);
-
-    appsOnPage.set(uniqId, app);
-    appsPerInput.set(input.name, app);
-  });
+        appsOnPage.set(uniqId, app);
+        appsPerInput.set(input.name, app);
+    });
 }
 
-document.addEventListener("show-hide-show", function (e) {
-  loadDynamicPicker(e.detail.container);
+
+document.addEventListener('show-hide-show', function(e) {
+    loadDynamicPicker(e.detail.container)
 });
 
-document.addEventListener("show-hide-hide", function (e) {
-  console.log("hiding event caught");
-  e.detail.container
-    .querySelectorAll('[data-module="pick-dynamic"]')
-    .forEach((el) => {
-      let uniqId = el.dataset.uniqid;
-      if (appsOnPage.has(uniqId)) {
-        appsOnPage.get(uniqId).unmount();
-        appsOnPage.delete(uniqId);
+document.addEventListener('show-hide-hide', function(e) {
+    console.log('hiding event caught')
+    e.detail.container.querySelectorAll('[data-module="pick-dynamic"]').forEach((el) => {
+        let uniqId = el.dataset.uniqid;
+        if (appsOnPage.has(uniqId)) {
+            appsOnPage.get(uniqId).unmount();
+            appsOnPage.delete(uniqId);
+        }
+    })
+});
+
+document.addEventListener('pick-entity-type-action', function (e) {
+      console.log('pick entity event', e);
+      if (!appsPerInput.has(e.detail.name)) {
+          console.error('no app with this name');
+          return;
+      }
+      const app = appsPerInput.get(e.detail.name);
+      if (e.detail.action === 'add') {
+          app.addNewEntity(e.detail.entity);
+      } else if (e.detail.action === 'remove') {
+        app.removeEntity(e.detail.entity);
+      } else {
+          console.error('action not supported: '+e.detail.action);
       }
-    });
 });
 
-document.addEventListener("pick-entity-type-action", function (e) {
-  console.log("pick entity event", e);
-  if (!appsPerInput.has(e.detail.name)) {
-    console.error("no app with this name");
-    return;
-  }
-  const app = appsPerInput.get(e.detail.name);
-  if (e.detail.action === "add") {
-    app.addNewEntity(e.detail.entity);
-  } else if (e.detail.action === "remove") {
-    app.removeEntity(e.detail.entity);
-  } else {
-    console.error("action not supported: " + e.detail.action);
-  }
-});
-
-document.addEventListener("DOMContentLoaded", function (e) {
-  loadDynamicPicker(document);
-});
+document.addEventListener('DOMContentLoaded', function(e) {
+    loadDynamicPicker(document)
+})
 
 window.loadDynamicPicker = loadDynamicPicker;
+

src/Bundle/ChillMainBundle/Resources/public/page/workflow-show/index.js

@@ -1,62 +1,174 @@
-import { ShowHide } from "ChillMainAssets/lib/show_hide/show_hide.js";
+import {ShowHide} from 'ChillMainAssets/lib/show_hide/show_hide.js';
 
-window.addEventListener("DOMContentLoaded", function () {
-  let divTransitions = document.querySelector("#transitions"),
-    futureDestUsersContainer = document.querySelector("#futureDests");
-  if (null !== divTransitions) {
+window.addEventListener('DOMContentLoaded', function() {
+    const
+        divTransitions = document.querySelector('#transitions'),
+        futureDestUsersContainer = document.querySelector('#futureDests'),
+        personSignatureField = document.querySelector('#person-signature-field'),
+        userSignatureField = document.querySelector('#user-signature-field'),
+        signatureTypeChoices = document.querySelector('#signature-type-choice'),
+        personChoice = document.querySelector('#workflow_step_isPersonOrUserSignature_0'),
+        userChoice = document.querySelector('#workflow_step_isPersonOrUserSignature_1'),
+        signatureZone = document.querySelector('#signature-zone'),
+        transitionFilterContainer = document.querySelector('#transitionFilter'),
+        transitionsContainer = document.querySelector('#transitions'),
+        sendExternalContainer = document.querySelector('#sendExternalContainer')
+    ;
+
+    // ShowHide instance for future dest users
     new ShowHide({
+      debug: false,
       load_event: null,
       froms: [divTransitions],
       container: [futureDestUsersContainer],
-      test: function (divs, arg2, arg3) {
-        for (let div of divs) {
-          for (let input of div.querySelectorAll("input")) {
+      test: function(froms, event) {
+        for (let transition of froms) {
+          for (let input of transition.querySelectorAll('input')) {
             if (input.checked) {
-              if (input.dataset.toFinal === "1") {
+              if ('1' === input.dataset.toFinal) {
+                return false;
+              }
+
+              if ('1' === input.dataset.isSentExternal) {
+                return false;
+              }
+
+              const inputData = JSON.parse(input.getAttribute('data-is-signature'))
+              if (inputData.includes('person') || inputData.includes('user')) {
                 return false;
               } else {
+                personChoice.checked = false
+                userChoice.checked = false
+
                 return true;
               }
             }
           }
         }
-
-        return true;
-      },
+        return false;
+      }
     });
-  }
 
-  let transitionFilterContainer = document.querySelector("#transitionFilter"),
-    transitions = document.querySelector("#transitions");
-  if (null !== transitionFilterContainer) {
-    transitions.querySelectorAll(".form-check").forEach(function (row) {
-      const isForward = row.querySelector("input").dataset.isForward;
-
-      new ShowHide({
-        load_event: null,
-        froms: [transitionFilterContainer],
-        container: row,
-        test: function (containers) {
-          for (let container of containers) {
-            for (let input of container.querySelectorAll("input")) {
-              if (input.checked) {
-                return isForward === input.value;
+    // ShowHide instance for send external
+    new ShowHide({
+      debug: false,
+      load_event: null,
+      froms: [divTransitions],
+      container: [sendExternalContainer],
+      test: function(froms, event) {
+        for (let transition of froms) {
+          for (let input of transition.querySelectorAll('input')) {
+            if (input.checked) {
+              if ('1' === input.dataset.isSentExternal) {
+                return true;
               }
             }
           }
-        },
-        toggle_callback: function (c, dir) {
-          for (let div of c) {
-            let input = div.querySelector("input");
-            if ("hide" === dir) {
-              input.checked = false;
-              input.disabled = true;
-            } else {
-              input.disabled = false;
+        }
+        return false;
+      }
+    })
+
+    // ShowHide signature zone
+    new ShowHide({
+      debug: false,
+      load_event: null,
+      froms: [divTransitions],
+      container: [signatureZone],
+      test: function(froms, event) {
+        for (let transition of froms) {
+          for (let input of transition.querySelectorAll('input')) {
+            if (input.checked) {
+              const inputData = JSON.parse(input.getAttribute('data-is-signature'))
+              if (inputData.includes('person') || inputData.includes('user')) {
+                return true;
+              }
             }
           }
-        },
-      });
+        }
+        return false;
+      }
     });
-  }
+
+    // ShowHides for personSignatureField or userSignatureField within signature zone
+    new ShowHide({
+      debug: false,
+      froms: [signatureTypeChoices],
+      container: [personSignatureField],
+      test: function(froms, event) {
+        for (let container of froms) {
+          return personChoice.checked;
+        }
+        return false;
+      },
+    });
+
+    new ShowHide({
+      debug: false,
+      froms: [signatureTypeChoices],
+      container: [userSignatureField],
+      test: function(froms, event) {
+        for (let container of froms) {
+          return userChoice.checked;
+        }
+        return false;
+      },
+    });
+
+    if (null !== divTransitions) {
+      new ShowHide({
+          load_event: null,
+          froms: [divTransitions],
+          container: [futureDestUsersContainer],
+          test: function(divs, arg2, arg3) {
+            for (let div of divs) {
+                  for (let input of div.querySelectorAll('input')) {
+                      if (input.checked) {
+                          if (input.dataset.toFinal === "1") {
+                              return false;
+                          } else {
+                              return true;
+                          }
+                      }
+                  }
+              }
+
+              return true;
+          },
+      });
+    }
+
+    if (null !== transitionFilterContainer) {
+        transitionsContainer.querySelectorAll('.form-check').forEach(function(row) {
+
+            const isForward = row.querySelector('input').dataset.isForward;
+
+            new ShowHide({
+                load_event: null,
+                froms: [transitionFilterContainer],
+                container: row,
+                test: function (containers) {
+                    for (let container of containers) {
+                        for (let input of container.querySelectorAll('input')) {
+                            if (input.checked) {
+                                return isForward === input.value;
+                            }
+                        }
+                    }
+                    return true;
+                },
+                toggle_callback: function (c, dir) {
+                    for (let div of c) {
+                        let input = div.querySelector('input');
+                        if ('hide' === dir) {
+                            input.checked = false;
+                            input.disabled = true;
+                        } else {
+                            input.disabled = false;
+                        }
+                    }
+                },
+            });
+        });
+    }
 });

src/Bundle/ChillMainBundle/Resources/public/types.ts

@@ -30,6 +30,11 @@ export interface Scope {
     };
 }
 
+export interface ResultItem<T> {
+    result: T;
+    relevance: number;
+}
+
 export interface User {
     type: "user";
     id: number;
@@ -42,15 +47,27 @@ export interface User {
     // todo: mainCenter; mainJob; etc..
 }
 
+export interface UserGroup {
+    type: "user_group";
+    id: number;
+    label: TranslatableString;
+    backgroundColor: string;
+    foregroundColor: string;
+    excludeKey: string;
+    text: string;
+}
+
+export type UserGroupOrUser = User | UserGroup;
+
 export interface UserAssociatedInterface {
     type: "user";
     id: number;
 }
 
-export interface TranslatableString {
+export type TranslatableString = {
     fr?: string;
     nl?: string;
-}
+};
 
 export interface Postcode {
     id: number;
@@ -59,10 +76,10 @@ export interface Postcode {
     center: Point;
 }
 
-export interface Point {
+export type Point = {
     type: "Point";
     coordinates: [lat: number, lon: number];
-}
+};
 
 export interface Country {
     id: number;
@@ -168,3 +185,8 @@ export interface NewsItemType {
     startDate: DateTime;
     endDate: DateTime | null;
 }
+
+export interface WorkflowAvailable {
+    name: string;
+    text: string;
+}

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/MyWorkflowsTable.vue

@@ -17,7 +17,9 @@
         </template>
         <template #tbody>
             <tr v-for="(w, i) in workflows.results" :key="`workflow-${i}`">
-                <td>{{ w.title }}</td>
+                <td>
+                    {{ w.title }}
+                </td>
                 <td>
                     <div class="workflow">
                         <div class="breadcrumb">
@@ -26,6 +28,7 @@
                             />
                             <span class="mx-2">{{ getStep(w) }}</span>
                         </div>
+                        <span v-if="w.isOnHoldAtCurrentStep" class="badge bg-success rounded-pill">{{ $t('on_hold') }}</span>
                     </div>
                 </td>
                 <td v-if="w.datas.persons !== null">

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/js/i18n.js

@@ -1,88 +1,83 @@
 const appMessages = {
-  fr: {
-    main_title: "Vue d'ensemble",
-    my_works: {
-      tab: "Mes actions",
-      description:
-        "Liste des actions d'accompagnement dont je suis référent et qui arrivent à échéance.",
-    },
-    my_evaluations: {
-      tab: "Mes évaluations",
-      description:
-        "Liste des évaluations dont je suis référent et qui arrivent à échéance.",
-    },
-    my_tasks: {
-      tab: "Mes tâches",
-      description_alert:
-        "Liste des tâches auxquelles je suis assigné et dont la date de rappel est dépassée.",
-      description_warning:
-        "Liste des tâches auxquelles je suis assigné et dont la date d'échéance est dépassée.",
-    },
-    my_accompanying_courses: {
-      tab: "Mes nouveaux parcours",
-      description:
-        "Liste des parcours d'accompagnement que l'on vient de m'attribuer depuis moins de 15 jours.",
-    },
-    my_notifications: {
-      tab: "Mes nouvelles notifications",
-      description: "Liste des notifications reçues et non lues.",
-    },
-    my_workflows: {
-      tab: "Mes workflows",
-      description: "Liste des workflows en attente d'une action.",
-      description_cc: "Liste des workflows dont je suis en copie.",
-    },
-    opening_date: "Date d'ouverture",
-    social_issues: "Problématiques sociales",
-    concerned_persons: "Usagers concernés",
-    max_date: "Date d'échéance",
-    warning_date: "Date de rappel",
-    evaluation: "Évaluation",
-    task: "Tâche",
-    Date: "Date",
-    From: "Expéditeur",
-    Subject: "Objet",
-    Entity: "Associé à",
-    Step: "Étape",
-    concerned_users: "Usagers concernés",
-    Object_workflow: "Objet du workflow",
-    show_entity: "Voir {entity}",
-    the_activity: "l'échange",
-    the_course: "le parcours",
-    the_action: "l'action",
-    the_evaluation: "l'évaluation",
-    the_evaluation_document: "le document",
-    the_task: "la tâche",
-    the_workflow: "le workflow",
-    StartDate: "Date d'ouverture",
-    SocialAction: "Action d'accompagnement",
-    no_data: "Aucun résultats",
-    no_dashboard: "Pas de tableaux de bord",
-    counter: {
-      unread_notifications:
-        "{n} notification non lue | {n} notifications non lues",
-      assignated_courses:
-        "{n} parcours récent assigné | {n} parcours récents assignés",
-      assignated_actions: "{n} action assignée | {n} actions assignées",
-      assignated_evaluations:
-        "{n} évaluation assignée | {n} évaluations assignées",
-      alert_tasks: "{n} tâche en rappel | {n} tâches en rappel",
-      warning_tasks: "{n} tâche à échéance | {n} tâches à échéance",
-    },
-    emergency: "Urgent",
-    confidential: "Confidentiel",
-    automatic_notification: "Notification automatique",
-    widget: {
-      news: {
-        title: "Actualités",
-        readMore: "Lire la suite",
-        date: "Date",
-        none: "Aucune actualité",
-      },
-    },
-  },
+    fr: {
+        main_title: "Vue d'ensemble",
+        my_works: {
+            tab: "Mes actions",
+            description: "Liste des actions d'accompagnement dont je suis référent et qui arrivent à échéance.",
+        },
+        my_evaluations: {
+            tab: "Mes évaluations",
+            description: "Liste des évaluations dont je suis référent et qui arrivent à échéance.",
+        },
+        my_tasks: {
+            tab: "Mes tâches",
+            description_alert: "Liste des tâches auxquelles je suis assigné et dont la date de rappel est dépassée.",
+            description_warning: "Liste des tâches auxquelles je suis assigné et dont la date d'échéance est dépassée.",
+        },
+        my_accompanying_courses: {
+            tab: "Mes nouveaux parcours",
+            description: "Liste des parcours d'accompagnement que l'on vient de m'attribuer depuis moins de 15 jours.",
+        },
+        my_notifications: {
+            tab: "Mes nouvelles notifications",
+            description: "Liste des notifications reçues et non lues.",
+        },
+        my_workflows: {
+            tab: "Mes workflows",
+            description: "Liste des workflows en attente d'une action.",
+            description_cc: "Liste des workflows dont je suis en copie."
+        },
+        opening_date: "Date d'ouverture",
+        social_issues: "Problématiques sociales",
+        concerned_persons: "Usagers concernés",
+        max_date: "Date d'échéance",
+        warning_date: "Date de rappel",
+        evaluation: "Évaluation",
+        task: "Tâche",
+        Date: "Date",
+        From: "Expéditeur",
+        Subject: "Objet",
+        Entity: "Associé à",
+        Step: "Étape",
+        concerned_users: "Usagers concernés",
+        Object_workflow: "Objet du workflow",
+        on_hold: "En attente",
+        show_entity: "Voir {entity}",
+        the_activity: "l'échange",
+        the_course: "le parcours",
+        the_action: "l'action",
+        the_evaluation: "l'évaluation",
+        the_evaluation_document: "le document",
+        the_task: "la tâche",
+        the_workflow: "le workflow",
+        StartDate: "Date d'ouverture",
+        SocialAction: "Action d'accompagnement",
+        no_data: "Aucun résultats",
+        no_dashboard: "Pas de tableaux de bord",
+        counter: {
+            unread_notifications: "{n} notification non lue | {n} notifications non lues",
+            assignated_courses: "{n} parcours récent assigné | {n} parcours récents assignés",
+            assignated_actions: "{n} action assignée | {n} actions assignées",
+            assignated_evaluations: "{n} évaluation assignée | {n} évaluations assignées",
+            alert_tasks: "{n} tâche en rappel | {n} tâches en rappel",
+            warning_tasks: "{n} tâche à échéance | {n} tâches à échéance",
+        },
+        emergency: "Urgent",
+        confidential: "Confidentiel",
+        automatic_notification: "Notification automatique",
+        widget: {
+          news: {
+            title: "Actualités",
+            readMore: "Lire la suite",
+            date: "Date",
+            none: "Aucune actualité"
+          }
+        }
+    }
 };
 
 Object.assign(appMessages.fr);
 
-export { appMessages };
+export {
+    appMessages
+};

src/Bundle/ChillMainBundle/Resources/public/vuejs/PickEntity/PickEntity.vue

@@ -1,6 +1,6 @@
 <template>
     <ul :class="listClasses" v-if="picked.length && displayPicked">
-        <li v-for="p in picked" @click="removeEntity(p)" :key="p.type + p.id">
+        <li v-for="p in picked" @click="removeEntity(p)" :key="p.type+p.id">
             <span class="chill_denomination">{{ p.text }}</span>
         </li>
     </ul>
@@ -9,17 +9,16 @@
             <add-persons
                 :options="addPersonsOptions"
                 :key="uniqid"
-                :button-title="translatedListOfTypes"
-                :modal-title="translatedListOfTypes"
+                :buttonTitle="translatedListOfTypes"
+                :modalTitle="translatedListOfTypes"
                 ref="addPersons"
-                @add-new-persons="addNewEntity"
-            />
+                @addNewPersons="addNewEntity"
+            >
+            </add-persons>
         </li>
     </ul>
     <ul class="list-suggest add-items inline">
-        <li v-for="s in suggested" :key="s.id" @click="addNewSuggested(s)">
-            <span>{{ s.text }}</span>
-        </li>
+      <li v-for="s in suggested" :key="s.id" @click="addNewSuggested(s)"><span>{{ s.text }}</span></li>
     </ul>
 </template>
 
@@ -50,91 +49,86 @@ export default {
             default: true,
         },
         displayPicked: {
-            // display picked entities.
-            type: Boolean,
-            default: true,
+          // display picked entities.
+          type: Boolean,
+          default: true,
         },
         suggested: {
-            type: Array,
-            default: [],
+          type: Array,
+          default: []
         },
         label: {
             type: String,
             required: false,
-        },
+        }
     },
-    emits: ["addNewEntity", "removeEntity"],
+    emits: ['addNewEntity', 'removeEntity', 'addNewEntityProcessEnded'],
     components: {
         AddPersons,
     },
     data() {
         return {
-            key: "",
+            key: ''
         };
     },
     computed: {
-        addPersonsOptions() {
-            return {
-                uniq: !this.multiple,
-                type: this.types,
-                priority: null,
-                button: {
-                    size: "btn-sm",
-                    class: "btn-submit",
-                },
-            };
-        },
-        translatedListOfTypes() {
-            if (this.label !== "") {
-                return this.label;
-            }
+      addPersonsOptions() {
+          return {
+              uniq: !this.multiple,
+              type: this.types,
+              priority: null,
+              button: {
+                  size: 'btn-sm',
+                  class: 'btn-submit',
+              },
+          };
+      },
+      translatedListOfTypes() {
+          if (this.label !== '') {
+              return this.label;
+          }
 
-            let trans = [];
-            this.types.forEach((t) => {
-                if (this.$props.multiple) {
-                    trans.push(appMessages.fr.pick_entity[t].toLowerCase());
-                } else {
-                    trans.push(
-                        appMessages.fr.pick_entity[t + "_one"].toLowerCase(),
-                    );
-                }
-            });
+          let trans = [];
+          this.types.forEach(t => {
+              if (this.$props.multiple) {
+                  trans.push(appMessages.fr.pick_entity[t].toLowerCase());
+              } else {
+                  trans.push(appMessages.fr.pick_entity[t + '_one'].toLowerCase());
+              }
+          })
 
-            if (this.$props.multiple) {
-                return (
-                    appMessages.fr.pick_entity.modal_title + trans.join(", ")
-                );
-            } else {
-                return (
-                    appMessages.fr.pick_entity.modal_title_one +
-                    trans.join(", ")
-                );
-            }
-        },
-        listClasses() {
-            return {
-                "list-suggest": true,
-                "remove-items": this.$props.removableIfSet,
-            };
-        },
+          if (this.$props.multiple) {
+              return appMessages.fr.pick_entity.modal_title + trans.join(', ');
+          } else {
+              return appMessages.fr.pick_entity.modal_title_one + trans.join(', ');
+          }
+      },
+      listClasses() {
+          return {
+              'list-suggest': true,
+              'remove-items': this.$props.removableIfSet,
+          };
+      },
     },
     methods: {
-        addNewSuggested(entity) {
-            this.$emit("addNewEntity", { entity: entity });
-        },
-        addNewEntity({ selected, modal }) {
-            selected.forEach((item) => {
-                this.$emit("addNewEntity", { entity: item.result });
-            }, this);
-            this.$refs.addPersons.resetSearch(); // to cast child method
-            modal.showModal = false;
-        },
-        removeEntity(entity) {
-            if (!this.$props.removableIfSet) {
-                return;
-            }
-            this.$emit("removeEntity", { entity: entity });
-        },
+      addNewSuggested(entity) {
+        this.$emit('addNewEntity', {entity: entity});
+      },
+      addNewEntity({ selected, modal }) {
+          selected.forEach((item) => {
+              this.$emit('addNewEntity', { entity: item.result});
+            }, this
+          );
+          this.$refs.addPersons.resetSearch(); // to cast child method
+          modal.showModal = false;
+          this.$emit('addNewEntityProcessEnded');
+      },
+      removeEntity(entity) {
+          if (!this.$props.removableIfSet) {
+              return;
+          }
+          this.$emit('removeEntity',{ entity: entity });
+      }
     },
-};
+}
 </script>

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/UserGroupRenderBox.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import {UserGroup} from "../../../types";
+import {computed} from "vue";
+
+interface UserGroupRenderBoxProps {
+    userGroup: UserGroup;
+}
+
+const props = defineProps<UserGroupRenderBoxProps>();
+
+const styles = computed<{color: string, "background-color": string}>(() => {
+    return {
+        color: props.userGroup.foregroundColor,
+        "background-color": props.userGroup.backgroundColor,
+    }
+});
+
+</script>
+
+<template>
+    <span class="badge-user-group" :style="styles">{{ userGroup.label.fr }}</span>
+</template>
+
+<style scoped lang="scss">
+
+</style>

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

@@ -1,149 +1,140 @@
 <template>
-    <div class="flex-table workflow" id="workflow-list">
-        <div
-            v-for="(w, i) in workflows"
-            :key="`workflow-${i}`"
-            class="item-bloc"
-        >
-            <div>
-                <div class="item-row col">
-                    <h2>{{ w.title }}</h2>
-                    <div class="flex-grow-1 ms-3 h3">
-                        <div class="visually-hidden">
-                            {{ w.relatedEntityClass }}
-                            {{ w.relatedEntityId }}
-                        </div>
-                    </div>
-                </div>
+   <div class="flex-table workflow" id="workflow-list">
+      <div v-for="(w, i) in workflows" :key="`workflow-${i}`"
+         class="item-bloc">
 
-                <div class="breadcrumb">
-                    <template v-for="(step, j) in w.steps" :key="`step-${j}`">
-                        <span
-                            class="mx-2"
-                            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.name === 'initial'"
-                                class="fa fa-circle me-1 text-chill-yellow"
-                            />
-                            <i
-                                v-if="step.isFreezed"
-                                class="fa fa-snowflake-o fa-sm me-1"
-                            />
-                            {{ step.currentStep.text }}
-                        </span>
-                        <span v-if="j !== Object.keys(w.steps).length - 1">
-                            →
-                        </span>
-                    </template>
-                </div>
+         <div>
+            <div class="item-row col">
+               <h2>{{ w.title }}</h2>
+                <div class="flex-grow-1 ms-3 h3">
+                  <div class="visually-hidden">
+                     {{ w.relatedEntityClass }}
+                     {{ w.relatedEntityId }}
+                  </div>
+               </div>
             </div>
 
-            <div class="item-row">
-                <div class="item-col flex-grow-1">
-                    <p v-if="isUserSubscribedToStep(w)">
-                        <i class="fa fa-check fa-fw" />
-                        {{ $t("you_subscribed_to_all_steps") }}
-                    </p>
-                    <p v-if="isUserSubscribedToFinal(w)">
-                        <i class="fa fa-check fa-fw" />
-                        {{ $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')"
-                            />
-                        </li>
-                    </ul>
-                </div>
+            <div class="breadcrumb">
+               <template v-for="(step, j) in w.steps" :key="`step-${j}`">
+                  <span class="mx-2"
+                     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.name === '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>
-    </div>
+            <span v-if="w.isOnHoldAtCurrentStep" class="badge bg-success rounded-pill">{{ $t('on_hold') }}</span>
+         </div>
+
+         <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>
 </template>
 
 <script>
-import Popover from "bootstrap/js/src/popover";
+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",
-        },
-    },
-};
+   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",
+         on_hold: "En attente"
+      }
+   }
+}
 
 export default {
-    name: "ListWorkflow",
-    i18n: i18n,
-    props: {
-        workflows: {
-            type: Array,
-            required: true,
-        },
-    },
-    methods: {
-        goToUrl(w) {
-            return `/fr/main/workflow/${w.id}/show`;
-        },
-        getPopTitle(step) {
-            if (step.transitionPrevious != null) {
-                //console.log(step.transitionPrevious.text);
-                let freezed = step.isFreezed
-                    ? `<i class="fa fa-snowflake-o fa-sm me-1"></i>`
-                    : ``;
-                return `${freezed}${step.transitionPrevious.text}`;
-            }
-        },
-        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>${this.formatDate(step.transitionPreviousAt.datetime)}</b></li>
-              </ul>`;
-            }
-        },
-        formatDate(datetime) {
-            return (
-                datetime.split("T")[0] +
-                " " +
-                datetime.split("T")[1].substring(0, 5)
-            );
-        },
-        isUserSubscribedToStep() {
-            // todo
-            return false;
-        },
-        isUserSubscribedToFinal() {
-            // 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,
-            });
-        });
-    },
-};
+   name: "ListWorkflow",
+   i18n: i18n,
+   props: {
+      workflows: {
+         type: Array,
+         required: true,
+      }
+   },
+   methods: {
+      goToUrl(w) {
+         return `/fr/main/workflow/${w.id}/show`;
+      },
+      getPopTitle(step) {
+         if (step.transitionPrevious != null) {
+            //console.log(step.transitionPrevious.text);
+            let freezed = step.isFreezed ? `<i class="fa fa-snowflake-o fa-sm me-1"></i>` : ``;
+            return `${freezed}${step.transitionPrevious.text}`;
+         }
+      },
+      getPopContent(step) {
+         if (step.transitionPrevious != null) {
+             if (step.transitionPreviousBy !== 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>${this.formatDate(step.transitionPreviousAt.datetime)}</b></li>
+                      </ul>`
+                     ;
+             } else {
+                 return `<ul class="small_in_title">
+                      <li><span class="item-key">${i18n.messages.fr.at} : </span><b>${this.formatDate(step.transitionPreviousAt.datetime)}</b></li>
+                      </ul>`
+             }
+         }
+      },
+      formatDate(datetime) {
+         return datetime.split('T')[0] +' '+ datetime.split('T')[1].substring(0,5)
+      },
+      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,
+         });
+      });
+   }
+}
 </script>

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

@@ -1,140 +1,126 @@
 <template>
-    <button v-if="hasWorkflow" class="btn btn-primary" @click="openModal">
-        <b>{{ countWorkflows }}</b>
-        <template v-if="countWorkflows > 1">
-            {{ $t("workflows") }}
-        </template>
-        <template v-else>
-            {{ $t("workflow") }}
-        </template>
-    </button>
+   <pick-workflow
+      :relatedEntityClass="this.relatedEntityClass"
+      :relatedEntityId="this.relatedEntityId"
+      :workflowsAvailables="workflowsAvailables"
+      :preventDefaultMoveToGenerate="this.$props.preventDefaultMoveToGenerate"
+      :goToGenerateWorkflowPayload="this.goToGenerateWorkflowPayload"
+      :countExistingWorkflows="countWorkflows"
+      @go-to-generate-workflow="goToGenerateWorkflow"
+      @click-open-list="openModal"
+   ></pick-workflow>
 
-    <pick-workflow
-        v-else-if="allowCreate"
-        :related-entity-class="this.relatedEntityClass"
-        :related-entity-id="this.relatedEntityId"
-        :workflows-availables="workflowsAvailables"
-        :prevent-default-move-to-generate="
-            this.$props.preventDefaultMoveToGenerate
-        "
-        :go-to-generate-workflow-payload="this.goToGenerateWorkflowPayload"
-        @go-to-generate-workflow="goToGenerateWorkflow"
-    />
+   <teleport to="body">
+      <modal v-if="modal.showModal"
+         :modalDialogClass="modal.modalDialogClass"
+         @close="modal.showModal = false">
 
-    <teleport to="body">
-        <modal
-            v-if="modal.showModal"
-            :modal-dialog-class="modal.modalDialogClass"
-            @close="modal.showModal = false"
-        >
-            <template #header>
-                <h2 class="modal-title">
-                    {{ $t("workflow_list") }}
-                </h2>
-            </template>
+         <template v-slot:header>
+            <h2 class="modal-title">{{ $t('workflow_list') }}</h2>
+         </template>
 
-            <template #body>
-                <list-workflow-vue :workflows="workflows" />
-            </template>
+         <template v-slot:body>
+            <list-workflow-vue
+               :workflows="workflows"
+            ></list-workflow-vue>
+         </template>
 
-            <template #footer>
-                <pick-workflow
-                    v-if="allowCreate"
-                    :related-entity-class="this.relatedEntityClass"
-                    :related-entity-id="this.relatedEntityId"
-                    :workflows-availables="workflowsAvailables"
-                    :prevent-default-move-to-generate="
-                        this.$props.preventDefaultMoveToGenerate
-                    "
-                    :go-to-generate-workflow-payload="
-                        this.goToGenerateWorkflowPayload
-                    "
-                    @go-to-generate-workflow="this.goToGenerateWorkflow"
-                />
-            </template>
-        </modal>
-    </teleport>
+         <template v-slot:footer>
+            <pick-workflow v-if="allowCreate"
+               :relatedEntityClass="this.relatedEntityClass"
+               :relatedEntityId="this.relatedEntityId"
+               :workflowsAvailables="workflowsAvailables"
+               :preventDefaultMoveToGenerate="this.$props.preventDefaultMoveToGenerate"
+               :goToGenerateWorkflowPayload="this.goToGenerateWorkflowPayload"
+               :countExistingWorkflows="countWorkflows"
+               :embedded-within-list-modal="true"
+               @go-to-generate-workflow="this.goToGenerateWorkflow"
+            ></pick-workflow>
+         </template>
+
+      </modal>
+   </teleport>
 </template>
 
 <script>
-import Modal from "ChillMainAssets/vuejs/_components/Modal";
-import PickWorkflow from "ChillMainAssets/vuejs/_components/EntityWorkflow/PickWorkflow.vue";
-import ListWorkflowVue from "ChillMainAssets/vuejs/_components/EntityWorkflow/ListWorkflow.vue";
+import Modal from 'ChillMainAssets/vuejs/_components/Modal';
+import PickWorkflow from 'ChillMainAssets/vuejs/_components/EntityWorkflow/PickWorkflow.vue';
+import ListWorkflowVue from 'ChillMainAssets/vuejs/_components/EntityWorkflow/ListWorkflow.vue';
 
 export default {
-    name: "ListWorkflowModal",
-    components: {
-        Modal,
-        PickWorkflow,
-        ListWorkflowVue,
-    },
-    emits: ["goToGenerateWorkflow"],
-    props: {
-        workflows: {
-            type: Array,
-            required: true,
-        },
-        allowCreate: {
-            type: Boolean,
-            required: true,
-        },
-        relatedEntityClass: {
-            type: String,
-            required: true,
-        },
-        relatedEntityId: {
-            type: Number,
-            required: false,
-        },
-        workflowsAvailables: {
-            type: Array,
-            required: true,
-        },
-        preventDefaultMoveToGenerate: {
-            type: Boolean,
-            required: false,
-            default: false,
-        },
-        goToGenerateWorkflowPayload: {
-            required: false,
-            default: {},
-        },
-    },
+   name: "ListWorkflowModal",
+   components: {
+      Modal,
+      PickWorkflow,
+      ListWorkflowVue
+   },
+   emits: ['goToGenerateWorkflow'],
+   props: {
+      workflows: {
+         type: Array,
+         required: true,
+      },
+      allowCreate: {
+         type: Boolean,
+         required: true,
+      },
+      relatedEntityClass: {
+         type: String,
+         required: true,
+      },
+      relatedEntityId: {
+         type: Number,
+         required: false,
+      },
+      workflowsAvailables: {
+         type: Array,
+         required: true,
+      },
+      preventDefaultMoveToGenerate: {
+          type: Boolean,
+          required: false,
+          default: false,
+      },
+      goToGenerateWorkflowPayload: {
+         required: false,
+         default: {}
+      },
+   },
     data() {
-        return {
-            modal: {
-                showModal: false,
-                modalDialogClass: "modal-dialog-scrollable modal-xl",
-            },
-        };
-    },
-    computed: {
-        countWorkflows() {
-            return this.workflows.length;
-        },
-        hasWorkflow() {
-            return this.countWorkflows > 0;
-        },
-    },
-    methods: {
-        openModal() {
-            this.modal.showModal = true;
-        },
-        goToGenerateWorkflow(data) {
-            console.log("go to generate workflow intercepted", data);
-            this.$emit("goToGenerateWorkflow", data);
-        },
-    },
-    i18n: {
-        messages: {
-            fr: {
-                workflow_list: "Liste des workflows associés",
-                workflow: " workflow associé",
-                workflows: " workflows associés",
-            },
-        },
-    },
-};
+      return {
+         modal: {
+            showModal: false,
+            modalDialogClass: "modal-dialog-scrollable modal-xl"
+         },
+      }
+   },
+   computed: {
+      countWorkflows() {
+         return this.workflows.length;
+      },
+      hasWorkflow() {
+         return this.countWorkflows > 0;
+      }
+   },
+   methods: {
+      openModal() {
+         this.modal.showModal = true;
+      },
+      goToGenerateWorkflow(data) {
+          console.log('go to generate workflow intercepted', data);
+          this.$emit('goToGenerateWorkflow', data);
+      }
+   },
+   i18n: {
+      messages: {
+         fr: {
+            workflow_list: "Liste des workflows associés",
+            workflow: " workflow associé",
+            workflows: " workflows associés",
+         }
+      }
+   }
+}
 </script>
 
 <style scoped></style>

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

@@ -1,83 +1,107 @@
 <template>
-    <template v-if="workflowsAvailables.length >= 1">
-        <div class="dropdown d-grid gap-2">
-            <button
-                class="btn btn-primary dropdown-toggle"
-                type="button"
-                id="createWorkflowButton"
-                data-bs-toggle="dropdown"
-                aria-expanded="false"
-            >
+    <template v-if="props.workflowsAvailables.length >= 1">
+        <div v-if="countExistingWorkflows == 0 || embeddedWithinListModal" class="dropdown d-grid gap-2">
+            <button class="btn btn-primary dropdown-toggle" type="button" id="createWorkflowButton" data-bs-toggle="dropdown" aria-expanded="false">
                 Créer un workflow
             </button>
             <ul class="dropdown-menu" aria-labelledby="createWorkflowButton">
-                <li v-for="w in workflowsAvailables" :key="w.name">
-                    <a
-                        class="dropdown-item"
-                        :href="makeLink(w.name)"
-                        @click.prevent="goToGenerateWorkflow($event, w.name)"
-                        >{{ w.text }}</a
-                    >
+                <li v-for="w in props.workflowsAvailables" :key="w.name">
+                    <button class="dropdown-item" type="button" @click.prevent="goToGenerateWorkflow($event, w.name)">{{ w.text }}</button>
                 </li>
             </ul>
         </div>
+        <div v-else>
+            <div class="btn-group">
+                <button @click="emit('clickOpenList')" class="btn btn-primary">
+                    <template v-if="countExistingWorkflows === 1">
+                        1 workflow associé
+                    </template>
+                    <template v-else>
+                        {{ countExistingWorkflows }} workflows associés
+                    </template>
+                </button>
+                <button class="btn btn-primary dropdown-toggle dropdown-toggle-split" type="button" id="createWorkflowButton" data-bs-toggle="dropdown" aria-expanded="false">
+                    <span class="visually-hidden">Liste des workflows disponibles</span>
+                </button>
+                <ul class="dropdown-menu" aria-labelledby="createWorkflowButton">
+                    <li v-for="w in props.workflowsAvailables" :key="w.name">
+                        <button class="dropdown-item" type="button" @click.prevent="goToGenerateWorkflow($event, w.name)">{{ w.text }}</button>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </template>
+    <template v-else>
+        <div v-if="countExistingWorkflows > 0" class="dropdown d-grid gap-2">
+            <button @click="emit('clickOpenList')" class="btn btn-primary" type="button" id="createWorkflowButton" data-bs-toggle="dropdown" aria-expanded="false">
+                <template v-if="countExistingWorkflows === 1">
+                    1 workflow associé
+                </template>
+                <template v-else>
+                    {{ countExistingWorkflows }} workflows associés
+                </template>
+            </button>
+        </div>
     </template>
 </template>
 
-<script>
-import { buildLinkCreate } from "ChillMainAssets/lib/entity-workflow/api.js";
+<script setup lang="ts">
 
-export default {
-    name: "PickWorkflow",
-    props: {
-        relatedEntityClass: {
-            type: String,
-            required: true,
-        },
-        relatedEntityId: {
-            type: Number,
-            required: false,
-        },
-        workflowsAvailables: {
-            type: Array,
-            required: true,
-        },
-        preventDefaultMoveToGenerate: {
-            type: Boolean,
-            required: false,
-            default: false,
-        },
-        goToGenerateWorkflowPayload: {
-            required: false,
-            default: {},
-        },
-    },
-    emits: ["goToGenerateWorkflow"],
-    methods: {
-        makeLink(workflowName) {
-            return buildLinkCreate(
-                workflowName,
-                this.relatedEntityClass,
-                this.relatedEntityId,
-            );
-        },
-        goToGenerateWorkflow(event, workflowName) {
-            console.log("goToGenerateWorkflow", event, workflowName);
+import {buildLinkCreate} from '../../../lib/entity-workflow/api';
+import {WorkflowAvailable} from "../../../types";
 
-            if (!this.$props.preventDefaultMoveToGenerate) {
-                console.log("to go generate");
-                window.location.assign(this.makeLink(workflowName));
-            }
+interface PickWorkflowConfig {
+    relatedEntityClass: string;
+    /**
+     * Represents the identifier of a related entity.
+     * This variable can store either a numerical value representing the entity's ID or an undefined value
+     * if the related entity is not specified or available, for instance when the entity is created within
+     * the interface and the id will be available later
+     */
+    relatedEntityId: number|undefined;
+    workflowsAvailables: WorkflowAvailable[];
+    preventDefaultMoveToGenerate: boolean;
+    goToGenerateWorkflowPayload: object;
+    countExistingWorkflows: number;
+    /**
+     * if true, this button will not present a splitted button
+     */
+    embeddedWithinListModal: boolean;
+}
 
-            this.$emit("goToGenerateWorkflow", {
-                event,
-                workflowName,
-                link: this.makeLink(workflowName),
-                payload: this.goToGenerateWorkflowPayload,
-            });
-        },
-    },
-};
+const props = withDefaults(defineProps<PickWorkflowConfig>(), {preventDefaultMoveToGenerate: false, goToGenerateWorkflowPayload: {}, allowCreateWorkflow: false});
+
+const emit = defineEmits<{
+    (e: 'goToGenerateWorkflow', {event: MouseEvent, workflowName: string, isLinkValid: boolean, link: string, payload: object}): void;
+    (e: 'clickOpenList'): void;
+}>();
+
+const makeLink = (workflowName: string): string => buildLinkCreate(workflowName, props.relatedEntityClass, props.relatedEntityId);
+
+const goToGenerateWorkflow = (event: MouseEvent, workflowName: string): void  => {
+    console.log('goToGenerateWorkflow', event, workflowName);
+    let link = '';
+    let isLinkValid = false;
+
+    try {
+        link = makeLink(workflowName);
+        isLinkValid = true;
+    } catch (e) {
+        console.info("could not generate link to create workflow, maybe the relatedEntityId is not yet known", e);
+    }
+
+    if (!props.preventDefaultMoveToGenerate) {
+        window.location.assign(link);
+    }
+
+    emit('goToGenerateWorkflow', {event, workflowName, link, isLinkValid, payload: props.goToGenerateWorkflowPayload});
+}
+
+const goToDuplicateRelatedEntity = (event: MouseEvent, workflowName: string): void => {
+
+}
 </script>
 
-<style scoped></style>
+<style scoped>
+
+</style>

src/Bundle/ChillMainBundle/Resources/views/Dev/dev.assets.html.twig

@@ -300,7 +300,96 @@
         </ul>
     </div>
 
+    <h3><code>slim</code></h3>
+
+    <p>Ajouter <code>slim</code> enlève la marge inférieure. Permet un meilleur alignement horizontal dans une <code>row</code></p>
+
+    <div class="container">
+        <div class="row row-hover">
+            <div class="col-8">
+                Some text, ul_record_actions sans slim
+            </div>
+            <div class="col-4">
+                <ul class="record_actions">
+                    <li><button class="btn">Some action</button></li>
+                </ul>
+            </div>
+        </div>
+        <div class="row row-hover">
+            <div class="col-8">
+                Some text, ul_record_actions avec slim
+            </div>
+            <div class="col-4">
+                <ul class="record_actions slim">
+                    <li><button class="btn">Some action</button></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+
+
+
 <xmp><a class="btn btn-submit">Text</a></xmp>
 Toutes les classes btn-* de bootstrap sont fonctionnelles
+
+    <h2>Hover</h2>
+
+    <p>Ajouter <code>.row-hover</code> sur une class <code>.row</code> provoque un changement de background au survol</p>
+
+    <div class="container">
+        <div class="row row-hover align-items-center">
+            <div class="col-sm-12 col-md-8">
+                <span class="onthefly-container" data-target-name="person" data-target-id="329" data-action="show" data-button-text="Fatoumata Binta DIALLO (33 ans)" data-display-badge="true" data-v-app=""><a data-v-0c1a1125=""><span data-v-0c1a1125="" class="chill-entity entity-person badge-person">Fatoumata Binta DIALLO (33 ans)<!--v-if--></span></a><!--teleport start--><!--teleport end--></span>
+            </div>
+            <div class="col-sm-12 col-md-4">
+                <span class="text-end">A signé le 04/09/2024 à 13:55</span>
+            </div>
+        </div>
+        <div class="row row-hover align-items-center">
+            <div class="col-sm-12 col-md-8">
+                <span class="onthefly-container" data-target-name="person" data-target-id="330" data-action="show" data-button-text="Abdoulaye DIALLO (9 ans)" data-display-badge="true" data-v-app=""><a data-v-0c1a1125=""><span data-v-0c1a1125="" class="chill-entity entity-person badge-person">Abdoulaye DIALLO (9 ans)<!--v-if--></span></a><!--teleport start--><!--teleport end--></span>
+            </div>
+            <div class="col-sm-12 col-md-4">
+                <ul class="record_actions">
+                    <li>
+                        <a class="btn btn-misc" href="/fr/main/workflow/signature/6/metadata?returnPath=/fr/main/workflow/15/show"><i class="fa fa-pencil-square-o"></i> Signer</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <div class="row row-hover align-items-center">
+            <div class="col-sm-12 col-md-8">
+                <span class="onthefly-container" data-target-name="person" data-target-id="332" data-action="show" data-button-text="Mohamed DIALLO (44 ans)" data-display-badge="true" data-v-app=""><a data-v-0c1a1125=""><span data-v-0c1a1125="" class="chill-entity entity-person badge-person">Mohamed DIALLO (44 ans)<!--v-if--></span></a><!--teleport start--><!--teleport end--></span>
+            </div>
+            <div class="col-sm-12 col-md-4">
+                <span class="text-end">A signé le 04/09/2024 à 13:57</span>
+            </div>
+        </div>
+        <div class="row row-hover align-items-center">
+            <div class="col-sm-12 col-md-8">
+                <span class="onthefly-container" data-target-name="person" data-target-id="333" data-action="show" data-button-text="Fatou DIALLO (37 ans)" data-display-badge="true" data-v-app=""><a data-v-0c1a1125=""><span data-v-0c1a1125="" class="chill-entity entity-person badge-person">Fatou DIALLO (37 ans)<!--v-if--></span></a><!--teleport start--><!--teleport end--></span>
+            </div>
+            <div class="col-sm-12 col-md-4">
+                <ul class="record_actions">
+                    <li>
+                        <a class="btn btn-misc" href="/fr/main/workflow/signature/8/metadata?returnPath=/fr/main/workflow/15/show"><i class="fa fa-pencil-square-o"></i> Signer</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <div class="row row-hover align-items-center">
+            <div class="col-sm-12 col-md-8">
+                <span class="onthefly-container" data-target-name="person" data-target-id="334" data-action="show" data-button-text="Fanta DIALLO (7 ans)" data-display-badge="true" data-v-app=""><a data-v-0c1a1125=""><span data-v-0c1a1125="" class="chill-entity entity-person badge-person">Fanta DIALLO (7 ans)<!--v-if--></span></a><!--teleport start--><!--teleport end--></span>
+            </div>
+            <div class="col-sm-12 col-md-4">
+                <ul class="record_actions">
+                    <li>
+                        <a class="btn btn-misc" href="/fr/main/workflow/signature/9/metadata?returnPath=/fr/main/workflow/15/show"><i class="fa fa-pencil-square-o"></i> Signer</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
 </div>
+
 {% endblock %}

src/Bundle/ChillMainBundle/Resources/views/Dev/swagger-ui/index.html.twig

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="SwaggerUI" />
+    <title>SwaggerUI</title>
+    <link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist@5.11.0/swagger-ui.css" />
+</head>
+<body>
+<div id="swagger-ui"></div>
+<script src="https://unpkg.com/swagger-ui-dist@5.11.0/swagger-ui-bundle.js" crossorigin></script>
+<script>
+    window.onload = () => {
+        window.ui = SwaggerUIBundle({
+            url: '/_dev/specs.yaml',
+            dom_id: '#swagger-ui',
+        });
+    };
+</script>
+</body>
+</html>

src/Bundle/ChillMainBundle/Resources/views/Entity/user_group.html.twig

@@ -0,0 +1 @@
+<span class="badge-user-group" style="color: {{ user_group.foregroundColor }}; background-color: {{  user_group.backgroundColor }};">{{ user_group.label|localize_translatable_string }}</span>

src/Bundle/ChillMainBundle/Resources/views/Form/fields.html.twig

@@ -163,6 +163,7 @@
     <div class="chill-collection">
         <ul class="list-entry"
             {{ form.vars.js_caller }}="{{ form.vars.js_caller }}"
+            data-uniqid="{{ form.vars.uniqid|escape('html_attr') }}"
             data-collection-name="{{ form.vars.name|escape('html_attr') }}"
             data-collection-identifier="{{ form.vars.identifier|escape('html_attr') }}"
             data-collection-button-remove-label="{{ form.vars.button_remove_label|trans|e }}"
@@ -184,6 +185,8 @@
 
         {% if form.vars.allow_add == 1 %}
         <button class="add-entry btn btn-misc"
+            type="button"
+            data-uniqid="{{ form.vars.uniqid|escape('html_attr') }}"
             data-collection-add-target="{{ form.vars.name|escape('html_attr') }}"
             data-form-prototype="{{ ('<div>' ~ form_widget(form.vars.prototype) ~ '</div>')|escape('html_attr') }}" >
             <i class="fa fa-plus fa-fw"></i>

src/Bundle/ChillMainBundle/Resources/views/Layout/_header.html.twig

@@ -60,7 +60,7 @@
                                     data-bs-toggle="dropdown"
                                     aria-haspopup="true"
                                     aria-expanded="false">
-                                    <a href="#" class="more">{{ app.request.locale | capitalize }}</a>
+                                    {{ app.request.locale | capitalize }}
                                 </a>
                                 <div class="dropdown-menu dropdown-menu-end"
                                     aria-labelledby="menu-languages">

src/Bundle/ChillMainBundle/Resources/views/UserGroup/edit.html.twig

@@ -0,0 +1,21 @@
+{% extends '@ChillMain/CRUD/Admin/index.html.twig' %}
+
+{% block css %}
+    {{ parent() }}
+    {{ encore_entry_link_tags('mod_pickentity_type') }}
+{% endblock %}
+
+{% block js %}
+    {{ parent() }}
+    {{ encore_entry_script_tags('mod_pickentity_type') }}
+{% endblock %}
+
+{% block title %}
+    {% include('@ChillMain/CRUD/_edit_title.html.twig') %}
+{% endblock %}
+
+{% block admin_content %}
+    {% embed '@ChillMain/CRUD/_edit_content.html.twig' %}
+        {% block content_form_actions_save_and_show %}{% endblock %}
+    {% endembed %}
+{% endblock admin_content %}

src/Bundle/ChillMainBundle/Resources/views/UserGroup/index.html.twig

@@ -0,0 +1,86 @@
+{% extends '@ChillMain/CRUD/Admin/index.html.twig' %}
+
+{% block admin_content %}
+    {% embed '@ChillMain/CRUD/_index.html.twig' %}
+
+        {% block table_entities %}
+            <div class="flex-table">
+                {% for entity in entities %}
+                    <div class="item-bloc">
+                        <div class="item-row">
+                            <div class="wrap-header">
+                                <div class="wh-row">
+                                    <div class="wh-col">
+                                        {{ entity|chill_entity_render_box }}
+                                    </div>
+                                    <div class="wh-col">
+                                        {%- if not entity.active -%}
+                                            <div>
+                                                <span class="badge bg-danger">{{ 'user_group.inactive'|trans }}</span>
+                                            </div>&nbsp;
+                                        {%- endif -%}
+                                        <div>{{ 'user_group.with_count_users'|trans({'count': entity.users|length}) }}</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="item-row separator">
+                            <div class="wrap-list">
+                                <div class="wl-row">
+                                    <div class="wl-col title">
+                                        <strong>{{ 'user_group.with_users'|trans }}</strong>
+                                    </div>
+                                    <div class="wl-col list">
+                                        {% for user in entity.userListByLabelAscending %}
+                                            <p class="wl-item">
+                                            <span class="badge-user">
+                                                {{ user|chill_entity_render_box }}
+                                            </span>
+                                            </p>
+                                        {% else %}
+                                            <p class="wl-item chill-no-data-statement">{{ 'user_group.no_users'|trans }}</p>
+                                        {% endfor %}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="item-row separator">
+                            <div class="wrap-list">
+                                <div class="wl-row">
+                                    <div class="wl-col title">
+                                        <strong>{{ 'user_group.adminUsers'|trans }}</strong>
+                                    </div>
+                                    <div class="wl-col list">
+                                        {% for user in entity.adminUserListByLabelAscending %}
+                                            <p class="wl-item">
+                                            <span class="badge-user">
+                                                {{ user|chill_entity_render_box }}
+                                            </span>
+                                            </p>
+                                        {% else %}
+                                            <p class="wl-item chill-no-data-statement">{{ 'user_group.no_admin_users'|trans }}</p>
+                                        {% endfor %}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="item-row separator">
+                            <ul class="record_actions slim">
+                                <li>
+                                    <a href="{{ chill_path_add_return_path('chill_crud_admin_user_group_edit', {'id': entity.id}) }}" class="btn btn-edit"></a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                {% endfor %}
+            </div>
+        {% endblock %}
+
+        {% block actions_before %}
+            <li class='cancel'>
+                <a href="{{ path('chill_main_admin_central') }}" class="btn btn-cancel">{{'Back to the admin'|trans }}</a>
+            </li>
+        {% endblock %}
+
+    {% endembed %}
+{% endblock %}

src/Bundle/ChillMainBundle/Resources/views/UserGroup/my_user_groups.html.twig

@@ -0,0 +1,160 @@
+{% extends '@ChillMain/layout.html.twig' %}
+
+{% block css %}
+    {{ parent() }}
+    {{ encore_entry_link_tags('mod_pickentity_type') }}
+
+    <style type="text/css">
+        form.remove {
+            display: inline-block;
+            padding: 1px;
+            border: 1px solid transparent;
+            border-radius: 4px;
+        }
+        form:hover {
+            animation-duration: 0.5s;
+            animation-name: onHover;
+            animation-iteration-count: 1;
+            border: 1px solid #dee2e6;
+            border-radius: 4px;
+        }
+        form.remove button.remove {
+            display: inline;
+            background-color: unset;
+            border: none;
+            color: var(--bs-chill-red);
+        }
+
+        @keyframes onHover {
+           from {
+               border: 1px solid transparent;
+           }
+           to {
+               border: 1px solid #dee2e6;
+           }
+        }
+    </style>
+{% endblock %}
+
+{% block js %}
+    {{ parent() }}
+    {{ encore_entry_script_tags('mod_pickentity_type') }}
+{% endblock %}
+
+{% block title 'user_group.my_groups'|trans %}
+
+{% block content %}
+    <h1>{{ block('title') }}</h1>
+
+    {% if paginator.totalItems == 0 %}
+        <p>{{ 'user_group.no_user_groups'|trans }}</p>
+    {% else %}
+        <div class="flex-table">
+            {% for entity in groups %}
+                <div class="item-bloc">
+                    <div class="item-row">
+                        <div class="wrap-header">
+                            <div class="wh-row">
+                                <div class="wh-col">
+                                    {{ entity|chill_entity_render_box }}
+                                </div>
+                                <div class="wh-col">
+                                    {%- if not entity.active -%}
+                                        <div>
+                                            <span class="badge bg-danger">{{ 'user_group.inactive'|trans }}</span>
+                                        </div>&nbsp;
+                                    {%- endif -%}
+                                    <div>{{ 'user_group.with_count_users'|trans({'count': entity.users|length}) }}</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="item-row separator">
+                        <div class="wrap-list">
+                            <div class="wl-row">
+                                <div class="wl-col title">
+                                    <strong>{{ 'user_group.with_users'|trans }}</strong>
+                                </div>
+                                <div class="wl-col list">
+                                    {% if entity.users.contains(app.user) %}
+                                        {% if is_granted('CHILL_MAIN_USER_GROUP_APPEND_TO_GROUP', entity) %}
+                                            <form class="remove" method="POST" action="{{ chill_path_add_return_path('chill_main_user_groups_remove_user', {'id': entity.id, 'userId': app.user.id}) }}">
+                                                <p class="wl-item">
+                                                    {{ 'user_group.me'|trans }}
+                                                    <button class="remove" type="submit"><i class="fa fa-times"></i></button>
+                                                </p>
+                                            </form>
+                                        {% else %}
+                                            <p class="wl-item">
+                                                {% if entity.users|length > 1 %}{{ 'user_group.me_and'|trans }}{% else %}{{ 'user_group.me_only'|trans }}{% endif %}
+                                            </p>
+                                        {% endif %}
+                                    {% endif %}
+                                    {% for user in entity.userListByLabelAscending %}
+                                        {% if user is not same as app.user %}
+                                            {% if is_granted('CHILL_MAIN_USER_GROUP_APPEND_TO_GROUP', entity) %}
+                                                <form class="remove" method="POST" action="{{ chill_path_add_return_path('chill_main_user_groups_remove_user', {'id': entity.id, 'userId': user.id}) }}">
+                                                    <p class="wl-item">
+                                                        <span class="badge-user">
+                                                            {{ user|chill_entity_render_box }}
+                                                        </span>
+                                                        <button class="remove" type="submit"><i class="fa fa-times"></i></button>
+                                                    </p>
+                                                </form>
+                                            {% else %}
+                                                <p class="wl-item">
+                                                    <span class="badge-user">
+                                                        {{ user|chill_entity_render_box }}
+                                                    </span>
+                                                </p>
+                                            {% endif %}
+                                        {% endif %}
+                                    {% endfor %}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    {% if entity.adminUsers|length > 0 %}
+                        <div class="item-row separator">
+                            <div class="wrap-list">
+                                <div class="wl-row">
+                                    <div class="wl-col title">
+                                        <strong>{{ 'user_group.adminUsers'|trans }}</strong>
+                                    </div>
+                                    <div class="wl-col list">
+                                        {% if entity.adminUsers.contains(app.user) %}
+                                            <p class="wl-item">{% if entity.adminUsers|length > 1 %}{{ 'user_group.me_and'|trans }}{% else %}{{ 'user_group.me_only'|trans }}{% endif %}</p>
+                                        {% endif %}
+                                        {% for user in entity.adminUserListByLabelAscending %}
+                                            {% if user is not same as app.user %}
+                                                <p class="wl-item">
+                                                    <span class="badge-user">
+                                                        {{ user|chill_entity_render_box }}
+                                                    </span>
+                                                </p>
+                                            {% endif %}
+                                        {% endfor %}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    {% endif -%}
+                    {%- set form = forms.offsetGet(entity) %}
+                    {%- if form is not null -%}
+                        <div class="item-row separator">
+                            <ul class="record_actions slim">
+                                <li>
+                                    {{- form_start(form) -}}
+                                    {{- form_widget(form.users) -}}
+                                    {{- form_end(form) -}}
+                                </li>
+                            </ul>
+                        </div>
+                    {%- endif %}
+                </div>
+            {% endfor %}
+        </div>
+
+        {{ chill_pagination(paginator) }}
+    {% endif %}
+{% endblock %}

src/Bundle/ChillMainBundle/Resources/views/UserGroup/new.html.twig

@@ -0,0 +1,21 @@
+{% extends '@ChillMain/CRUD/Admin/index.html.twig' %}
+
+{% block css %}
+    {{ parent() }}
+    {{ encore_entry_link_tags('mod_pickentity_type') }}
+{% endblock %}
+
+{% block js %}
+    {{ parent() }}
+    {{ encore_entry_script_tags('mod_pickentity_type') }}
+{% endblock %}
+
+{% block title %}
+    {% include('@ChillMain/CRUD/_new_title.html.twig') %}
+{% endblock %}
+
+{% block admin_content %}
+    {% embed '@ChillMain/CRUD/_new_content.html.twig' %}
+        {% block content_form_actions_save_and_show %}{% endblock %}
+    {% endembed %}
+{% endblock admin_content %}

src/Bundle/ChillMainBundle/Resources/views/Workflow/_decision.html.twig

@@ -6,7 +6,7 @@
     {{ form_errors(transition_form) }}
 
     {% set step = entity_workflow.currentStepChained %}
-    {% set labels = workflow_metadata(entity_workflow, 'label', step.currentStep) %}
+    {% set labels = workflow_metadata(entity_workflow, 'label', step.currentStep, entity_workflow.workflowName) %}
     {% set label = labels is null ? step.currentStep : labels|localize_translatable_string %}
 
     <div class="card">
@@ -58,24 +58,57 @@
         {{ form_row(transition_form.transition) }}
     </div>
 
-    {% if transition_form.freezeAfter is defined %}
-        {{ form_row(transition_form.freezeAfter) }}
-    {% endif %}
+    <div id="signature-zone">
+        <div id="signature-type-choice">
+            {{ form_row(transition_form.isPersonOrUserSignature) }}
+            {{ form_errors(transition_form.isPersonOrUserSignature) }}
+        </div>
+        <div id="user-signature-field">
+            {{ form_row(transition_form.futureUserSignature) }}
+            {{ form_errors(transition_form.futureUserSignature) }}
+        </div>
+        <div id="person-signature-field">
+            {{ form_row(transition_form.futurePersonSignatures) }}
+            {{ form_errors(transition_form.futurePersonSignatures) }}
+        </div>
+    </div>
 
     <div id="futureDests">
-        {{ form_row(transition_form.future_dest_users) }}
+        <div id="future-dest-users">
+        {{ form_row(transition_form.futureDestUsers) }}
+        {{ form_errors(transition_form.futureDestUsers) }}
+        </div>
+        <div id="future-cc-users">
+        {{ form_row(transition_form.futureCcUsers) }}
+        {{ form_errors(transition_form.futureCcUsers) }}
+        </div>
+    </div>
 
-        {{ form_row(transition_form.future_cc_users) }}
-
-        {{ form_row(transition_form.future_dest_emails) }}
-        {{ form_errors(transition_form.future_dest_users) }}
+    <div id="sendExternalContainer">
+        {{ form_row(transition_form.futureDestineeThirdParties) }}
+        {{ form_errors(transition_form.futureDestineeThirdParties) }}
+        {{ form_row(transition_form.futureDestineeEmails) }}
+        {{ form_errors(transition_form.futureDestineeEmails) }}
     </div>
 
     <p>{{ form_label(transition_form.comment) }}</p>
 
     {{ form_widget(transition_form.comment) }}
 
-    <ul class="record_actions">
+    <ul class="record_actions sticky-form-buttons">
+        {% if entity_workflow.isOnHoldByUser(app.user)  %}
+            <li>
+                <a class="btn btn-misc" href="{{ path('chill_main_workflow_remove_hold', {'id': entity_workflow.currentStep.id }) }}"><i class="fa fa-hourglass"></i>
+                    {{ 'workflow.Remove hold'|trans }}
+                </a>
+            </li>
+        {% else %}
+            <li>
+                <a class="btn btn-misc" href="{{ path('chill_main_workflow_on_hold', {'id': entity_workflow.id}) }}"><i class="fa fa-hourglass"></i>
+                    {{ 'workflow.Put on hold'|trans }}
+                </a>
+            </li>
+        {% endif %}
         <li>
             <button type="submit" class="btn btn-save">{{ 'Save'|trans }}</button>
         </li>
@@ -98,15 +131,6 @@
                 </ul>
             {% endif %}
 
-            {% if entity_workflow.currentStep.destEmail|length > 0 %}
-                <p><b>{{ 'workflow.An access key was also sent to those addresses'|trans }}&nbsp;:</b></p>
-                <ul>
-                    {% for e in entity_workflow.currentStep.destEmail -%}
-                        <li><a href="mailto:{{ e|escape('html_attr') }}">{{ e }}</a></li>
-                    {%- endfor %}
-                </ul>
-            {% endif %}
-
             {% if entity_workflow.currentStep.destUserByAccessKey|length > 0 %}
                 <p><b>{{ 'workflow.Those users are also granted to apply a transition by using an access key'|trans }}&nbsp;:</b></p>
                 <ul>

src/Bundle/ChillMainBundle/Resources/views/Workflow/_extension_list_workflow_for.html.twig

@@ -1,8 +1,5 @@
-{% set acl = "0" %}
-{% if is_granted('CHILL_MAIN_WORKFLOW_CREATE', blank_workflow) %}
-    {% set acl = "1" %}
-{% endif %}
-
+{% set acl = "1" %}
+{# note: the list of available workflows already check that it is possible to create a given workflow #}
 {# vue component #}
 <div data-list-workflows="1"
     data-workflows="{{ entity_workflows_json|json_encode|e('html_attr') }}"

src/Bundle/ChillMainBundle/Resources/views/Workflow/_history.html.twig

@@ -2,7 +2,7 @@
 
 <div class="flex-table">
     {% for step in entity_workflow.stepsChained %}
-        {% set place_labels = workflow_metadata(entity_workflow, 'label', step.currentStep) %}
+        {% set place_labels = workflow_metadata(entity_workflow, 'label', step.currentStep, entity_workflow.workflowName) %}
         {% set place_label = place_labels is null ? step.currentStep : place_labels|localize_translatable_string %}
 
         <div class="item-bloc {{ 'bloc' ~ step.id }} {% if loop.first %}initial{% endif %}">
@@ -13,38 +13,40 @@
                         {{ 'workflow.No transitions'|trans }}
                     </div>
                 {% else %}
-
                     <div class="item-col">
                         {% if step.previous is not null and step.previous.freezeAfter == true %}
                             <i class="fa fa-snowflake-o fa-sm me-1" title="{{ 'workflow.Freezed'|trans }}"></i>
                         {% endif %}
+                        {% if loop.last %}
+                            {% if entity_workflow.isOnHoldAtCurrentStep %}
+                                {% for hold in step.holdsOnStep %}
+                                    <span class="badge bg-success rounded-pill" title="{{ 'workflow.On hold by'|trans({'by': hold.byUser|chill_entity_render_string})|escape('html_attr') }}">{{ 'workflow.On hold by'|trans({'by': hold.byUser|chill_entity_render_string}) }}</span>
+                                {% endfor %}
+                            {% endif %}
+                        {% endif %}
                     </div>
                     <div class="item-col flex-column align-items-end">
                         <div class="decided">
                             {{ place_label }}
                         </div>
-                        {#
-                        <div class="decided">
-                        <i class="fa fa-times fa-fw text-danger"></i>
-                        Refusé
-                        </div>
-                        #}
                     </div>
                 {% endif %}
 
             </div>
             {% if step.next is not null %}
                 {% set transition = chill_workflow_transition_by_string(step.entityWorkflow, step.transitionAfter) %}
-                {% set transition_labels = workflow_metadata(step.entityWorkflow, 'label', transition) %}
+                {% set transition_labels = workflow_metadata(step.entityWorkflow, 'label', transition, step.entityWorkflow.workflowName) %}
                 {% set transition_label = transition_labels is null ? step.transitionAfter : transition_labels|localize_translatable_string %}
-                {% set forward = workflow_metadata(step.entityWorkflow, 'isForward', transition) %}
+                {% set forward = workflow_metadata(step.entityWorkflow, 'isForward', transition, step.entityWorkflow.workflowName) %}
                 <div class="item-row separator">
                     <div class="item-col" style="width: inherit;">
-                        {% if step.transitionBy is not null %}
                             <div>
-                                {{ step.transitionBy|chill_entity_render_box({'at_date': step.transitionAt}) }}
+                                {%- if step.transitionBy is not null -%}
+                                    <span class="badge-user">{{ step.transitionBy|chill_entity_render_box({'at_date': step.transitionAt}) }}</span>
+                                {% else %}
+                                    <span class="chill-no-data-statement">{{ 'workflow.Automated transition'|trans }}</span>
+                                {%- endif -%}
                             </div>
-                        {% endif %}
                         <div>
                             <span>{{ step.transitionAt|format_datetime('long', 'medium') }}</span>
                         </div>
@@ -69,13 +71,31 @@
                     </blockquote>
                 </div>
             {% endif %}
-            {% if loop.last and step.allDestUser|length > 0 %}
+            {% if not loop.last and step.signatures|length > 0 %}
+                <div class="separator">
+                    <div>
+                        <p><b>{{ 'workflow.signatures_title'|trans({'nb_signatures': step.signatures|length}) }}&nbsp;:</b></p>
+                        <div>
+                            {{ include('@ChillMain/Workflow/_signature_list.html.twig', {'signatures': step.signatures, is_small: true }) }}
+                        </div>
+                    </div>
+                </div>
+            {% endif %}
+            {% if loop.last and not step.isFinal %}
                 <div class="item-row separator">
                     <div>
-                        {% if step.destUser|length > 0 %}
+                        {% if step.destUser|length > 0 or step.destUserGroups|length > 0 %}
                             <p><b>{{ 'workflow.Users allowed to apply transition'|trans }}&nbsp;: </b></p>
                             <ul>
                                 {% for u in step.destUser %}
+                                    <li>
+                                        <span class="badge-user">{{ u|chill_entity_render_box({'at_date': step.previous.transitionAt}) }}</span>
+                                        {% if step.isOnHoldByUser(u) %}
+                                            <span class="badge bg-success rounded-pill" title="{{ 'workflow.On hold'|trans|escape('html_attr') }}">{{ 'workflow.On hold'|trans }}</span>
+                                        {% endif %}
+                                    </li>
+                                {% endfor %}
+                                {% for u in step.destUserGroups %}
                                     <li>{{ u|chill_entity_render_box({'at_date': step.previous.transitionAt}) }}</li>
                                 {% endfor %}
                             </ul>
@@ -85,7 +105,7 @@
                             <p><b>{{ 'workflow.Users put in Cc'|trans }}&nbsp;: </b></p>
                             <ul>
                                 {% for u in step.ccUser %}
-                                    <li>{{ u|chill_entity_render_box({'at_date': step.previous.transitionAt}) }}</li>
+                                    <li><span class="badge-user">{{ u|chill_entity_render_box({'at_date': step.previous.transitionAt}) }}</span></li>
                                 {% endfor %}
                             </ul>
                         {% endif %}
@@ -103,12 +123,23 @@
                             <p><b>{{ 'workflow.Those users are also granted to apply a transition by using an access key'|trans }}&nbsp;:</b></p>
                             <ul>
                                 {% for u in step.destUserByAccessKey %}
-                                    <li>{{ u|chill_entity_render_box({'at_date': step.previous.transitionAt}) }}</li>
+                                    <li><span class="badge-user">{{ u|chill_entity_render_box({'at_date': step.previous.transitionAt}) }}</span></li>
                                 {% endfor %}
                             </ul>
                         {% endif %}
                     </div>
                 </div>
+                {% if step.signatures|length > 0 %}
+                    <p><b>{{ 'workflow.signatures_title'|trans({'nb_signatures': step.signatures|length}) }}&nbsp;:</b></p>
+                    {{ include('@ChillMain/Workflow/_signature_list.html.twig', {'signatures': step.signatures, is_small: true }) }}
+                {% endif %}
+            {% endif %}
+            {% if step.sends|length > 0 %}
+                <div>
+                    <p><b>{{ 'workflow.sent_through_secured_link'|trans }}</b></p>
+
+                    {{ include('@ChillMain/Workflow/_send_views_list.html.twig', {'sends': step.sends}) }}
+                </div>
             {% endif %}
         </div>
 

src/Bundle/ChillMainBundle/Resources/views/Workflow/_notification_include.html.twig

@@ -1,11 +1,15 @@
-<h2>
-    {{ 'workflow_'|trans }}
-</h2>
+{% if handler is not null %}
+    <h2>
+        {{ 'workflow_'|trans }}
+    </h2>
 
-<div class="item-row col" style="display: block;">
-    {% include handler.template(entity_workflow) with handler.templateData(entity_workflow)|merge({
-        'description': true,
-        'breadcrumb': true,
-        'add_classes': ''
-    }) %}
-</div>
+    <div class="item-row col" style="display: block;">
+        {% include handler.template(entity_workflow) with handler.templateData(entity_workflow)|merge({
+            'description': true,
+            'breadcrumb': true,
+            'add_classes': ''
+        }) %}
+    </div>
+{% else %}
+    <h2>{{ 'workflow.deleted_title'|trans }}</h2>
+{% endif %}

src/Bundle/ChillMainBundle/Resources/views/Workflow/_send_views_list.html.twig

@@ -0,0 +1,35 @@
+<div class="container">
+    {% for send in sends %}
+        <div class="row row-hover align-items-center">
+            <div class="col-sm-12 col-md-5">
+                {% if send.destineeKind == 'thirdParty' %}
+                    {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
+                        action: 'show', displayBadge: true,
+                        targetEntity: { name: 'thirdParty', id: send.destineeThirdParty.id },
+                        buttonText: send.destineeThirdParty|chill_entity_render_string,
+                    } %}
+                {% else %}
+                    <a href="mailto:{{ send.destineeEmail }}">{{ send.destineeEmail }}</a>
+                {% endif %}
+                {% if not send.expired %}
+                    <p><small>{{ 'workflow.send_external_message.document_available_until'|trans({'expiration': send.expireAt}) }}</small></p>
+                {% endif %}
+            </div>
+            <div class="col-sm-12 col-md-7 text-end">
+                <p><small>{{ 'workflow.external_views.number_of_views'|trans({'numberOfViews': send.views|length}) }}</small></p>
+                 {% if send.views|length > 0 %}
+                     <p><small>{{ 'workflow.external_views.last_view_at'|trans({'at': send.lastView.viewAt }) }}</small></p>
+                     <p>
+                         <small>
+                             <b>{{ 'workflow.public_views_by_ip'|trans }}&nbsp;:</b>
+                             {%- for ip, vs in send.viewsByIp -%}
+                                 <span title="{% for v in vs %}{{ v.viewAt|format_datetime('short', 'short')|escape('html_attr') }}{% if not loop.last %}{{ ', '|escape('html_attr') }}{% endif %}{% endfor %}">{{ ip }} ({{ vs|length }}x)</span>
+                             {%- endfor -%}
+                         </small>
+                     </p>
+
+                 {% endif %}
+            </div>
+        </div>
+    {% endfor %}
+</div>

src/Bundle/ChillMainBundle/Resources/views/Workflow/_signature.html.twig

@@ -0,0 +1,3 @@
+<h2>{{ 'workflow.signature_required_title'|trans({'nb_signatures': signatures|length}) }}</h2>
+
+{{ include('@ChillMain/Workflow/_signature_list.html.twig') }}

src/Bundle/ChillMainBundle/Resources/views/Workflow/_signature_list.html.twig

@@ -0,0 +1,52 @@
+<div class="container">
+    {% for s in signatures %}
+        <div class="row row-hover align-items-center">
+            <div class="col-sm-12 col-md-5">
+                {% if s.signerKind == 'person' %}
+                    {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
+                        action: 'show', displayBadge: true,
+                        targetEntity: { name: 'person', id: s.signer.id },
+                        buttonText: s.signer|chill_entity_render_string,
+                        isDead: s.signer.deathDate is not null
+                    } %}
+                {% else %}
+                    {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
+                        action: 'show', displayBadge: true,
+                        targetEntity: { name: 'user', id: s.signer.id },
+                        buttonText: s.signer|chill_entity_render_string,
+                    } %}
+                {% endif %}
+            </div>
+            <div class="col-sm-12 col-md-7 text-end">
+                {% if s.isSigned %}
+                    <span class="text-end">{{ 'workflow.signature.signed_statement'|trans({ 'datetime' : s.stateDate }) }}</span>
+                {% elseif s.isCanceled %}
+                    <span class="text-end">{{ 'workflow.signature.canceled_statement'|trans({ 'datetime' : s.stateDate }) }}</span>
+                {% elseif s.isRejected%}
+                    <span class="text-end">{{ 'workflow.signature.rejected_statement'|trans({ 'datetime' : s.stateDate }) }}</span>
+                {% else %}
+                    {% if (is_granted('CHILL_MAIN_ENTITY_WORKFLOW_SIGNATURE_CANCEL', s) or is_granted('CHILL_MAIN_ENTITY_WORKFLOW_SIGNATURE_SIGN', s)) %}
+                        <ul class="record_actions slim {% if is_small|default(false) %}small{% endif %}">
+                            {% if is_granted('CHILL_MAIN_ENTITY_WORKFLOW_SIGNATURE_REJECT', s) %}
+                                <li>
+                                    <a class="btn btn-remove" href="{{ chill_path_add_return_path('chill_main_workflow_signature_reject', { 'id': s.id}) }}">{{ 'workflow.signature_zone.button_reject'|trans }}</a>
+                                </li>
+                            {% endif %}
+                            {% if is_granted('CHILL_MAIN_ENTITY_WORKFLOW_SIGNATURE_CANCEL', s) %}
+                                <li>
+                                    <a class="btn btn-misc" href="{{ chill_path_add_return_path('chill_main_workflow_signature_cancel', { 'id': s.id}) }}">{{ 'workflow.signature_zone.button_cancel'|trans }}</a>
+                                </li>
+                            {% endif %}
+                            {% if is_granted('CHILL_MAIN_ENTITY_WORKFLOW_SIGNATURE_SIGN', s) %}
+                                <li>
+                                    <a class="btn btn-misc" href="{{ chill_path_add_return_path('chill_main_workflow_signature_metadata', { 'signature_id': s.id}) }}"><i class="fa fa-pencil-square-o"></i> {{ 'workflow.signature_zone.button_sign'|trans }}</a>
+                                </li>
+                            {% endif %}
+                        </ul>
+                    {% endif %}
+                {% endif %}
+            </div>
+        </div>
+    {% endfor %}
+</div>
+

src/Bundle/ChillMainBundle/Resources/views/Workflow/index.html.twig

@@ -1,12 +1,11 @@
 {% extends '@ChillMain/layout.html.twig' %}
 
-{% block title %}
+{% block title -%}
     {{ 'Workflow'|trans }}
-{% endblock %}
+{%- endblock %}
 
 {% block js %}
     {{ parent() }}
-    {{ encore_entry_script_tags('mod_async_upload') }}
     {{ encore_entry_script_tags('mod_pickentity_type') }}
     {{ encore_entry_script_tags('mod_entity_workflow_subscribe') }}
     {{ encore_entry_script_tags('page_workflow_show') }}
@@ -38,7 +37,10 @@
         <div class="mb-5">
             <h2>{{ handler.entityTitle(entity_workflow) }}</h2>
 
-            {{ macro.breadcrumb({'entity_workflow': entity_workflow}) }}
+            {{ macro.breadcrumb(entity_workflow) }}
+            {% if entity_workflow.isOnHoldAtCurrentStep %}
+                <span class="badge bg-success rounded-pill" title="{{ 'workflow.On hold'|trans|escape('html_attr') }}">{{ 'workflow.On hold'|trans }}</span>
+            {% endif %}
         </div>
 
         {% include handler_template with handler_template_data|merge({'display_action': true }) %}
@@ -57,18 +59,19 @@
     </section>
 
     <section class="step my-4">{% include '@ChillMain/Workflow/_follow.html.twig' %}</section>
-    <section class="step my-4">{% include '@ChillMain/Workflow/_decision.html.twig' %}</section>{#
-    <section class="step my-4">{% include '@ChillMain/Workflow/_comment.html.twig' %}</section> #}
+    {% if signatures|length > 0 %}
+        <section class="step my-4">{% include '@ChillMain/Workflow/_signature.html.twig' %}</section>
+    {% elseif entity_workflow.currentStep.sends|length > 0 %}
+        <section class="step my-4">
+            <h2>{{ 'workflow.external_views.title'|trans({'numberOfSends': entity_workflow.currentStep.sends|length }) }}</h2>
+            {% include '@ChillMain/Workflow/_send_views_list.html.twig' with {'sends': entity_workflow.currentStep.sends} %}
+        </section>
+    {% else %}
+        <section class="step my-4">{% include '@ChillMain/Workflow/_decision.html.twig' %}</section>
+    {% endif %}
+    {# <section class="step my-4">{% include '@ChillMain/Workflow/_comment.html.twig' %}</section> #}
     <section class="step my-4">{% include '@ChillMain/Workflow/_history.html.twig' %}</section>
 
-    {# useful ?
-    <ul class="record_actions sticky-form-buttons">
-        <li class="cancel">
-            <a class="btn btn-cancel" href="{{ path('chill_main_workflow_list_dest') }}">
-                {{ 'Back to the list'|trans }}
-            </a>
-        </li>
-    </ul>
-    #}
+
 </div>
 {% endblock %}

src/Bundle/ChillMainBundle/Resources/views/Workflow/list.html.twig

@@ -68,7 +68,10 @@
 
                     </button>
                     <div>
-                        {{ macro.breadcrumb(l) }}
+                        {{ macro.breadcrumb(l.entity_workflow) }}
+                        {% if l.entity_workflow.isOnHoldAtCurrentStep %}
+                            <span class="badge bg-success rounded-pill" title="{{ 'workflow.On hold'|trans|escape('html_attr') }}">{{ 'workflow.On hold'|trans }}</span>
+                        {% endif %}
                     </div>
 
                 </div>

src/Bundle/ChillMainBundle/Resources/views/Workflow/macro_breadcrumb.html.twig

@@ -3,24 +3,30 @@
         {% if step.previous is not null %}
             <li>
                 <span class="item-key">{{ 'By'|trans ~ ' : ' }}</span>
-                <b>{{ step.previous.transitionBy|chill_entity_render_box({'at_date': step.previous.transitionAt }) }}</b>
+                <b>{% if step.previous.transitionBy is not null %}{{ step.previous.transitionBy|chill_entity_render_box({'at_date': step.previous.transitionAt }) }}{% else %}<span class="chill-no-data-statement">{{ 'workflow.Automated transition'|trans }}</span>{% endif %}</b>
             </li>
             <li>
                 <span class="item-key">{{ 'Le'|trans ~ ' : ' }}</span>
                 <b>{{ step.previous.transitionAt|format_datetime('short', 'short') }}</b>
             </li>
-            <li>
-                <span class="item-key">{{ 'workflow.For'|trans ~ ' : ' }}</span>
-                <b>
-                    {% for d in step.destUser %}{{ d|chill_entity_render_string({'at_date': step.previous.transitionAt}) }}{% if not loop.last %}, {% endif %}{% endfor %}
-                </b>
-            </li>
-            <li>
-                <span class="item-key">{{ 'workflow.Cc'|trans ~ ' : ' }}</span>
-                <b>
-                    {% for u in step.ccUser %}{{ u|chill_entity_render_string({'at_date': step.previous.transitionAt }) }}{% if not loop.last %}, {% endif %}{% endfor %}
-                </b>
-            </li>
+            {% if step.destUser|length > 0 or step.destUserGroups|length > 0 %}
+                <li>
+                    <span class="item-key">{{ 'workflow.For'|trans ~ ' : ' }}</span>
+                    <b>
+                        {% for d in step.destUser %}<span class="badge-user">{{ d|chill_entity_render_string({'at_date': step.previous.transitionAt}) }}</span>{% if not loop.last %}, {% endif -%}{% endfor -%}
+                        {%- if step.destUser|length > 0 and step.destUserGroups|length > 0 %}, {% endif -%}
+                        {%- for d in step.destUserGroups %}{{ d|chill_entity_render_box }}{% if not loop.last %}, {% endif %}{% endfor -%}
+                    </b>
+                </li>
+            {% endif %}
+            {% if step.ccUser|length > 0 %}
+                <li>
+                    <span class="item-key">{{ 'workflow.Cc'|trans ~ ' : ' }}</span>
+                    <b>
+                        {% for u in step.ccUser %}{{ u|chill_entity_render_string({'at_date': step.previous.transitionAt }) }}{% if not loop.last %}, {% endif %}{% endfor %}
+                    </b>
+                </li>
+            {% endif %}
         {% else %}
             <li>
                 <span class="item-key">{{ 'workflow.Created by'|trans ~ ' : ' }}</span>
@@ -40,16 +46,16 @@
     {% endif %}
     {% if step.previous is not null %}
         {% set transition = chill_workflow_transition_by_string(step.entityWorkflow, step.previous.transitionAfter) %}
-        {% set labels = workflow_metadata(step.entityWorkflow, 'label', transition) %}
+        {% set labels = workflow_metadata(step.entityWorkflow, 'label', transition, step.entityWorkflow.workflowName) %}
         {% set label = labels is null ? step.previous.transitionAfter : labels|localize_translatable_string %}
         {{ label }}
     {% endif %}
 {% endmacro %}
 
-{% macro breadcrumb(_ctx) %}
+{% macro breadcrumb(entity_workflow) %}
     <div class="breadcrumb">
-        {% for step in _ctx.entity_workflow.stepsChained %}
-            {% set labels = workflow_metadata(_ctx.entity_workflow, 'label', step.currentStep) %}
+        {% for step in entity_workflow.stepsChained %}
+            {% set labels = workflow_metadata(entity_workflow, 'label', step.currentStep, entity_workflow.workflowName) %}
             {% set label = labels is null ? step.currentStep : labels|localize_translatable_string %}
             {% set popTitle = _self.popoverTitle(step) %}
             {% set popContent = _self.popoverContent(step) %}

src/Bundle/ChillMainBundle/Resources/views/Workflow/signature_metadata.html.twig

@@ -0,0 +1,22 @@
+{% extends '@ChillMain/layout.html.twig' %}
+
+{% block title 'workflow.signature_zone.metadata.sign_by'|trans({ '%name%' : person|chill_entity_render_string}) %}
+
+{% block content %}
+<div class="col-10 workflow">
+    <h1 class="mb-5">{{ block('title') }}</h1>
+
+    {% if metadata_form is not null %}
+        {{ form_start(metadata_form) }}
+        {{ form_row(metadata_form.documentType) }}
+        {{ form_row(metadata_form.documentNumber) }}
+        {{ form_row(metadata_form.expirationDate) }}
+        <ul class="record_actions">
+            <li>
+            {{ form_widget(metadata_form.submit, { 'attr' : { 'class' : 'btn btn-submit' }} ) }}
+            </li>
+        </ul>
+        {{ form_end(metadata_form) }}
+    {% endif %}
+</div>
+{% endblock %}

src/Bundle/ChillMainBundle/Resources/views/Workflow/signature_sign.html.twig

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="shortcut icon" href="{{ asset('build/images/favicon.ico') }}" type="image/x-icon">
+    <title>Signature</title>
+
+    {{ encore_entry_link_tags('mod_bootstrap') }}
+    {{ encore_entry_link_tags('mod_forkawesome') }}
+    {{ encore_entry_link_tags('chill') }}
+    {{ encore_entry_link_tags('vue_document_signature') }}
+
+</head>
+
+<body>
+
+    {% block js %}
+        {{ encore_entry_script_tags('mod_document_action_buttons_group') }}
+        <script type="text/javascript">
+            window.signature = {{ signature|json_encode|raw }};
+        </script>
+        {{ encore_entry_script_tags('vue_document_signature') }}
+    {% endblock %}
+
+    <div class="content" id="content">
+        <div class="row">
+            <div class="col-12 m-auto">
+                <div class="row" id="document-signature"></div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>

src/Bundle/ChillMainBundle/Resources/views/Workflow/workflow_notification_on_transition_completed_content.fr.txt.twig

@@ -1,13 +1,16 @@
 {{ dest.label }},
 
 Un suivi "{{ workflow.text }}" a atteint une nouvelle étape: {{ workflow.text }}
-{%- if is_dest %}
+
+Titre du workflow: "{{ title }}".
+{% if is_dest %}
 
 Vous êtes invités à valider cette étape au plus tôt.
 {% endif %}
 
+
 Vous pouvez visualiser le workflow sur cette page:
 
-{{ absolute_url(path('chill_main_workflow_show', {'id': entity_workflow.id})) }}
+{{ absolute_url(path('chill_main_workflow_show', {'id': entity_workflow.id, '_locale': 'fr'})) }}
 
 Cordialement,

src/Bundle/ChillMainBundle/Resources/views/Workflow/workflow_notification_on_transition_completed_content_to_user_group.fr.txt.twig

@@ -1,12 +1,12 @@
-Madame, Monsieur,
+Chers membres du groupe {{ user_group.label|localize_translatable_string }},
 
-Un suivi "{{ workflow.text }}" a atteint une nouvelle étape: {{ workflow.text }}.
+Un suivi "{{ workflow.text }}" a atteint une nouvelle étape: {{ place.text }}
 
-Titre du workflow: "{{ entityTitle }}".
+Titre du workflow: "{{ title }}".
 
 Vous êtes invité·e à valider cette étape. Pour obtenir un accès, vous pouvez cliquer sur le lien suivant:
 
-{{ absolute_url(path('chill_main_workflow_grant_access_by_key', {'id': entity_workflow.currentStep.id, 'accessKey': entity_workflow.currentStep.accessKey})) }}
+{{ absolute_url(path('chill_main_workflow_grant_access_by_key', {'id': entity_workflow.currentStep.id, '_locale': 'fr', 'accessKey': entity_workflow.currentStep.accessKey})) }}
 
 Dès que vous aurez cliqué une fois sur le lien, vous serez autorisé à valider cette étape.
 

src/Bundle/ChillMainBundle/Resources/views/Workflow/workflow_notification_on_transition_completed_title.fr.txt.twig

@@ -1,5 +1,5 @@
 {%- if is_dest -%}
-Un suivi {{ workflow.text }} demande votre attention
+Un suivi {{ workflow.text }} demande votre attention: {{ title }}
 {%- else -%}
-Un suivi {{ workflow.text }} a atteint une nouvelle étape: {{ place.text }}
+Un suivi {{ workflow.text }} a atteint une nouvelle étape: {{ place.text }}: {{ title }}
 {%- endif -%}

src/Bundle/ChillMainBundle/Resources/views/Workflow/workflow_send_access_key_title.fr.txt.twig

@@ -1 +0,0 @@
-Un suivi {{ workflow.text }} demande votre attention: {{ entityTitle }}

src/Bundle/ChillMainBundle/Resources/views/Workflow/workflow_send_external_email_to_destinee.html.twig

@@ -0,0 +1,88 @@
+<!doctype html>
+<html>
+<body>
+{%- set previous = send.entityWorkflowStepChained.previous -%}
+{%- if previous.transitionBy is not null -%}
+    {%- set sender = previous.transitionBy|chill_entity_render_string -%}
+{%- else -%}
+    {%- set sender = 'workflow.send_external_message.sender_system_user'|trans -%}
+{%- endif -%}
+<script type="application/ld+json">
+    {%- set data = {
+        "@context": "http://schema.org",
+        "@type": "EmailMessage",
+        "potentialAction": {
+            "@type": "ViewAction",
+            "url": absolute_url(path('chill_main_workflow_send_view_public', {'uuid': send.uuid, 'verificationKey': send.privateToken})),
+            "name": 'workflow.send_external_message.see_docs_action_name'|trans
+        },
+        "description": 'workflow.send_external_message.see_doc_action_description'|trans({'sender': sender}),
+    } -%}
+    {{- data|json_encode|raw -}}
+</script>
+<div
+    style='background-color:#F5F5F5;color:#262626;font-family:"Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;font-size:16px;font-weight:400;letter-spacing:0.15008px;line-height:1.5;margin:0;padding:32px 0;min-height:100%;width:100%'
+>
+    <table
+        align="center"
+        width="100%"
+        style="margin:0 auto;max-width:600px;background-color:#FFFFFF"
+        role="presentation"
+        cellspacing="0"
+        cellpadding="0"
+        border="0"
+    >
+        <tbody>
+        <tr style="width:100%">
+            <td>
+                <div style="font-weight:normal;padding:16px 24px 16px 24px">
+                    {{ 'workflow.send_external_message.greeting'|trans }},
+                </div>
+                <div style="font-weight:normal;padding:16px 24px 16px 24px">
+                    {{ 'workflow.send_external_message.explanation'|trans({'sender': sender}) }}
+                </div>
+                <div style="font-weight:normal;padding:16px 24px 16px 24px">
+                    {{ 'workflow.send_external_message.confidentiality'|trans }}
+                </div>
+                <div style="text-align:center;padding:16px 24px 16px 24px">
+                    <a
+                        href="{{ absolute_url(path('chill_main_workflow_send_view_public', {'uuid': send.uuid, 'verificationKey': send.privateToken})) }}"
+                        style="color:#FFFFFF;font-size:16px;font-weight:bold;background-color:#334d5c;border-radius:4px;display:inline-block;padding:12px 20px;text-decoration:none"
+                        target="_blank"
+                    ><span
+                        ><!--[if mso
+                      ]><i
+                        style="letter-spacing: 20px;mso-font-width:-100%;mso-text-raise:30"
+                        hidden
+                        >&nbsp;</i
+                      ><!
+                    [endif]--></span
+                        ><span>
+                            {{ 'workflow.send_external_message.button_content'|trans({'sender': sender}) }}
+                        </span><span
+                        ><!--[if mso
+                      ]><i
+                        style="letter-spacing: 20px;mso-font-width:-100%"
+                        hidden
+                        >&nbsp;</i
+                      ><!
+                    [endif]--></span
+                        ></a
+                    >
+                </div>
+                <div style="font-weight:normal;padding:16px 24px 16px 24px">
+                    {{ 'workflow.send_external_message.document_available_until'|trans({ 'expiration': send.expireAt}, null, lang) }}
+                </div>
+                <div style="font-weight:normal;padding:16px 24px 16px 24px">
+                    {{ 'workflow.send_external_message.or_see_link'|trans }}&nbsp;:
+                </div>
+                <div style="font-size:16px;padding:16px 24px 16px 24px">
+                    <code>{{ absolute_url(path('chill_main_workflow_send_view_public', {'uuid': send.uuid, 'verificationKey': send.privateToken})) }}</code>
+                </div>
+            </td>
+        </tr>
+        </tbody>
+    </table>
+</div>
+</body>
+</html>

src/Bundle/ChillMainBundle/Resources/views/Workflow/workflow_view_send_public_expired.html.twig

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>{{ 'workflow.public_link.expired_link_title'|trans }}</title>
+</head>
+<body>
+    <h1>{{ 'workflow.public_link.expired_link_title'|trans }}</h1>
+
+    <p>{{ 'workflow.public_link.expired_link_explanation'|trans }}</p>
+</body>
+</html>

src/Bundle/ChillMainBundle/Resources/views/Workflow/workflow_view_send_public_layout.html.twig

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8" >
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
+    <title>{% block title %}{% endblock %}</title>
+    {% block head_custom %}{% endblock %}
+    <link rel="shortcut icon" href="{{ asset('build/images/favicon.ico') }}" type="image/x-icon">
+
+    {{ encore_entry_link_tags('mod_bootstrap') }}
+    {{ encore_entry_link_tags('mod_forkawesome') }}
+    {{ encore_entry_link_tags('chill') }}
+
+    {% block css %}{% endblock %}
+</head>
+
+<body>
+
+<header>
+    <nav class="navbar navbar-dark bg-primary navbar-expand-md">
+        <div class="container-xxl">
+
+            <div class="col-4">
+                <a class="navbar-brand" href="{{ path('chill_main_homepage') }}">
+                    {{ include('@ChillMain/Layout/_header-logo.html.twig') }}
+                </a>
+            </div>
+
+            <div class="col-8"></div>
+        </div>
+    </nav>
+</header>
+
+<div class="content" id="content">
+    <div class="container-xxl">
+        <div class="row justify-content-center my-5">
+            <div>
+                {% block public_content %}{% endblock %}
+            </div>
+            <div style="margin-top: 1rem;">
+                <p>
+                    {{ 'workflow.public_link.shared_explanation_until_remaining'|trans({'expireAt': send.expireAt, 'viewsCount': metadata.viewsCount, 'viewsRemaining': metadata.viewsRemaining}) }}
+                </p>
+            </div>
+        </div>
+    </div>
+</div>
+
+{{ include('@ChillMain/Layout/_footer.html.twig', {'public_page': true}) }}
+
+{{ encore_entry_script_tags('mod_bootstrap') }}
+{{ encore_entry_script_tags('mod_forkawesome') }}
+{{ encore_entry_script_tags('chill') }}
+
+{% block js %}{% endblock %}
+</body>
+</html>

src/Bundle/ChillMainBundle/Resources/views/WorkflowSignature/cancel.html.twig

@@ -0,0 +1,20 @@
+{% extends '@ChillMain/layout.html.twig' %}
+
+{% block title %}{{ 'workflow.signature.cancel_signature_of'|trans({ '%signer%': signature.signer|chill_entity_render_string }) }}{% endblock %}
+
+{% block content %}
+    <h1>{{ block('title') }}</h1>
+
+    <p>{{ 'workflow.signature.cancel_are_you_sure'|trans({'%signer%': signature.signer|chill_entity_render_string}) }}</p>
+
+    {{ form_start(form) }}
+    <ul class="record_actions sticky-form-buttons">
+        <li class="cancel">
+            <a class="btn btn-cancel" href="{{ chill_return_path_or('chill_main_workflow_show', {'id': signature.step.entityWorkflow.id}) }}">{{ 'Cancel'|trans }}</a>
+        </li>
+        <li>
+            {{ form_widget(form.confirm, {'attr': {'class': 'btn btn-misc'}}) }}
+        </li>
+    </ul>
+    {{ form_end(form) }}
+{% endblock %}

src/Bundle/ChillMainBundle/Resources/views/WorkflowSignature/reject.html.twig

@@ -0,0 +1,20 @@
+{% extends '@ChillMain/layout.html.twig' %}
+
+{% block title %}{{ 'workflow.signature.reject_signature_of'|trans({ '%signer%': signature.signer|chill_entity_render_string }) }}{% endblock %}
+
+{% block content %}
+    <h1>{{ block('title') }}</h1>
+
+    <p>{{ 'workflow.signature.reject_are_you_sure'|trans({'%signer%': signature.signer|chill_entity_render_string}) }}</p>
+
+    {{ form_start(form) }}
+    <ul class="record_actions sticky-form-buttons">
+        <li class="cancel">
+            <a class="btn btn-cancel" href="{{ chill_return_path_or('chill_main_workflow_show', {'id': signature.step.entityWorkflow.id}) }}">{{ 'Cancel'|trans }}</a>
+        </li>
+        <li>
+            {{ form_widget(form.confirm, {'attr': {'class': 'btn btn-misc'}}) }}
+        </li>
+    </ul>
+    {{ form_end(form) }}
+{% endblock %}

src/Bundle/ChillMainBundle/Resources/views/layout.html.twig

@@ -49,19 +49,19 @@
 
                             {% for flashMessage in app.session.flashbag.get('success') %}
                                 <div class="alert alert-success flash_message">
-                                    <span>{{ flashMessage|raw }}</span>
+                                    <span>{{ flashMessage|trans }}</span>
                                 </div>
                             {% endfor %}
 
                             {% for flashMessage in app.session.flashbag.get('error') %}
                                 <div class="alert alert-danger flash_message">
-                                    <span>{{ flashMessage|raw }}</span>
+                                    <span>{{ flashMessage|trans }}</span>
                                 </div>
                             {% endfor %}
 
                             {% for flashMessage in app.session.flashbag.get('notice') %}
                                 <div class="alert alert-warning flash_message">
-                                    <span>{{ flashMessage|raw }}</span>
+                                    <span>{{ flashMessage|trans }}</span>
                                 </div>
                             {% endfor %}