Display evaluations in modal after selection of accompanyingPeriodWork

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

@@ -151,8 +151,9 @@ defineEmits(['inputDocumentTitle', 'removeDocument', 'duplicateDocument', 'statu
 
 const showAccompanyingPeriodSelector = ref(false);
 const selectedEvaluation = ref(null);
-/*watch(selectedAcpw, (val) => {
+
-  console.log("selected acpw changed:", val);
+watch(selectedEvaluation, (val) => {
-});*/
+  console.log("selected evaluation changed:", val);
+});
 
 </script>

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

@@ -0,0 +1,62 @@
+<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,48 @@
+<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/AccompanyingPeriodWorkSelectorModal.vue

@@ -33,9 +33,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>
@@ -59,16 +65,23 @@ import {
   CONFIRM,
 } from "translator";
 import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
+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 evaluations = ref<AccompanyingPeriodWorkEvaluation[]>([])
+
 const props = defineProps({
   accompanyingPeriodId: String,
   isEvaluationSelector: Boolean
 });
 
-const emit = defineEmits(['closeModal', 'update:selectedAcpw'])
+const emit = defineEmits(['closeModal', 'update:selectedEvaluation'])
+
 
 onMounted(() => {
   if (props.accompanyingPeriodId) {
@@ -105,28 +118,26 @@ const openModal = () => {
 }
 const closeModal = () => {
   showModal.value = false
+  selectedEvaluation.value = null
+  selectedAcpw.value = null
   emit('closeModal')
 }
-
-const getEvaluationsForSelectedAcpw = (acpwId: number) => {
-  const url = `/api/1.0/person/accompanying-course/${periodId}/works.json`;
-
-  makeFetch<number, AccompanyingPeriodWork[]>("GET", url)
-      .then((response) => {
-        accompanyingPeriodWorks.value = response;
-      })
-      .catch((error) => {
-        console.log(error);
-      });
-}
 const confirmSelection = () => {
   selectedAcpw.value = selectedAcpw.value;
 
-  if(selectedAcpw.value && props.isEvaluationSelector) {
+  if(false === props.isEvaluationSelector) {
-    console.log('i want evaluations', selectedAcpw.id)
+    closeModal();
-    // emit("update:selectedAcpw", selectedAcpw.value);
+  }
+
+  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()
   }
 
-  closeModal();
 };
 </script>