From f523b9adb3e9b3f4988d8d4f4c313ff3ac9a4d8c Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Wed, 26 Mar 2025 20:25:39 +0100
Subject: [PATCH] Fix typing errors

---
 .../AccompanyingPeriodWorkItem.vue            | 13 +++++++----
 .../AccompanyingPeriodWorkSelectorModal.vue   | 23 +++++++++++++++----
 2 files changed, 26 insertions(+), 10 deletions(-)

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 c681c46c7..73e62d173 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkItem.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkItem.vue
@@ -34,17 +34,20 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps } from "vue";
-import { AccompanyingPeriodWork } from "../../../types";
 import {ACCOMPANYING_COURSE_WORK_END_DATE, ACCOMPANYING_COURSE_WORK_START_DATE, trans} from "translator";
 import {ISOToDate} from "ChillMainAssets/chill/js/date";
+import {DateTime} from "ChillMainAssets/types";
+import {AccompanyingPeriodWork} from "../../../types";
 
 const props = defineProps<{ acpw: AccompanyingPeriodWork }>();
-
-const formatDate = (dateObject) => {
+const formatDate = (dateObject: DateTime) => {
   if(dateObject) {
     const parsedDate = ISOToDate(dateObject.datetime);
-    return new Intl.DateTimeFormat('default', { dateStyle: 'short' }).format(parsedDate);
+    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/AccompanyingPeriodWorkSelectorModal.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkSelectorModal.vue
index 20f35044f..cb0536408 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkSelectorModal.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkSelectorModal.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
     <div class="row justify-content-end">
-      <div class="col-md-9 col-sm-12" v-if="selectedAcpw">
+      <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">{{ trans(SOCIAL_ACTION) }}: {{ selectedAcpw?.socialAction?.title.fr }}</span>
+            <span @click="selectedAcpw = null" class="chill-denomination">{{ selectedAcpw?.socialAction?.title.fr }}</span>
           </li>
         </ul>
       </div>
@@ -47,10 +47,12 @@ import AccompanyingPeriodWorkList from "./AccompanyingPeriodWorkList.vue";
 import { AccompanyingPeriodWork} from "../../../types";
 import { trans, ACPW_DUPLICATE_SELECT_ACCOMPANYING_PERIOD_WORK, SOCIAL_ACTION, CONFIRM  } from "translator";
 import {makeFetch} from "ChillMainAssets/lib/api/apiMethods";
+import {DateTime} from "ChillMainAssets/types";
+import {ISOToDate} from "ChillMainAssets/chill/js/date";
 
 const selectedAcpw = ref<AccompanyingPeriodWork | null>(null);
 const showModal = ref(false);
-const accompanyingPeriodWorks = ref([]);
+const accompanyingPeriodWorks = ref<AccompanyingPeriodWork[]>([]);
 const props = defineProps({
   accompanyingPeriodId: String,
 });
@@ -65,7 +67,7 @@ onMounted(() => {
 const getAccompanyingPeriodWorks = (periodId: number) => {
   const url = `/api/1.0/person/accompanying-course/${periodId}/works.json`;
 
-  makeFetch("GET", url)
+  makeFetch<number, AccompanyingPeriodWork[]>("GET", url)
       .then((response) => {
         accompanyingPeriodWorks.value = response;
       })
@@ -77,10 +79,21 @@ const getAccompanyingPeriodWorks = (periodId: number) => {
 watch(selectedAcpw, (newValue) => {
   const inputField = document.getElementById('find_accompanying_period_work_acpw') as HTMLInputElement;
   if (inputField) {
-    inputField.value = String(newValue.id);
+    inputField.value = String(newValue?.id);
   }
 });
 
+const formatDate = (dateObject: DateTime) => {
+  if(dateObject) {
+    const parsedDate = ISOToDate(dateObject.datetime);
+    if (parsedDate) {
+      return new Intl.DateTimeFormat('default', { dateStyle: 'short' }).format(parsedDate);
+    } else {
+      return '';
+    }
+  }
+};
+
 const openModal = () => (showModal.value = true);
 const closeModal = () => (showModal.value = false);
 const confirmSelection = () => {