Merge master into translations branch

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,12 +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/bootstrap/index.js

@@ -10,6 +10,7 @@ import Modal from 'bootstrap/js/dist/modal';
 import Collapse from 'bootstrap/js/src/collapse';
 import Carousel from 'bootstrap/js/src/carousel';
 import Popover from 'bootstrap/js/src/popover';
+import 'bootstrap-icons/font/bootstrap-icons.css';
 
 //
 // Carousel: ACHeaderSlider is a small slider used in banner of AccompanyingCourse Section
@@ -59,4 +60,4 @@ const popoverList = triggerList.map(function (el) {
     return new Popover(el, {
         html: true,
     });
-});
+});

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

@@ -30,6 +30,12 @@
  */
 import './collection.scss';
 
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'show-hide-show': CustomEvent<{id: number, froms: HTMLElement[], container: HTMLElement}>,
+    }
+}
+
 export class CollectionEventPayload {
     collection: HTMLUListElement;
     entry: HTMLLIElement;
@@ -53,14 +59,17 @@ export const handleAdd = (button: any): void => {
     let
         empty_explain: HTMLLIElement | null = collection.querySelector('li[data-collection-empty-explain]'),
         entry = document.createElement('li'),
-        counter = collection.childNodes.length + 1,
-        content = prototype.replace(new RegExp('__name__', 'g'), counter.toString()),
+        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)});
 
+    console.log(counter)
+    console.log(content)
+
     entry.innerHTML = content;
     entry.classList.add('entry');
 
-    if ("dataCollectionRegular" in collection.dataset) {
+    if ("collectionRegular" in collection.dataset) {
         initializeRemove(collection, entry);
         if (empty_explain !== null) {
             empty_explain.remove();
@@ -104,20 +113,34 @@ export const buildRemoveButton = (collection: HTMLUListElement, entry: HTMLLIEle
     return button;
 }
 
-window.addEventListener('load', () => {
+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++) {
-        let addButton = addButtons[i];
+        const addButton = addButtons[i];
+        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++) {
-        let 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;
@@ -125,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/notification/toggle_read.js

@@ -1,14 +1,16 @@
-import {createApp} from "vue";
+import { createApp } from "vue";
 import NotificationReadToggle from "ChillMainAssets/vuejs/_components/Notification/NotificationReadToggle.vue";
 import { _createI18n } from "ChillMainAssets/vuejs/_js/i18n";
+import NotificationReadAllToggle from "ChillMainAssets/vuejs/_components/Notification/NotificationReadAllToggle.vue";
 
 const i18n = _createI18n({});
 
-window.addEventListener('DOMContentLoaded', function (e) {
-    document.querySelectorAll('.notification_toggle_read_status')
-        .forEach(function (el, i) {
-            createApp({
-                template: `<notification-read-toggle
+window.addEventListener("DOMContentLoaded", function (e) {
+  document
+    .querySelectorAll(".notification_toggle_read_status")
+    .forEach(function (el, i) {
+      createApp({
+        template: `<notification-read-toggle
                     :notificationId="notificationId"
                     :buttonClass="buttonClass"
                     :buttonNoText="buttonNoText"
@@ -17,40 +19,45 @@ window.addEventListener('DOMContentLoaded', function (e) {
                     @markRead="onMarkRead"
                     @markUnread="onMarkUnread">
                 </notification-read-toggle>`,
-                components: {
-                    NotificationReadToggle,
-                },
-                data() {
-                    return {
-                        notificationId: el.dataset.notificationId,
-                        buttonClass: el.dataset.buttonClass,
-                        buttonNoText: 'false' === el.dataset.buttonText,
-                        showUrl: el.dataset.showButtonUrl,
-                        isRead: 1 === Number.parseInt(el.dataset.notificationCurrentIsRead),
-                        container: el.dataset.container
-                    }
-                },
-                computed: {
-                    getContainer() {
-                        return document.querySelectorAll(`div.${this.container}`);
-                    }
-                },
-                methods: {
-                    onMarkRead() {
-                        if (typeof this.getContainer[i] !== 'undefined') {
-                            this.getContainer[i].classList.replace('read', 'unread');
-                        } else { throw 'data-container attribute is missing' }
-                        this.isRead = false;
-                    },
-                    onMarkUnread() {
-                        if (typeof this.getContainer[i] !== 'undefined') {
-                            this.getContainer[i].classList.replace('unread', 'read');
-                        } else { throw 'data-container attribute is missing' }
-                        this.isRead = true;
-                    },
-                }
-            })
-            .use(i18n)
-            .mount(el);
-        });
+        components: {
+          NotificationReadToggle,
+        },
+        data() {
+          return {
+            notificationId: parseInt(el.dataset.notificationId),
+            buttonClass: el.dataset.buttonClass,
+            buttonNoText: "false" === el.dataset.buttonText,
+            showUrl: el.dataset.showButtonUrl,
+            isRead: 1 === Number.parseInt(el.dataset.notificationCurrentIsRead),
+            container: el.dataset.container,
+          };
+        },
+        computed: {
+          getContainer() {
+            return document.querySelectorAll(`div.${this.container}`);
+          },
+        },
+        methods: {
+          onMarkRead() {
+            if (typeof this.getContainer[i] !== "undefined") {
+              this.getContainer[i].classList.replace("read", "unread");
+            } else {
+              throw "data-container attribute is missing";
+            }
+            this.isRead = false;
+          },
+          onMarkUnread() {
+            if (typeof this.getContainer[i] !== "undefined") {
+              this.getContainer[i].classList.replace("unread", "read");
+            } else {
+              throw "data-container attribute is missing";
+            }
+            this.isRead = true;
+          },
+        },
+      })
+        .use(i18n)
+        .mount(el);
+    });
 });
+

src/Bundle/ChillMainBundle/Resources/public/module/notification/toggle_read_all.ts

@@ -0,0 +1,39 @@
+import { createApp } from "vue";
+import { _createI18n } from "../../vuejs/_js/i18n";
+import NotificationReadAllToggle from "../../vuejs/_components/Notification/NotificationReadAllToggle.vue";
+
+const i18n = _createI18n({});
+
+document.addEventListener("DOMContentLoaded", function () {
+    const elements = document.querySelectorAll(".notification_all_read");
+
+    elements.forEach((element) => {
+        console.log('launch');
+        createApp({
+            template: `<notification-read-all-toggle @markAsRead="markAsRead" @markAsUnRead="markAsUnread"></notification-read-all-toggle>`,
+            components: {
+                NotificationReadAllToggle,
+            },
+            methods: {
+                markAsRead(id: number) {
+                    const el = document.querySelector<HTMLDivElement>(`div.notification-status[data-notification-id="${id}"]`);
+                    if (el === null) {
+                        return;
+                    }
+                    el.classList.add('read');
+                    el.classList.remove('unread');
+                },
+                markAsUnread(id: number) {
+                    const el = document.querySelector<HTMLDivElement>(`div.notification-status[data-notification-id="${id}"]`);
+                    if (el === null) {
+                        return;
+                    }
+                    el.classList.remove('read');
+                    el.classList.add('unread');
+                },
+            }
+        })
+        .use(i18n)
+        .mount(element);
+    });
+});

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

@@ -44,7 +44,9 @@ function loadDynamicPicker(element) {
                 ':suggested="notPickedSuggested" ' +
                 ':label="label" ' +
                 '@addNewEntity="addNewEntity" ' +
-                '@removeEntity="removeEntity"></pick-entity>',
+                '@removeEntity="removeEntity" ' +
+                '@addNewEntityProcessEnded="addNewEntityProcessEnded"' +
+              '></pick-entity>',
             components: {
                 PickEntity,
             },
@@ -97,10 +99,11 @@ function loadDynamicPicker(element) {
                             }
                         }
                     }
-
-                    if (this.submit_on_adding_new_entity) {
-                        input.form.submit();
-                    }
+                },
+                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)) {
@@ -159,3 +162,5 @@ document.addEventListener('DOMContentLoaded', function(e) {
     loadDynamicPicker(document)
 })
 
+window.loadDynamicPicker = loadDynamicPicker;
+

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

@@ -1,41 +1,145 @@
 import {ShowHide} from 'ChillMainAssets/lib/show_hide/show_hide.js';
 
 window.addEventListener('DOMContentLoaded', function() {
-    let
+    const
         divTransitions = document.querySelector('#transitions'),
-        futureDestUsersContainer = document.querySelector('#futureDests')
+        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')
     ;
 
-    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;
-                            }
-                        }
-                    }
-                }
+    // ShowHide instance for future dest users
+    new ShowHide({
+      debug: false,
+      load_event: null,
+      froms: [divTransitions],
+      container: [futureDestUsersContainer],
+      test: function(froms, event) {
+        for (let transition of froms) {
+          for (let input of transition.querySelectorAll('input')) {
+            if (input.checked) {
+              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 false;
+      }
+    });
+
+    // 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;
+              }
+            }
+          }
+        }
+        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;
+          },
+      });
     }
 
-    let
-        transitionFilterContainer = document.querySelector('#transitionFilter'),
-        transitions = document.querySelector('#transitions')
-    ;
-
     if (null !== transitionFilterContainer) {
-        transitions.querySelectorAll('.form-check').forEach(function(row) {
+        transitionsContainer.querySelectorAll('.form-check').forEach(function(row) {
 
             const isForward = row.querySelector('input').dataset.isForward;
 
@@ -51,6 +155,7 @@ window.addEventListener('DOMContentLoaded', function() {
                             }
                         }
                     }
+                    return true;
                 },
                 toggle_callback: function (c, dir) {
                     for (let div of c) {
@@ -66,5 +171,4 @@ window.addEventListener('DOMContentLoaded', function() {
             });
         });
     }
-
 });

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

@@ -1,164 +1,181 @@
 export interface DateTime {
-  datetime: string;
-  datetime8601: string
+    datetime: string;
+    datetime8601: string;
 }
 
 export interface Civility {
-  id: number;
-  // TODO
+    id: number;
+    // TODO
 }
 
 export interface Job {
-  id: number;
-  type: "user_job";
-  label: {
-    "fr": string; // could have other key. How to do that in ts ?
-  }
+    id: number;
+    type: "user_job";
+    label: {
+        fr: string; // could have other key. How to do that in ts ?
+    };
 }
 
 export interface Center {
-  id: number;
-  type: "center";
-  name: string;
+    id: number;
+    type: "center";
+    name: string;
 }
 
 export interface Scope {
-  id: number;
-  type: "scope";
-  name: {
-    "fr": string
-  }
+    id: number;
+    type: "scope";
+    name: {
+        fr: string;
+    };
+}
+
+export interface ResultItem<T> {
+    result: T;
+    relevance: number;
 }
 
 export interface User {
-  type: "user";
-  id: number;
-  username: string;
-  text: string;
-  text_without_absence: string;
-  email: string;
-  user_job: Job;
-  label: string;
-  // todo: mainCenter; mainJob; etc..
+    type: "user";
+    id: number;
+    username: string;
+    text: string;
+    text_without_absence: string;
+    email: string;
+    user_job: Job;
+    label: string;
+    // 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 type TranslatableString = {
-  fr?: string;
-  nl?: string;
+    type: "user";
+    id: number;
 }
 
+export type TranslatableString = {
+    fr?: string;
+    nl?: string;
+};
+
 export interface Postcode {
-  id: number;
-  name: string;
-  code: string;
-  center: Point;
+    id: number;
+    name: string;
+    code: string;
+    center: Point;
 }
 
 export type Point = {
-  type: "Point";
-  coordinates: [lat: number, lon: number];
-}
+    type: "Point";
+    coordinates: [lat: number, lon: number];
+};
 
 export interface Country {
-  id: number;
-  name: TranslatableString;
-  code: string;
+    id: number;
+    name: TranslatableString;
+    code: string;
 }
 
-export type AddressRefStatus = 'match'|'to_review'|'reviewed';
+export type AddressRefStatus = "match" | "to_review" | "reviewed";
 
 export interface Address {
-  type: "address";
-  address_id: number;
-  text: string;
-  street: string;
-  streetNumber: string;
-  postcode: Postcode;
-  country: Country;
-  floor: string | null;
-  corridor: string | null;
-  steps: string | null;
-  flat: string | null;
-  buildingName: string | null;
-  distribution: string | null;
-  extra: string | null;
-  confidential: boolean;
-  lines: string[];
-  addressReference: AddressReference | null;
-  validFrom: DateTime;
-  validTo: DateTime | null;
-  point: Point | null;
-  refStatus: AddressRefStatus;
-  isNoAddress: boolean;
+    type: "address";
+    address_id: number;
+    text: string;
+    street: string;
+    streetNumber: string;
+    postcode: Postcode;
+    country: Country;
+    floor: string | null;
+    corridor: string | null;
+    steps: string | null;
+    flat: string | null;
+    buildingName: string | null;
+    distribution: string | null;
+    extra: string | null;
+    confidential: boolean;
+    lines: string[];
+    addressReference: AddressReference | null;
+    validFrom: DateTime;
+    validTo: DateTime | null;
+    point: Point | null;
+    refStatus: AddressRefStatus;
+    isNoAddress: boolean;
 }
 
 export interface AddressWithPoint extends Address {
-  point: Point
+    point: Point;
 }
 
 export interface AddressReference {
-  id: number;
-  createdAt: DateTime | null;
-  deletedAt: DateTime | null;
-  municipalityCode: string;
-  point: Point;
-  postcode: Postcode;
-  refId: string;
-  source: string;
-  street: string;
-  streetNumber: string;
-  updatedAt: DateTime | null;
+    id: number;
+    createdAt: DateTime | null;
+    deletedAt: DateTime | null;
+    municipalityCode: string;
+    point: Point;
+    postcode: Postcode;
+    refId: string;
+    source: string;
+    street: string;
+    streetNumber: string;
+    updatedAt: DateTime | null;
 }
 
 export interface SimpleGeographicalUnit {
-  id: number;
-  layerId: number;
-  unitName: string;
-  unitRefId: string;
+    id: number;
+    layerId: number;
+    unitName: string;
+    unitRefId: string;
 }
 
 export interface GeographicalUnitLayer {
-  id: number;
-  name: TranslatableString;
-  refId: string;
+    id: number;
+    name: TranslatableString;
+    refId: string;
 }
 
 export interface Location {
-  type: "location";
-  id: number;
-  active: boolean;
-  address: Address | null;
-  availableForUsers: boolean;
-  createdAt: DateTime | null;
-  createdBy: User | null;
-  updatedAt: DateTime | null;
-  updatedBy: User | null;
-  email: string | null
-  name: string;
-  phonenumber1: string | null;
-  phonenumber2: string | null;
-  locationType: LocationType;
+    type: "location";
+    id: number;
+    active: boolean;
+    address: Address | null;
+    availableForUsers: boolean;
+    createdAt: DateTime | null;
+    createdBy: User | null;
+    updatedAt: DateTime | null;
+    updatedBy: User | null;
+    email: string | null;
+    name: string;
+    phonenumber1: string | null;
+    phonenumber2: string | null;
+    locationType: LocationType;
 }
 
 export interface LocationAssociated {
-  type: "location";
-  id: number;
+    type: "location";
+    id: number;
 }
 
 export interface LocationType {
-  type: "location-type";
-  id: number;
-  active: boolean;
-  addressRequired: "optional" | "required";
-  availableForUsers: boolean;
-  editableByUsers: boolean;
-  contactData: "optional" | "required";
-  title: TranslatableString;
+    type: "location-type";
+    id: number;
+    active: boolean;
+    addressRequired: "optional" | "required";
+    availableForUsers: boolean;
+    editableByUsers: boolean;
+    contactData: "optional" | "required";
+    title: TranslatableString;
 }
 
 export interface NewsItemType {
@@ -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

@@ -9,13 +9,16 @@
         </template>
         <template v-slot: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">
                             <i class="fa fa-circle me-1 text-chill-yellow mx-2"></i>
                             <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

@@ -41,6 +41,7 @@ const appMessages = {
         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",

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

@@ -62,7 +62,7 @@ export default {
             required: false,
         }
     },
-    emits: ['addNewEntity', 'removeEntity'],
+    emits: ['addNewEntity', 'removeEntity', 'addNewEntityProcessEnded'],
     components: {
         AddPersons,
     },
@@ -121,6 +121,7 @@ export default {
           );
           this.$refs.addPersons.resetSearch(); // to cast child method
           modal.showModal = false;
+          this.$emit('addNewEntityProcessEnded');
       },
       removeEntity(entity) {
           if (!this.$props.removableIfSet) {

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

@@ -0,0 +1,11 @@
+<template>
+<i :class="gender.icon"></i>
+</template>
+
+<script setup>
+
+const props = defineProps({
+    gender: Object
+})
+
+</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

@@ -6,7 +6,7 @@
          <div>
             <div class="item-row col">
                <h2>{{ w.title }}</h2>
-               <div class="flex-grow-1 ms-3 h3">
+                <div class="flex-grow-1 ms-3 h3">
                   <div class="visually-hidden">
                      {{ w.relatedEntityClass }}
                      {{ w.relatedEntityId }}
@@ -38,6 +38,7 @@
                   </span>
                </template>
             </div>
+            <span v-if="w.isOnHoldAtCurrentStep" class="badge bg-success rounded-pill">{{ $t('on_hold') }}</span>
          </div>
 
          <div class="item-row">

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

@@ -1,20 +1,13 @@
 <template>
-
-   <button v-if="hasWorkflow"
-      class="btn btn-primary"
-      @click="openModal">
-      <b>{{ countWorkflows }}</b>
-      <template v-if="countWorkflows > 1">{{ trans(WORKFLOW_ASSOCIATED, { aw: 'other' }) }}</template>
-      <template v-else>{{ trans(WORKFLOW_ASSOCIATED, { aw: 1 }) }}</template>
-   </button>
-
-   <Pick-workflow v-else-if="allowCreate"
+   <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>
 
    <teleport to="body">
@@ -39,6 +32,8 @@
                :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>

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

@@ -1,69 +1,104 @@
 <template>
-    <template v-if="workflowsAvailables.length >= 1">
-        <div class="dropdown d-grid gap-2">
+    <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 setup>
-import { defineProps, defineEmits } from 'vue';
-import { buildLinkCreate } from 'ChillMainAssets/lib/entity-workflow/api.js';
+<script setup lang="ts">
 
-// Define props
-const props = defineProps({
-    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: () => ({}), // Use a function to return an object
-    },
-});
+import {buildLinkCreate} from '../../../lib/entity-workflow/api';
+import {WorkflowAvailable} from "../../../types";
 
-// Define emits
-const emit = defineEmits(['goToGenerateWorkflow']);
-
-// Methods
-function makeLink(workflowName) {
-    return buildLinkCreate(workflowName, props.relatedEntityClass, props.relatedEntityId);
+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;
 }
 
-function goToGenerateWorkflow(event, workflowName) {
-    console.log('goToGenerateWorkflow', event, workflowName);
+const props = withDefaults(defineProps<PickWorkflowConfig>(), {preventDefaultMoveToGenerate: false, goToGenerateWorkflowPayload: {}, allowCreateWorkflow: false});
 
-    if (!props.preventDefaultMoveToGenerate) {
-        console.log('to go generate');
-        window.location.assign(makeLink(workflowName));
+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);
     }
 
-    emit('goToGenerateWorkflow', {
-        event,
-        workflowName,
-        link: makeLink(workflowName),
-        payload: props.goToGenerateWorkflowPayload,
-    });
+    if (!props.preventDefaultMoveToGenerate) {
+        window.location.assign(link);
+    }
+
+    emit('goToGenerateWorkflow', {event, workflowName, link, isLinkValid, payload: props.goToGenerateWorkflowPayload});
+}
+
+const goToDuplicateRelatedEntity = (event: MouseEvent, workflowName: string): void => {
+
 }
 </script>
 

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadAllToggle.vue

@@ -0,0 +1,50 @@
+<template>
+    <div>
+        <button v-if="idsMarkedAsRead.length === 0"
+            class="btn btn-primary"
+            type="button"
+            @click="markAllRead"
+        >
+            <i class="fa fa-sm fa-envelope-open-o"></i> Marquer tout comme lu
+        </button>
+        <button v-else
+            class="btn btn-primary"
+            type="button"
+            @click="undo"
+            >
+            <i class="fa fa-sm fa-envelope-open-o"></i> Annuler
+        </button>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { makeFetch } from "../../../lib/api/apiMethods";
+import { ref } from "vue";
+
+const emit = defineEmits<{
+    (e: 'markAsRead', id: number): void,
+    (e: 'markAsUnRead', id: number): void,
+}>();
+
+const idsMarkedAsRead = ref([] as number[]);
+
+async function markAllRead() {
+    const ids: number[] = await makeFetch("POST", `/api/1.0/main/notification/mark/allread`, null);
+    for (let i of ids) {
+        idsMarkedAsRead.value.push(i);
+        emit('markAsRead', i);
+    }
+}
+
+async function undo() {
+    const touched: number[] = await makeFetch("POST", `/api/1.0/main/notification/mark/undoallread`, idsMarkedAsRead.value);
+    while (idsMarkedAsRead.value.length > 0) {
+        idsMarkedAsRead.value.pop();
+    }
+    for (let t of touched) {
+        emit('markAsUnRead', t);
+    }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue

@@ -28,7 +28,8 @@
             </span>
         </button>
 
-        <a v-if="isButtonGroup"
+        <a
+            v-if="isButtonGroup"
             type="button"
             class="btn btn-outline-primary"
             :href="showUrl"
@@ -37,6 +38,20 @@
             <i class="fa fa-sm fa-comment-o"></i>
         </a>
 
+        <!-- "Mark All Read" button -->
+        <button
+            v-if="showMarkAllButton"
+            class="btn"
+            :class="overrideClass"
+            type="button"
+            :title="$t('markAllRead')"
+            @click="markAllRead"
+        >
+            <i class="fa fa-sm fa-envelope-o"></i>
+            <span v-if="!buttonNoText" class="ps-2">
+                {{ $t("markAllRead") }}
+            </span>
+        </button>
     </div>
 </template>
 
@@ -101,6 +116,4 @@ const markAsRead = () => {
 });*/
 </script>
 
-<style lang="scss">
-
-</style>
+<style lang="scss"></style>

src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.ts

@@ -38,7 +38,9 @@ const messages = {
          person: "Usager",
          birthday: {
             man: "Né le",
-            woman: "Née le"
+            woman: "Née le",
+            neutral: "Né·e le",
+            unknown: "Né·e le",
          },
          deathdate: "Date de décès",
          household_without_address: "Le ménage de l'usager est sans adresse",

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/Gender/edit.html.twig

@@ -0,0 +1,75 @@
+{% extends '@ChillMain/CRUD/Admin/index.html.twig' %}
+
+{% block title %}
+    {% include('@ChillMain/CRUD/_edit_title.html.twig') %}
+{% endblock %}
+
+{% form_theme form _self %}
+
+{% block _gender_icon_widget %}
+    {% for child in form %}
+        <div class="form-check">
+            <input
+                type="radio"
+                id="{{ child.vars.id }}"
+                name="{{ child.vars.full_name }}"
+                value="{{ child.vars.value }}"
+                {% if child.vars.checked %}checked="checked"{% endif %}
+            />
+
+            <label for="{{ child.vars.id }}">{{ child.vars.label|raw }}</label>
+        </div>
+    {% endfor %}
+{% endblock %}
+
+{% block admin_content %}
+    {% set formId = crudMainFormId|default('crud_main_form') %}
+
+    {% block crud_content_header %}
+        <h1 class="mb-5">{{ ('crud.'~crud_name~'.title_edit')|trans }}</h1>
+    {% endblock crud_content_header %}
+
+    {% block crud_content_form %}
+        {{ form_start(form, { 'attr' : { 'id': formId } }) }}
+
+        {{ form_row(form.label) }}
+        {{ form_row(form.genderTranslation) }}
+        {{ form_row(form.icon) }}
+        {{ form_row(form.active) }}
+        {{ form_row(form.order) }}
+
+        {{ form_end(form) }}
+        {% block crud_content_after_form %}{% endblock %}
+
+        {% block crud_content_form_actions %}
+            <ul class="record_actions sticky-form-buttons">
+                {% block content_form_actions_back %}
+                    <li class="cancel">
+                        {#                    <a class="btn btn-cancel" href="{{ chill_return_path_or('chill_crud_'~crud_name~'_index') }}">#}
+                        {#                        {{ 'Cancel'|trans }}#}
+                        {#                    </a>#}
+                    </li>
+                {% endblock %}
+                {% block content_form_actions_before %}{% endblock %}
+                {% block content_form_actions_delete %}
+                    {% if chill_crud_action_exists(crud_name, 'delete') %}
+                        {% if is_granted(chill_crud_config('role', crud_name, 'delete'), entity) %}
+                            <li class="">
+                                <a class="btn btn-small btn-delete" href="{{ chill_path_add_return_path('chill_crud_'~crud_name~'_delete', { 'id': entity.id }) }}"></a>
+                            </li>
+                        {% endif %}
+                    {% endif %}
+                {% endblock content_form_actions_delete %}
+                {% block content_form_actions_save_and_close %}
+                    <li class="">
+                        <button type="submit" name="submit" value="save-and-close" class="btn btn-update" form="{{ formId }}">
+                            {{ 'crud.edit.save_and_close'|trans }}
+                        </button>
+                    </li>
+                {% endblock %}
+                {% block content_form_actions_after %}{% endblock %}
+            </ul>
+        {% endblock %}
+
+    {% endblock %}
+{% endblock admin_content %}

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

@@ -0,0 +1,46 @@
+{% extends '@ChillMain/CRUD/Admin/index.html.twig' %}
+
+{% block admin_content %}
+    {% embed '@ChillMain/CRUD/_index.html.twig' %}
+        {% block table_entities_thead_tr %}
+            <th>id</th>
+            <th>{{ 'label'|trans }}</th>
+            <th>{{ 'icon'|trans }}</th>
+            <th>{{ 'gender.genderTranslation'|trans }}</th>
+            <th>{{ 'active'|trans }}</th>
+            <th>{{ 'ordering'|trans }}</th>
+            <th></th>
+        {% endblock %}
+        {% block table_entities_tbody %}
+            {% for entity in entities %}
+                <tr>
+                    <td>{{ entity.id }}</td>
+                    <td>{{ entity.label|localize_translatable_string }}</td>
+                    <td>{{ entity.icon|chill_entity_render_box }}</td>
+                    <td>{{ entity.genderTranslation.value }}</td>
+                    <td style="text-align:center;">
+						{%- if entity.active -%}
+							<i class="fa fa-check-square-o"></i>
+						{%- else -%}
+							<i class="fa fa-square-o"></i>
+						{%- endif -%}
+					</td>
+                    <td>{{ entity.order }}</td>
+                    <td>
+                        <ul class="record_actions">
+                            <li>
+                                <a href="{{ chill_path_add_return_path('chill_crud_main_gender_edit', { 'id': entity.id}) }}" class="btn btn-sm btn-edit btn-mini"></a>
+                            </li>
+                        </ul>
+                    </td>
+                </tr>
+            {% endfor %}
+        {% 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/Gender/new.html.twig

@@ -0,0 +1,79 @@
+{% extends '@ChillMain/CRUD/Admin/index.html.twig' %}
+
+{% block title %}
+    {% include('@ChillMain/CRUD/_new_title.html.twig') %}
+{% endblock %}
+
+{% form_theme form _self %}
+
+{% block _gender_icon_widget %}
+    {% for child in form %}
+        <div class="form-check">
+            <input
+                type="radio"
+                id="{{ child.vars.id }}"
+                name="{{ child.vars.full_name }}"
+                value="{{ child.vars.value }}"
+                {% if child.vars.checked %}checked="checked"{% endif %}
+            />
+
+            <label for="{{ child.vars.id }}">{{ child.vars.label|raw }}</label>
+        </div>
+    {% endfor %}
+{% endblock %}
+
+{% block admin_content %}
+    {% set formId = crudMainFormId|default('crud_main_form') %}
+
+    {% block crud_content_header %}
+        <h1>{{ ('crud.' ~ crud_name ~ '.title_new')|trans({'%crud_name%' : crud_name }) }}</h1>
+    {% endblock crud_content_header %}
+
+    {% block crud_content_form %}
+        {{ form_start(form, { 'attr' : { 'id': formId } }) }}
+            {{ form_row(form.label) }}
+            {{ form_row(form.genderTranslation) }}
+            {{ form_row(form.icon) }}
+            {{ form_row(form.active) }}
+            {{ form_row(form.order) }}
+        {{ form_end(form) }}
+
+        {% block crud_content_after_form %}{% endblock %}
+
+        {% block crud_content_form_actions %}
+            <ul class="record_actions sticky-form-buttons">
+                {% block content_form_actions_back %}
+                    <li class="cancel">
+                        <a class="btn btn-cancel" href="{{ chill_return_path_or('chill_crud_'~crud_name~'_index') }}">
+                            {{ 'Cancel'|trans }}
+                        </a>
+                    </li>
+                {% endblock %}
+                {% block content_form_actions_save_and_close %}
+                    <li class="">
+                        <button type="submit" name="submit" value="save-and-close" class="btn btn-create" form="{{ formId }}">
+                            {{ 'crud.new.save_and_close'|trans }}
+                        </button>
+                    </li>
+                {% endblock %}
+                {% block content_form_actions_save_and_show %}
+                    <li class="">
+                        <button type="submit" name="submit" value="save-and-show" class="btn btn-create" form="{{ formId }}">
+                            {{ 'crud.new.save_and_show'|trans }}
+                        </button>
+                    </li>
+                {% endblock %}
+                {% block content_form_actions_save_and_new %}
+                    <li class="">
+                        <button type="submit" name="submit" value="save-and-new" class="btn btn-create" form="{{ formId }}">
+                            {{ 'crud.new.save_and_new'|trans }}
+                        </button>
+                    </li>
+                {% endblock %}
+            </ul>
+        {% endblock %}
+
+        {{ form_end(form) }}
+    {% endblock %}
+
+{% endblock admin_content %}

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/Notification/_list_item.html.twig

@@ -1,30 +1,33 @@
 {% macro title(c) %}
     <div class="item-row title">
         <h2 class="notification-title">
-            <a href="{{ chill_path_add_return_path('chill_main_notification_show', {'id': c.notification.id}) }}">
+            <a
+                href="{{ chill_path_add_return_path('chill_main_notification_show', {
+                    id: c.notification.id
+                }) }}"
+            >
                 {{ c.notification.title }}
             </a>
         </h2>
     </div>
 {% endmacro %}
-
 {% macro header(c) %}
     <div class="item-row notification-header mt-2">
         <div class="item-col">
             <ul class="small_in_title">
                 {% if c.step is not defined or c.step == 'inbox' %}
                     <li class="notification-from">
-                        <span class="item-key">
-                            <abbr title="{{ 'notification.received_from'|trans }}">
-                                {{ 'notification.from'|trans }} :
-                            </abbr>
-                        </span>
+                <span class="item-key">
+                    <abbr title="{{ 'notification.received_from' | trans }}">
+                        {{ "notification.from" | trans }} :
+                    </abbr>
+                </span>
                         {% if not c.notification.isSystem %}
                             <span class="badge-user">
-                                    {{ c.notification.sender|chill_entity_render_string({'at_date': c.notification.date}) }}
-                                </span>
+                    {{ c.notification.sender | chill_entity_render_string({'at_date': c.notification.date}) }}
+                </span>
                         {% else %}
-                            <span class="badge-user system">{{ 'notification.is_system'|trans }}</span>
+                            <span class="badge-user system">{{ "notification.is_system" | trans }}</span>
                         {% endif %}
                     </li>
                 {% endif %}
@@ -32,34 +35,37 @@
                     <li class="notification-to">
                         {% if c.notification_cc is defined %}
                             {% if c.notification_cc %}
-                            <span class="item-key">
-                                <abbr title="{{ 'notification.sent_cc'|trans }}">
-                                    {{ 'notification.cc'|trans }} :
-                                </abbr>
-                            </span>
+                                <span class="item-key">
+                    <abbr title="{{ 'notification.sent_cc' | trans }}">
+                        {{ "notification.cc" | trans }} :
+                    </abbr>
+                </span>
                             {% else %}
-                            <span class="item-key">
-                                <abbr title="{{ 'notification.sent_to'|trans }}">
-                                    {{ 'notification.to'|trans }} :
-                                </abbr>
-                            </span>
+                                <span class="item-key">
+                    <abbr title="{{ 'notification.sent_to' | trans }}">
+                        {{ "notification.to" | trans }} :
+                    </abbr>
+                </span>
                             {% endif %}
                         {% else %}
-                          <span class="item-key">
-                            <abbr title="{{ 'notification.sent_to'|trans }}">
-                                {{ 'notification.to'|trans }} :
-                            </abbr>
-                        </span>
+                            <span class="item-key">
+                    <abbr title="{{ 'notification.sent_to' | trans }}">
+                        {{ "notification.to" | trans }} :
+                    </abbr>
+                </span>
                         {% endif %}
                         {% for a in c.notification.addressees %}
                             <span class="badge-user">
-                                {{ a|chill_entity_render_string({'at_date': c.notification.date}) }}
-                            </span>
+                    {{ a | chill_entity_render_string({'at_date': c.notification.date}) }}
+                </span>
                         {% endfor %}
                         {% for a in c.notification.addressesEmails %}
-                            <span class="badge-user" title="{{ 'notification.Email with access link'|trans|e('html_attr') }}">
-                                {{ a }}
-                            </span>
+                            <span
+                                class="badge-user"
+                                title="{{ 'notification.Email with access link'|trans|e('html_attr') }}"
+                            >
+                    {{ a }}
+                </span>
                         {% endfor %}
                     </li>
                 {% endif %}
@@ -70,7 +76,6 @@
         </div>
     </div>
 {% endmacro %}
-
 {% macro content(c) %}
     <div class="item-row separator">
         {% if c.data is defined %}
@@ -83,60 +88,77 @@
         <div class="notification-content">
             {% if c.full_content is defined and c.full_content == true %}
                 {% if c.notification.message is not empty %}
-                    {{ c.notification.message|chill_markdown_to_html }}
+                    {{ c.notification.message | chill_markdown_to_html }}
                 {% else %}
-                    <p class="chill-no-data-statement">{{ 'Any comment'|trans }}</p>
+                    <p class="chill-no-data-statement">{{ "Any comment" | trans }}</p>
                 {% endif %}
             {% else %}
                 {% if c.notification.message is not empty %}
                     {{ c.notification.message|u.truncate(250, '…', false)|chill_markdown_to_html }}
-                    <p class="read-more"><a href="{{ chill_path_add_return_path('chill_main_notification_show', {'id': c.notification.id}) }}">{{ 'Read more'|trans }}</a></p>
+                    <p class="read-more">
+                        <a
+                            href="{{ chill_path_add_return_path('chill_main_notification_show', {
+                                id: c.notification.id
+                            }) }}"
+                        >{{ "Read more" | trans }}</a>
+                    </p>
                 {% else %}
-                    <p class="chill-no-data-statement">{{ 'Any comment'|trans }}</p>
+                    <p class="chill-no-data-statement">{{ "Any comment" | trans }}</p>
                 {% endif %}
             {% endif %}
         </div>
     </div>
 {% endmacro %}
-
 {% macro actions(c) %}
     {% if c.action_button is not defined or c.action_button != false %}
         <div class="item-row separator">
             <div class="item-col item-meta">
-
                 {% if c.notification.comments|length > 0 %}
                     <div class="comment-counter">
-                        <span class="counter">
-                            {{ 'notification.counter comments'|trans({'nb': c.notification.comments|length }) }}
-                        </span>
+            <span class="counter">
+                {{ 'notification.counter comments'|trans({'nb': c.notification.comments|length }) }}
+            </span>
                     </div>
                 {% endif %}
-
             </div>
             <div class="item-col">
                 <ul class="record_actions">
                     <li>
                         {# Vue component #}
-                        <span class="notification_toggle_read_status"
-                              data-notification-id="{{ c.notification.id }}"
-                              data-notification-current-is-read="{{ c.notification.isReadBy(app.user) }}"
-                              data-container="notification-status"
+                        <span
+                            class="notification_toggle_read_status"
+                            data-notification-id="{{ c.notification.id }}"
+                            data-notification-current-is-read="{{ c.notification.isReadBy(app.user) }}"
+                            data-container="notification-status"
                         ></span>
                     </li>
                     {% if is_granted('CHILL_MAIN_NOTIFICATION_UPDATE', c.notification) %}
                         <li>
-                            <a href="{{ chill_path_add_return_path('chill_main_notification_edit', {'id': c.notification.id}) }}"
-                               class="btn btn-edit" title="{{ 'Edit'|trans }}"></a>
+                            <a
+                                href="{{ chill_path_add_return_path(
+                                    'chill_main_notification_edit',
+                                    { id: c.notification.id }
+                                ) }}"
+                                class="btn btn-edit"
+                                title="{{ 'Edit' | trans }}"
+                            ></a>
                         </li>
                     {% endif %}
-                    {% if is_granted('CHILL_MAIN_NOTIFICATION_SEE', c.notification) %}
+                    {% if is_granted('CHILL_MAIN_NOTIFICATION_SEE',
+                        c.notification) %}
                         <li>
-                            <a href="{{ chill_path_add_return_path('chill_main_notification_show', {'id': c.notification.id}) }}"
-                               class="btn {% if not c.notification.isSystem %}btn-show change-icon{% else %}btn-misc{% endif %}" title="{{ 'notification.see_comments_thread'|trans }}">
+                            <a
+                                href="{{ chill_path_add_return_path(
+                                    'chill_main_notification_show',
+                                    { id: c.notification.id }
+                                ) }}"
+                                class="btn {% if not c.notification.isSystem %}btn-show change-icon{% else %}btn-misc{% endif %}"
+                                title="{{ 'notification.see_comments_thread' | trans }}"
+                            >
                                 {% if not c.notification.isSystem() %}
                                     <i class="fa fa-comment"></i>
                                 {% else %}
-                                    {{ 'Read more'|trans }}
+                                    {{ "Read more" | trans }}
                                 {% endif %}
                             </a>
                         </li>
@@ -147,24 +169,30 @@
     {% endif %}
 {% endmacro %}
 
-<div class="item-bloc notification-status {% if notification.isReadBy(app.user) %}read{% else %}unread{% endif %}">
-
+<div
+    class="item-bloc notification-status {% if notification.isReadBy(app.user) %}read{% else %}unread{% endif %}"
+    data-notification-id="{{ notification.id|escape('html_attr') }}"
+>
     {% if fold_item is defined and fold_item != false %}
         <div class="accordion-header" id="flush-heading-{{ notification.id }}">
-            <button type="button" class="accordion-button collapsed"
-                data-bs-toggle="collapse" data-bs-target="#flush-collapse-{{ notification.id }}"
-                aria-expanded="false" aria-controls="flush-collapse-{{ notification.id }}">
-
+            <button
+                type="button"
+                class="accordion-button collapsed"
+                data-bs-toggle="collapse"
+                data-bs-target="#flush-collapse-{{ notification.id }}"
+                aria-expanded="false"
+                aria-controls="flush-collapse-{{ notification.id }}"
+            >
                 {{ _self.title(_context) }}
             </button>
             {{ _self.header(_context) }}
-
         </div>
-        <div id="flush-collapse-{{ notification.id }}"
+        <div
+            id="flush-collapse-{{ notification.id }}"
             class="accordion-collapse collapse"
             aria-labelledby="flush-heading-{{ notification.id }}"
-            data-bs-parent="#notification-fold">
-
+            data-bs-parent="#notification-fold"
+        >
             {{ _self.content(_context) }}
         </div>
         {{ _self.actions(_context) }}
@@ -174,5 +202,4 @@
         {{ _self.content(_context) }}
         {{ _self.actions(_context) }}
     {% endif %}
-
 </div>

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

@@ -1,62 +1,78 @@
-{% extends "@ChillMain/layout.html.twig"  %}
+{% extends "@ChillMain/layout.html.twig" %}
 
 {% block title 'notification.My own notifications'|trans %}
 
 {% block js %}
-  {{ parent() }}
-  {{ encore_entry_script_tags('mod_notification_toggle_read_status') }}
+    {{ parent() }}
+    {{ encore_entry_script_tags("mod_notification_toggle_read_status") }}
+    {{ encore_entry_script_tags("mod_notification_toggle_read_all_status") }}
 {% endblock %}
 
 {% block css %}
     {{ parent() }}
-    {{ encore_entry_link_tags('mod_notification_toggle_read_status') }}
+    {{ encore_entry_link_tags("mod_notification_toggle_read_status") }}
+    {{ encore_entry_link_tags("mod_notification_toggle_read_all_status") }}
 {% endblock %}
 
 {% block content %}
-<div class="col-10 notification notification-list">
-    <h1>{{ block('title') }}</h1>
+    <div class="col-10 notification notification-list">
+        <h1>{{ block("title") }}</h1>
+        <ul class="nav nav-pills justify-content-center">
+            <li class="nav-item">
+                <a
+                    class="nav-link {% if step == 'inbox' %}active{% endif %}"
+                    href="{{ path('chill_main_notification_my') }}"
+                >
+                    {{ "notification.Notifications received" | trans }}
+                    {% if unreads['inbox'] > 0 %}
+                        <span class="badge rounded-pill bg-danger">
+                    {{ unreads["inbox"] }}
+                </span>
+                    {% endif %}
+                </a>
+            </li>
+            <li class="nav-item">
+                <a
+                    class="nav-link {% if step == 'sent' %}active{% endif %}"
+                    href="{{ path('chill_main_notification_sent') }}"
+                >
+                    {{ "notification.Notifications sent" | trans }}
+                    {% if unreads['sent'] > 0 %}
+                        <span class="badge rounded-pill bg-danger">
+                    {{ unreads["sent"] }}
+                </span>
+                    {% endif %}
+                </a>
+            </li>
+        </ul>
 
-    <ul class="nav nav-pills justify-content-center">
-        <li class="nav-item">
-            <a class="nav-link {% if step == 'inbox' %}active{% endif %}" href="{{ path('chill_main_notification_my') }}">
-                {{ 'notification.Notifications received'|trans }}
-                {% if unreads['inbox'] > 0 %}
-                    <span class="badge rounded-pill bg-danger">
-                        {{ unreads['inbox'] }}
-                    </span>
-                {% endif %}
-            </a>
-        </li>
-        <li class="nav-item">
-            <a class="nav-link {% if step == 'sent' %}active{% endif %}" href="{{ path('chill_main_notification_sent') }}">
-                {{ 'notification.Notifications sent'|trans }}
-                {% if unreads['sent'] > 0 %}
-                    <span class="badge rounded-pill bg-danger">
-                        {{ unreads['sent'] }}
-                    </span>
-                {% endif %}
-            </a>
-        </li>
-    </ul>
-
-    {% if datas|length == 0 %}
-        {% if step == 'inbox' %}
-            <p class="chill-no-data-statement">{{ 'notification.Any notification received'|trans }}</p>
+        {% if datas|length == 0 %} {% if step == 'inbox' %}
+            <p class="chill-no-data-statement">
+                {{ "notification.Any notification received" | trans }}
+            </p>
         {% else %}
-            <p class="chill-no-data-statement">{{ 'notification.Any notification sent'|trans }}</p>
+            <p class="chill-no-data-statement">
+                {{ "notification.Any notification sent" | trans }}
+            </p>
         {% endif %}
-    {% else %}
-        <div class="flex-table accordion accordion-flush" id="notification-fold">
-            {% for data in datas %}
-                {% set notification = data.notification %}
-                {% include '@ChillMain/Notification/_list_item.html.twig' with {
-                    'fold_item': true,
-                    'notification_cc': data.template_data.notificationCc is defined ? data.template_data.notificationCc : false
-                } %}
-            {% endfor %}
-        </div>
+        {% else %}
+            <div class="flex-table accordion accordion-flush" id="notification-fold">
+                {% for data in datas %}
+                    {% set notification = data.notification %}
+                    {% include '@ChillMain/Notification/_list_item.html.twig' with {
+                        'fold_item': true, 'notification_cc': data.template_data.notificationCc
+                        is defined ? data.template_data.notificationCc : false } %}
+                {% endfor %}
+            </div>
+
+            {{ chill_pagination(paginator) }}
+        {% endif %}
+
+        <ul class="record_actions sticky-form-buttons justify-content-end">
+            <li class="ml-auto d-flex align-items-center gap-2">
+                <span class="notification_all_read"></span>
+            </li>
+        </ul>
+    </div>
 
-        {{ chill_pagination(paginator) }}
-    {% endif %}
-</div>
 {% endblock content %}

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 %}