diff --git a/src/Bundle/ChillPersonBundle/Resources/public/mod/DuplicateSelector/AccompanyingPeriodWorkSelector.ts b/src/Bundle/ChillPersonBundle/Resources/public/mod/DuplicateSelector/AccompanyingPeriodWorkSelector.ts
index eb9a612f1..8e955070a 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/mod/DuplicateSelector/AccompanyingPeriodWorkSelector.ts
+++ b/src/Bundle/ChillPersonBundle/Resources/public/mod/DuplicateSelector/AccompanyingPeriodWorkSelector.ts
@@ -3,50 +3,50 @@ import AccompanyingPeriodWorkSelectorModal from "../../vuejs/_components/Accompa
 import { AccompanyingPeriodWork } from "../../types";
 
 document.addEventListener("DOMContentLoaded", () => {
-  const elements = document.querySelectorAll<HTMLDivElement>(
-    'div[data-pick-entities-type="acpw"]',
-  );
-  elements.forEach((el) => {
-    const uniqid = el.dataset.inputUniqid;
-
-    if (undefined === uniqid) {
-      throw "Uniqid not found on this element";
-    }
-
-    const input = document.querySelector<HTMLInputElement>(
-      `input[data-input-uniqid="${uniqid}"]`,
+    const elements = document.querySelectorAll<HTMLDivElement>(
+        'div[data-pick-entities-type="acpw"]',
     );
+    elements.forEach((el) => {
+        const uniqid = el.dataset.inputUniqid;
 
-    if (null === input) {
-      throw "Element with uniqid not found: " + uniqid;
-    }
+        if (undefined === uniqid) {
+            throw "Uniqid not found on this element";
+        }
 
-    const accompanyingPeriodIdAsString = input.dataset.accompanyingPeriodId;
+        const input = document.querySelector<HTMLInputElement>(
+            `input[data-input-uniqid="${uniqid}"]`,
+        );
 
-    if (undefined === accompanyingPeriodIdAsString) {
-      throw "accompanying period id not found";
-    }
+        if (null === input) {
+            throw "Element with uniqid not found: " + uniqid;
+        }
 
-    const accompanyingPeriodId = Number.parseInt(
-      accompanyingPeriodIdAsString,
-    );
+        const accompanyingPeriodIdAsString = input.dataset.accompanyingPeriodId;
 
-    const app = createApp({
-      template:
-        '<accompanying-period-work-selector-modal :accompanying-period-id="accompanyingPeriodId" @pickWork="pickWork"></accompanying-period-work-selector-modal>',
-      components: { AccompanyingPeriodWorkSelectorModal },
-      data() {
-        return { accompanyingPeriodId };
-      },
-      methods: {
-        pickWork: function (payload: { work: AccompanyingPeriodWork }) {
-          console.log("payload", payload);
+        if (undefined === accompanyingPeriodIdAsString) {
+            throw "accompanying period id not found";
+        }
 
-          input.value = payload.work.id?.toString() ?? '';
-        },
-      },
+        const accompanyingPeriodId = Number.parseInt(
+            accompanyingPeriodIdAsString,
+        );
+
+        const app = createApp({
+            template:
+                '<accompanying-period-work-selector-modal :accompanying-period-id="accompanyingPeriodId" @pickWork="pickWork"></accompanying-period-work-selector-modal>',
+            components: { AccompanyingPeriodWorkSelectorModal },
+            data() {
+                return { accompanyingPeriodId };
+            },
+            methods: {
+                pickWork: function (payload: { work: AccompanyingPeriodWork }) {
+                    console.log("payload", payload);
+
+                    input.value = payload.work.id?.toString() ?? "";
+                },
+            },
+        });
+
+        app.mount(el);
     });
-
-    app.mount(el);
-  });
 });
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/types.ts b/src/Bundle/ChillPersonBundle/Resources/public/types.ts
index 56a295fc3..13a9fe5c9 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/types.ts
+++ b/src/Bundle/ChillPersonBundle/Resources/public/types.ts
@@ -84,170 +84,170 @@ export interface AccompanyingPeriodWorkEvaluationDocument {
 }
 
 export interface AccompanyingPeriodWork {
-  id?: number;
-  accompanyingPeriod?: AccompanyingPeriod;
-  accompanyingPeriodWorkEvaluations: AccompanyingPeriodWorkEvaluation[];
-  createdAt?: string;
-  createdAutomatically: boolean;
-  createdAutomaticallyReason: string;
-  createdBy: User;
-  endDate?: string;
-  goals: AccompanyingPeriodWorkGoal[];
-  handlingThierParty?: Thirdparty;
-  note: string;
-  persons: Person[];
-  privateComment: PrivateCommentEmbeddable;
-  referrersHistory: AccompanyingPeriodWorkReferrerHistory[];
-  results: Result[];
-  socialAction?: SocialAction;
-  startDate?: string;
-  thirdParties: Thirdparty[];
-  updatedAt?: string;
-  updatedBy: User;
-  version: number;
+    id?: number;
+    accompanyingPeriod?: AccompanyingPeriod;
+    accompanyingPeriodWorkEvaluations: AccompanyingPeriodWorkEvaluation[];
+    createdAt?: string;
+    createdAutomatically: boolean;
+    createdAutomaticallyReason: string;
+    createdBy: User;
+    endDate?: string;
+    goals: AccompanyingPeriodWorkGoal[];
+    handlingThierParty?: Thirdparty;
+    note: string;
+    persons: Person[];
+    privateComment: PrivateCommentEmbeddable;
+    referrersHistory: AccompanyingPeriodWorkReferrerHistory[];
+    results: Result[];
+    socialAction?: SocialAction;
+    startDate?: string;
+    thirdParties: Thirdparty[];
+    updatedAt?: string;
+    updatedBy: User;
+    version: number;
 }
 
 interface SocialAction {
-  id: number;
-  parent?: SocialAction | null;
-  children: SocialAction[];
-  issue?: SocialIssue | null;
-  ordering: number;
-  title: {
-    fr: string;
-  };
-  defaultNotificationDelay?: string | null;
-  desactivationDate?: string | null;
-  evaluations: Evaluation[];
-  goals: Goal[];
-  results: Result[];
+    id: number;
+    parent?: SocialAction | null;
+    children: SocialAction[];
+    issue?: SocialIssue | null;
+    ordering: number;
+    title: {
+        fr: string;
+    };
+    defaultNotificationDelay?: string | null;
+    desactivationDate?: string | null;
+    evaluations: Evaluation[];
+    goals: Goal[];
+    results: Result[];
 }
 
 export interface AccompanyingPeriodResource {
-  id: number;
-  accompanyingPeriod: AccompanyingPeriod;
-  comment?: string | null;
-  person?: Person | null;
-  thirdParty?: Thirdparty | null;
+    id: number;
+    accompanyingPeriod: AccompanyingPeriod;
+    comment?: string | null;
+    person?: Person | null;
+    thirdParty?: Thirdparty | null;
 }
 
 export interface Origin {
-  id: number;
-  label: {
-    fr: string;
-  };
-  noActiveAfter: DateTime;
+    id: number;
+    label: {
+        fr: string;
+    };
+    noActiveAfter: DateTime;
 }
 
 export interface ClosingMotive {
-  id: number;
-  active: boolean;
-  name: {
-    fr: string;
-  };
-  ordering: number;
-  isCanceledAccompanyingPeriod: boolean;
-  parent?: ClosingMotive | null;
-  children: ClosingMotive[];
+    id: number;
+    active: boolean;
+    name: {
+        fr: string;
+    };
+    ordering: number;
+    isCanceledAccompanyingPeriod: boolean;
+    parent?: ClosingMotive | null;
+    children: ClosingMotive[];
 }
 
 export interface AccompanyingPeriodParticipation {
-  id: number;
-  startDate: DateTime;
-  endDate?: DateTime | null;
-  accompanyingPeriod: AccompanyingPeriod;
-  person: Person;
+    id: number;
+    startDate: DateTime;
+    endDate?: DateTime | null;
+    accompanyingPeriod: AccompanyingPeriod;
+    person: Person;
 }
 
 export interface AccompanyingPeriodLocationHistory {
-  id: number;
-  startDate: DateTime;
-  endDate?: DateTime | null;
-  addressLocation?: Address | null;
-  period: AccompanyingPeriod;
-  personLocation?: Person | null;
+    id: number;
+    startDate: DateTime;
+    endDate?: DateTime | null;
+    addressLocation?: Address | null;
+    period: AccompanyingPeriod;
+    personLocation?: Person | null;
 }
 
 export interface SocialIssue {
-  id: number;
-  parent?: SocialIssue | null;
-  children: SocialIssue[];
-  socialActions?: SocialAction[] | null;
-  ordering: number;
-  title: {
-    fr: string;
-  };
-  desactivationDate?: string | null;
+    id: number;
+    parent?: SocialIssue | null;
+    children: SocialIssue[];
+    socialActions?: SocialAction[] | null;
+    ordering: number;
+    title: {
+        fr: string;
+    };
+    desactivationDate?: string | null;
 }
 
 export interface Goal {
-  id: number;
-  results: Result[];
-  socialActions?: SocialAction[] | null;
-  title: {
-    fr: string;
-  };
+    id: number;
+    results: Result[];
+    socialActions?: SocialAction[] | null;
+    title: {
+        fr: string;
+    };
 }
 
 export interface Result {
-  id: number;
-  accompanyingPeriodWorks: AccompanyingPeriodWork[];
-  accompanyingPeriodWorkGoals: AccompanyingPeriodWorkGoal[];
-  goals: Goal[];
-  socialActions: SocialAction[];
-  title: {
-    fr: string;
-  };
-  desactivationDate?: string | null;
+    id: number;
+    accompanyingPeriodWorks: AccompanyingPeriodWork[];
+    accompanyingPeriodWorkGoals: AccompanyingPeriodWorkGoal[];
+    goals: Goal[];
+    socialActions: SocialAction[];
+    title: {
+        fr: string;
+    };
+    desactivationDate?: string | null;
 }
 
 export interface AccompanyingPeriodWorkGoal {
-  id: number;
-  accompanyingPeriodWork: AccompanyingPeriodWork;
-  goal: Goal;
-  note: string;
-  results: Result[];
+    id: number;
+    accompanyingPeriodWork: AccompanyingPeriodWork;
+    goal: Goal;
+    note: string;
+    results: Result[];
 }
 
 export interface AccompanyingPeriodWorkEvaluation {
-  accompanyingPeriodWork: AccompanyingPeriodWork | null;
-  comment: string;
-  createdAt: DateTime | null;
-  createdBy: User | null;
-  documents: AccompanyingPeriodWorkEvaluationDocument[];
-  endDate: DateTime | null;
-  evaluation: Evaluation | null;
-  id: number | null;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  key: any;
-  maxDate: DateTime | null;
-  startDate: DateTime | null;
-  updatedAt: DateTime | null;
-  updatedBy: User | null;
-  warningInterval: string | null;
-  timeSpent: number | null;
+    accompanyingPeriodWork: AccompanyingPeriodWork | null;
+    comment: string;
+    createdAt: DateTime | null;
+    createdBy: User | null;
+    documents: AccompanyingPeriodWorkEvaluationDocument[];
+    endDate: DateTime | null;
+    evaluation: Evaluation | null;
+    id: number | null;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    key: any;
+    maxDate: DateTime | null;
+    startDate: DateTime | null;
+    updatedAt: DateTime | null;
+    updatedBy: User | null;
+    warningInterval: string | null;
+    timeSpent: number | null;
 }
 
 export interface Evaluation {
-  id: number;
-  url: string;
-  socialActions: SocialAction[];
-  title: {
-    fr: string;
-  };
-  active: boolean;
-  delay: string;
-  notificationDelay: string;
+    id: number;
+    url: string;
+    socialActions: SocialAction[];
+    title: {
+        fr: string;
+    };
+    active: boolean;
+    delay: string;
+    notificationDelay: string;
 }
 
 export interface AccompanyingPeriodWorkReferrerHistory {
-  id: number;
-  accompanyingPeriodWork: AccompanyingPeriodWork;
-  user: User;
-  startDate: DateTime;
-  endDate: DateTime | null;
-  createdAt: DateTime;
-  updatedAt: DateTime | null;
-  createdBy: User;
-  updatedBy: User | null;
+    id: number;
+    accompanyingPeriodWork: AccompanyingPeriodWork;
+    user: User;
+    startDate: DateTime;
+    endDate: DateTime | null;
+    createdAt: DateTime;
+    updatedAt: DateTime | null;
+    createdBy: User;
+    updatedBy: User | null;
 }
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/CommentInput.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/CommentInput.vue
index 62b46d2da..84a27a5ed 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/CommentInput.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/CommentInput.vue
@@ -1,19 +1,19 @@
 <template>
-  <div class="row mb-3">
-    <label class="col-sm-4 col-form-label visually-hidden">{{
-      trans(EVALUATION_PUBLIC_COMMENT)
-    }}</label>
-    <div class="col-sm-12">
-      <ckeditor
-        :editor="ClassicEditor"
-        :config="classicEditorConfig"
-        :placeholder="trans(EVALUATION_COMMENT_PLACEHOLDER)"
-        :value="comment"
-        @input="$emit('update:comment', $event)"
-        tag-name="textarea"
-      ></ckeditor>
+    <div class="row mb-3">
+        <label class="col-sm-4 col-form-label visually-hidden">{{
+            trans(EVALUATION_PUBLIC_COMMENT)
+        }}</label>
+        <div class="col-sm-12">
+            <ckeditor
+                :editor="ClassicEditor"
+                :config="classicEditorConfig"
+                :placeholder="trans(EVALUATION_COMMENT_PLACEHOLDER)"
+                :value="comment"
+                @input="$emit('update:comment', $event)"
+                tag-name="textarea"
+            ></ckeditor>
+        </div>
     </div>
-  </div>
 </template>
 
 <script setup>
@@ -21,9 +21,9 @@ import { Ckeditor } from "@ckeditor/ckeditor5-vue";
 import { ClassicEditor } from "ckeditor5";
 import classicEditorConfig from "ChillMainAssets/module/ckeditor5/editor_config";
 import {
-  EVALUATION_PUBLIC_COMMENT,
-  EVALUATION_COMMENT_PLACEHOLDER,
-  trans,
+    EVALUATION_PUBLIC_COMMENT,
+    EVALUATION_COMMENT_PLACEHOLDER,
+    trans,
 } from "translator";
 
 defineProps(["comment"]);
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/DateInputs.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/DateInputs.vue
index 86c9a69e7..ac16b467f 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/DateInputs.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/DateInputs.vue
@@ -1,71 +1,71 @@
 <template>
-  <div class="row mb-3">
-    <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
-      {{ trans(EVALUATION_STARTDATE) }}
-    </label>
-    <div class="col-8 col-sm-4 col-md-8 col-lg-4">
-      <input
-        class="form-control form-control-sm"
-        type="date"
-        :value="startDate"
-        @input="$emit('update:startDate', $event.target.value)"
-      />
+    <div class="row mb-3">
+        <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
+            {{ trans(EVALUATION_STARTDATE) }}
+        </label>
+        <div class="col-8 col-sm-4 col-md-8 col-lg-4">
+            <input
+                class="form-control form-control-sm"
+                type="date"
+                :value="startDate"
+                @input="$emit('update:startDate', $event.target.value)"
+            />
+        </div>
+
+        <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
+            {{ trans(EVALUATION_ENDDATE) }}
+        </label>
+        <div class="col-8 col-sm-4 col-md-8 col-lg-4">
+            <input
+                class="form-control form-control-sm"
+                type="date"
+                :value="endDate"
+                @input="$emit('update:endDate', $event.target.value)"
+            />
+        </div>
     </div>
 
-    <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
-      {{ trans(EVALUATION_ENDDATE) }}
-    </label>
-    <div class="col-8 col-sm-4 col-md-8 col-lg-4">
-      <input
-        class="form-control form-control-sm"
-        type="date"
-        :value="endDate"
-        @input="$emit('update:endDate', $event.target.value)"
-      />
-    </div>
-  </div>
+    <div class="row mb-3">
+        <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
+            {{ trans(EVALUATION_MAXDATE) }}
+        </label>
+        <div class="col-8 col-sm-4 col-md-8 col-lg-4">
+            <input
+                class="form-control form-control-sm"
+                type="date"
+                :value="maxDate"
+                @input="$emit('update:maxDate', $event.target.value)"
+            />
+        </div>
 
-  <div class="row mb-3">
-    <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
-      {{ trans(EVALUATION_MAXDATE) }}
-    </label>
-    <div class="col-8 col-sm-4 col-md-8 col-lg-4">
-      <input
-        class="form-control form-control-sm"
-        type="date"
-        :value="maxDate"
-        @input="$emit('update:maxDate', $event.target.value)"
-      />
+        <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
+            {{ trans(EVALUATION_WARNING_INTERVAL) }}
+        </label>
+        <div class="col-8 col-sm-4 col-md-8 col-lg-4">
+            <input
+                class="form-control form-control-sm"
+                type="number"
+                :value="warningInterval"
+                @input="$emit('update:warningInterval', $event.target.value)"
+            />
+        </div>
     </div>
-
-    <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
-      {{ trans(EVALUATION_WARNING_INTERVAL) }}
-    </label>
-    <div class="col-8 col-sm-4 col-md-8 col-lg-4">
-      <input
-        class="form-control form-control-sm"
-        type="number"
-        :value="warningInterval"
-        @input="$emit('update:warningInterval', $event.target.value)"
-      />
-    </div>
-  </div>
 </template>
 
 <script setup>
 import {
-  EVALUATION_STARTDATE,
-  EVALUATION_ENDDATE,
-  EVALUATION_MAXDATE,
-  EVALUATION_WARNING_INTERVAL,
-  trans,
+    EVALUATION_STARTDATE,
+    EVALUATION_ENDDATE,
+    EVALUATION_MAXDATE,
+    EVALUATION_WARNING_INTERVAL,
+    trans,
 } from "translator";
 
 defineProps(["startDate", "endDate", "maxDate", "warningInterval"]);
 defineEmits([
-  "update:startDate",
-  "update:endDate",
-  "update:maxDate",
-  "update:warningInterval",
+    "update:startDate",
+    "update:endDate",
+    "update:maxDate",
+    "update:warningInterval",
 ]);
 </script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/DocumentActions.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/DocumentActions.vue
index 3c68c1ea5..592e9a7fd 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/DocumentActions.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/DocumentActions.vue
@@ -1,43 +1,43 @@
 <template>
-  <div class="row mb-3">
-    <h6>{{ trans(EVALUATION_DOCUMENT_ADD) }} :</h6>
-    <pick-template
-      entityClass="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWorkEvaluation"
-      :id="evaluation.id"
-      :templates="templates"
-      :preventDefaultMoveToGenerate="true"
-      @go-to-generate-document="$emit('submitBeforeGenerate', $event)"
-    >
-      <template v-slot:title>
-        <label class="col-form-label">{{
-          trans(EVALUATION_GENERATE_A_DOCUMENT)
-        }}</label>
-      </template>
-    </pick-template>
-    <div>
-      <label class="col-form-label">{{
-        trans(EVALUATION_DOCUMENT_UPLOAD)
-      }}</label>
-      <ul class="record_actions document-upload">
-        <li>
-          <drop-file-modal
-            :allow-remove="false"
-            @add-document="$emit('addDocument', $event)"
-          ></drop-file-modal>
-        </li>
-      </ul>
+    <div class="row mb-3">
+        <h6>{{ trans(EVALUATION_DOCUMENT_ADD) }} :</h6>
+        <pick-template
+            entityClass="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWorkEvaluation"
+            :id="evaluation.id"
+            :templates="templates"
+            :preventDefaultMoveToGenerate="true"
+            @go-to-generate-document="$emit('submitBeforeGenerate', $event)"
+        >
+            <template v-slot:title>
+                <label class="col-form-label">{{
+                    trans(EVALUATION_GENERATE_A_DOCUMENT)
+                }}</label>
+            </template>
+        </pick-template>
+        <div>
+            <label class="col-form-label">{{
+                trans(EVALUATION_DOCUMENT_UPLOAD)
+            }}</label>
+            <ul class="record_actions document-upload">
+                <li>
+                    <drop-file-modal
+                        :allow-remove="false"
+                        @add-document="$emit('addDocument', $event)"
+                    ></drop-file-modal>
+                </li>
+            </ul>
+        </div>
     </div>
-  </div>
 </template>
 
 <script setup>
 import PickTemplate from "ChillDocGeneratorAssets/vuejs/_components/PickTemplate.vue";
 import DropFileModal from "ChillDocStoreAssets/vuejs/DropFileWidget/DropFileModal.vue";
 import {
-  EVALUATION_DOCUMENT_ADD,
-  EVALUATION_DOCUMENT_UPLOAD,
-  EVALUATION_GENERATE_A_DOCUMENT,
-  trans,
+    EVALUATION_DOCUMENT_ADD,
+    EVALUATION_DOCUMENT_UPLOAD,
+    EVALUATION_GENERATE_A_DOCUMENT,
+    trans,
 } from "translator";
 
 defineProps(["evaluation", "templates"]);
@@ -46,6 +46,6 @@ defineEmits(["addDocument", "submitBeforeGenerate"]);
 
 <style scoped>
 ul.document-upload {
-  justify-content: flex-start;
+    justify-content: flex-start;
 }
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/DocumentsList.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/DocumentsList.vue
index e8f08c693..b295f2ba6 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/DocumentsList.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/DocumentsList.vue
@@ -1,178 +1,239 @@
 <template>
-  <div class="row mb-3">
-    <h5>{{ trans(EVALUATION_DOCUMENTS) }} :</h5>
-    <div class="flex-table">
-      <div
-        class="item-bloc"
-        v-for="(d, i) in documents"
-        :key="d.id"
-        :class="[parseInt(docAnchorId) === d.id ? 'bg-blink' : 'nothing']"
-      >
-        <div :id="'document_' + d.id" class="item-row">
-          <div class="input-group input-group-lg mb-3 row">
-            <label class="col-sm-3 col-form-label">Titre du document:</label>
-            <div class="col-sm-9">
-              <input
-                class="form-control document-title"
-                type="text"
-                :value="d.title"
-                :id="d.id"
-                :data-key="i"
-                @input="$emit('inputDocumentTitle', $event)"
-              />
-            </div>
-          </div>
-        </div>
-        <div class="item-row">
-          <div class="item-col item-meta">
-            <p v-if="d.createdBy" class="createdBy">
-              Créé par {{ d.createdBy.text }}<br />
-              Le {{ $d(ISOToDatetime(d.createdAt.datetime), "long") }}
-            </p>
-          </div>
-        </div>
-        <div class="item-row">
-          <div class="item-col">
-            <ul class="record_actions">
-              <li
-                v-if="
-                  d.workflows_availables.length > 0 || d.workflows.length > 0
-                "
-              >
-                <list-workflow-modal
-                  :workflows="d.workflows"
-                  :allowCreate="true"
-                  relatedEntityClass="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWorkEvaluationDocument"
-                  :relatedEntityId="d.id"
-                  :workflowsAvailables="d.workflows_availables"
-                  :preventDefaultMoveToGenerate="true"
-                  :goToGenerateWorkflowPayload="{ doc: d }"
-                  @go-to-generate-workflow="
-                    $emit('goToGenerateWorkflow', $event)
-                  "
-                ></list-workflow-modal>
-              </li>
-              <li>
-                <button
-                  v-if="AmIRefferer"
-                  class="btn btn-notify"
-                  @click="$emit('goToGenerateNotification', d, false)"
-                ></button>
-                <template v-else>
-                  <button
-                    id="btnGroupNotifyButtons"
-                    type="button"
-                    class="btn btn-notify dropdown-toggle"
-                    :title="trans(EVALUATION_NOTIFICATION_SEND)"
-                    data-bs-toggle="dropdown"
-                    aria-expanded="false"
-                  >
-                    &nbsp;
-                  </button>
-                  <ul
-                    class="dropdown-menu"
-                    aria-labelledby="btnGroupNotifyButtons"
-                  >
-                    <li>
-                      <a
-                        class="dropdown-item"
-                        @click="$emit('goToGenerateNotification', d, true)"
-                      >
-                        {{ trans(EVALUATION_NOTIFICATION_NOTIFY_REFERRER) }}
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        class="dropdown-item"
-                        @click="$emit('goToGenerateNotification', d, false)"
-                      >
-                        {{ trans(EVALUATION_NOTIFICATION_NOTIFY_ANY) }}
-                      </a>
-                    </li>
-                  </ul>
-                </template>
-              </li>
-              <li>
-                <document-action-buttons-group
-                  :stored-object="d.storedObject"
-                  :filename="d.title"
-                  :can-edit="true"
-                  :execute-before-leave="submitBeforeLeaveToEditor"
-                  :davLink="d.storedObject._links?.dav_link.href"
-                  :davLinkExpiration="
-                    d.storedObject._links?.dav_link.expiration
-                  "
-                  @on-stored-object-status-change="
-                    $emit('statusDocumentChanged', $event)
-                  "
-                ></document-action-buttons-group>
-              </li>
-              <li v-if="Number.isInteger(d.id)">
-                <div class="duplicate-dropdown">
-                  <button
-                    class="btn btn-duplicate dropdown-toggle"
-                    type="button"
-                    data-bs-toggle="dropdown"
-                    aria-expanded="false"
-                  >
-                    {{ trans(EVALUATION_DOCUMENT_DUPLICATE) }}
-                  </button>
-                  <ul class="dropdown-menu">
-                    <li>
-                      <a
-                        class="dropdown-item"
-                        @click="$emit('duplicateDocument', d)"
-                        >{{ trans(EVALUATION_DOCUMENT_DUPLICATE_HERE) }}</a
-                      >
-                    </li>
-                    <li>
-                      <a
-                        class="dropdown-item"
-                        @click="prepareDocumentDuplicationToWork(d)"
-                        >{{
-                          trans(
-                            EVALUATION_DOCUMENT_DUPLICATE_TO_OTHER_EVALUATION,
-                          )
-                        }}</a
-                      >
-                    </li>
-                  </ul>
+    <div class="row mb-3">
+        <h5>{{ trans(EVALUATION_DOCUMENTS) }} :</h5>
+        <div class="flex-table">
+            <div
+                class="item-bloc"
+                v-for="(d, i) in documents"
+                :key="d.id"
+                :class="[
+                    parseInt(docAnchorId) === d.id ? 'bg-blink' : 'nothing',
+                ]"
+            >
+                <div :id="'document_' + d.id" class="item-row">
+                    <div class="input-group input-group-lg mb-3 row">
+                        <label class="col-sm-3 col-form-label"
+                            >Titre du document:</label
+                        >
+                        <div class="col-sm-9">
+                            <input
+                                class="form-control document-title"
+                                type="text"
+                                :value="d.title"
+                                :id="d.id"
+                                :data-key="i"
+                                @input="$emit('inputDocumentTitle', $event)"
+                            />
+                        </div>
+                    </div>
                 </div>
-              </li>
-              <li v-if="d.storedObject._permissions.canEdit">
-                <drop-file-modal
-                  :existing-doc="d.storedObject"
-                  :allow-remove="false"
-                  @add-document="
-                    (arg) =>
-                      $emit(
-                        'replaceDocument',
-                        d,
-                        arg.stored_object,
-                        arg.stored_object_version,
-                      )
-                  "
-                ></drop-file-modal>
-              </li>
-              <li v-if="d.workflows.length === 0">
-                <a class="btn btn-delete" @click="$emit('removeDocument', d)">
-                </a>
-              </li>
-            </ul>
-          </div>
+                <div class="item-row">
+                    <div class="item-col item-meta">
+                        <p v-if="d.createdBy" class="createdBy">
+                            Créé par {{ d.createdBy.text }}<br />
+                            Le
+                            {{
+                                $d(ISOToDatetime(d.createdAt.datetime), "long")
+                            }}
+                        </p>
+                    </div>
+                </div>
+                <div class="item-row">
+                    <div class="item-col">
+                        <ul class="record_actions">
+                            <li
+                                v-if="
+                                    d.workflows_availables.length > 0 ||
+                                    d.workflows.length > 0
+                                "
+                            >
+                                <list-workflow-modal
+                                    :workflows="d.workflows"
+                                    :allowCreate="true"
+                                    relatedEntityClass="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWorkEvaluationDocument"
+                                    :relatedEntityId="d.id"
+                                    :workflowsAvailables="
+                                        d.workflows_availables
+                                    "
+                                    :preventDefaultMoveToGenerate="true"
+                                    :goToGenerateWorkflowPayload="{ doc: d }"
+                                    @go-to-generate-workflow="
+                                        $emit('goToGenerateWorkflow', $event)
+                                    "
+                                ></list-workflow-modal>
+                            </li>
+                            <li>
+                                <button
+                                    v-if="AmIRefferer"
+                                    class="btn btn-notify"
+                                    @click="
+                                        $emit(
+                                            'goToGenerateNotification',
+                                            d,
+                                            false,
+                                        )
+                                    "
+                                ></button>
+                                <template v-else>
+                                    <button
+                                        id="btnGroupNotifyButtons"
+                                        type="button"
+                                        class="btn btn-notify dropdown-toggle"
+                                        :title="
+                                            trans(EVALUATION_NOTIFICATION_SEND)
+                                        "
+                                        data-bs-toggle="dropdown"
+                                        aria-expanded="false"
+                                    >
+                                        &nbsp;
+                                    </button>
+                                    <ul
+                                        class="dropdown-menu"
+                                        aria-labelledby="btnGroupNotifyButtons"
+                                    >
+                                        <li>
+                                            <a
+                                                class="dropdown-item"
+                                                @click="
+                                                    $emit(
+                                                        'goToGenerateNotification',
+                                                        d,
+                                                        true,
+                                                    )
+                                                "
+                                            >
+                                                {{
+                                                    trans(
+                                                        EVALUATION_NOTIFICATION_NOTIFY_REFERRER,
+                                                    )
+                                                }}
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a
+                                                class="dropdown-item"
+                                                @click="
+                                                    $emit(
+                                                        'goToGenerateNotification',
+                                                        d,
+                                                        false,
+                                                    )
+                                                "
+                                            >
+                                                {{
+                                                    trans(
+                                                        EVALUATION_NOTIFICATION_NOTIFY_ANY,
+                                                    )
+                                                }}
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </template>
+                            </li>
+                            <li>
+                                <document-action-buttons-group
+                                    :stored-object="d.storedObject"
+                                    :filename="d.title"
+                                    :can-edit="true"
+                                    :execute-before-leave="
+                                        submitBeforeLeaveToEditor
+                                    "
+                                    :davLink="
+                                        d.storedObject._links?.dav_link.href
+                                    "
+                                    :davLinkExpiration="
+                                        d.storedObject._links?.dav_link
+                                            .expiration
+                                    "
+                                    @on-stored-object-status-change="
+                                        $emit('statusDocumentChanged', $event)
+                                    "
+                                ></document-action-buttons-group>
+                            </li>
+                            <li v-if="Number.isInteger(d.id)">
+                                <div class="duplicate-dropdown">
+                                    <button
+                                        class="btn btn-duplicate dropdown-toggle"
+                                        type="button"
+                                        data-bs-toggle="dropdown"
+                                        aria-expanded="false"
+                                    >
+                                        {{
+                                            trans(EVALUATION_DOCUMENT_DUPLICATE)
+                                        }}
+                                    </button>
+                                    <ul class="dropdown-menu">
+                                        <li>
+                                            <a
+                                                class="dropdown-item"
+                                                @click="
+                                                    $emit(
+                                                        'duplicateDocument',
+                                                        d,
+                                                    )
+                                                "
+                                                >{{
+                                                    trans(
+                                                        EVALUATION_DOCUMENT_DUPLICATE_HERE,
+                                                    )
+                                                }}</a
+                                            >
+                                        </li>
+                                        <li>
+                                            <a
+                                                class="dropdown-item"
+                                                @click="
+                                                    prepareDocumentDuplicationToWork(
+                                                        d,
+                                                    )
+                                                "
+                                                >{{
+                                                    trans(
+                                                        EVALUATION_DOCUMENT_DUPLICATE_TO_OTHER_EVALUATION,
+                                                    )
+                                                }}</a
+                                            >
+                                        </li>
+                                    </ul>
+                                </div>
+                            </li>
+                            <li v-if="d.storedObject._permissions.canEdit">
+                                <drop-file-modal
+                                    :existing-doc="d.storedObject"
+                                    :allow-remove="false"
+                                    @add-document="
+                                        (arg) =>
+                                            $emit(
+                                                'replaceDocument',
+                                                d,
+                                                arg.stored_object,
+                                                arg.stored_object_version,
+                                            )
+                                    "
+                                ></drop-file-modal>
+                            </li>
+                            <li v-if="d.workflows.length === 0">
+                                <a
+                                    class="btn btn-delete"
+                                    @click="$emit('removeDocument', d)"
+                                >
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-  </div>
 
-  <AccompanyingPeriodWorkSelectorModal
-    v-if="showAccompanyingPeriodSelector"
-    v-model:selectedAcpw="selectedAcpw"
-    :accompanying-period-id="accompanyingPeriodId"
-    :is-evaluation-selector="true"
-    @close-modal="showAccompanyingPeriodSelector = false"
-    @update:selectedEvaluation="selectedEvaluation = $event"
-  />
+    <AccompanyingPeriodWorkSelectorModal
+        v-if="showAccompanyingPeriodSelector"
+        v-model:selectedAcpw="selectedAcpw"
+        :accompanying-period-id="accompanyingPeriodId"
+        :is-evaluation-selector="true"
+        @close-modal="showAccompanyingPeriodSelector = false"
+        @update:selectedEvaluation="selectedEvaluation = $event"
+    />
 </template>
 
 <script setup>
@@ -181,27 +242,27 @@ import ListWorkflowModal from "ChillMainAssets/vuejs/_components/EntityWorkflow/
 import DocumentActionButtonsGroup from "ChillDocStoreAssets/vuejs/DocumentActionButtonsGroup.vue";
 import DropFileModal from "ChillDocStoreAssets/vuejs/DropFileWidget/DropFileModal.vue";
 import {
-  EVALUATION_NOTIFICATION_NOTIFY_REFERRER,
-  EVALUATION_NOTIFICATION_NOTIFY_ANY,
-  EVALUATION_NOTIFICATION_SEND,
-  EVALUATION_DOCUMENTS,
-  EVALUATION_DOCUMENT_DUPLICATE,
-  EVALUATION_DOCUMENT_DUPLICATE_HERE,
-  EVALUATION_DOCUMENT_DUPLICATE_TO_OTHER_EVALUATION,
-  trans,
+    EVALUATION_NOTIFICATION_NOTIFY_REFERRER,
+    EVALUATION_NOTIFICATION_NOTIFY_ANY,
+    EVALUATION_NOTIFICATION_SEND,
+    EVALUATION_DOCUMENTS,
+    EVALUATION_DOCUMENT_DUPLICATE,
+    EVALUATION_DOCUMENT_DUPLICATE_HERE,
+    EVALUATION_DOCUMENT_DUPLICATE_TO_OTHER_EVALUATION,
+    trans,
 } from "translator";
 import { ref, watch } from "vue";
 import AccompanyingPeriodWorkSelectorModal from "ChillPersonAssets/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkSelectorModal.vue";
 
 defineProps(["documents", "docAnchorId", "accompanyingPeriodId"]);
 const emit = defineEmits([
-  "inputDocumentTitle",
-  "removeDocument",
-  "duplicateDocument",
-  "statusDocumentChanged",
-  "goToGenerateWorkflow",
-  "goToGenerateNotification",
-  "duplicateDocumentToWork",
+    "inputDocumentTitle",
+    "removeDocument",
+    "duplicateDocument",
+    "statusDocumentChanged",
+    "goToGenerateWorkflow",
+    "goToGenerateNotification",
+    "duplicateDocumentToWork",
 ]);
 
 const showAccompanyingPeriodSelector = ref(false);
@@ -209,14 +270,14 @@ const selectedEvaluation = ref(null);
 const selectedDocument = ref(null);
 
 const prepareDocumentDuplicationToWork = (d) => {
-  selectedDocument.value = d;
-  showAccompanyingPeriodSelector.value = true;
+    selectedDocument.value = d;
+    showAccompanyingPeriodSelector.value = true;
 };
 
 watch(selectedEvaluation, (val) => {
-  emit("duplicateDocumentToEvaluation", {
-    evaluation: val,
-    document: selectedDocument.value,
-  });
+    emit("duplicateDocumentToEvaluation", {
+        evaluation: val,
+        document: selectedDocument.value,
+    });
 });
 </script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue
index d860fbae2..bbd26da5d 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue
@@ -1,47 +1,49 @@
 <template>
-  <div>
-    <div class="m-md-3">
-      <DateInputs
-        :startDate="startDate"
-        :endDate="endDate"
-        :maxDate="maxDate"
-        :warningInterval="warningInterval"
-        @update:startDate="updateStartDate"
-        @update:endDate="updateEndDate"
-        @update:maxDate="updateMaxDate"
-        @update:warningInterval="updateWarningInterval"
-      />
+    <div>
+        <div class="m-md-3">
+            <DateInputs
+                :startDate="startDate"
+                :endDate="endDate"
+                :maxDate="maxDate"
+                :warningInterval="warningInterval"
+                @update:startDate="updateStartDate"
+                @update:endDate="updateEndDate"
+                @update:maxDate="updateMaxDate"
+                @update:warningInterval="updateWarningInterval"
+            />
 
-      <TimeSpentInput
-        :timeSpent="timeSpent"
-        :timeSpentChoices="timeSpentChoices"
-        @update:timeSpent="updateTimeSpent"
-      />
+            <TimeSpentInput
+                :timeSpent="timeSpent"
+                :timeSpentChoices="timeSpentChoices"
+                @update:timeSpent="updateTimeSpent"
+            />
 
-      <CommentInput :comment="comment" @update:comment="updateComment" />
+            <CommentInput :comment="comment" @update:comment="updateComment" />
 
-      <DocumentsList
-        v-if="evaluation.documents.length > 0"
-        :documents="evaluation.documents"
-        :docAnchorId="docAnchorId"
-        :accompanyingPeriodId="store.state.work.accompanyingPeriod.id"
-        @inputDocumentTitle="onInputDocumentTitle"
-        @removeDocument="removeDocument"
-        @duplicateDocument="duplicateDocument"
-        @duplicate-document-to-evaluation="duplicateDocumentToEvaluation"
-        @statusDocumentChanged="onStatusDocumentChanged"
-        @goToGenerateWorkflow="goToGenerateWorkflowEvaluationDocument"
-        @goToGenerateNotification="goToGenerateDocumentNotification"
-      />
+            <DocumentsList
+                v-if="evaluation.documents.length > 0"
+                :documents="evaluation.documents"
+                :docAnchorId="docAnchorId"
+                :accompanyingPeriodId="store.state.work.accompanyingPeriod.id"
+                @inputDocumentTitle="onInputDocumentTitle"
+                @removeDocument="removeDocument"
+                @duplicateDocument="duplicateDocument"
+                @duplicate-document-to-evaluation="
+                    duplicateDocumentToEvaluation
+                "
+                @statusDocumentChanged="onStatusDocumentChanged"
+                @goToGenerateWorkflow="goToGenerateWorkflowEvaluationDocument"
+                @goToGenerateNotification="goToGenerateDocumentNotification"
+            />
 
-      <DocumentActions
-        :evaluation="evaluation"
-        :templates="getTemplatesAvailables"
-        @addDocument="addDocument"
-        @submitBeforeGenerate="submitBeforeGenerate"
-      />
+            <DocumentActions
+                :evaluation="evaluation"
+                :templates="getTemplatesAvailables"
+                @addDocument="addDocument"
+                @submitBeforeGenerate="submitBeforeGenerate"
+            />
+        </div>
     </div>
-  </div>
 </template>
 
 <script setup>
@@ -52,10 +54,7 @@ import TimeSpentInput from "./TimeSpentInput.vue";
 import CommentInput from "./CommentInput.vue";
 import DocumentsList from "./DocumentsList.vue";
 import DocumentActions from "./DocumentActions.vue";
-import {
-    trans,
-    EVALUATION_DOCUMENT_DUPLICATE_SUCCESS
-} from "translator";
+import { trans, EVALUATION_DOCUMENT_DUPLICATE_SUCCESS } from "translator";
 import { useToast } from "vue-toast-notification";
 
 const props = defineProps(["evaluation", "docAnchorId"]);
@@ -64,279 +63,284 @@ const store = useStore();
 const $toast = useToast();
 
 const timeSpentChoices = [
-  { text: "1 minute", value: 60 },
-  { text: "2 minutes", value: 120 },
-  { text: "3 minutes", value: 180 },
-  { text: "4 minutes", value: 240 },
-  { text: "5 minutes", value: 300 },
-  { text: "10 minutes", value: 600 },
-  { text: "15 minutes", value: 900 },
-  { text: "20 minutes", value: 1200 },
-  { text: "25 minutes", value: 1500 },
-  { text: "30 minutes", value: 1800 },
-  { text: "45 minutes", value: 2700 },
-  { text: "1 hour", value: 3600 },
-  { text: "1 hour 15 minutes", value: 4500 },
-  { text: "1 hour 30 minutes", value: 5400 },
-  { text: "1 hour 45 minutes", value: 6300 },
-  { text: "2 hours", value: 7200 },
-  { text: "2 hours 30 minutes", value: 9000 },
-  { text: "3 hours", value: 10800 },
-  { text: "3 hours 30 minutes", value: 12600 },
-  { text: "4 hours", value: 14400 },
-  { text: "4 hours 30 minutes", value: 16200 },
-  { text: "5 hours", value: 18000 },
-  { text: "5 hours 30 minutes", value: 19800 },
-  { text: "6 hours", value: 21600 },
-  { text: "6 hours 30 minutes", value: 23400 },
-  { text: "7 hours", value: 25200 },
-  { text: "7 hours 30 minutes", value: 27000 },
-  { text: "8 hours", value: 28800 },
+    { text: "1 minute", value: 60 },
+    { text: "2 minutes", value: 120 },
+    { text: "3 minutes", value: 180 },
+    { text: "4 minutes", value: 240 },
+    { text: "5 minutes", value: 300 },
+    { text: "10 minutes", value: 600 },
+    { text: "15 minutes", value: 900 },
+    { text: "20 minutes", value: 1200 },
+    { text: "25 minutes", value: 1500 },
+    { text: "30 minutes", value: 1800 },
+    { text: "45 minutes", value: 2700 },
+    { text: "1 hour", value: 3600 },
+    { text: "1 hour 15 minutes", value: 4500 },
+    { text: "1 hour 30 minutes", value: 5400 },
+    { text: "1 hour 45 minutes", value: 6300 },
+    { text: "2 hours", value: 7200 },
+    { text: "2 hours 30 minutes", value: 9000 },
+    { text: "3 hours", value: 10800 },
+    { text: "3 hours 30 minutes", value: 12600 },
+    { text: "4 hours", value: 14400 },
+    { text: "4 hours 30 minutes", value: 16200 },
+    { text: "5 hours", value: 18000 },
+    { text: "5 hours 30 minutes", value: 19800 },
+    { text: "6 hours", value: 21600 },
+    { text: "6 hours 30 minutes", value: 23400 },
+    { text: "7 hours", value: 25200 },
+    { text: "7 hours 30 minutes", value: 27000 },
+    { text: "8 hours", value: 28800 },
 ];
 
 const startDate = computed({
-  get() {
-    return props.evaluation.startDate;
-  },
-  set(v) {
-    store.commit("setEvaluationStartDate", {
-      key: props.evaluation.key,
-      date: v,
-    });
-  },
+    get() {
+        return props.evaluation.startDate;
+    },
+    set(v) {
+        store.commit("setEvaluationStartDate", {
+            key: props.evaluation.key,
+            date: v,
+        });
+    },
 });
 
 const endDate = computed({
-  get() {
-    return props.evaluation.endDate;
-  },
-  set(v) {
-    store.commit("setEvaluationEndDate", {
-      key: props.evaluation.key,
-      date: v,
-    });
-  },
+    get() {
+        return props.evaluation.endDate;
+    },
+    set(v) {
+        store.commit("setEvaluationEndDate", {
+            key: props.evaluation.key,
+            date: v,
+        });
+    },
 });
 
 const maxDate = computed({
-  get() {
-    return props.evaluation.maxDate;
-  },
-  set(v) {
-    store.commit("setEvaluationMaxDate", {
-      key: props.evaluation.key,
-      date: v,
-    });
-  },
+    get() {
+        return props.evaluation.maxDate;
+    },
+    set(v) {
+        store.commit("setEvaluationMaxDate", {
+            key: props.evaluation.key,
+            date: v,
+        });
+    },
 });
 
 const warningInterval = computed({
-  get() {
-    return props.evaluation.warningInterval;
-  },
-  set(v) {
-    store.commit("setEvaluationWarningInterval", {
-      key: props.evaluation.key,
-      days: v,
-    });
-  },
+    get() {
+        return props.evaluation.warningInterval;
+    },
+    set(v) {
+        store.commit("setEvaluationWarningInterval", {
+            key: props.evaluation.key,
+            days: v,
+        });
+    },
 });
 
 const timeSpent = computed({
-  get() {
-    return props.evaluation.timeSpent;
-  },
-  set(v) {
-    store.commit("setEvaluationTimeSpent", {
-      key: props.evaluation.key,
-      time: v,
-    });
-  },
+    get() {
+        return props.evaluation.timeSpent;
+    },
+    set(v) {
+        store.commit("setEvaluationTimeSpent", {
+            key: props.evaluation.key,
+            time: v,
+        });
+    },
 });
 
 const comment = computed({
-  get() {
-    return props.evaluation.comment;
-  },
-  set(v) {
-    store.commit("setEvaluationComment", {
-      key: props.evaluation.key,
-      comment: v,
-    });
-  },
+    get() {
+        return props.evaluation.comment;
+    },
+    set(v) {
+        store.commit("setEvaluationComment", {
+            key: props.evaluation.key,
+            comment: v,
+        });
+    },
 });
 
 const getTemplatesAvailables = computed(() => {
-  return store.getters.getTemplatesAvailablesForEvaluation(
-    props.evaluation.evaluation,
-  );
+    return store.getters.getTemplatesAvailablesForEvaluation(
+        props.evaluation.evaluation,
+    );
 });
 
 // const getAccompanyingPeriod = computed(() => store.work)
 function updateStartDate(value) {
-  startDate.value = value;
+    startDate.value = value;
 }
 
 function updateEndDate(value) {
-  endDate.value = value;
+    endDate.value = value;
 }
 
 function updateMaxDate(value) {
-  maxDate.value = value;
+    maxDate.value = value;
 }
 
 function updateWarningInterval(value) {
-  warningInterval.value = value;
+    warningInterval.value = value;
 }
 
 function updateTimeSpent(value) {
-  timeSpent.value = value;
+    timeSpent.value = value;
 }
 
 function updateComment(value) {
-  comment.value = value;
+    comment.value = value;
 }
 
 function onInputDocumentTitle(event) {
-  const id = Number(event.target.id);
-  const key = Number(event.target.dataset.key) + 1;
-  const title = event.target.value;
-  store.commit("updateDocumentTitle", {
-    id: id,
-    key: key,
-    evaluationKey: props.evaluation.key,
-    title: title,
-  });
+    const id = Number(event.target.id);
+    const key = Number(event.target.dataset.key) + 1;
+    const title = event.target.value;
+    store.commit("updateDocumentTitle", {
+        id: id,
+        key: key,
+        evaluationKey: props.evaluation.key,
+        title: title,
+    });
 }
 
 function addDocument({ stored_object, stored_object_version }) {
-  let document = {
-    type: "accompanying_period_work_evaluation_document",
-    storedObject: stored_object,
-    title: "Nouveau document",
-  };
-  store.commit("addDocument", {
-    key: props.evaluation.key,
-    document,
-    stored_object_version,
-  });
+    let document = {
+        type: "accompanying_period_work_evaluation_document",
+        storedObject: stored_object,
+        title: "Nouveau document",
+    };
+    store.commit("addDocument", {
+        key: props.evaluation.key,
+        document,
+        stored_object_version,
+    });
 }
 
 function removeDocument(document) {
-  if (
-    window.confirm(
-      'Êtes-vous sûr·e de vouloir supprimer le document qui a pour titre "' +
-        document.title +
-        '" ?',
-    )
-  ) {
-    store.commit("removeDocument", {
-      key: props.evaluation.key,
-      document: document,
-    });
-  }
+    if (
+        window.confirm(
+            'Êtes-vous sûr·e de vouloir supprimer le document qui a pour titre "' +
+                document.title +
+                '" ?',
+        )
+    ) {
+        store.commit("removeDocument", {
+            key: props.evaluation.key,
+            document: document,
+        });
+    }
 }
 
 function duplicateDocument(document) {
-  store.dispatch("duplicateDocument", {
-    evaluation_key: props.evaluation.key,
-    document: document,
-  })
+    store.dispatch("duplicateDocument", {
+        evaluation_key: props.evaluation.key,
+        document: document,
+    });
 }
 
 function duplicateDocumentToEvaluation({ evaluation, document }) {
-  store.dispatch("duplicateDocumentToEvaluation", {
-    evaluation: evaluation,
-    document: document,
-  })
-  .then(() => {
-      $toast.open({ message: trans(EVALUATION_DOCUMENT_DUPLICATE_SUCCESS) });
-  })
-  .catch((e) => {
-      console.log(e);
-  });
+    store
+        .dispatch("duplicateDocumentToEvaluation", {
+            evaluation: evaluation,
+            document: document,
+        })
+        .then(() => {
+            $toast.open({
+                message: trans(EVALUATION_DOCUMENT_DUPLICATE_SUCCESS),
+            });
+        })
+        .catch((e) => {
+            console.log(e);
+        });
 }
 
 function onStatusDocumentChanged(newStatus) {
-  store.commit("statusDocumentChanged", {
-    key: props.evaluation.key,
-    newStatus: newStatus,
-  });
+    store.commit("statusDocumentChanged", {
+        key: props.evaluation.key,
+        newStatus: newStatus,
+    });
 }
 
 function goToGenerateWorkflowEvaluationDocument({ workflowName, payload }) {
-  const callback = (data) => {
-    let evaluation = data.accompanyingPeriodWorkEvaluations.find(
-      (e) => e.key === props.evaluation.key,
-    );
-    let updatedDocument = evaluation.documents.find(
-      (d) => d.key === payload.doc.key,
-    );
-    window.location.assign(
-      buildLinkCreate(
-        workflowName,
-        "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluationDocument",
-        updatedDocument.id,
-      ),
-    );
-  };
+    const callback = (data) => {
+        let evaluation = data.accompanyingPeriodWorkEvaluations.find(
+            (e) => e.key === props.evaluation.key,
+        );
+        let updatedDocument = evaluation.documents.find(
+            (d) => d.key === payload.doc.key,
+        );
+        window.location.assign(
+            buildLinkCreate(
+                workflowName,
+                "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluationDocument",
+                updatedDocument.id,
+            ),
+        );
+    };
 
-  store.dispatch("submit", callback).catch((e) => {
-    console.log(e);
-    throw e;
-  });
+    store.dispatch("submit", callback).catch((e) => {
+        console.log(e);
+        throw e;
+    });
 }
 
 function goToGenerateDocumentNotification(document, tos) {
-  const callback = (data) => {
-    let evaluation = data.accompanyingPeriodWorkEvaluations.find(
-      (e) => e.key === props.evaluation.key,
-    );
-    let updatedDocument = evaluation.documents.find(
-      (d) => d.key === document.key,
-    );
-    window.location.assign(
-      buildLinkCreateNotification(
-        "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluationDocument",
-        updatedDocument.id,
-        tos === true ? store.state.work.accompanyingPeriod.user.id : null,
-        window.location.pathname +
-          window.location.search +
-          window.location.hash,
-      ),
-    );
-  };
-  store.dispatch("submit", callback).catch((e) => {
-    console.log(e);
-    throw e;
-  });
+    const callback = (data) => {
+        let evaluation = data.accompanyingPeriodWorkEvaluations.find(
+            (e) => e.key === props.evaluation.key,
+        );
+        let updatedDocument = evaluation.documents.find(
+            (d) => d.key === document.key,
+        );
+        window.location.assign(
+            buildLinkCreateNotification(
+                "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluationDocument",
+                updatedDocument.id,
+                tos === true
+                    ? store.state.work.accompanyingPeriod.user.id
+                    : null,
+                window.location.pathname +
+                    window.location.search +
+                    window.location.hash,
+            ),
+        );
+    };
+    store.dispatch("submit", callback).catch((e) => {
+        console.log(e);
+        throw e;
+    });
 }
 </script>
 
 <style lang="scss" scoped>
 input.document-title {
-  font-weight: bold;
-  font-size: 1rem;
+    font-weight: bold;
+    font-size: 1rem;
 }
 
 .bg-blink {
-  color: #050000;
-  padding: 10px;
-  display: inline-block;
-  border-radius: 5px;
-  animation: blinkingBackground 2.2s infinite;
-  animation-iteration-count: 2;
+    color: #050000;
+    padding: 10px;
+    display: inline-block;
+    border-radius: 5px;
+    animation: blinkingBackground 2.2s infinite;
+    animation-iteration-count: 2;
 }
 
 @keyframes blinkingBackground {
-  0% {
-    background-color: #ed776d;
-  }
-  50% {
-    background-color: #ffffff;
-  }
-  100% {
-    background-color: #ed776d;
-  }
+    0% {
+        background-color: #ed776d;
+    }
+    50% {
+        background-color: #ffffff;
+    }
+    100% {
+        background-color: #ed776d;
+    }
 }
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/TimeSpentInput.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/TimeSpentInput.vue
index 4b73d4193..e03ec0ed5 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/TimeSpentInput.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/TimeSpentInput.vue
@@ -1,25 +1,27 @@
 <template>
-  <div class="row mb-3">
-    <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
-      {{ trans(EVALUATION_TIME_SPENT) }}
-    </label>
-    <div class="col-8 col-sm-4 col-md-8 col-lg-4">
-      <select
-        class="form-control form-control-sm"
-        :value="timeSpent"
-        @input="$emit('update:timeSpent', $event.target.value)"
-      >
-        <option disabled value="">{{ trans(EVALUATION_TIME_SPENT) }}</option>
-        <option
-          v-for="time in timeSpentChoices"
-          :value="time.value"
-          :key="time.value"
-        >
-          {{ time.text }}
-        </option>
-      </select>
+    <div class="row mb-3">
+        <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
+            {{ trans(EVALUATION_TIME_SPENT) }}
+        </label>
+        <div class="col-8 col-sm-4 col-md-8 col-lg-4">
+            <select
+                class="form-control form-control-sm"
+                :value="timeSpent"
+                @input="$emit('update:timeSpent', $event.target.value)"
+            >
+                <option disabled value="">
+                    {{ trans(EVALUATION_TIME_SPENT) }}
+                </option>
+                <option
+                    v-for="time in timeSpentChoices"
+                    :value="time.value"
+                    :key="time.value"
+                >
+                    {{ time.text }}
+                </option>
+            </select>
+        </div>
     </div>
-  </div>
 </template>
 
 <script setup>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/accompanyingCourseWorkEvaluationDocument.ts b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/accompanyingCourseWorkEvaluationDocument.ts
index 098aa9f41..a274d77fc 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/accompanyingCourseWorkEvaluationDocument.ts
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/accompanyingCourseWorkEvaluationDocument.ts
@@ -11,11 +11,11 @@ export const duplicate = async (
 };
 
 export const duplicateDocumentToEvaluation = async (
-  document_id: number,
-  evaluation_id: number,
+    document_id: number,
+    evaluation_id: number,
 ): Promise<AccompanyingPeriodWorkEvaluationDocument> => {
-  return makeFetch<null, AccompanyingPeriodWorkEvaluationDocument>(
-    "POST",
-    `/api/1.0/person/accompanying-course-work-evaluation-document/${document_id}/evaluation/${evaluation_id}/duplicate`,
-  );
+    return makeFetch<null, AccompanyingPeriodWorkEvaluationDocument>(
+        "POST",
+        `/api/1.0/person/accompanying-course-work-evaluation-document/${document_id}/evaluation/${evaluation_id}/duplicate`,
+    );
 };
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkEvaluationItem.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkEvaluationItem.vue
index 3f07aeefc..fc641a0a2 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkEvaluationItem.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkEvaluationItem.vue
@@ -1,45 +1,53 @@
 <template>
-  <div class="container">
-    <div class="item-bloc">
-      <div class="item-row">
-        <h2 class="badge-title">
-          <span class="title_label"></span>
-          <span class="title_action">
-            <span>
-              {{ trans(EVALUATION) }}:
-              <span class="badge bg-light text-dark">
-                {{ eval?.evaluation?.title.fr }}
-              </span>
-            </span>
+    <div class="container">
+        <div class="item-bloc">
+            <div class="item-row">
+                <h2 class="badge-title">
+                    <span class="title_label"></span>
+                    <span class="title_action">
+                        <span>
+                            {{ trans(EVALUATION) }}:
+                            <span class="badge bg-light text-dark">
+                                {{ eval?.evaluation?.title.fr }}
+                            </span>
+                        </span>
 
-            <ul class="small_in_title columns mt-1">
-              <li>
-                <span class="item-key">
-                  {{ trans(ACCOMPANYING_COURSE_WORK_START_DATE) }} :
-                </span>
-                <b>{{ formatDate(eval.startDate) }}</b>
-              </li>
+                        <ul class="small_in_title columns mt-1">
+                            <li>
+                                <span class="item-key">
+                                    {{
+                                        trans(
+                                            ACCOMPANYING_COURSE_WORK_START_DATE,
+                                        )
+                                    }}
+                                    :
+                                </span>
+                                <b>{{ formatDate(eval.startDate) }}</b>
+                            </li>
 
-              <li v-if="eval.endDate">
-                <span class="item-key">
-                  {{ trans(ACCOMPANYING_COURSE_WORK_END_DATE) }} :
-                </span>
-                <b>{{ formatDate(eval.endDate) }}</b>
-              </li>
-            </ul>
-          </span>
-        </h2>
-      </div>
+                            <li v-if="eval.endDate">
+                                <span class="item-key">
+                                    {{
+                                        trans(ACCOMPANYING_COURSE_WORK_END_DATE)
+                                    }}
+                                    :
+                                </span>
+                                <b>{{ formatDate(eval.endDate) }}</b>
+                            </li>
+                        </ul>
+                    </span>
+                </h2>
+            </div>
+        </div>
     </div>
-  </div>
 </template>
 
 <script setup lang="ts">
 import {
-  ACCOMPANYING_COURSE_WORK_END_DATE,
-  ACCOMPANYING_COURSE_WORK_START_DATE,
-  EVALUATION,
-  trans,
+    ACCOMPANYING_COURSE_WORK_END_DATE,
+    ACCOMPANYING_COURSE_WORK_START_DATE,
+    EVALUATION,
+    trans,
 } from "translator";
 import { ISOToDate } from "ChillMainAssets/chill/js/date";
 import { DateTime } from "ChillMainAssets/types";
@@ -48,15 +56,15 @@ import { AccompanyingPeriodWorkEvaluation } from "../../../types";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const props = defineProps<{ eval: AccompanyingPeriodWorkEvaluation }>();
 const formatDate = (dateObject: DateTime) => {
-  if (dateObject) {
-    const parsedDate = ISOToDate(dateObject.datetime);
-    if (parsedDate) {
-      return new Intl.DateTimeFormat("default", { dateStyle: "short" }).format(
-        parsedDate,
-      );
-    } else {
-      return "";
+    if (dateObject) {
+        const parsedDate = ISOToDate(dateObject.datetime);
+        if (parsedDate) {
+            return new Intl.DateTimeFormat("default", {
+                dateStyle: "short",
+            }).format(parsedDate);
+        } else {
+            return "";
+        }
     }
-  }
 };
 </script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkEvaluationList.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkEvaluationList.vue
index b85c87ec4..8581546f1 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkEvaluationList.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkEvaluationList.vue
@@ -1,24 +1,24 @@
 <template>
-  <div class="results">
-    <div
-      v-for="evaluation in evaluations"
-      :key="evaluation.id"
-      class="list-item"
-    >
-      <label class="acpw-item">
-        <div>
-          <input
-            type="radio"
-            :value="evaluation"
-            v-model="selectedEvaluation"
-            name="item"
-          />
-        </div>
+    <div class="results">
+        <div
+            v-for="evaluation in evaluations"
+            :key="evaluation.id"
+            class="list-item"
+        >
+            <label class="acpw-item">
+                <div>
+                    <input
+                        type="radio"
+                        :value="evaluation"
+                        v-model="selectedEvaluation"
+                        name="item"
+                    />
+                </div>
 
-        <accompanying-period-work-evaluation-item :eval="evaluation" />
-      </label>
+                <accompanying-period-work-evaluation-item :eval="evaluation" />
+            </label>
+        </div>
     </div>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -28,7 +28,7 @@ import AccompanyingPeriodWorkEvaluationItem from "ChillPersonAssets/vuejs/_compo
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const props = defineProps<{
-  evaluations: AccompanyingPeriodWorkEvaluation[];
+    evaluations: AccompanyingPeriodWorkEvaluation[];
 }>();
 const selectedEvaluation = ref<AccompanyingPeriodWorkEvaluation | null>(null);
 
@@ -36,12 +36,12 @@ const selectedEvaluation = ref<AccompanyingPeriodWorkEvaluation | null>(null);
 const emit = defineEmits();
 
 watch(selectedEvaluation, (newValue) => {
-  emit("update:selectedEvaluation", newValue);
+    emit("update:selectedEvaluation", newValue);
 });
 </script>
 
 <style>
 .acpw-item {
-  display: flex;
+    display: flex;
 }
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkItem.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkItem.vue
index e64d6df35..330423a20 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkItem.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkItem.vue
@@ -54,15 +54,15 @@ import { AccompanyingPeriodWork } from "../../../types";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const props = defineProps<{ acpw: AccompanyingPeriodWork }>();
 const formatDate = (dateObject: DateTime) => {
-  if (dateObject) {
-    const parsedDate = ISOToDate(dateObject.datetime);
-    if (parsedDate) {
-      return new Intl.DateTimeFormat("default", { dateStyle: "short" }).format(
-        parsedDate,
-      );
-    } else {
-      return "";
+    if (dateObject) {
+        const parsedDate = ISOToDate(dateObject.datetime);
+        if (parsedDate) {
+            return new Intl.DateTimeFormat("default", {
+                dateStyle: "short",
+            }).format(parsedDate);
+        } else {
+            return "";
+        }
     }
-  }
 };
 </script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkList.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkList.vue
index 77b801c7c..02f26656e 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkList.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkList.vue
@@ -1,24 +1,24 @@
 <template>
-  <div class="results">
-    <div
-      v-for="acpw in accompanyingPeriodWorks"
-      :key="acpw.id"
-      class="list-item"
-    >
-      <label class="acpw-item">
-        <div>
-          <input
-            type="radio"
-            :value="acpw"
-            v-model="selectedAcpw"
-            name="item"
-          />
-        </div>
+    <div class="results">
+        <div
+            v-for="acpw in accompanyingPeriodWorks"
+            :key="acpw.id"
+            class="list-item"
+        >
+            <label class="acpw-item">
+                <div>
+                    <input
+                        type="radio"
+                        :value="acpw"
+                        v-model="selectedAcpw"
+                        name="item"
+                    />
+                </div>
 
-        <accompanying-period-work-item :acpw="acpw" />
-      </label>
+                <accompanying-period-work-item :acpw="acpw" />
+            </label>
+        </div>
     </div>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -26,31 +26,32 @@ import AccompanyingPeriodWorkItem from "./AccompanyingPeriodWorkItem.vue";
 import { AccompanyingPeriodWork } from "../../../types";
 import { defineProps, ref, watch } from "vue";
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const props = defineProps<{
-  accompanyingPeriodWorks: AccompanyingPeriodWork[];
-  selectedAcpw?: AccompanyingPeriodWork | null;
+    accompanyingPeriodWorks: AccompanyingPeriodWork[];
+    selectedAcpw?: AccompanyingPeriodWork | null;
 }>();
-const selectedAcpw = ref<AccompanyingPeriodWork | null>(props.selectedAcpw ?? null);
+const selectedAcpw = ref<AccompanyingPeriodWork | null>(
+    props.selectedAcpw ?? null,
+);
 
-// eslint-disable-next-line vue/valid-define-emits
 const emit = defineEmits<{
-  'update:selectedAcpw': [value: AccompanyingPeriodWork | null];
+    "update:selectedAcpw": [value: AccompanyingPeriodWork | null];
 }>();
 
-watch(() => props.selectedAcpw, (val) => {
-  selectedAcpw.value = val ?? null;
-});
+watch(
+    () => props.selectedAcpw,
+    (val) => {
+        selectedAcpw.value = val ?? null;
+    },
+);
 
 watch(selectedAcpw, (newValue) => {
-  emit("update:selectedAcpw", newValue);
+    emit("update:selectedAcpw", newValue);
 });
-
-
 </script>
 
 <style>
 .acpw-item {
-  display: flex;
+    display: flex;
 }
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkSelectorModal.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkSelectorModal.vue
index 5488c49ad..0174902cc 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkSelectorModal.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkSelectorModal.vue
@@ -1,56 +1,68 @@
 <template>
-  <div>
-    <div class="row justify-content-end" v-if="!isEvaluationSelector">
-      <div class="col-md-6 col-sm-10" v-if="selectedAcpw">
-        <ul class="list-suggest remove-items">
-          <li>
-            <span @click="selectedAcpw = null" class="chill-denomination">{{
-              selectedAcpw?.socialAction?.title.fr
-            }}</span>
-          </li>
+    <div>
+        <div class="row justify-content-end" v-if="!isEvaluationSelector">
+            <div class="col-md-6 col-sm-10" v-if="selectedAcpw">
+                <ul class="list-suggest remove-items">
+                    <li>
+                        <span
+                            @click="selectedAcpw = null"
+                            class="chill-denomination"
+                            >{{ selectedAcpw?.socialAction?.title.fr }}</span
+                        >
+                    </li>
+                </ul>
+            </div>
+        </div>
+
+        <ul v-if="!showModal" class="record_actions">
+            <li>
+                <a class="btn btn-sm btn-create mt-3" @click="openModal">
+                    {{ trans(ACPW_DUPLICATE_SELECT_ACCOMPANYING_PERIOD_WORK) }}
+                </a>
+            </li>
         </ul>
-      </div>
+
+        <teleport to="body">
+            <modal
+                v-if="showModal"
+                @close="closeModal"
+                modal-dialog-class="modal-dialog-scrollable modal-xl"
+            >
+                <template #header>
+                    <h3>
+                        {{
+                            trans(
+                                ACPW_DUPLICATE_SELECT_ACCOMPANYING_PERIOD_WORK,
+                            )
+                        }}
+                    </h3>
+                </template>
+
+                <template #body>
+                    <accompanying-period-work-list
+                        v-if="evaluations.length === 0"
+                        :accompanying-period-works="accompanyingPeriodWorks"
+                        v-model:selectedAcpw="selectedAcpw"
+                    />
+                    <accompanying-period-work-evaluation-list
+                        v-if="evaluations.length > 0"
+                        :evaluations="evaluations"
+                        v-model:selectedEvaluation="selectedEvaluation"
+                    />
+                </template>
+
+                <template #footer>
+                    <button
+                        type="button"
+                        class="btn btn-save"
+                        @click="confirmSelection"
+                    >
+                        {{ trans(CONFIRM) }}
+                    </button>
+                </template>
+            </modal>
+        </teleport>
     </div>
-
-    <ul v-if="!showModal" class="record_actions">
-      <li>
-        <a class="btn btn-sm btn-create mt-3" @click="openModal">
-          {{ trans(ACPW_DUPLICATE_SELECT_ACCOMPANYING_PERIOD_WORK) }}
-        </a>
-      </li>
-    </ul>
-
-    <teleport to="body">
-      <modal
-        v-if="showModal"
-        @close="closeModal"
-        modal-dialog-class="modal-dialog-scrollable modal-xl"
-      >
-        <template #header>
-          <h3>{{ trans(ACPW_DUPLICATE_SELECT_ACCOMPANYING_PERIOD_WORK) }}</h3>
-        </template>
-
-        <template #body>
-          <accompanying-period-work-list
-            v-if="evaluations.length === 0"
-            :accompanying-period-works="accompanyingPeriodWorks"
-            v-model:selectedAcpw="selectedAcpw"
-          />
-          <accompanying-period-work-evaluation-list
-            v-if="evaluations.length > 0"
-            :evaluations="evaluations"
-            v-model:selectedEvaluation="selectedEvaluation"
-          />
-        </template>
-
-        <template #footer>
-          <button type="button" class="btn btn-save" @click="confirmSelection">
-            {{ trans(CONFIRM) }}
-          </button>
-        </template>
-      </modal>
-    </teleport>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -59,9 +71,9 @@ import Modal from "ChillMainAssets/vuejs/_components/Modal.vue";
 import AccompanyingPeriodWorkList from "./AccompanyingPeriodWorkList.vue";
 import { AccompanyingPeriodWork } from "../../../types";
 import {
-  trans,
-  ACPW_DUPLICATE_SELECT_ACCOMPANYING_PERIOD_WORK,
-  CONFIRM,
+    trans,
+    ACPW_DUPLICATE_SELECT_ACCOMPANYING_PERIOD_WORK,
+    CONFIRM,
 } from "translator";
 import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
 import AccompanyingPeriodWorkEvaluationList from "ChillPersonAssets/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkEvaluationList.vue";
@@ -74,88 +86,89 @@ const accompanyingPeriodWorks = ref<AccompanyingPeriodWork[]>([]);
 const evaluations = ref<AccompanyingPeriodWorkEvaluation[]>([]);
 
 const props = defineProps({
-  accompanyingPeriodId: String,
-  isEvaluationSelector: Boolean,
+    accompanyingPeriodId: String,
+    isEvaluationSelector: Boolean,
 });
 
 const emit = defineEmits<{
-  pickWork: [payload: { work: AccompanyingPeriodWork | null }];
-  closeModal: [];
-  "update:selectedEvaluation": [evaluation: AccompanyingPeriodWorkEvaluation];
+    pickWork: [payload: { work: AccompanyingPeriodWork | null }];
+    closeModal: [];
+    "update:selectedEvaluation": [evaluation: AccompanyingPeriodWorkEvaluation];
 }>();
 
 onMounted(() => {
-  if (props.accompanyingPeriodId) {
-    getAccompanyingPeriodWorks(parseInt(props.accompanyingPeriodId));
-  } else {
-    console.error("No accompanyingperiod id was given");
-  }
+    if (props.accompanyingPeriodId) {
+        getAccompanyingPeriodWorks(parseInt(props.accompanyingPeriodId));
+    } else {
+        console.error("No accompanyingperiod id was given");
+    }
 
-  showModal.value = true;
+    showModal.value = true;
 });
 const getAccompanyingPeriodWorks = (periodId: number) => {
-  const url = `/api/1.0/person/accompanying-course/${periodId}/works.json`;
+    const url = `/api/1.0/person/accompanying-course/${periodId}/works.json`;
 
-  makeFetch<number, {results: AccompanyingPeriodWork[]}>("GET", url)
-    .then((response) => {
-      if (props.isEvaluationSelector) {
-        accompanyingPeriodWorks.value = response.results.filter(
-          (acpw) => acpw.accompanyingPeriodWorkEvaluations.length > 0,
-        );
-      } else {
-        accompanyingPeriodWorks.value = response.results;
-      }
-    })
-    .catch((error) => {
-      console.log(error);
-    });
+    makeFetch<number, { results: AccompanyingPeriodWork[] }>("GET", url)
+        .then((response) => {
+            if (props.isEvaluationSelector) {
+                accompanyingPeriodWorks.value = response.results.filter(
+                    (acpw) => acpw.accompanyingPeriodWorkEvaluations.length > 0,
+                );
+            } else {
+                accompanyingPeriodWorks.value = response.results;
+            }
+        })
+        .catch((error) => {
+            console.log(error);
+        });
 };
 
 watch(selectedAcpw, (newValue) => {
-  const inputField = document.getElementById(
-    "find_accompanying_period_work_acpw",
-  ) as HTMLInputElement;
-  if (inputField) {
-    inputField.value = String(newValue?.id || '');
-  }
+    const inputField = document.getElementById(
+        "find_accompanying_period_work_acpw",
+    ) as HTMLInputElement;
+    if (inputField) {
+        inputField.value = String(newValue?.id || "");
+    }
 
-/*  if (!props.isEvaluationSelector) {
+    /*  if (!props.isEvaluationSelector) {
     console.log("Emitting from watch:", { work: newValue });
     emit("pickWork", { work: newValue });
   }*/
 });
 
 const openModal = () => {
-  showModal.value = true;
+    showModal.value = true;
 };
 const closeModal = () => {
-  showModal.value = false;
-  selectedEvaluation.value = null;
-  // selectedAcpw.value = null;
-  emit("closeModal");
+    showModal.value = false;
+    selectedEvaluation.value = null;
+    // selectedAcpw.value = null;
+    emit("closeModal");
 };
 const confirmSelection = () => {
-  selectedAcpw.value = selectedAcpw.value;
-  console.log('selectedAcpw', selectedAcpw.value)
+    selectedAcpw.value = selectedAcpw.value;
+    console.log("selectedAcpw", selectedAcpw.value);
 
-  if (!props.isEvaluationSelector) {
-    if (selectedAcpw.value) { // only emit if something is actually selected!
-      emit("pickWork", { work: selectedAcpw.value });
-      closeModal();
+    if (!props.isEvaluationSelector) {
+        if (selectedAcpw.value) {
+            // only emit if something is actually selected!
+            emit("pickWork", { work: selectedAcpw.value });
+            closeModal();
+        }
+        // optionally show some error or warning if not selected
+        return;
     }
-    // optionally show some error or warning if not selected
-    return;
 
-  }
+    if (selectedAcpw.value && props.isEvaluationSelector) {
+        evaluations.value =
+            selectedAcpw.value.accompanyingPeriodWorkEvaluations;
+    }
 
-  if (selectedAcpw.value && props.isEvaluationSelector) {
-    evaluations.value = selectedAcpw.value.accompanyingPeriodWorkEvaluations;
-  }
-
-  if (selectedEvaluation.value && props.isEvaluationSelector) {
-    // console.log('evaluation log in modal', selectedEvaluation.value)
-    emit("update:selectedEvaluation", selectedEvaluation.value);
-    closeModal();
-  }
+    if (selectedEvaluation.value && props.isEvaluationSelector) {
+        // console.log('evaluation log in modal', selectedEvaluation.value)
+        emit("update:selectedEvaluation", selectedEvaluation.value);
+        closeModal();
+    }
 };
 </script>