Transform duplicate button into dropdown

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

@@ -1,22 +1,6 @@
 <template>
   <div>
-    <!--h2>
-      {{ $t('evaluation_title') }}
-   </h2-->
-
     <div class="m-md-3">
-      <!--div class="row mb-3">
-         <label class="col-sm-4 col-form-label">{{ $t('evaluation_status') }}</label>
-         <div class="col-sm-8">
-            <select class="form-select form-select-sm" v-model="status">
-               <option disabled value="">{{ $t('evaluation_choose_a_status') }}</option>
-               <option v-for="s in listAllStatus" :value="s.id">
-                  {{ s.id }}
-               </option>
-            </select>
-         </div>
-      </div-->
-
       <div class="row mb-3">
         <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
           {{ $t("evaluation_startdate") }}
@@ -226,12 +210,23 @@
                     <a class="btn btn-delete" @click="removeDocument(d)"> </a>
                   </li>
                   <li v-if="Number.isInteger(d.id)">
-                    <button
+                    <div class="duplicate-dropdown">
+                      <button class="btn btn-duplicate dropdown-toggle"
                               type="button"
-                      @click="duplicateDocument(d)"
+                              data-bs-toggle="dropdown"
-                      class="btn btn-duplicate"
+                              aria-expanded="false">
-                      title="Dupliquer"
+<!--                        todo use translations -->
-                    ></button>
+                        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>
@@ -269,6 +264,27 @@
       </div>
     </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>
@@ -284,6 +300,13 @@ 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";
 
 const i18n = {
   messages: {
@@ -327,6 +350,11 @@ export default {
     PickTemplate,
     ListWorkflowModal,
     DocumentActionButtonsGroup,
+    AccompanyingPeriodWorkList,
+    Modal,
+    trans,
+    ACPW_DUPLICATE_SELECT_ACCOMPANYING_PERIOD_WORK,
+    CONFIRM,
   },
   i18n,
   data() {