Resolve "Dupliquer une document d'une évaluation vers une autre" + "Déplacer un document vers une autre évaluation"

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkEvaluationItem.vue

@@ -0,0 +1,70 @@
+<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>
+
+                        <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>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import {
+    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";
+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 "";
+        }
+    }
+};
+</script>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkEvaluationList.vue

@@ -0,0 +1,47 @@
+<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>
+
+                <accompanying-period-work-evaluation-item :eval="evaluation" />
+            </label>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { AccompanyingPeriodWorkEvaluation } from "../../../types";
+import { defineProps, ref, watch } from "vue";
+import AccompanyingPeriodWorkEvaluationItem from "ChillPersonAssets/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkEvaluationItem.vue";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const props = defineProps<{
+    evaluations: AccompanyingPeriodWorkEvaluation[];
+}>();
+const selectedEvaluation = ref<AccompanyingPeriodWorkEvaluation | null>(null);
+
+// eslint-disable-next-line vue/valid-define-emits
+const emit = defineEmits();
+
+watch(selectedEvaluation, (newValue) => {
+    emit("update:selectedEvaluation", newValue);
+});
+</script>
+
+<style>
+.acpw-item {
+    display: flex;
+}
+</style>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkList.vue

@@ -26,14 +26,24 @@ 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;
 }>();
-const selectedAcpw = ref<AccompanyingPeriodWork | null>(null);
+const selectedAcpw = ref<AccompanyingPeriodWork | null>(
+    props.selectedAcpw ?? null,
+);
 
-// eslint-disable-next-line vue/valid-define-emits
-const emit = defineEmits();
+const emit = defineEmits<{
+    "update:selectedAcpw": [value: AccompanyingPeriodWork | null];
+}>();
+
+watch(
+    () => props.selectedAcpw,
+    (val) => {
+        selectedAcpw.value = val ?? null;
+    },
+);
 
 watch(selectedAcpw, (newValue) => {
     emit("update:selectedAcpw", newValue);

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkSelectorModal.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div class="row justify-content-end">
+        <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>
@@ -14,7 +14,7 @@
             </div>
         </div>
 
-        <ul class="record_actions">
+        <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) }}
@@ -40,9 +40,15 @@
 
                 <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>
@@ -60,58 +66,109 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { ref, watch, onMounted } from "vue";
 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,
 } from "translator";
 import { fetchResults } from "ChillMainAssets/lib/api/apiMethods";
-
-interface AccompanyingPeriodWorkSelectorModalProps {
-    accompanyingPeriodId: number;
-}
+import AccompanyingPeriodWorkEvaluationList from "ChillPersonAssets/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkEvaluationList.vue";
+import { AccompanyingPeriodWorkEvaluation } from "../../../types";
 
 const selectedAcpw = ref<AccompanyingPeriodWork | null>(null);
+const selectedEvaluation = ref<AccompanyingPeriodWorkEvaluation | null>(null);
 const showModal = ref(false);
 const accompanyingPeriodWorks = ref<AccompanyingPeriodWork[]>([]);
-const props = defineProps<AccompanyingPeriodWorkSelectorModalProps>();
+const evaluations = ref<AccompanyingPeriodWorkEvaluation[]>([]);
+
+const props = defineProps<{
+    accompanyingPeriodId: string;
+    isEvaluationSelector: boolean;
+    ignoreAccompanyingPeriodWorkIds: number[];
+}>();
 
 const emit = defineEmits<{
     pickWork: [payload: { work: AccompanyingPeriodWork | null }];
+    closeModal: [];
+    "update:selectedEvaluation": [evaluation: AccompanyingPeriodWorkEvaluation];
 }>();
 
 onMounted(() => {
     if (props.accompanyingPeriodId) {
-        getAccompanyingPeriodWorks(props.accompanyingPeriodId);
+        getAccompanyingPeriodWorks(parseInt(props.accompanyingPeriodId));
     } else {
         console.error("No accompanyingperiod id was given");
     }
+
+    showModal.value = true;
 });
 const getAccompanyingPeriodWorks = async (periodId: number) => {
     const url = `/api/1.0/person/accompanying-course/${periodId}/works.json`;
 
-    try {
-        accompanyingPeriodWorks.value = await fetchResults(url);
-    } catch (error) {
-        console.log(error);
+    const accompanyingPeriodWorksFetched =
+        await fetchResults<AccompanyingPeriodWork>(url);
+    if (props.isEvaluationSelector) {
+        accompanyingPeriodWorks.value = accompanyingPeriodWorksFetched.filter(
+            (acpw: AccompanyingPeriodWork) =>
+                acpw.accompanyingPeriodWorkEvaluations.length > 0 &&
+                typeof acpw.id !== "undefined" &&
+                !props.ignoreAccompanyingPeriodWorkIds.includes(acpw.id),
+        );
+    } else {
+        accompanyingPeriodWorks.value = accompanyingPeriodWorksFetched;
     }
-    /*  makeFetch<number, AccompanyingPeriodWork[]>("GET", url)
-    .then((response) => {
-      accompanyingPeriodWorks.value = response;
-    })
-    .catch((error) => {
-      console.log(error);
-    });*/
 };
 
-const openModal = () => (showModal.value = true);
-const closeModal = () => (showModal.value = false);
+watch(selectedAcpw, (newValue) => {
+    const inputField = document.getElementById(
+        "find_accompanying_period_work_acpw",
+    ) as HTMLInputElement;
+    if (inputField) {
+        inputField.value = String(newValue?.id || "");
+    }
+
+    /*  if (!props.isEvaluationSelector) {
+    console.log("Emitting from watch:", { work: newValue });
+    emit("pickWork", { work: newValue });
+  }*/
+});
+
+const openModal = () => {
+    showModal.value = true;
+};
+const closeModal = () => {
+    showModal.value = false;
+    selectedEvaluation.value = null;
+    // selectedAcpw.value = null;
+    emit("closeModal");
+};
 const confirmSelection = () => {
-    emit("pickWork", { work: selectedAcpw.value });
-    closeModal();
+    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();
+        }
+        // optionally show some error or warning if not selected
+        return;
+    }
+
+    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();
+    }
 };
 </script>