Resolve merge with master

src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss

@@ -3,8 +3,10 @@
 */
 
 span.badge-user,
+span.badge-user-group,
 span.badge-person,
 span.badge-thirdparty {
+    margin: 0.2rem 0.1rem;
     display: inline-block;
     padding: 0 0.5em !important;
     background-color: $white;
@@ -18,6 +20,11 @@ span.badge-thirdparty {
     }
 }
 
+span.badge-user-group {
+    font-weight: 600;
+    border-width: 0px;
+}
+
 span.badge-user {
     border-bottom-width: 1px;
     &.system {
@@ -231,6 +238,10 @@ div[class*='budget-'] {
         background-color: $chill-ll-gray;
         color: $chill-blue;
     }
+    &.bg-user-group {
+        background-color: $chill-l-gray;
+        color: $chill-blue;
+    }
     &.bg-confidential {
         background-color: $chill-ll-gray;
         color: $chill-red;

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

@@ -1,27 +1,43 @@
 import {
-  Address,
-  Center,
-  Civility,
-  DateTime,
+    Address,
+    Center,
+    Civility,
+    DateTime,
+    User,
+    WorkflowAvailable
 } from "../../../ChillMainBundle/Resources/public/types";
+import {StoredObject} from "../../../ChillDocStoreBundle/Resources/public/types";
 
 export interface Person {
-  id: number;
-  type: "person";
-  text: string;
-  textAge: string;
-  firstName: string;
-  lastName: string;
-  current_household_address: Address | null;
-  birthdate: DateTime | null;
-  deathdate: DateTime | null;
-  age: number;
-  phonenumber: string;
-  mobilenumber: string;
-  email: string;
-  gender: "woman" | "man" | "other";
-  centers: Center[];
-  civility: Civility | null;
-  current_household_id: number;
-  current_residential_addresses: Address[];
+    id: number;
+    type: "person";
+    text: string;
+    textAge: string;
+    firstName: string;
+    lastName: string;
+    current_household_address: Address | null;
+    birthdate: DateTime | null;
+    deathdate: DateTime | null;
+    age: number;
+    phonenumber: string;
+    mobilenumber: string;
+    email: string;
+    gender: "woman" | "man" | "other";
+    centers: Center[];
+    civility: Civility | null;
+    current_household_id: number;
+    current_residential_addresses: Address[];
+}
+
+export interface AccompanyingPeriodWorkEvaluationDocument {
+    id: number;
+    type: "accompanying_period_work_evaluation_document"
+    storedObject: StoredObject;
+    title: string;
+    createdAt: DateTime | null;
+    createdBy: User | null;
+    updatedAt: DateTime | null;
+    updatedBy: User | null;
+    workflows_availables: WorkflowAvailable[];
+    workflows: object[];
 }

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddEvaluation.vue

@@ -1,183 +1,157 @@
 <template>
-  <div>
-    <a id="evaluations" />
-    <div class="item-title" :title="evaluation.id || 'no id yet'">
-      <span>{{ evaluation.evaluation.title.fr }}</span>
-    </div>
+   <div>
+      <a id="evaluations"></a>
+      <div class="item-title" :title="evaluation.id || 'no id yet'">
+         <span>{{ evaluation.evaluation.title.fr }}</span>
+      </div>
 
-    <div class="item-url mt-3 mb-4" v-if="evaluation.evaluation.url">
-      <i class="fa fa-link fa-lg" />
-      <a :href="evaluation.evaluation.url" target="_blank">{{
-        evaluation.evaluation.url
-      }}</a>
-    </div>
+      <div class="item-url mt-3 mb-4" v-if="evaluation.evaluation.url">
+         <i class="fa fa-link fa-lg"></i>
+         <a :href="evaluation.evaluation.url" target="_blank">{{ evaluation.evaluation.url }}</a>
+      </div>
 
-    <div>
-      <form-evaluation
-        ref="FormEvaluation"
-        :key="evaluation.key"
-        :evaluation="evaluation"
-        :doc-anchor-id="docAnchorId"
-      />
+      <div>
+         <form-evaluation ref="FormEvaluation" :key="evaluation.key" :evaluation="evaluation" :docAnchorId="docAnchorId"></form-evaluation>
 
-      <ul class="record_actions">
-        <li v-if="evaluation.workflows_availables.length > 0">
-          <list-workflow-modal
-            :workflows="evaluation.workflows"
-            :allow-create="true"
-            related-entity-class="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWorkEvaluation"
-            :related-entity-id="evaluation.id"
-            :workflows-availables="evaluation.workflows_availables"
-            @go-to-generate-workflow="goToGenerateWorkflow"
-          />
-        </li>
-        <li v-if="canDelete">
-          <a
-            class="btn btn-delete"
-            @click="modal.showModal = true"
-            :title="$t('action.delete')"
-            >{{ $t("delete_evaluation") }}</a
-          >
-        </li>
-      </ul>
-    </div>
+        <ul class="record_actions">
+           <li v-if="evaluation.workflows_availables.length > 0">
 
-    <teleport to="body">
-      <modal
-        v-if="modal.showModal"
-        :modal-dialog-class="modal.modalDialogClass"
-        @close="modal.showModal = false"
-      >
-        <template #header>
-          <h2 class="modal-title">
-            {{ $t("delete.sure") }}
-          </h2>
-        </template>
-        <template #body>
-          <p>{{ $t("delete.sure_description") }}</p>
-        </template>
-        <template #footer>
-          <button class="btn btn-danger" @click="removeEvaluation(evaluation)">
-            {{ $t("delete.ok") }}
-          </button>
-        </template>
-      </modal>
-    </teleport>
-  </div>
+              <list-workflow-modal
+                 :workflows="evaluation.workflows"
+                 :allowCreate="true"
+                 relatedEntityClass="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWorkEvaluation"
+                 :relatedEntityId="evaluation.id"
+                 :workflowsAvailables="evaluation.workflows_availables"
+                 @go-to-generate-workflow="goToGenerateWorkflow"
+             ></list-workflow-modal>
+
+           </li>
+            <li v-if="canDelete">
+               <a class="btn btn-delete" @click="modal.showModal = true" :title="$t('action.delete')">{{ $t('delete_evaluation')}}</a>
+            </li>
+         </ul>
+      </div>
+
+      <teleport to="body">
+         <modal v-if="modal.showModal" :modalDialogClass="modal.modalDialogClass" @close="modal.showModal = false">
+            <template v-slot:header>
+               <h2 class="modal-title">{{ $t('delete.sure') }}</h2>
+            </template>
+            <template v-slot:body>
+               <p>{{ $t('delete.sure_description') }}</p>
+            </template>
+            <template v-slot:footer>
+               <button class="btn btn-danger" @click="removeEvaluation(evaluation)">
+                  {{ $t('delete.ok') }}
+               </button>
+            </template>
+         </modal>
+      </teleport>
+   </div>
 </template>
 
 <script>
-import FormEvaluation from "./FormEvaluation.vue";
-import Modal from "ChillMainAssets/vuejs/_components/Modal";
-import ListWorkflowModal from "ChillMainAssets/vuejs/_components/EntityWorkflow/ListWorkflowModal.vue";
-import { buildLinkCreate } from "ChillMainAssets/lib/entity-workflow/api.js";
+import FormEvaluation from './FormEvaluation.vue';
+import Modal from 'ChillMainAssets/vuejs/_components/Modal';
+import ListWorkflowModal from 'ChillMainAssets/vuejs/_components/EntityWorkflow/ListWorkflowModal.vue';
+import {buildLinkCreate} from 'ChillMainAssets/lib/entity-workflow/api';
 
 const i18n = {
-  messages: {
-    fr: {
-      no_evaluation_associated: "Aucune évaluation associée",
-      add_an_evaluation: "Évaluations disponibles",
-      evaluation_has_no_evaluation: "Aucune évaluation disponible",
-      startDate: "Date d'ouverture",
-      endDate: "Date de fin",
-      maxDate: "Date d'échéance",
-      warningInterval: "Rappel (jours)",
-      comment: "Note publique",
-      documents: "Documents",
-      delete: {
-        sure: "Êtes-vous sûr?",
-        sure_description:
-          "Cette évaluation sera supprimée de cette action d'accompagnement",
-        ok: "Supprimer",
-      },
-      delete_evaluation: "Supprimer l'évaluation",
-    },
-  },
+   messages: {
+      fr: {
+         no_evaluation_associated: "Aucune évaluation associée",
+         add_an_evaluation: "Évaluations disponibles",
+         evaluation_has_no_evaluation: "Aucune évaluation disponible",
+         startDate: "Date d'ouverture",
+         endDate: "Date de fin",
+         maxDate: "Date d'échéance",
+         warningInterval: "Rappel (jours)",
+         comment: "Note publique",
+         documents: "Documents",
+         delete: {
+            sure: "Êtes-vous sûr?",
+            sure_description: "Cette évaluation sera supprimée de cette action d'accompagnement",
+            ok: "Supprimer"
+         },
+         delete_evaluation: "Supprimer l'évaluation",
+      }
+   }
 };
 
 export default {
-  name: "AddEvaluation",
-  components: {
-    FormEvaluation,
-    Modal,
-    ListWorkflowModal,
-  },
-  props: ["evaluation", "docAnchorId"],
-  i18n,
-  data() {
-    return {
-      modal: {
-        showModal: false,
-        modalDialogClass: "modal-dialog-centered modal-md",
+   name: "AddEvaluation",
+   components: {
+      FormEvaluation,
+      Modal,
+      ListWorkflowModal,
+   },
+   props: ['evaluation', 'docAnchorId'],
+   i18n,
+   data() {
+      return {
+         modal: {
+            showModal: false,
+            modalDialogClass: "modal-dialog-centered modal-md"
+         }
+      };
+   },
+   computed: {
+      pickedEvaluations() {
+         return this.$store.state.evaluationsPicked;
       },
-    };
-  },
-  computed: {
-    pickedEvaluations() {
-      return this.$store.state.evaluationsPicked;
-    },
-    canDelete() {
-      if (this.evaluation.workflows.length > 0) {
-        return false;
-      }
-
-      for (let doc of this.evaluation.documents) {
-        if (doc.workflows.length > 0) {
+      canDelete() {
+        if (this.evaluation.workflows.length > 0) {
           return false;
         }
+
+         for (let doc of this.evaluation.documents) {
+           if (doc.workflows.length > 0) {
+             return false;
+           }
+         }
+
+         return true;
+      },
+   },
+   methods: {
+      removeEvaluation(e) {
+         this.$store.commit('removeEvaluation', e);
+         return;
+      },
+      toggleEditEvaluation(e) {
+         this.$store.commit('toggleEvaluationEdit', { key: this.evaluation.key });
+      },
+      submitForm() {
+         this.toggleEditEvaluation();
+      },
+      goToGenerateWorkflow({event, link, workflowName}) {
+        const callback = (data) => {
+          let evaluationId = data.accompanyingPeriodWorkEvaluations.find(e => e.key === this.evaluation.key).id;
+          window.location.assign(buildLinkCreate(workflowName,
+              'Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluation', evaluationId));
+        };
+
+        return this.$store.dispatch('submit', callback)
+            .catch(e => { console.log(e); throw e; });
       }
-
-      return true;
-    },
-  },
-  methods: {
-    removeEvaluation(e) {
-      this.$store.commit("removeEvaluation", e);
-      return;
-    },
-    toggleEditEvaluation() {
-      this.$store.commit("toggleEvaluationEdit", { key: this.evaluation.key });
-    },
-    submitForm() {
-      this.toggleEditEvaluation();
-    },
-    goToGenerateWorkflow({ workflowName }) {
-      const callback = (data) => {
-        let evaluationId = data.accompanyingPeriodWorkEvaluations.find(
-          (e) => e.key === this.evaluation.key,
-        ).id;
-        window.location.assign(
-          buildLinkCreate(
-            workflowName,
-            "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluation",
-            evaluationId,
-          ),
-        );
-      };
-
-      return this.$store.dispatch("submit", callback).catch((e) => {
-        console.log(e);
-        throw e;
-      });
-    },
-  },
-};
+   }
+}
 </script>
 
 <style lang="scss" scoped>
-div.item-title {
-  .evaluation-title {
-    cursor: default;
-    &::before {
-      content: "";
-    }
-  }
-}
-div.item-url {
-  i {
-    color: unset !important;
-    margin-left: 1rem;
-    margin-right: 0.5rem;
-  }
-}
+   div.item-title{
+      .evaluation-title{
+         cursor: default;
+         &::before{
+            content: "";
+         }
+      }
+   }
+   div.item-url {
+      i {
+         color: unset!important;
+         margin-left: 1rem;
+         margin-right: 0.5rem;
+      }
+   }
 </style>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/store.js

@@ -1,28 +1,22 @@
-import { createStore } from "vuex";
-import {
-  dateToISO,
-  ISOToDate,
-  datetimeToISO,
-  intervalDaysToISO,
-  intervalISOToDays,
-} from "ChillMainAssets/chill/js/date";
-import { fetchResults, makeFetch } from "ChillMainAssets/lib/api/apiMethods.ts";
-import { fetchTemplates } from "ChillDocGeneratorAssets/api/pickTemplate.js";
+import { createStore } from 'vuex';
+import { dateToISO, ISOToDate, datetimeToISO, ISOToDatetime, intervalDaysToISO, intervalISOToDays } from 'ChillMainAssets/chill/js/date';
+import { findSocialActionsBySocialIssue } from 'ChillPersonAssets/vuejs/_api/SocialWorkSocialAction.js';
+import { create } from 'ChillPersonAssets/vuejs/_api/AccompanyingCourseWork.js';
+import { fetchResults, makeFetch } from 'ChillMainAssets/lib/api/apiMethods.ts';
+import { fetchTemplates } from 'ChillDocGeneratorAssets/api/pickTemplate.js';
+import { duplicate } from '../_api/accompanyingCourseWorkEvaluationDocument';
 
-const debug = process.env.NODE_ENV !== "production";
+const debug = process.env.NODE_ENV !== 'production';
+const evalFQDN = encodeURIComponent("Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluation");
 
 const store = createStore({
   strict: debug,
   state: {
     work: window.accompanyingCourseWork,
-    startDate:
-      window.accompanyingCourseWork.startDate !== null
-        ? dateToISO(new Date(window.accompanyingCourseWork.startDate.datetime))
-        : null,
-    endDate:
-      window.accompanyingCourseWork.endDate !== null
-        ? dateToISO(new Date(window.accompanyingCourseWork.endDate.datetime))
-        : null,
+    startDate: window.accompanyingCourseWork.startDate !== null ?
+        dateToISO(new Date(window.accompanyingCourseWork.startDate.datetime)) : null,
+    endDate: window.accompanyingCourseWork.endDate !== null ?
+        dateToISO(new Date(window.accompanyingCourseWork.endDate.datetime)) : null,
     note: window.accompanyingCourseWork.note,
     privateComment: window.accompanyingCourseWork.privateComment,
     goalsPicked: window.accompanyingCourseWork.goals,
@@ -35,17 +29,15 @@ const store = createStore({
     templatesAvailablesForAction: [],
     templatesAvailablesForEvaluation: new Map([]),
     personsPicked: window.accompanyingCourseWork.persons,
-    personsReachables:
-      window.accompanyingCourseWork.accompanyingPeriod.participations
-        .filter((p) => p.endDate == null)
-        .map((p) => p.person),
+    personsReachables: window.accompanyingCourseWork.accompanyingPeriod.participations.filter(p => p.endDate == null)
+      .map(p => p.person),
     handlingThirdParty: window.accompanyingCourseWork.handlingThierParty,
     thirdParties: window.accompanyingCourseWork.thirdParties,
     referrers: window.accompanyingCourseWork.referrers,
     isPosting: false,
     errors: [],
     me: null,
-    version: window.accompanyingCourseWork.version,
+    version: window.accompanyingCourseWork.version
   },
   getters: {
     socialAction(state) {
@@ -55,12 +47,12 @@ const store = createStore({
       return state.resultsForAction.length > 0;
     },
     resultsForGoal: (state) => (goal) => {
-      let founds = state.resultsForGoal.filter((r) => r.goalId === goal.id);
+      let founds = state.resultsForGoal.filter(r => r.goalId === goal.id);
 
       return founds === undefined ? [] : founds;
     },
     resultsPickedForGoal: (state) => (goal) => {
-      let found = state.goalsPicked.find((g) => g.goal.id === goal.id);
+      let found = state.goalsPicked.find(g => g.goal.id === goal.id);
 
       return found === undefined ? [] : found.results;
     },
@@ -82,38 +74,26 @@ const store = createStore({
     },
     buildPayload(state) {
       return {
-        type: "accompanying_period_work",
+        type: 'accompanying_period_work',
         id: state.work.id,
         version: state.version,
-        startDate:
-          state.startDate === null || state.startDate === ""
-            ? null
-            : {
-                datetime: datetimeToISO(ISOToDate(state.startDate)),
-              },
-        endDate:
-          state.endDate === null || state.endDate === ""
-            ? null
-            : {
-                datetime: datetimeToISO(ISOToDate(state.endDate)),
-              },
+        startDate: state.startDate === null || state.startDate === '' ? null : {
+          datetime: datetimeToISO(ISOToDate(state.startDate))
+        },
+        endDate: state.endDate === null || state.endDate === '' ? null : {
+          datetime: datetimeToISO(ISOToDate(state.endDate))
+        },
         note: state.note,
         privateComment: state.privateComment,
-        persons: state.personsPicked.map((p) => ({ id: p.id, type: p.type })),
-        handlingThierParty:
-          state.handlingThirdParty === null
-            ? null
-            : {
-                id: state.handlingThirdParty.id,
-                type: state.handlingThirdParty.type,
-              },
-        results: state.resultsPicked.map((r) => ({ id: r.id, type: r.type })),
-        thirdParties: state.thirdParties.map((t) => ({
-          id: t.id,
-          type: t.type,
-        })),
-        referrers: state.referrers.map((t) => ({ id: t.id, type: t.type })),
-        goals: state.goalsPicked.map((g) => {
+        persons: state.personsPicked.map(p => ({id: p.id, type: p.type})),
+        handlingThierParty: state.handlingThirdParty === null ? null : {
+          id: state.handlingThirdParty.id,
+          type: state.handlingThirdParty.type
+        },
+        results: state.resultsPicked.map(r => ({id: r.id, type: r.type})),
+        thirdParties: state.thirdParties.map(t => ({id: t.id, type: t.type})),
+        referrers: state.referrers.map(t => ({id: t.id, type: t.type})),
+        goals: state.goalsPicked.map(g => {
           let o = {
             type: g.type,
             note: g.note,
@@ -121,72 +101,55 @@ const store = createStore({
               type: g.goal.type,
               id: g.goal.id,
             },
-            results: g.results.map((r) => ({ id: r.id, type: r.type })),
+            results: g.results.map(r => ({id: r.id, type: r.type})),
           };
           if (g.id !== undefined) {
             o.id = g.id;
           }
           return o;
         }),
-        accompanyingPeriodWorkEvaluations: state.evaluationsPicked.map((e) => {
+        accompanyingPeriodWorkEvaluations: state.evaluationsPicked.map(e => {
           let o = {
             type: e.type,
             key: e.key,
             evaluation: {
               id: e.evaluation.id,
-              type: e.evaluation.type,
+              type: e.evaluation.type
             },
-            startDate:
-              e.startDate === null || e.startDate === ""
-                ? null
-                : { datetime: datetimeToISO(ISOToDate(e.startDate)) },
-            endDate:
-              e.endDate === null || e.endDate === ""
-                ? null
-                : { datetime: datetimeToISO(ISOToDate(e.endDate)) },
-            maxDate:
-              e.maxDate === null || e.maxDate === ""
-                ? null
-                : { datetime: datetimeToISO(ISOToDate(e.maxDate)) },
+            startDate: e.startDate === null || e.startDate === '' ? null : { datetime: datetimeToISO(ISOToDate(e.startDate)) },
+            endDate: e.endDate === null || e.endDate === '' ? null : { datetime: datetimeToISO(ISOToDate(e.endDate)) },
+            maxDate: e.maxDate === null || e.maxDate === '' ? null : { datetime: datetimeToISO(ISOToDate(e.maxDate)) },
             warningInterval: intervalDaysToISO(e.warningInterval),
             timeSpent: e.timeSpent,
             comment: e.comment,
-            documents: e.documents,
+            documents: e.documents
           };
           if (e.id !== undefined) {
             o.id = e.id;
           }
 
           return o;
-        }),
+        })
       };
-    },
+    }
   },
   mutations: {
     setWhoAmiI(state, me) {
-      state.me = me;
+        state.me = me;
     },
     setEvaluationsPicked(state, evaluations) {
       state.evaluationsPicked = evaluations.map((e, index) => {
         var k = Object.assign(e, {
           key: index,
           editEvaluation: false,
-          startDate:
-            e.startDate !== null
-              ? dateToISO(new Date(e.startDate.datetime))
-              : null,
-          endDate:
-            e.endDate !== null ? dateToISO(new Date(e.endDate.datetime)) : null,
-          maxDate:
-            e.maxDate !== null ? dateToISO(new Date(e.maxDate.datetime)) : null,
-          warningInterval:
-            e.warningInterval !== null
-              ? intervalISOToDays(e.warningInterval)
-              : null,
+          startDate: e.startDate !== null ? dateToISO(new Date(e.startDate.datetime)) : null,
+          endDate: e.endDate !== null ? dateToISO(new Date(e.endDate.datetime)) : null,
+          maxDate: e.maxDate !== null ? dateToISO(new Date(e.maxDate.datetime)) : null,
+          warningInterval: e.warningInterval !== null ? intervalISOToDays(e.warningInterval) : null,
           timeSpent: e.timeSpent !== null ? e.timeSpent : null,
           documents: e.documents.map((d, docIndex) => {
             return Object.assign(d, {
-              key: docIndex,
+              key: docIndex
             });
           }),
         });
@@ -218,30 +181,28 @@ const store = createStore({
       state.resultsPicked.push(result);
     },
     removeResultPicked(state, result) {
-      state.resultsPicked = state.resultsPicked.filter(
-        (r) => r.id !== result.id,
-      );
+      state.resultsPicked = state.resultsPicked.filter(r => r.id !== result.id);
     },
     addGoal(state, goal) {
       let g = {
         type: "accompanying_period_work_goal",
         goal: goal,
-        note: "",
-        results: [],
-      };
+        note: '',
+        results: []
+      }
       const tmpIndex = () => {
-        let ar = state.goalsPicked.map((g) => g.id),
-          s = Math.min(...ar);
-        return s < 0 ? s : 0;
+        let ar = state.goalsPicked.map(g => g.id),
+            s = Math.min(...ar);
+        return (s < 0) ? s : 0
       };
-      g.id = tmpIndex() - 1;
+      g.id = tmpIndex() -1
       state.goalsPicked.push(g);
     },
     removeGoal(state, goal) {
-      state.goalsPicked = state.goalsPicked.filter((g) => g.id !== goal.id);
+      state.goalsPicked = state.goalsPicked.filter(g => g.id !== goal.id);
     },
-    addResultForGoalPicked(state, { goal, result }) {
-      let found = state.goalsPicked.find((g) => g.goal.id === goal.id);
+    addResultForGoalPicked(state, { goal, result}) {
+      let found = state.goalsPicked.find(g => g.goal.id === goal.id);
 
       if (found === undefined) {
         return;
@@ -250,63 +211,72 @@ const store = createStore({
       found.results.push(result);
     },
     removeResultForGoalPicked(state, { goal, result }) {
-      let found = state.goalsPicked.find((g) => g.goal.id === goal.id);
+      let found = state.goalsPicked.find(g => g.goal.id === goal.id);
 
       if (found === undefined) {
         return;
       }
 
-      found.results = found.results.filter((r) => r.id !== result.id);
+      found.results = found.results.filter(r => r.id !== result.id);
     },
     addDocument(state, payload) {
-      let evaluation = state.evaluationsPicked.find(
-        (e) => e.key === payload.key,
-      );
-      evaluation.documents.push(
-        Object.assign(payload.document, {
+      // associate version to stored object
+      payload.document.storedObject.currentVersion = payload.stored_object_version;
+
+      let evaluation = state.evaluationsPicked.find(e => e.key === payload.key);
+
+      evaluation.documents.push(Object.assign(
+        payload.document, {
           key: evaluation.documents.length + 1,
-          workflows_availables:
-            state.work.workflows_availables_evaluation_documents,
+          workflows_availables: state.work.workflows_availables_evaluation_documents,
           workflows: [],
-        }),
-      );
+        }));
     },
-    removeDocument(state, { key, document }) {
-      let evaluation = state.evaluationsPicked.find((e) => e.key === key);
+    removeDocument(state, {key, document}) {
+      let evaluation = state.evaluationsPicked.find(e => e.key === key);
       if (evaluation === undefined) {
         return;
       }
-      evaluation.documents = evaluation.documents.filter(
-        (d) => d.key !== document.key,
-      );
+      evaluation.documents = evaluation.documents.filter(d => d.key !== document.key);
     },
+    addDuplicatedDocument(state, {document, evaluation_key}) {
+      console.log('add duplicated document', document);
+      console.log('add duplicated dcuemnt - evaluation key', evaluation_key);
+
+      let evaluation = state.evaluationsPicked.find(e => e.key === evaluation_key);
+      document.key = evaluation.documents.length + 1;
+      evaluation.documents.splice(0, 0, document);
+    },
+    /**
+     * Replaces a document in the state with a new document.
+     *
+     * @param {object} state - The current state of the application.
+     * @param {{key: number, oldDocument: {key: number}, stored_object_version: StoredObjectVersion}} payload - The object containing the information about the document to be replaced.
+     * @return {void} - returns nothing.
+     */
     replaceDocument(state, payload) {
-      let evaluation = state.evaluationsPicked.find(
-        (e) => e.key === payload.key,
-      );
+      let evaluation = state.evaluationsPicked.find(e => e.key === payload.key);
       if (evaluation === undefined) {
         return;
       }
 
-      let doc = evaluation.documents.find(
-        (d) => d.key === payload.oldDocument.key,
-      );
+      let doc = evaluation.documents.find(d => d.key === payload.oldDocument.key);
 
-      if (typeof doc === "undefined") {
-        console.error("doc not found");
+      if (typeof doc === 'undefined') {
+        console.error('doc not found');
+        return;
       }
 
-      doc.storedObject = payload.document.storedObject;
+      doc.storedObject.currentVersion = payload.stored_object_version;
       return;
-      let newDocument = Object.assign(payload.document, {
-        key: evaluation.documents.length + 1,
-        workflows_availables:
-          state.work.workflows_availables_evaluation_documents,
-        workflows: [],
-      });
-      evaluation.documents = evaluation.documents.map((d) =>
-        d.id === payload.oldDocument.id ? newDocument : d,
+      let newDocument = Object.assign(
+        payload.document, {
+          key: evaluation.documents.length + 1,
+          workflows_availables: state.work.workflows_availables_evaluation_documents,
+          workflows: [],
+        }
       );
+      evaluation.documents = evaluation.documents.map(d => d.id === payload.oldDocument.id ? newDocument : d);
     },
     addEvaluation(state, evaluation) {
       let e = {
@@ -314,8 +284,8 @@ const store = createStore({
         key: state.evaluationsPicked.length + 1,
         evaluation: evaluation,
         startDate: dateToISO(new Date()),
-        endDate: null,
-        maxDate: null,
+        endDate:  null,
+        maxDate:  null,
         warningInterval: null,
         timeSpent: null,
         comment: "",
@@ -327,43 +297,46 @@ const store = createStore({
       state.evaluationsPicked.push(e);
     },
     removeEvaluation(state, evaluation) {
-      state.evaluationsPicked = state.evaluationsPicked.filter(
-        (e) => e.key !== evaluation.key,
-      );
+      state.evaluationsPicked = state.evaluationsPicked.filter(e => e.key !== evaluation.key);
     },
-    setEvaluationStartDate(state, { key, date }) {
-      state.evaluationsPicked.find((e) => e.key === key).startDate = date;
+    setEvaluationStartDate(state, {key, date}) {
+      state.evaluationsPicked.find(e => e.key === key)
+          .startDate = date;
     },
-    setEvaluationEndDate(state, { key, date }) {
-      console.log("commit date", date);
-      state.evaluationsPicked.find((e) => e.key === key).endDate = date;
+    setEvaluationEndDate(state, {key, date}) {
+      console.log('commit date', date)
+      state.evaluationsPicked.find(e => e.key === key)
+          .endDate = date;
     },
-    setEvaluationMaxDate(state, { key, date }) {
-      state.evaluationsPicked.find((e) => e.key === key).maxDate = date;
+    setEvaluationMaxDate(state, {key, date}) {
+      state.evaluationsPicked.find(e => e.key === key)
+          .maxDate = date;
     },
-    setEvaluationWarningInterval(state, { key, days }) {
-      state.evaluationsPicked.find((e) => e.key === key).warningInterval = days;
+    setEvaluationWarningInterval(state, {key, days}) {
+      state.evaluationsPicked.find(e => e.key === key)
+          .warningInterval = days;
     },
-    setEvaluationTimeSpent(state, { key, time }) {
-      state.evaluationsPicked.find((e) => e.key === key).timeSpent = time;
+    setEvaluationTimeSpent(state, {key, time}) {
+      state.evaluationsPicked.find(e => e.key === key)
+          .timeSpent = time;
     },
-    setEvaluationComment(state, { key, comment }) {
-      state.evaluationsPicked.find((e) => e.key === key).comment = comment;
+    setEvaluationComment(state, {key, comment}) {
+      state.evaluationsPicked.find(e => e.key === key)
+          .comment = comment;
     },
-    toggleEvaluationEdit(state, { key }) {
-      let evaluation = state.evaluationsPicked.find((e) => e.key === key);
+    toggleEvaluationEdit(state, {key}) {
+      let evaluation = state.evaluationsPicked.find(e => e.key === key);
       evaluation.editEvaluation = !evaluation.editEvaluation;
     },
-    setTemplatesForEvaluation(state, { templates, evaluation }) {
+    setTemplatesForEvaluation(state, {templates, evaluation}) {
       state.templatesAvailablesForEvaluation.set(evaluation.id, templates);
     },
     setTemplatesAvailablesForAction(state, templates) {
       state.templatesAvailablesForAction = templates;
     },
     setPersonsPickedIds(state, ids) {
-      state.personsPicked = state.personsReachables.filter((p) =>
-        ids.includes(p.id),
-      );
+      state.personsPicked = state.personsReachables
+        .filter(p => ids.includes(p.id))
     },
     setNote(state, note) {
       state.note = note;
@@ -376,8 +349,8 @@ const store = createStore({
     },
     addThirdParties(state, thirdParties) {
       // filter to remove existing thirdparties
-      let ids = state.thirdParties.map((t) => t.id);
-      let unexistings = thirdParties.filter((t) => !ids.includes(t.id));
+      let ids = state.thirdParties.map(t => t.id);
+      let unexistings = thirdParties.filter(t => !ids.includes(t.id));
 
       for (let i in unexistings) {
         state.thirdParties.push(unexistings[i]);
@@ -385,29 +358,27 @@ const store = createStore({
     },
     updateThirdParty(state, thirdParty) {
       for (let t of state.thirdParties) {
-        if (t.id === thirdParty.id) {
-          state.thirdParties = state.thirdParties.filter(
-            (t) => t.id !== thirdParty.id,
-          );
+        if (t.id === thirdParty.id){
+          state.thirdParties = state.thirdParties.filter(t => t.id !== thirdParty.id);
           state.thirdParties.push(thirdParty);
         }
       }
     },
     removeThirdParty(state, thirdParty) {
-      state.thirdParties = state.thirdParties.filter(
-        (t) => t.id !== thirdParty.id,
-      );
+      state.thirdParties = state.thirdParties
+        .filter(t => t.id !== thirdParty.id);
     },
     addReferrers(state, referrers) {
-      let ids = state.referrers.map((t) => t.id);
-      let unexistings = referrers.filter((t) => !ids.includes(t.id));
+      let ids = state.referrers.map(t => t.id);
+      let unexistings = referrers.filter(t => !ids.includes(t.id));
 
       for (let i in unexistings) {
         state.referrers.push(unexistings[i]);
       }
     },
     removeReferrer(state, user) {
-      state.referrers = state.referrers.filter((u) => u.id !== user.id);
+      state.referrers = state.referrers
+        .filter(u => u.id !== user.id);
     },
     setErrors(state, errors) {
       state.errors = errors;
@@ -417,24 +388,22 @@ const store = createStore({
     },
     updateDocumentTitle(state, payload) {
       if (payload.id === 0) {
-        state.evaluationsPicked
-          .find((e) => e.key === payload.evaluationKey)
-          .documents.find((d) => d.key === payload.key).title = payload.title;
+        state.evaluationsPicked.find(e => e.key === payload.evaluationKey)
+          .documents.find(d => d.key === payload.key).title = payload.title;
       } else {
-        state.evaluationsPicked
-          .find((e) => e.key === payload.evaluationKey)
-          .documents.find((d) => d.id === payload.id).title = payload.title;
+        state.evaluationsPicked.find(e => e.key === payload.evaluationKey)
+          .documents.find(d => d.id === payload.id).title = payload.title;
       }
     },
-    statusDocumentChanged(state, { newStatus, key }) {
-      const e = state.evaluationsPicked.find((e) => e.key === key);
-      if (typeof e === "undefined") {
-        console.error("evaluation not found for given key", { key });
+    statusDocumentChanged(state, {newStatus, key}) {
+      const e = state.evaluationsPicked.find(e => e.key === key);
+      if (typeof e === 'undefined') {
+        console.error('evaluation not found for given key', {key});
       }
 
-      const doc = e.documents.find((d) => d.storedObject?.id === newStatus.id);
-      if (typeof doc === "undefined") {
-        console.error("document not found", { newStatus });
+      const doc = e.documents.find(d => d.storedObject?.id === newStatus.id);
+      if (typeof doc === 'undefined') {
+        console.error('document not found', {newStatus});
       }
 
       doc.storedObject.status = newStatus.status;
@@ -444,184 +413,165 @@ const store = createStore({
   },
   actions: {
     getWhoAmI({ commit }) {
-      let url = `/api/1.0/main/whoami.json`;
-      window
-        .fetch(url)
-        .then((response) => {
-          if (response.ok) {
-            return response.json();
-          }
-          throw {
-            m: "Error while retriving results for goal",
-            s: response.status,
-            b: response.body,
-          };
-        })
-        .then((data) => {
-          commit("setWhoAmiI", data);
-        });
+        let url = `/api/1.0/main/whoami.json`;
+        window.fetch(url)
+            .then(response => {
+                if (response.ok) {
+                    return response.json();
+                }
+                throw { m: 'Error while retriving results for goal', s: response.status, b: response.body };
+            })
+            .then(data => {
+                commit('setWhoAmiI', data);
+            });
     },
     updateThirdParty({ commit }, payload) {
-      commit("updateThirdParty", payload);
+      commit('updateThirdParty', payload);
     },
     getReachablesGoalsForAction({ getters, commit, dispatch }) {
-      let socialActionId = getters.socialAction.id,
-        url = `/api/1.0/person/social-work/goal/by-social-action/${socialActionId}.json`;
+      let
+        socialActionId = getters.socialAction.id,
+        url = `/api/1.0/person/social-work/goal/by-social-action/${socialActionId}.json`
+      ;
       window
-        .fetch(url)
-        .then((response) => {
+        .fetch(
+          url
+        ).then( response => {
           if (response.ok) {
             return response.json();
           }
-          throw {
-            m: "Error while retriving goal for social action",
-            s: response.status,
-            b: response.body,
-          };
-        })
-        .then((data) => {
-          for (let i in data.results) {
-            dispatch("getReachablesResultsForGoal", data.results[i]);
-          }
-        })
-        .catch((errors) => {
-          commit("addErrors", errors);
+          throw { m: 'Error while retriving goal for social action', s: response.status, b: response.body };
+        }).then( data => {
+           for (let i in data.results) {
+             dispatch('getReachablesResultsForGoal', data.results[i]);
+           }
+        }).catch( errors => {
+            commit('addErrors', errors);
         });
     },
     getReachablesResultsForGoal({ commit }, goal) {
-      let url = `/api/1.0/person/social-work/result/by-goal/${goal.id}.json`;
-      window
-        .fetch(url)
-        .then((response) => {
+      let
+        url = `/api/1.0/person/social-work/result/by-goal/${goal.id}.json`
+      ;
+      window.fetch(url)
+        .then(response => {
           if (response.ok) {
             return response.json();
           }
 
-          throw {
-            m: "Error while retriving results for goal",
-            s: response.status,
-            b: response.body,
-          };
+          throw { m: 'Error while retriving results for goal', s: response.status, b: response.body };
         })
-        .then((data) => {
-          commit("setResultsForGoal", { goal, results: data.results });
+        .then(data => {
+          commit('setResultsForGoal', { goal, results: data.results });
         });
     },
     getReachablesResultsForAction({ getters, commit }) {
-      let socialActionId = getters.socialAction.id,
-        url = `/api/1.0/person/social-work/result/by-social-action/${socialActionId}.json`;
-      window
-        .fetch(url)
-        .then((response) => {
+      let
+        socialActionId = getters.socialAction.id,
+        url = `/api/1.0/person/social-work/result/by-social-action/${socialActionId}.json`
+      ;
+      window.fetch(url)
+        .then(response => {
           if (response.ok) {
             return response.json();
           }
 
-          throw {
-            m: "Error while retriving results for social action",
-            s: response.status,
-            b: response.body,
-          };
+          throw { m: 'Error while retriving results for social action', s: response.status, b: response.body };
         })
-        .then((data) => {
-          commit("setResultsForAction", data.results);
+        .then(data => {
+          commit('setResultsForAction', data.results);
         });
     },
     getReachablesEvaluationsForAction({ getters, commit }) {
-      let socialActionId = getters.socialAction.id,
-        url = `/api/1.0/person/social-work/evaluation/by-social-action/${socialActionId}.json`;
-      window
-        .fetch(url)
-        .then((response) => {
+      let
+        socialActionId = getters.socialAction.id,
+        url = `/api/1.0/person/social-work/evaluation/by-social-action/${socialActionId}.json`
+      ;
+      window.fetch(url)
+        .then(response => {
           if (response.ok) {
             return response.json();
           }
-          throw {
-            m: "Error while retriving evaluations for social action",
-            s: response.status,
-            b: response.body,
-          };
+          throw { m: 'Error while retriving evaluations for social action', s: response.status, b: response.body };
         })
-        .then((data) => {
-          commit("setEvaluationsForAction", data.results);
+        .then(data => {
+          commit('setEvaluationsForAction', data.results);
         });
     },
-    addEvaluation({ commit, dispatch }, evaluation) {
-      commit("addEvaluation", evaluation);
-      dispatch("fetchTemplatesAvailablesForEvaluation", evaluation);
+    addEvaluation({commit, dispatch}, evaluation) {
+      commit('addEvaluation', evaluation);
+      dispatch('fetchTemplatesAvailablesForEvaluation', evaluation);
     },
-    fetchTemplatesAvailablesForEvaluation({ commit, state }, evaluation) {
+    fetchTemplatesAvailablesForEvaluation({commit, state}, evaluation) {
       if (!state.templatesAvailablesForEvaluation.has(evaluation.id)) {
         // commit an empty array to avoid parallel fetching for same evaluation id
-        commit("setTemplatesForEvaluation", { templates: [], evaluation });
-        fetchResults(
-          `/api/1.0/person/docgen/template/by-evaluation/${evaluation.id}.json`,
-        ).then((templates) => {
-          commit("setTemplatesForEvaluation", { templates, evaluation });
-        });
+        commit('setTemplatesForEvaluation', {templates: [], evaluation});
+        fetchResults(`/api/1.0/person/docgen/template/by-evaluation/${evaluation.id}.json`)
+          .then(templates => {
+            commit('setTemplatesForEvaluation', {templates, evaluation});
+          });
       }
     },
-    addDocument({ commit }, payload) {
-      commit("addDocument", payload);
+    addDocument({commit}, payload) {
+      commit('addDocument', payload);
     },
-    removeDocument({ commit }, payload) {
-      commit("removeDocument", payload);
+    async duplicateDocument({commit}, {document, evaluation_key}) {
+      const newDoc = await duplicate(document.id);
+      commit('addDuplicatedDocument', {document: newDoc, evaluation_key});
     },
-    replaceDocument({ commit }, payload) {
-      commit("replaceDocument", payload);
+    removeDocument({commit}, payload) {
+      commit('removeDocument', payload);
+    },
+    replaceDocument({commit}, payload) {
+      commit('replaceDocument', payload);
     },
     submit({ getters, state, commit }, callback) {
-      let payload = getters.buildPayload,
-        params = new URLSearchParams({ entity_version: state.version }),
-        url = `/api/1.0/person/accompanying-course/work/${state.work.id}.json?${params}`;
-      commit("setIsPosting", true);
+      let
+        payload = getters.buildPayload,
+        params = new URLSearchParams({'entity_version': state.version}),
+        url = `/api/1.0/person/accompanying-course/work/${state.work.id}.json?${params}`,
+        errors = []
+      ;
+
+      commit('setIsPosting', true);
 
       // console.log('the social action', payload);
 
-      return makeFetch("PUT", url, payload)
-        .then((data) => {
-          if (typeof callback !== "undefined") {
+      return makeFetch('PUT', url, payload)
+        .then(data => {
+          if (typeof(callback) !== 'undefined') {
             return callback(data);
           } else {
             // console.log('payload', payload.privateComment)
             // console.info('nothing to do here, bye bye');
-            window.location.assign(
-              `/fr/person/accompanying-period/${state.work.accompanyingPeriod.id}/work`,
-            );
+            window.location.assign(`/fr/person/accompanying-period/${state.work.accompanyingPeriod.id}/work`);
           }
-        })
-        .catch((error) => {
-          console.log("error", error);
-          commit("setIsPosting", false);
+        }).catch(error => {
+          console.log('error', error)
+          commit('setIsPosting', false);
           throw error;
         });
     },
-    updateDocumentTitle({ commit }, payload) {
-      commit("updateDocumentTitle", payload);
-    },
-  },
+    updateDocumentTitle({commit}, payload) {
+      commit('updateDocumentTitle', payload)
+    }
+  }
 });
 
-store.commit(
-  "setEvaluationsPicked",
-  window.accompanyingCourseWork.accompanyingPeriodWorkEvaluations,
-);
-store.dispatch("getReachablesResultsForAction");
-store.dispatch("getReachablesGoalsForAction");
-store.dispatch("getReachablesEvaluationsForAction");
-store.dispatch("getWhoAmI");
+store.commit('setEvaluationsPicked', window.accompanyingCourseWork.accompanyingPeriodWorkEvaluations);
+store.dispatch('getReachablesResultsForAction');
+store.dispatch('getReachablesGoalsForAction');
+store.dispatch('getReachablesEvaluationsForAction');
+store.dispatch('getWhoAmI');
 
-store.state.evaluationsPicked.forEach((evaluation) => {
-  store.dispatch(
-    "fetchTemplatesAvailablesForEvaluation",
-    evaluation.evaluation,
-  );
+store.state.evaluationsPicked.forEach(evaluation => {
+  store.dispatch('fetchTemplatesAvailablesForEvaluation', evaluation.evaluation)
 });
 
-fetchTemplates(
-  "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWork",
-).then((templates) => {
-  store.commit("setTemplatesAvailablesForAction", templates);
-});
+fetchTemplates('Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWork')
+  .then(templates => {
+    store.commit('setTemplatesAvailablesForAction', templates);
+  }
+)
 
 export { store };

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/accompanyingCourseWorkEvaluationDocument.ts

@@ -0,0 +1,6 @@
+import {AccompanyingPeriodWorkEvaluationDocument} from "../../types";
+import {makeFetch} from "../../../../../ChillMainBundle/Resources/public/lib/api/apiMethods";
+
+export const duplicate = async (id: number): Promise<AccompanyingPeriodWorkEvaluationDocument> => {
+    return makeFetch<null, AccompanyingPeriodWorkEvaluationDocument>("POST", `/api/1.0/person/accompanying-course-work-evaluation-document/${id}/duplicate`);
+}

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue

@@ -1,115 +1,133 @@
 <template>
-  <div class="list-item" :class="{ checked: isChecked }">
-    <label>
-      <div>
-        <input
-          :type="type"
-          v-model="selected"
-          name="item"
-          :id="item"
-          :value="setValueByType(item, type)"
-        />
-      </div>
+   <div class="list-item" :class="{ checked: isChecked }">
 
-      <suggestion-person v-if="item.result.type === 'person'" :item="item" />
+      <label>
+         <div>
+            <input
+               v-bind:type="type"
+               v-model="selected"
+               name="item"
+               v-bind:id="item"
+               v-bind:value="setValueByType(item, type)" />
+         </div>
 
-      <suggestion-third-party
-        v-if="item.result.type === 'thirdparty'"
-        @new-prior-suggestion="newPriorSuggestion"
-        :item="item"
-      />
+         <suggestion-person
+            v-if="item.result.type === 'person'"
+            v-bind:item="item">
+         </suggestion-person>
 
-      <suggestion-user v-if="item.result.type === 'user'" :item="item" />
+         <suggestion-third-party
+            v-if="item.result.type === 'thirdparty'"
+            @newPriorSuggestion="newPriorSuggestion"
+            v-bind:item="item">
+         </suggestion-third-party>
 
-      <suggestion-household
-        v-if="item.result.type === 'household'"
-        :item="item"
-      />
-    </label>
-  </div>
+         <suggestion-user
+            v-if="item.result.type === 'user'"
+            v-bind:item="item">
+         </suggestion-user>
+
+        <suggestion-user-group
+            v-if="item.result.type === 'user_group'"
+            v-bind:item="item">
+        ></suggestion-user-group>
+
+         <suggestion-household
+               v-if="item.result.type === 'household'"
+               v-bind:item="item">
+         </suggestion-household>
+      </label>
+
+   </div>
 </template>
 
 <script>
-import SuggestionPerson from "./TypePerson";
-import SuggestionThirdParty from "./TypeThirdParty";
-import SuggestionUser from "./TypeUser";
-import SuggestionHousehold from "./TypeHousehold";
+import SuggestionPerson from './TypePerson';
+import SuggestionThirdParty from './TypeThirdParty';
+import SuggestionUser from './TypeUser';
+import SuggestionHousehold from './TypeHousehold';
+import SuggestionUserGroup from './TypeUserGroup';
 
 export default {
-  name: "PersonSuggestion",
-  components: {
-    SuggestionPerson,
-    SuggestionThirdParty,
-    SuggestionUser,
-    SuggestionHousehold,
-  },
-  props: ["item", "search", "type"],
-  emits: ["updateSelected", "newPriorSuggestion"],
-  computed: {
-    selected: {
-      set(value) {
-        //console.log('value', value);
-        this.$emit("updateSelected", value);
+   name: 'PersonSuggestion',
+   components: {
+      SuggestionPerson,
+      SuggestionThirdParty,
+      SuggestionUser,
+      SuggestionHousehold,
+      SuggestionUserGroup,
+   },
+   props: [
+      'item',
+      'search',
+      'type'
+   ],
+   emits: ['updateSelected', 'newPriorSuggestion'],
+   computed: {
+      selected: {
+         set(value) {
+            //console.log('value', value);
+            this.$emit('updateSelected', value);
+         },
+         get() {
+            return this.search.selected;
+         }
       },
-      get() {
-        return this.search.selected;
+      isChecked() {
+         return (this.search.selected.indexOf(this.item) === -1) ? false : true;
       },
-    },
-    isChecked() {
-      return this.search.selected.indexOf(this.item) === -1 ? false : true;
-    },
-  },
-  methods: {
-    setValueByType(value, type) {
-      return type === "radio" ? [value] : value;
-    },
-    newPriorSuggestion(response) {
-      this.$emit("newPriorSuggestion", response);
-    },
-  },
+   },
+   methods: {
+      setValueByType(value, type) {
+         return (type === 'radio')? [value] : value;
+      },
+      newPriorSuggestion(response) {
+         this.$emit('newPriorSuggestion', response)
+      }
+   }
 };
 </script>
 
 <style lang="scss">
-div.results {
-  div.list-item {
-    padding: 0.4em 0.8em;
-    display: flex;
-    flex-direction: row;
-    &.checked {
-      background-color: #ececec;
-      border-bottom: 1px dotted #8b8b8b;
-    }
-    label {
-      display: inline-flex;
-      width: 100%;
-      div.container:not(.household) {
-        & > input {
-          margin-right: 0.8em;
-        }
-        > span:not(.name) {
-          margin-left: 0.5em;
-          opacity: 0.5;
-          font-size: 90%;
-          font-style: italic;
-        }
-      }
-      div.right_actions {
-        margin: 0 0 0 auto;
-        display: flex;
-        align-items: flex-end;
-        & > * {
-          margin-left: 0.5em;
-          align-self: baseline;
-        }
+   div.results {
+      div.list-item {
+         padding: 0.4em 0.8em;
+         display: flex;
+         flex-direction: row;
+         &.checked {
+            background-color: #ececec;
+            border-bottom: 1px dotted #8b8b8b;
+         }
+         label {
+            display: inline-flex;
+            width: 100%;
+            div.container:not(.household) {
+               & > input {
+                  margin-right: 0.8em;
+               }
+               > span:not(.name) {
+                  margin-left: 0.5em;
+                  opacity: 0.5;
+                  font-size: 90%;
+                  font-style: italic;
+               }
+            }
+            div.right_actions {
+               margin: 0 0 0 auto;
+               display: flex;
+               align-items: flex-end;
+               & > * {
+                  margin-left: 0.5em;
+                  align-self: baseline;
+               }
 
-        a.btn {
-          border: 1px solid lightgrey;
-          font-size: 70%;
-          padding: 4px;
-        }
+               a.btn {
+                  border: 1px solid lightgrey;
+                  font-size: 70%;
+                  padding: 4px;
+               }
+            }
+         }
       }
-    }
-  }
-}
+   }
 </style>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeUserGroup.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+
+import {ResultItem, UserGroup} from "../../../../../../ChillMainBundle/Resources/public/types";
+import BadgeEntity from "ChillMainAssets/vuejs/_components/BadgeEntity.vue";
+import UserRenderBoxBadge from "ChillMainAssets/vuejs/_components/Entity/UserRenderBoxBadge.vue";
+import UserGroupRenderBox from "ChillMainAssets/vuejs/_components/Entity/UserGroupRenderBox.vue";
+
+interface TypeUserGroupProps {
+  item: ResultItem<UserGroup>;
+}
+
+const props = defineProps<TypeUserGroupProps>();
+</script>
+
+<template>
+  <div class="container user-group-container">
+    <div class="user-group-identification">
+      <user-group-render-box :user-group="props.item.result"></user-group-render-box>
+    </div>
+  </div>
+  <div class="right_actions">
+    <span class="badge rounded-pill bg-user-group">
+        Groupe d'utilisateur
+    </span>
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/OnTheFly/Person.vue

@@ -1,507 +1,430 @@
 <template>
-  <div v-if="action === 'show'">
-    <div class="flex-table">
-      <person-render-box
-        render="bloc"
-        :person="person"
-        :options="{
-          addInfo: true,
-          addEntity: false,
-          addAltNames: true,
-          addAge: true,
-          addId: true,
-          addLink: false,
-          hLevel: 3,
-          addCenter: true,
-          addNoData: true,
-          isMultiline: true,
-        }"
-        :show-residential-addresses="true"
-      />
-    </div>
-  </div>
+<div v-if="action === 'show'">
+   <div class="flex-table">
+      <person-render-box render="bloc"
+         :person="person"
+         :options="{
+            addInfo: true,
+            addEntity: false,
+            addAltNames: true,
+            addAge: true,
+            addId: true,
+            addLink: false,
+            hLevel: 3,
+            addCenter: true,
+            addNoData: true,
+            isMultiline: true
+         }"
+         :show-residential-addresses="true"
+      ></person-render-box>
+   </div>
+</div>
 
-  <div v-else-if="action === 'edit' || action === 'create'">
-    <div class="form-floating mb-3">
+<div v-else-if="action === 'edit' || action === 'create'">
+
+   <div class="form-floating mb-3">
       <input
-        class="form-control form-control-lg"
-        id="lastname"
-        v-model="lastName"
-        :placeholder="$t('person.lastname')"
-        @change="checkErrors"
+         class="form-control form-control-lg"
+         id="lastname"
+         v-model="lastName"
+         :placeholder="$t('person.lastname')"
+         @change="checkErrors"
       />
-      <label for="lastname">{{ $t("person.lastname") }}</label>
-    </div>
+      <label for="lastname">{{ $t('person.lastname') }}</label>
+   </div>
 
-    <div v-if="queryItems">
+   <div v-if="queryItems">
       <ul class="list-suggest add-items inline">
-        <li
-          v-for="(qi, i) in queryItems"
-          :key="i"
-          @click="addQueryItem('lastName', qi)"
-        >
-          <span class="person-text">{{ qi }}</span>
-        </li>
+         <li v-for="(qi, i) in queryItems" :key="i" @click="addQueryItem('lastName', qi)">
+            <span class="person-text">{{ qi }}</span>
+         </li>
       </ul>
-    </div>
+   </div>
 
-    <div class="form-floating mb-3">
+   <div class="form-floating mb-3">
       <input
-        class="form-control form-control-lg"
-        id="firstname"
-        v-model="firstName"
-        :placeholder="$t('person.firstname')"
-        @change="checkErrors"
+         class="form-control form-control-lg"
+         id="firstname"
+         v-model="firstName"
+         :placeholder="$t('person.firstname')"
+         @change="checkErrors"
       />
-      <label for="firstname">{{ $t("person.firstname") }}</label>
-    </div>
+      <label for="firstname">{{ $t('person.firstname') }}</label>
+   </div>
 
-    <div v-if="queryItems">
+   <div v-if="queryItems">
       <ul class="list-suggest add-items inline">
-        <li
-          v-for="(qi, i) in queryItems"
-          :key="i"
-          @click="addQueryItem('firstName', qi)"
-        >
-          <span class="person-text">{{ qi }}</span>
-        </li>
+         <li v-for="(qi, i) in queryItems" :key="i" @click="addQueryItem('firstName', qi)">
+            <span class="person-text">{{ qi }}</span>
+         </li>
       </ul>
-    </div>
+   </div>
 
-    <div
-      v-for="(a, i) in config.altNames"
-      :key="a.key"
-      class="form-floating mb-3"
-    >
+   <div v-for="(a, i) in config.altNames" :key="a.key" class="form-floating mb-3">
       <input
-        class="form-control form-control-lg"
-        :id="a.key"
-        :value="personAltNamesLabels[i]"
-        @input="onAltNameInput"
+         class="form-control form-control-lg"
+         :id="a.key"
+         :value="personAltNamesLabels[i]"
+         @input="onAltNameInput"
       />
       <label :for="a.key">{{ a.labels.fr }}</label>
-    </div>
+   </div>
 
-    <!--  TODO fix placeholder if undefined
+   <!--  TODO fix placeholder if undefined
    -->
-    <div class="form-floating mb-3">
-      <select class="form-select form-select-lg" id="gender" v-model="gender">
-        <option selected disabled>
-          {{ $t("person.gender.placeholder") }}
-        </option>
-        <option v-for="g in config.genders" :value="g.id" :key="g.id">
-          {{ g.label.fr }}
-        </option>
-      </select>
-      <label>{{ $t("person.gender.title") }}</label>
-    </div>
+   <div class="form-floating mb-3">
+     <select
+         class="form-select form-select-lg"
+         id="gender"
+         v-model="gender"
+     >
+       <option selected disabled >{{ $t('person.gender.placeholder') }}</option>
+       <option v-for="g in config.genders" :value="g.id" :key="g.id">
+         {{ g.label }}
+       </option>
+     </select>
+      <label>{{ $t('person.gender.title') }}</label>
+   </div>
 
-    <div
-      class="form-floating mb-3"
-      v-if="showCenters && config.centers.length > 1"
-    >
-      <select class="form-select form-select-lg" id="center" v-model="center">
-        <option selected disabled>
-          {{ $t("person.center.placeholder") }}
-        </option>
-        <option v-for="c in config.centers" :value="c" :key="c.id">
-          {{ c.name }}
-        </option>
-      </select>
-      <label>{{ $t("person.center.title") }}</label>
-    </div>
-
-    <div class="form-floating mb-3">
-      <select
-        class="form-select form-select-lg"
-        id="civility"
-        v-model="civility"
-      >
-        <option selected disabled>
-          {{ $t("person.civility.placeholder") }}
-        </option>
-        <option v-for="c in config.civilities" :value="c.id" :key="c.id">
-          {{ c.name.fr }}
-        </option>
-      </select>
-      <label>{{ $t("person.civility.title") }}</label>
-    </div>
-
-    <div class="input-group mb-3">
-      <span class="input-group-text" id="birthdate"
-        ><i class="fa fa-fw fa-birthday-cake"
-      /></span>
-      <input
-        type="date"
-        class="form-control form-control-lg"
-        id="chill_personbundle_person_birthdate"
-        name="chill_personbundle_person[birthdate]"
-        v-model="birthDate"
-        aria-describedby="birthdate"
-      />
-    </div>
-
-    <div class="input-group mb-3">
-      <span class="input-group-text" id="phonenumber"
-        ><i class="fa fa-fw fa-phone"
-      /></span>
-      <input
-        class="form-control form-control-lg"
-        v-model="phonenumber"
-        :placeholder="$t('person.phonenumber')"
-        :aria-label="$t('person.phonenumber')"
-        aria-describedby="phonenumber"
-      />
-    </div>
-
-    <div class="input-group mb-3">
-      <span class="input-group-text" id="mobilenumber"
-        ><i class="fa fa-fw fa-mobile"
-      /></span>
-      <input
-        class="form-control form-control-lg"
-        v-model="mobilenumber"
-        :placeholder="$t('person.mobilenumber')"
-        :aria-label="$t('person.mobilenumber')"
-        aria-describedby="mobilenumber"
-      />
-    </div>
-
-    <div class="input-group mb-3">
-      <span class="input-group-text" id="email"
-        ><i class="fa fa-fw fa-at"
-      /></span>
-      <input
-        class="form-control form-control-lg"
-        v-model="email"
-        :placeholder="$t('person.email')"
-        :aria-label="$t('person.email')"
-        aria-describedby="email"
-      />
-    </div>
-
-    <div v-if="action === 'create'" class="input-group mb-3 form-check">
-      <input
-        class="form-check-input"
-        type="checkbox"
-        v-model="showAddressForm"
-        name="showAddressForm"
-      />
-      <label class="form-check-label">{{
-        $t("person.address.show_address_form")
-      }}</label>
-    </div>
-    <div
-      v-if="action === 'create' && showAddressFormValue"
-      class="form-floating mb-3"
-    >
-      <p>{{ $t("person.address.warning") }}</p>
-      <add-address
-        :context="addAddress.context"
-        :options="addAddress.options"
-        :address-changed-callback="submitNewAddress"
-        ref="addAddress"
-      />
-    </div>
-
-    <div class="alert alert-warning" v-if="errors.length">
-      <ul>
-        <li v-for="(e, i) in errors" :key="i">
-          {{ e }}
-        </li>
-      </ul>
-    </div>
+  <div class="form-floating mb-3" v-if="showCenters && config.centers.length > 1">
+    <select
+         class="form-select form-select-lg"
+         id="center"
+         v-model="center"
+         >
+         <option selected disabled>{{ $t('person.center.placeholder') }}</option>
+         <option v-for="c in config.centers" :value="c" :key="c.id" >{{ c.name }}</option>
+    </select>
+    <label>{{ $t('person.center.title') }}</label>
   </div>
+
+   <div class="form-floating mb-3">
+      <select
+         class="form-select form-select-lg"
+         id="civility"
+         v-model="civility"
+         >
+         <option selected disabled >{{ $t('person.civility.placeholder') }}</option>
+         <option v-for="c in config.civilities" :value="c.id" :key="c.id">
+            {{ c.name.fr }}
+         </option>
+      </select>
+      <label>{{ $t('person.civility.title') }}</label>
+   </div>
+
+   <div class="input-group mb-3">
+      <span class="input-group-text" id="birthdate"><i class="fa fa-fw fa-birthday-cake"></i></span>
+      <input type="date"
+         class="form-control form-control-lg"
+         id="chill_personbundle_person_birthdate"
+         name="chill_personbundle_person[birthdate]"
+         v-model="birthDate"
+         aria-describedby="birthdate" />
+   </div>
+
+   <div class="input-group mb-3">
+      <span class="input-group-text" id="phonenumber"><i class="fa fa-fw fa-phone"></i></span>
+      <input class="form-control form-control-lg"
+         v-model="phonenumber"
+         :placeholder="$t('person.phonenumber')"
+         :aria-label="$t('person.phonenumber')"
+         aria-describedby="phonenumber" />
+   </div>
+
+   <div class="input-group mb-3">
+      <span class="input-group-text" id="mobilenumber"><i class="fa fa-fw fa-mobile"></i></span>
+      <input class="form-control form-control-lg"
+         v-model="mobilenumber"
+         :placeholder="$t('person.mobilenumber')"
+         :aria-label="$t('person.mobilenumber')"
+         aria-describedby="mobilenumber" />
+   </div>
+
+   <div class="input-group mb-3">
+      <span class="input-group-text" id="email"><i class="fa fa-fw fa-at"></i></span>
+      <input class="form-control form-control-lg"
+         v-model="email"
+         :placeholder="$t('person.email')"
+         :aria-label="$t('person.email')"
+         aria-describedby="email" />
+   </div>
+
+   <div v-if="action === 'create'" class="input-group mb-3 form-check">
+      <input class="form-check-input"
+         type='checkbox'
+         v-model="showAddressForm"
+         name='showAddressForm'/>
+      <label class="form-check-label">{{ $t('person.address.show_address_form') }}</label>
+   </div>
+   <div v-if="action === 'create' && showAddressFormValue" class="form-floating mb-3">
+      <p>{{ $t('person.address.warning') }}</p>
+      <add-address
+         :context="addAddress.context"
+         :options="addAddress.options"
+         :addressChangedCallback="submitNewAddress"
+         ref="addAddress">
+      </add-address>
+   </div>
+
+
+   <div class="alert alert-warning" v-if="errors.length">
+      <ul>
+         <li v-for="(e, i) in errors" :key="i">{{ e }}</li>
+      </ul>
+   </div>
+
+</div>
 </template>
 
 <script>
-import {
-  getCentersForPersonCreation,
-  getCivilities,
-  getGenders,
-  getPerson,
-  getPersonAltNames,
-} from "../../_api/OnTheFly";
-import PersonRenderBox from "../Entity/PersonRenderBox.vue";
+import { getCentersForPersonCreation, getCivilities, getGenders, getPerson, getPersonAltNames } from '../../_api/OnTheFly';
+import PersonRenderBox from '../Entity/PersonRenderBox.vue';
 import AddAddress from "ChillMainAssets/vuejs/Address/components/AddAddress.vue";
 
 export default {
-  name: "OnTheFlyPerson",
-  props: ["id", "type", "action", "query"],
-  //emits: ['createAction'],
-  components: {
-    PersonRenderBox,
-    AddAddress,
-  },
-  data() {
-    return {
-      person: {
-        type: "person",
-        lastName: "",
-        firstName: "",
-        altNames: [],
-        addressId: null,
-        center: null,
+   name: "OnTheFlyPerson",
+   props: ['id', 'type', 'action', 'query'],
+   //emits: ['createAction'],
+   components: {
+      PersonRenderBox,
+      AddAddress
+   },
+   data() {
+      return {
+         person: {
+            type: 'person',
+            lastName: '',
+            firstName: '',
+            altNames: [],
+            addressId: null,
+            center: null,
+         },
+         config: {
+            altNames: [],
+            civilities: [],
+            centers: [],
+            genders: []
+         },
+         showCenters: false, // NOTE: must remains false if the form is not in create mode
+         showAddressFormValue: false,
+         addAddress: {
+            options: {
+               button: {
+                  text:  { create: 'person.address.create_address' },
+                  size: 'btn-sm'
+               },
+               title: { create: 'person.address.create_address' },
+            },
+            context: {
+               target: {}, // boilerplate for getting the address id
+               edit: false,
+               addressId: null,
+               defaults: window.addaddress
+            }
+         },
+         errors: []
+      }
+   },
+   computed: {
+      firstName: {
+         set(value) {
+            this.person.firstName = value;
+         },
+         get() { return this.person.firstName; }
       },
-      config: {
-        altNames: [],
-        civilities: [],
-        centers: [],
-        genders: [],
+      lastName: {
+         set(value) { this.person.lastName = value; },
+         get() { return this.person.lastName; }
       },
-      showCenters: false, // NOTE: must remains false if the form is not in create mode
-      showAddressFormValue: false,
-      addAddress: {
-        options: {
-          button: {
-            text: { create: "person.address.create_address" },
-            size: "btn-sm",
-          },
-          title: { create: "person.address.create_address" },
-        },
-        context: {
-          target: {}, // boilerplate for getting the address id
-          edit: false,
-          addressId: null,
-          defaults: window.addaddress,
-        },
+      gender: {
+         set(value) { this.person.gender = {id: value, type: 'chill_main_gender'}; },
+         get() { return this.person.gender ? this.person.gender.id : null; }
       },
-      errors: [],
-    };
-  },
-  computed: {
-    firstName: {
-      set(value) {
-        this.person.firstName = value;
+      civility: {
+         set(value) { this.person.civility = {id: value, type: 'chill_main_civility'}; },
+         get() { return this.person.civility ? this.person.civility.id : null; }
       },
-      get() {
-        return this.person.firstName;
+      birthDate: {
+         set(value) {
+            if (this.person.birthdate) {
+               this.person.birthdate.datetime = value + "T00:00:00+0100";
+            } else {
+               this.person.birthdate = { datetime: value + "T00:00:00+0100"};
+            }
+         },
+         get() {
+            return (this.person.birthdate) ? this.person.birthdate.datetime.split('T')[0] : '';
+         }
       },
-    },
-    lastName: {
-      set(value) {
-        this.person.lastName = value;
+      phonenumber: {
+         set(value) { this.person.phonenumber = value; },
+         get() { return this.person.phonenumber; }
       },
-      get() {
-        return this.person.lastName;
+      mobilenumber: {
+         set(value) { this.person.mobilenumber = value; },
+         get() { return this.person.mobilenumber; }
       },
-    },
-    gender: {
-      set(value) {
-        this.person.gender = { id: value, type: "chill_main_gender" };
+      email: {
+         set(value) { this.person.email = value; },
+         get() { return this.person.email; }
       },
-      get() {
-        return this.person.gender ? this.person.gender.id : null;
+      showAddressForm: {
+         set(value) { this.showAddressFormValue = value; },
+         get() { return this.showAddressFormValue; }
       },
-    },
-    civility: {
-      set(value) {
-        this.person.civility = { id: value, type: "chill_main_civility" };
-      },
-      get() {
-        return this.person.civility ? this.person.civility.id : null;
-      },
-    },
-    birthDate: {
-      set(value) {
-        if (this.person.birthdate) {
-          this.person.birthdate.datetime = value + "T00:00:00+0100";
-        } else {
-          this.person.birthdate = { datetime: value + "T00:00:00+0100" };
-        }
-      },
-      get() {
-        return this.person.birthdate
-          ? this.person.birthdate.datetime.split("T")[0]
-          : "";
-      },
-    },
-    phonenumber: {
-      set(value) {
-        this.person.phonenumber = value;
-      },
-      get() {
-        return this.person.phonenumber;
-      },
-    },
-    mobilenumber: {
-      set(value) {
-        this.person.mobilenumber = value;
-      },
-      get() {
-        return this.person.mobilenumber;
-      },
-    },
-    email: {
-      set(value) {
-        this.person.email = value;
-      },
-      get() {
-        return this.person.email;
-      },
-    },
-    showAddressForm: {
-      set(value) {
-        this.showAddressFormValue = value;
-      },
-      get() {
-        return this.showAddressFormValue;
-      },
-    },
-    center: {
-      set(value) {
-        console.log("will set center", value);
-        this.person.center = { id: value.id, type: value.type };
-      },
-      get() {
-        const center = this.config.centers.find(
-          (c) => this.person.center !== null && this.person.center.id === c.id,
-        );
+      center: {
+         set(value) {
+           console.log('will set center', value);
+           this.person.center = {id: value.id, type: value.type};
+         },
+         get() {
+           const center = this.config.centers.find(c => this.person.center !== null && this.person.center.id === c.id);
 
-        console.log("center get", center);
+           console.log('center get', center);
 
-        return typeof center === "undefined" ? null : center;
+           return typeof center === 'undefined' ? null : center;
+         },
       },
-    },
-    genderClass() {
-      switch (this.person.gender) {
-        case "woman":
-          return "fa-venus";
-        case "man":
-          return "fa-mars";
-        case "both":
-          return "fa-neuter";
-        case "unknown":
-          return "fa-genderless";
-        default:
-          return "fa-genderless";
+      genderClass() {
+         switch (this.person.gender) {
+            case 'woman':
+               return 'fa-venus';
+            case 'man':
+               return 'fa-mars';
+            case 'both':
+               return 'fa-neuter';
+           case 'unknown':
+               return 'fa-genderless';
+           default:
+               return 'fa-genderless';
+         }
+      },
+      genderTranslation() {
+         switch (this.person.gender.genderTranslation) {
+            case 'woman':
+               return 'person.gender.woman';
+            case 'man':
+               return 'person.gender.man';
+            case 'neutral':
+               return 'person.gender.neutral';
+           case 'unknown':
+               return 'person.gender.unknown';
+           default:
+               return 'person.gender.unknown';
+         }
+      },
+      feminized() {
+         return (this.person.gender === 'woman')? 'e' : '';
+      },
+      personAltNamesLabels() {
+         return this.person.altNames.map(a => a ? a.label : '');
+      },
+      queryItems() {
+         return this.query ? this.query.split(' ') : null;
       }
-    },
-    genderTranslation() {
-      switch (this.person.gender.genderTranslation) {
-        case "woman":
-          return "person.gender.woman";
-        case "man":
-          return "person.gender.man";
-        case "neutral":
-          return "person.gender.neutral";
-        case "unknown":
-          return "person.gender.unknown";
-        default:
-          return "person.gender.unknown";
+   },
+   mounted() {
+      getPersonAltNames()
+         .then(altNames => {
+            this.config.altNames = altNames;
+         });
+      getCivilities()
+         .then(civilities => {
+            if ('results' in civilities) {
+               this.config.civilities = civilities.results;
+            }
+         });
+      getGenders()
+          .then(genders => {
+            if ('results' in genders) {
+              console.log('genders', genders.results)
+              this.config.genders = genders.results;
+            }
+          });
+      if (this.action !== 'create') {
+         this.loadData();
+      } else {
+        // console.log('show centers', this.showCenters);
+        getCentersForPersonCreation()
+            .then(params => {
+              this.config.centers = params.centers.filter(c => c.isActive);
+              this.showCenters = params.showCenters;
+              // console.log('centers', this.config.centers)
+              // console.log('show centers inside', this.showCenters);
+              if (this.showCenters && this.config.centers.length === 1) {
+                this.person.center = this.config.centers[0];
+              }
+            });
       }
-    },
-    feminized() {
-      return this.person.gender === "woman" ? "e" : "";
-    },
-    personAltNamesLabels() {
-      return this.person.altNames.map((a) => (a ? a.label : ""));
-    },
-    queryItems() {
-      return this.query ? this.query.split(" ") : null;
-    },
-  },
-  mounted() {
-    getPersonAltNames().then((altNames) => {
-      this.config.altNames = altNames;
-    });
-    getCivilities().then((civilities) => {
-      if ("results" in civilities) {
-        this.config.civilities = civilities.results;
+   },
+   methods: {
+      checkErrors(e) {
+         this.errors = [];
+         if (this.person.lastName === "") {
+            this.errors.push("Le nom ne doit pas être vide.");
+         }
+         if (this.person.firstName === "") {
+            this.errors.push("Le prénom ne doit pas être vide.");
+         }
+         if (!this.person.gender) {
+            this.errors.push("Le genre doit être renseigné");
+         }
+         if (this.showCenters && this.person.center === null) {
+           this.errors.push("Le centre doit être renseigné");
+         }
+      },
+      loadData() {
+         getPerson(this.id)
+            .then(person => new Promise((resolve, reject) => {
+               this.person = person;
+               //console.log('get person', this.person);
+               resolve();
+         }));
+      },
+      onAltNameInput(event) {
+         const key = event.target.id;
+         const label = event.target.value;
+         let updateAltNames = this.person.altNames.filter((a) => a.key !== key);
+         updateAltNames.push(
+            {'key': key, 'label': label}
+         )
+         this.person.altNames = updateAltNames;
+      },
+      addQueryItem(field, queryItem) {
+         switch (field) {
+            case 'lastName':
+               this.person.lastName = this.person.lastName ? this.person.lastName += ` ${queryItem}` : queryItem;
+               break;
+            case 'firstName':
+               this.person.firstName = this.person.firstName ? this.person.firstName += ` ${queryItem}` : queryItem;
+               break;
+         }
+      },
+      submitNewAddress(payload) {
+         this.person.addressId = payload.addressId;
       }
-    });
-    getGenders().then((genders) => {
-      if ("results" in genders) {
-        this.config.genders = genders.results;
-      }
-    });
-    if (this.action !== "create") {
-      this.loadData();
-    } else {
-      // console.log('show centers', this.showCenters);
-      getCentersForPersonCreation().then((params) => {
-        this.config.centers = params.centers.filter((c) => c.isActive);
-        this.showCenters = params.showCenters;
-        // console.log('centers', this.config.centers)
-        // console.log('show centers inside', this.showCenters);
-        if (this.showCenters && this.config.centers.length === 1) {
-          this.person.center = this.config.centers[0];
-        }
-      });
-    }
-  },
-  methods: {
-    checkErrors() {
-      this.errors = [];
-      if (this.person.lastName === "") {
-        this.errors.push("Le nom ne doit pas être vide.");
-      }
-      if (this.person.firstName === "") {
-        this.errors.push("Le prénom ne doit pas être vide.");
-      }
-      if (!this.person.gender) {
-        this.errors.push("Le genre doit être renseigné");
-      }
-      if (this.showCenters && this.person.center === null) {
-        this.errors.push("Le centre doit être renseigné");
-      }
-    },
-    loadData() {
-      getPerson(this.id).then(
-        (person) =>
-          new Promise((resolve) => {
-            this.person = person;
-            //console.log('get person', this.person);
-            resolve();
-          }),
-      );
-    },
-    onAltNameInput(event) {
-      const key = event.target.id;
-      const label = event.target.value;
-      let updateAltNames = this.person.altNames.filter((a) => a.key !== key);
-      updateAltNames.push({ key: key, label: label });
-      this.person.altNames = updateAltNames;
-    },
-    addQueryItem(field, queryItem) {
-      switch (field) {
-        case "lastName":
-          this.person.lastName = this.person.lastName
-            ? (this.person.lastName += ` ${queryItem}`)
-            : queryItem;
-          break;
-        case "firstName":
-          this.person.firstName = this.person.firstName
-            ? (this.person.firstName += ` ${queryItem}`)
-            : queryItem;
-          break;
-      }
-    },
-    submitNewAddress(payload) {
-      this.person.addressId = payload.addressId;
-    },
-  },
-};
+   }
+}
 </script>
 
 <style lang="scss" scoped>
 div.flex-table {
-  div.item-bloc {
-    div.item-row {
-      div.item-col:last-child {
-        justify-content: flex-start;
+   div.item-bloc {
+      div.item-row {
+         div.item-col:last-child {
+            justify-content: flex-start;
+         }
       }
-    }
-  }
+   }
 }
 dl {
-  dd {
-    margin-left: 1em;
-  }
+   dd {
+      margin-left: 1em;
+   }
 }
 div.form-check {
-  label {
-    margin-left: 0.5em !important;
-  }
+   label {
+      margin-left: 0.5em!important;
+   }
 }
 </style>

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/_item.html.twig

@@ -211,7 +211,7 @@
         <h3 class="chill-beige">Public</h3>
         {% if w.note is not empty %}
             <blockquote class="chill-user-quote">
-                {{ w.note|chill_entity_render_box({'metadata': true }) }}
+                {{ w.note }}
             </blockquote>
         {% else %}
             <span class="chill-no-data-statement">{{ 'No comment associated'|trans }}</span>

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/_objectifs_results_evaluations.html.twig

@@ -237,8 +237,7 @@
                         {% if displayContent is defined and displayContent == 'long' %}
 
                             {% if e.comment is not empty %}
-                                <blockquote
-                                    class="chill-user-quote">{{ e.comment|chill_entity_render_box }}</blockquote>
+                                <blockquote class="chill-user-quote">{{ e.comment }}</blockquote>
                             {% endif %}
 
                             {% import "@ChillDocStore/Macro/macro.html.twig" as m %}

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourseWork/list_recent_by_accompanying_period.html.twig

@@ -33,7 +33,7 @@
                     {% if w.referrers %}
                         <li>
                         <span class="item-key">{{ 'Referrers'|trans ~ ' : ' }}</span>
-                        {% for rh in w.referrersHistory %}
+                        {% for rh in w.referrersHistoryCurrent %}
                             <span class="badge-user">{{ rh.user|chill_entity_render_box({'at_date': rh.startDate}) }}</span>
                         {% endfor %}
                             {% if w.referrers|length == 0 %}

src/Bundle/ChillPersonBundle/Resources/views/GenericDoc/evaluation_document.html.twig

@@ -60,9 +60,11 @@
                     {{ document.storedObject|chill_document_button_group(document.title, is_granted('CHILL_MAIN_ACCOMPANYING_PERIOD_WORK_UPDATE', document.accompanyingPeriodWorkEvaluation.accompanyingPeriodWork)) }}
                 </li>
             {% endif %}
-            {% if is_granted('CHILL_MAIN_ACCOMPANYING_PERIOD_WORK_SEE', w)%}
+            {% if is_granted('CHILL_MAIN_ACCOMPANYING_PERIOD_WORK_UPDATE', w) %}
                 <li>
-                    <a href="{{ chill_path_add_return_path('chill_person_accompanying_period_work_show', {'id': w.id, 'docId': document.id}) }}" class="btn btn-show"></a>
+                    <form method="post" action="{{ chill_path_add_return_path('chill_person_accompanying_period_work_evaluation_document_duplicate', {id: document.id}) }}">
+                        <button type="submit" class="btn btn-duplicate" title="{{ 'crud.view.link_duplicate'|trans }}"></button>
+                    </form>
                 </li>
             {% endif %}
             {% if is_granted('CHILL_MAIN_ACCOMPANYING_PERIOD_WORK_UPDATE', w) %}
@@ -70,6 +72,11 @@
                     <a href="{{ chill_path_add_return_path('chill_person_accompanying_period_work_edit', {'id': w.id, 'docId': document.id}) }}" class="btn btn-edit"></a>
                 </li>
             {% endif %}
+            {% if is_granted('CHILL_MAIN_ACCOMPANYING_PERIOD_WORK_SEE', w)%}
+                <li>
+                    <a href="{{ chill_path_add_return_path('chill_person_accompanying_period_work_show', {'id': w.id, 'docId': document.id}) }}" class="btn btn-show"></a>
+                </li>
+            {% endif %}
         </ul>
 
     </div>

src/Bundle/ChillPersonBundle/Resources/views/Person/list_with_period.html.twig

@@ -328,8 +328,33 @@
                             </div>
                         </div>
                     {% endif %}
-
-
+                    {% if person.signaturesPending|length > 0 %}
+                    <div class="item-row separator">
+                        <div class="wrap-list periods-list">
+                            <div class="wl-row">
+                                <div class="wl-col title">
+                                    <h3>{{ 'workflow.pending_signatures'|trans({nb_signatures: person.signaturesPending|length}) }}</h3>
+                                </div>
+                                <div class="wl-col list">
+                                    {% for signature in person.signaturesPending %}
+                                        {% set entityWorkflow = signature.step.entityWorkflow %}
+                                        {{ entityWorkflow|chill_entity_render_string }}
+                                        <ul class="record_actions small slim">
+                                            <li>
+                                                <a href="{{ chill_path_force_return_path(path('chill_main_workflow_show', {id: entityWorkflow.id}), 'chill_main_workflow_signature_metadata', {signature_id: signature.id}) }}" class="btn btn-misc">
+                                                    <i class="fa fa-pencil"></i>
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a href="{{ chill_path_add_return_path('chill_main_workflow_show', {id: entityWorkflow.id}) }}" class="btn btn-show"></a>
+                                            </li>
+                                        </ul>
+                                    {% endfor %}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    {% endif %}
                 </div>
             {% endfor %}
         </div>

src/Bundle/ChillPersonBundle/Resources/views/Person/signature_list.html.twig

@@ -0,0 +1,44 @@
+{% extends "@ChillPerson/Person/layout.html.twig"  %}
+{% set activeRouteKey = 'chill_person_signature_list' %}
+
+{% block title %}{{ 'Person signatures'|trans ~ ' ' ~ person|chill_entity_render_string }}{% endblock %}
+
+{% block dam %}
+    <a class="btn btn-misc" href="{{ chill_path_add_return_path('chill_main_workflow_signature_metadata', { 'signature_id': s.signature.id}) }}"><i class="fa fa-pencil-square-o"></i> {{ 'workflow.signature_zone.button_sign'|trans }}</a>
+{% endblock %}
+
+{% block content %}
+
+    <h1>{{ 'workflow.signature_list.title'|trans }}</h1>
+
+    <div class="container">
+        <div class="row align-items-center">
+            {% for s in signatures %}
+                {% set signature = s.signature %}
+                {% set workflow = s.workflow %}
+                {% set document = s.document %}
+
+                <div class="item-bloc">
+                        <div class="item-row">
+                            <div class="item-col flex-grow-1">
+                                {% include workflow.handler_template with workflow.handler_template_data|merge({'display_action': true, 'display_action_more': [block('dam')|raw] }) %}
+                            </div>
+                        </div>
+                </div>
+            {% endfor %}
+        </div>
+    </div>
+
+{% endblock %}
+
+{% block css %}
+    {{ parent() }}
+    {{ encore_entry_link_tags('mod_async_upload') }}
+    {{ encore_entry_script_tags('mod_document_action_buttons_group') }}
+{% endblock css %}
+
+{% block js %}
+    {{ parent() }}
+    {{ encore_entry_script_tags('mod_async_upload') }}
+    {{ encore_entry_link_tags('mod_document_action_buttons_group') }}
+{% endblock js %}

src/Bundle/ChillPersonBundle/Resources/views/Workflow/_accompanying_period_work.html.twig

@@ -13,6 +13,11 @@
     </div>
     {% if display_action is defined and display_action == true %}
         <ul class="record_actions">
+            {% for dam in display_action_more|default([]) %}
+                <li>
+                    {{ dam|raw }}
+                </li>
+            {% endfor %}
             <li>
                 <a class="btn btn-update"
                    href="{{ chill_path_add_return_path('chill_person_accompanying_period_work_edit', { 'id': work.id }) }}">

src/Bundle/ChillPersonBundle/Resources/views/Workflow/_evaluation.html.twig

@@ -94,6 +94,11 @@
 {% if display_action is defined and display_action == true %}
     {# TODO add acl #}
     <ul class="record_actions">
+        {% for dam in display_action_more|default([]) %}
+            <li>
+                {{ dam|raw }}
+            </li>
+        {% endfor %}
         <li>
             <a class="btn btn-show" href="{{ path('chill_person_accompanying_period_work_edit', {'id': evaluation.accompanyingPeriodWork.id}) }}">
                 {{ 'Show'|trans }}

src/Bundle/ChillPersonBundle/Resources/views/Workflow/_evaluation_document.html.twig

@@ -121,6 +121,11 @@
 
     {% if display_action is defined and display_action == true %}
         <ul class="record_actions">
+            {% for dam in display_action_more|default([]) %}
+                <li>
+                    {{ dam|raw }}
+                </li>
+            {% endfor %}
             <li>{{ doc.storedObject|chill_document_button_group(doc.title, is_granted('CHILL_MAIN_ACCOMPANYING_PERIOD_WORK_UPDATE', evaluation.accompanyingPeriodWork)) }}</li>
             <li>
                 <a class="btn btn-show" href="{{ path('chill_person_accompanying_period_work_edit', {'id': evaluation.accompanyingPeriodWork.id, 'doc_id': doc.id}) }}">