From ab23a4efb5006663e0e330544b4c0194b9d3806b Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Wed, 2 Apr 2025 11:55:37 +0200
Subject: [PATCH] Refactor FormEvaluation.vue component

---
 .../components/CommentInput.vue               |  25 +
 .../components/DateInputs.vue                 |  60 ++
 .../components/DocumentActions.vue            |  40 +
 .../components/DocumentsList.vue              | 157 +++
 .../components/FormEvaluation.vue             | 897 +++++-------------
 .../components/TimeSpentInput.vue             |  26 +
 6 files changed, 547 insertions(+), 658 deletions(-)
 create mode 100644 src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/CommentInput.vue
 create mode 100644 src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/DateInputs.vue
 create mode 100644 src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/DocumentActions.vue
 create mode 100644 src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/DocumentsList.vue
 create mode 100644 src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/TimeSpentInput.vue

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/CommentInput.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/CommentInput.vue
new file mode 100644
index 000000000..a9fe41e7a
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/CommentInput.vue
@@ -0,0 +1,25 @@
+<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>
+  </div>
+</template>
+
+<script setup>
+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 } from 'translator';
+
+defineProps(['comment']);
+defineEmits(['update:comment']);
+</script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/DateInputs.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/DateInputs.vue
new file mode 100644
index 000000000..881eb5830
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/DateInputs.vue
@@ -0,0 +1,60 @@
+<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>
+
+    <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>
+
+    <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 } from 'translator';
+
+defineProps(['startDate', 'endDate', 'maxDate', 'warningInterval']);
+defineEmits(['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
new file mode 100644
index 000000000..76ce80236
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/DocumentActions.vue
@@ -0,0 +1,40 @@
+<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>
+  </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 } from 'translator';
+
+defineProps(['evaluation', 'templates']);
+defineEmits(['addDocument', 'submitBeforeGenerate']);
+</script>
+
+<style scoped>
+ul.document-upload {
+  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
new file mode 100644
index 000000000..7447eff50
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/DocumentsList.vue
@@ -0,0 +1,157 @@
+<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="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>
+              <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">
+                    Dupliquer
+                  </button>
+                  <ul class="dropdown-menu">
+                    <li>
+                      <a class="dropdown-item" @click="$emit('duplicateDocument', d)">Dupliquer ici</a>
+                    </li>
+                    <li>
+                      <a class="dropdown-item" @click="showAccompanyingPeriodSelector = true">Dupliquer vers un autre actions d'accompagnement</a>
+                    </li>
+                  </ul>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <AccompanyingPeriodWorkSelectorModal
+      v-if="showAccompanyingPeriodSelector"
+      v-model:selectedAcpw="selectedAcpw"
+      :accompanying-period-id="accompanyingPeriodId"
+      @close-modal="showAccompanyingPeriodSelector = false"
+      @update:selectedAcpw="selectedAcpw = $event"
+  />
+</template>
+
+<script setup>
+import { ISOToDatetime } from 'ChillMainAssets/chill/js/date';
+import ListWorkflowModal from 'ChillMainAssets/vuejs/_components/EntityWorkflow/ListWorkflowModal.vue';
+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,
+  trans
+} from 'translator';
+import {ref, watch} from "vue";
+import AccompanyingPeriodWorkSelectorModal
+  from "ChillPersonAssets/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkSelectorModal.vue";
+
+defineProps(['documents', 'docAnchorId', 'accompanyingPeriodId']);
+defineEmits(['inputDocumentTitle', 'removeDocument', 'duplicateDocument', 'statusDocumentChanged', 'goToGenerateWorkflow', 'goToGenerateNotification']);
+
+const showAccompanyingPeriodSelector = ref(false);
+const selectedAcpw = ref(null);
+/*watch(selectedAcpw, (val) => {
+  console.log("selected acpw changed:", val);
+});*/
+
+</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 ee180fb5c..5184c9393 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue
@@ -1,678 +1,262 @@
 <template>
   <div>
     <div class="m-md-3">
-      <div class="row mb-3">
-        <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
-          {{ $t("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"
-            v-model="startDate"
-          />
-        </div>
+      <DateInputs
+          :startDate="startDate"
+          :endDate="endDate"
+          :maxDate="maxDate"
+          :warningInterval="warningInterval"
+          @update:startDate="updateStartDate"
+          @update:endDate="updateEndDate"
+          @update:maxDate="updateMaxDate"
+          @update:warningInterval="updateWarningInterval"
+      />
 
-        <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
-          {{ $t("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"
-            v-model="endDate"
-          />
-        </div>
-      </div>
+      <TimeSpentInput
+          :timeSpent="timeSpent"
+          :timeSpentChoices="timeSpentChoices"
+          @update:timeSpent="updateTimeSpent"
+      />
 
-      <div class="row mb-3">
-        <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
-          {{ $t("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"
-            v-model="maxDate"
-          />
-        </div>
+      <CommentInput
+          :comment="comment"
+          @update:comment="updateComment"
+      />
 
-        <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
-          {{ $t("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"
-            v-model.number="warningInterval"
-          />
-        </div>
-      </div>
+      <DocumentsList
+          v-if="evaluation.documents.length > 0"
+          :documents="evaluation.documents"
+          :docAnchorId="docAnchorId"
+          :accompanyingPeriodId="store.state.work.accompanyingPeriod.id"
+          @inputDocumentTitle="onInputDocumentTitle"
+          @removeDocument="removeDocument"
+          @duplicateDocument="duplicateDocument"
+          @statusDocumentChanged="onStatusDocumentChanged"
+          @goToGenerateWorkflow="goToGenerateWorkflowEvaluationDocument"
+          @goToGenerateNotification="goToGenerateDocumentNotification"
+      />
 
-      <div class="row mb-3">
-        <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
-          {{ $t("evaluation_time_spent") }}
-        </label>
-        <div class="col-8 col-sm-4 col-md-8 col-lg-4">
-          <select
-            class="form-control form-control-sm"
-            type="time"
-            v-model="timeSpent"
-          >
-            <option disabled value="">{{ $t("select_time_spent") }}</option>
-            <option v-for="time in timeSpentChoices" :value="time.value">
-              {{ time.text }}
-            </option>
-          </select>
-        </div>
-      </div>
-
-      <div class="row mb-3">
-        <label class="col-sm-4 col-form-label visually-hidden">{{
-          $t("evaluation_public_comment")
-        }}</label>
-        <div class="col-sm-12">
-          <ckeditor
-            :editor="classicEditor"
-            :config="editorConfig"
-            :placeholder="$t('evaluation_comment_placeholder')"
-            v-model="comment"
-            tag-name="textarea"
-          ></ckeditor>
-        </div>
-      </div>
-
-      <div v-if="evaluation.documents.length > 0" class="row mb-3">
-        <h5>{{ $t("Documents") }} :</h5>
-
-        <div class="flex-table">
-          <div
-            class="item-bloc"
-            v-for="(d, i) in evaluation.documents"
-            :key="d.id"
-            :class="[
-              parseInt(this.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="onInputDocumentTitle"
-                  />
-                </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="
-                        goToGenerateWorkflowEvaluationDocument
-                      "
-                    ></list-workflow-modal>
-                  </li>
-                  <li>
-                    <button
-                      v-if="AmIRefferer"
-                      class="btn btn-notify"
-                      @click="goToGenerateDocumentNotification(d, false)"
-                    ></button>
-                    <template v-else>
-                      <button
-                        id="btnGroupNotifyButtons"
-                        type="button"
-                        class="btn btn-notify dropdown-toggle"
-                        :title="$t('notification_send')"
-                        data-bs-toggle="dropdown"
-                        aria-expanded="false"
-                      >
-                        &nbsp;
-                      </button>
-                      <ul
-                        class="dropdown-menu"
-                        aria-labelledby="btnGroupNotifyButtons"
-                      >
-                        <li>
-                          <a
-                            class="dropdown-item"
-                            @click="goToGenerateDocumentNotification(d, true)"
-                            >{{ $t("notification_notify_referrer") }}</a
-                          >
-                        </li>
-                        <li>
-                          <a
-                            class="dropdown-item"
-                            @click="goToGenerateDocumentNotification(d, false)"
-                            >{{ $t("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="onStatusDocumentChanged"
-                    ></document-action-buttons-group>
-                  </li>
-                  <li v-if="d.storedObject._permissions.canEdit">
-                    <drop-file-modal
-                      :existing-doc="d.storedObject"
-                      :allow-remove="false"
-                      @add-document="
-                        (arg) =>
-                          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="removeDocument(d)"> </a>
-                  </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">
-<!--                        todo use translations -->
-                        Dupliquer
-                      </button>
-                      <ul class="dropdown-menu">
-                        <li>
-                          <a class="dropdown-item" @click="duplicateDocument(d)">Dupliquer ici</a>
-                        </li>
-                        <li>
-                          <a class="dropdown-item" @click="openModal">Dupliquer vers un autre actions d'accompagnement</a>
-                        </li>
-                      </ul>
-                    </div>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="row mb-3">
-        <h6>{{ $t("document_add") }} :</h6>
-        <pick-template
-          entityClass="Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWorkEvaluation"
-          :id="evaluation.id"
+      <DocumentActions
+          :evaluation="evaluation"
           :templates="getTemplatesAvailables"
-          :preventDefaultMoveToGenerate="true"
-          @go-to-generate-document="submitBeforeGenerate"
-        >
-          <template v-slot:title>
-            <label class="col-form-label">{{
-              $t("evaluation_generate_a_document")
-            }}</label>
-          </template>
-        </pick-template>
-        <div>
-          <label class="col-form-label">{{ $t("document_upload") }}</label>
-          <ul class="record_actions document-upload">
-            <li>
-              <drop-file-modal
-                :allow-remove="false"
-                @add-document="addDocument"
-              ></drop-file-modal>
-            </li>
-          </ul>
-        </div>
-      </div>
+          @addDocument="addDocument"
+          @submitBeforeGenerate="submitBeforeGenerate"
+      />
     </div>
   </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
-            :accompanying-period-works="accompanyingPeriodWorks"
-            v-model:selectedAcpw="selectedAcpw"
-        />
-      </template>
-
-      <template #footer>
-        <button type="button" class="btn btn-save" @click="confirmSelection">
-          {{ trans(CONFIRM) }}
-        </button>
-      </template>
-    </modal>
-  </teleport>
 </template>
 
-<script>
-import { ISOToDatetime } from "ChillMainAssets/chill/js/date";
-import { Ckeditor } from "@ckeditor/ckeditor5-vue";
-import { ClassicEditor } from "ckeditor5";
-import classicEditorConfig from "ChillMainAssets/module/ckeditor5/editor_config";
-import { mapState } from "vuex";
-import PickTemplate from "ChillDocGeneratorAssets/vuejs/_components/PickTemplate.vue";
-import { buildLink } from "ChillDocGeneratorAssets/lib/document-generator";
-import ListWorkflowModal from "ChillMainAssets/vuejs/_components/EntityWorkflow/ListWorkflowModal.vue";
-import { buildLinkCreate } from "ChillMainAssets/lib/entity-workflow/api";
-import { buildLinkCreate as buildLinkCreateNotification } from "ChillMainAssets/lib/entity-notification/api";
-import DocumentActionButtonsGroup from "ChillDocStoreAssets/vuejs/DocumentActionButtonsGroup.vue";
-import DropFileModal from "ChillDocStoreAssets/vuejs/DropFileWidget/DropFileModal.vue";
-import {
-  trans,
-  ACPW_DUPLICATE_SELECT_ACCOMPANYING_PERIOD_WORK,
-  CONFIRM,
-} from "translator";
-import AccompanyingPeriodWorkList from "../../_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkList.vue";
-import Modal from "ChillMainAssets/vuejs/_components/Modal.vue";
+<script setup>
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+import DateInputs from './DateInputs.vue';
+import TimeSpentInput from './TimeSpentInput.vue';
+import CommentInput from './CommentInput.vue';
+import DocumentsList from './DocumentsList.vue';
+import DocumentActions from './DocumentActions.vue';
 
-const i18n = {
-  messages: {
-    fr: {
-      evaluation_title: "Ecrire une évaluation",
-      evaluation_status: "Statut",
-      evaluation_choose_a_status: "Choisir un statut",
-      evaluation_startdate: "Date d'ouverture",
-      evaluation_enddate: "Date de fin",
-      evaluation_maxdate: "Date d'échéance",
-      evaluation_warning_interval: "Rappel (jours)",
-      evaluation_public_comment: "Note publique",
-      evaluation_comment_placeholder: "Commencez à écrire ...",
-      evaluation_generate_a_document: "Générer un document",
-      evaluation_choose_a_template: "Choisir un modèle",
-      evaluation_add_a_document: "Ajouter un document",
-      evaluation_add: "Ajouter une évaluation",
-      evaluation_time_spent: "Temps de rédaction",
-      select_time_spent: "Indiquez le temps de rédaction",
-      Documents: "Documents",
-      document_add: "Générer ou téléverser un document",
-      document_upload: "Téléverser un document",
-      document_title: "Titre du document",
-      template_title: "Nom du template",
-      browse: "Ajouter un document",
-      replace: "Remplacer",
-      download: "Télécharger le fichier existant",
-      notification_notify_referrer: "Notifier le référent",
-      notification_notify_any: "Notifier d'autres utilisateurs",
-      notification_send: "Envoyer une notification",
-    },
-  },
-};
+const props = defineProps(['evaluation', 'docAnchorId']);
+const store = useStore();
 
-export default {
-  name: "FormEvaluation",
-  props: ["evaluation", "docAnchorId"],
-  components: {
-    DropFileModal,
-    ckeditor: Ckeditor,
-    PickTemplate,
-    ListWorkflowModal,
-    DocumentActionButtonsGroup,
-    AccompanyingPeriodWorkList,
-    Modal,
-    trans,
-    ACPW_DUPLICATE_SELECT_ACCOMPANYING_PERIOD_WORK,
-    CONFIRM,
-  },
-  i18n,
-  data() {
-    return {
-      template: null,
-      asyncUploadOptions: {
-        maxFiles: 1,
-        maxPostSize: 15000000,
-        required: false,
-      },
-      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 },
-      ],
-    };
-  },
-  computed: {
-    ...mapState(["isPosting", "work", "me"]),
-    classicEditor: () => ClassicEditor,
-    editorConfig: () => classicEditorConfig,
-    AmIRefferer() {
-      return !(
-        this.$store.state.work.accompanyingPeriod.user &&
-        this.$store.state.me &&
-        this.$store.state.work.accompanyingPeriod.user.id !==
-          this.$store.state.me.id
-      );
-    },
-    getTemplatesAvailables() {
-      return this.$store.getters.getTemplatesAvailablesForEvaluation(
-        this.evaluation.evaluation,
-      );
-    },
-    canGenerate() {
-      return !this.$store.state.isPosting && this.template !== null;
-    },
-    startDate: {
-      get() {
-        console.log("evaluation", this.evaluation);
-        return this.evaluation.startDate;
-      },
-      set(v) {
-        this.$store.commit("setEvaluationStartDate", {
-          key: this.evaluation.key,
-          date: v,
-        });
-      },
-    },
-    endDate: {
-      get() {
-        return this.evaluation.endDate;
-      },
-      set(v) {
-        this.$store.commit("setEvaluationEndDate", {
-          key: this.evaluation.key,
-          date: v,
-        });
-      },
-    },
-    maxDate: {
-      get() {
-        return this.evaluation.maxDate;
-      },
-      set(v) {
-        this.$store.commit("setEvaluationMaxDate", {
-          key: this.evaluation.key,
-          date: v,
-        });
-      },
-    },
-    warningInterval: {
-      get() {
-        return this.evaluation.warningInterval;
-      },
-      set(v) {
-        this.$store.commit("setEvaluationWarningInterval", {
-          key: this.evaluation.key,
-          days: v,
-        });
-      },
-    },
-    timeSpent: {
-      get() {
-        return this.evaluation.timeSpent;
-      },
-      set(v) {
-        this.$store.commit("setEvaluationTimeSpent", {
-          key: this.evaluation.key,
-          time: v,
-        });
-      },
-    },
-    comment: {
-      get() {
-        return this.evaluation.comment;
-      },
-      set(v) {
-        this.$store.commit("setEvaluationComment", {
-          key: this.evaluation.key,
-          comment: v,
-        });
-      },
-    },
-  },
-  methods: {
-    ISOToDatetime,
-    listAllStatus() {
-      console.log("load all status");
-      let url = `/api/`;
-      fetch(url).then((response) => {
-        if (response.ok) {
-          return response.json();
-        }
-        throw { m: "yeeah", s: response.status, b: response.body };
-      });
-    },
-    buildEditLink(document) {
-      return (
-        `/chill/wopi/edit/${document.storedObject.uuid}?returnPath=` +
-        encodeURIComponent(
-          window.location.pathname +
-            window.location.search +
-            window.location.hash,
-        )
-      );
-    },
-    submitBeforeLeaveToEditor() {
-      console.log("submit beore edit 2");
-      // empty callback
-      const callback = () => null;
-      return this.$store.dispatch("submit", callback).catch((e) => {
-        console.log(e);
-        throw e;
-      });
-    },
-    submitBeforeEdit(storedObject) {
-      const callback = (data) => {
-        let evaluation = data.accompanyingPeriodWorkEvaluations.find(
-          (e) => e.key === this.evaluation.key,
-        );
-        let document = evaluation.documents.find(
-          (d) => d.storedObject.id === storedObject.id,
-        );
-        //console.log('=> document', document);
-        window.location.assign(this.buildEditLink(document));
-      };
-      return this.$store.dispatch("submit", callback).catch((e) => {
-        console.log(e);
-        throw e;
-      });
-    },
-    submitBeforeGenerate({ template }) {
-      const callback = (data) => {
-        let evaluationId = data.accompanyingPeriodWorkEvaluations.find(
-          (e) => e.key === this.evaluation.key,
-        ).id;
+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 },
+];
 
-        window.location.assign(
-          buildLink(
-            template,
-            evaluationId,
-            "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluation",
-          ),
-        );
-      };
+const startDate = computed({
+  get() {
+    return props.evaluation.startDate;
+  },
+  set(v) {
+    store.commit('setEvaluationStartDate', { key: props.evaluation.key, date: v });
+  },
+});
 
-      return this.$store.dispatch("submit", callback).catch((e) => {
-        console.log(e);
-        throw e;
-      });
-    },
-    onInputDocumentTitle(event) {
-      const id = Number(event.target.id);
-      const key = Number(event.target.dataset.key) + 1;
-      const title = event.target.value;
-      this.$store.commit("updateDocumentTitle", {
-        id: id,
-        key: key,
-        evaluationKey: this.evaluation.key,
-        title: title,
-      });
-    },
-    addDocument({ stored_object, stored_object_version }) {
-      let document = {
-        type: "accompanying_period_work_evaluation_document",
-        storedObject: stored_object,
-        title: "Nouveau document",
-      };
-      this.$store.commit("addDocument", {
-        key: this.evaluation.key,
-        document,
-        stored_object_version,
-      });
-    },
-    /**
-     * Replaces a document in the store with a new document.
-     *
-     * @param {Object} oldDocument - The document to be replaced.
-     * @param {StoredObject} storedObject - The stored object of the new document.
-     * @param {StoredObjectVersion} storedObjectVersion - The new version of the document
-     * @return {void}
-     */
-    replaceDocument(oldDocument, storedObject, storedObjectVersion) {
-      let document = {
-        type: "accompanying_period_work_evaluation_document",
-        storedObject: storedObject,
-        title: oldDocument.title,
-      };
-      this.$store.commit("replaceDocument", {
-        key: this.evaluation.key,
-        document,
-        oldDocument: oldDocument,
-        stored_object_version: storedObjectVersion,
-      });
-    },
-    removeDocument(document) {
-      if (
-        window.confirm(
-          'Êtes-vous sûr·e de vouloir supprimer le document qui a pour titre "' +
-            document.title +
-            '" ?',
-        )
-      ) {
-        this.$store.commit("removeDocument", {
-          key: this.evaluation.key,
-          document: document,
-        });
-      }
-    },
-    duplicateDocument(document) {
-      this.$store.dispatch("duplicateDocument", {
-        evaluation_key: this.evaluation.key,
-        document: document,
-      });
-    },
-    onStatusDocumentChanged(newStatus) {
-      console.log("onStatusDocumentChanged", newStatus);
-      this.$store.commit("statusDocumentChanged", {
-        key: this.evaluation.key,
-        newStatus: newStatus,
-      });
-    },
-    goToGenerateWorkflowEvaluationDocument({ workflowName, payload }) {
-      const callback = (data) => {
-        let evaluation = data.accompanyingPeriodWorkEvaluations.find(
-          (e) => e.key === this.evaluation.key,
-        );
-        let updatedDocument = evaluation.documents.find(
-          (d) => d.key === payload.doc.key,
-        );
-        window.location.assign(
-          buildLinkCreate(
+const endDate = computed({
+  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 });
+  },
+});
+
+const warningInterval = computed({
+  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 });
+  },
+});
+
+const comment = computed({
+  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);
+});
+
+// const getAccompanyingPeriod = computed(() => store.work)
+function updateStartDate(value) {
+  startDate.value = value;
+}
+
+function updateEndDate(value) {
+  endDate.value = value;
+}
+
+function updateMaxDate(value) {
+  maxDate.value = value;
+}
+
+function updateWarningInterval(value) {
+  warningInterval.value = value;
+}
+
+function updateTimeSpent(value) {
+  timeSpent.value = value;
+}
+
+function updateComment(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,
+  });
+}
+
+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,
+  });
+}
+
+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,
+    });
+  }
+}
+
+function duplicateDocument(document) {
+  store.dispatch('duplicateDocument', {
+    evaluation_key: props.evaluation.key,
+    document: document,
+  });
+}
+
+function onStatusDocumentChanged(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",
+            'Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluationDocument',
             updatedDocument.id,
-          ),
-        );
-      };
+        ),
+    );
+  };
 
-      return this.$store.dispatch("submit", callback).catch((e) => {
-        console.log(e);
-        throw e;
-      });
-    },
-    goToGenerateDocumentNotification(document, tos) {
-      const callback = (data) => {
-        let evaluation = data.accompanyingPeriodWorkEvaluations.find(
-          (e) => e.key === this.evaluation.key,
-        );
-        let updatedDocument = evaluation.documents.find(
-          (d) => d.key === document.key,
-        );
-        window.location.assign(
-          buildLinkCreateNotification(
-            "Chill\\PersonBundle\\Entity\\AccompanyingPeriod\\AccompanyingPeriodWorkEvaluationDocument",
+  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
-              ? this.$store.state.work.accompanyingPeriod.user.id
-              : null,
-            window.location.pathname +
-              window.location.search +
-              window.location.hash,
-          ),
-        );
-      };
-      return this.$store.dispatch("submit", callback).catch((e) => {
-        console.log(e);
-        throw e;
-      });
-    },
-  },
-};
+            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>
@@ -680,9 +264,6 @@ input.document-title {
   font-weight: bold;
   font-size: 1rem;
 }
-ul.document-upload {
-  justify-content: flex-start;
-}
 
 .bg-blink {
   color: #050000;
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/TimeSpentInput.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/TimeSpentInput.vue
new file mode 100644
index 000000000..499c451ee
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/TimeSpentInput.vue
@@ -0,0 +1,26 @@
+<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>
+  </div>
+</template>
+
+<script setup>
+import { EVALUATION_TIME_SPENT, trans } from 'translator';
+
+defineProps(['timeSpent', 'timeSpentChoices']);
+defineEmits(['update:timeSpent']);
+</script>