Change behavior of information exchange between backend and frontend

src/Bundle/ChillPersonBundle/Controller/AccompanyingPeriodWorkDuplicateController.php

@@ -33,8 +33,7 @@ class AccompanyingPeriodWorkDuplicateController extends AbstractController
     public function assignDuplicate(AccompanyingPeriodWork $acpw, Request $request)
     {
         $accompanyingPeriod = $acpw->getAccompanyingPeriod();
-
+/*        $acpwArray = $this->accompanyingPeriodWorkRepository->findByAccompanyingPeriod($accompanyingPeriod);
-        $acpwArray = $this->accompanyingPeriodWorkRepository->findByAccompanyingPeriod($accompanyingPeriod);
 
         $acpwArray = array_map(function ($acpw) {
             return [
@@ -43,7 +42,7 @@ class AccompanyingPeriodWorkDuplicateController extends AbstractController
                 'startDate' => $acpw->getStartDate(),
                 'endDate' => $acpw->getEndDate(),
             ];
-        }, $acpwArray);
+        }, $acpwArray);*/
 
         $this->denyAccessUnlessGranted(
             'CHILL_MAIN_ACCOMPANYING_PERIOD_WORK_UPDATE',
@@ -76,8 +75,8 @@ class AccompanyingPeriodWorkDuplicateController extends AbstractController
         }
 
         return $this->render('@ChillPerson/AccompanyingPeriodWorkDuplicate/assign_acpw_duplicate.html.twig', [
-            'accompanyingCourse' => $acpw->getAccompanyingPeriod(),
+            'accompanyingCourse' => $accompanyingPeriod,
-            'acpwArray' => $acpwArray,
+//            'acpwArray' => $acpwArray,
             'acpw' => $acpw,
             'form' => $form->createView(),
         ]);

src/Bundle/ChillPersonBundle/Resources/public/mod/DuplicateSelector/AccompanyingPeriodWorkSelector.js

@@ -4,7 +4,7 @@ import AccompanyingPeriodWorkSelectorModal from "../../vuejs/_components/Accompa
 document.addEventListener("DOMContentLoaded", () => {
     const el = document.getElementById('linked-acpw-selector');
     if (el) {
-        const acpwList = JSON.parse(el.dataset.acpwArray);
+        const accompanyingPeriodId = el.dataset.accompanyingPeriod;
-        createApp(AccompanyingPeriodWorkSelectorModal, { acpwList }).mount(el);
+        createApp(AccompanyingPeriodWorkSelectorModal, { accompanyingPeriodId }).mount(el);
     }
 });

src/Bundle/ChillPersonBundle/Resources/public/types.ts

@@ -1,13 +1,16 @@
 import {
   Address,
+  Scope,
   Center,
   Civility,
   DateTime,
   User,
   WorkflowAvailable,
-} from "../../../ChillMainBundle/Resources/public/types";
+  Job,
-import { StoredObject } from "../../../ChillDocStoreBundle/Resources/public/types";
+} from "ChillMainAssets/types";
+import { StoredObject } from "ChillDocStoreAssets/types";
 import {Thirdparty} from "../../../ChillThirdPartyBundle/Resources/public/types";
+import {Calendar} from "../../../ChillCalendarBundle/Resources/public/types";
 
 export interface Person {
   id: number;
@@ -30,6 +33,37 @@ export interface Person {
   current_residential_addresses: Address[];
 }
 
+export interface AccompanyingPeriod {
+  id: number;
+  addressLocation?: Address | null;
+  administrativeLocation?: Location | null;
+  calendars: Calendar[];
+  closingDate?: Date | null;
+  closingMotive?: ClosingMotive | null;
+  comments: Comment[];
+  confidential: boolean;
+  createdAt?: Date | null;
+  createdBy?: User | null;
+  emergency: boolean;
+  intensity?: 'occasional' | 'regular';
+  job?: Job | null;
+  locationHistories: AccompanyingPeriodLocationHistory[];
+  openingDate?: Date | null;
+  origin?: Origin | null;
+  participations: AccompanyingPeriodParticipation[];
+  personLocation?: Person | null;
+  pinnedComment?: Comment | null;
+  preventUserIsChangedNotification: boolean;
+  remark: string;
+  requestorAnonymous: boolean;
+  requestorPerson?: Person | null;
+  requestorThirdParty?: Thirdparty | null;
+  resources: AccompanyingPeriodResource[];
+  scopes: Scope[];
+  socialIssues: SocialIssue[];
+  step?: 'CLOSED' | 'CONFIRMED' | 'CONFIRMED_INACTIVE_SHORT' | 'CONFIRMED_INACTIVE_LONG' | 'DRAFT';
+}
+
 export interface AccompanyingPeriodWorkEvaluationDocument {
   id: number;
   type: "accompanying_period_work_evaluation_document";
@@ -73,7 +107,9 @@ interface SocialAction {
   children: SocialAction[];
   issue?: SocialIssue | null;
   ordering: number;
-  title: Record<string, string>;
+  title: {
+    fr: string;
+  };
   defaultNotificationDelay?: string | null;
   desactivationDate?: string | null;
   evaluations: Evaluation[];
@@ -81,11 +117,55 @@ interface SocialAction {
   results: Result[];
 }
 
+export interface AccompanyingPeriodResource {
+  id: number;
+  accompanyingPeriod: AccompanyingPeriod;
+  comment?: string | null;
+  person?: Person | null;
+  thirdParty?: Thirdparty | null;
+}
+
+export interface Origin {
+  id: number;
+  label: {
+    fr: string;
+  };
+  noActiveAfter: DateTime;
+}
+
+export interface ClosingMotive {
+  id: number;
+  active: boolean;
+  name: {
+    fr: string;
+  };
+  ordering: number;
+  isCanceledAccompanyingPeriod: boolean;
+  parent?: ClosingMotive | null;
+  children: ClosingMotive[];
+}
+
+export interface AccompanyingPeriodParticipation {
+  id: number;
+  startDate: DateTime;
+  endDate?: DateTime | null;
+  accompanyingPeriod: AccompanyingPeriod;
+  person: Person;
+}
+
+export interface AccompanyingPeriodLocationHistory {
+  id: number;
+  startDate: DateTime;
+  endDate?: DateTime | null;
+  addressLocation?: Address | null;
+  period: AccompanyingPeriod;
+  personLocation?: Person | null;
+}
+
 type SocialIssue = any;
 type Goal = any;
 type Result = any;
 type Evaluation = any;
-type AccompanyingPeriod = any;
 type AccompanyingPeriodWorkEvaluation = any;
 type AccompanyingPeriodWorkGoal = any;
 type PrivateCommentEmbeddable = any;

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

@@ -7,7 +7,7 @@
         <span class="title_action">
         <span class="chill-entity entity-social-action">
           <span class="badge bg-light text-dark">
-              {{ acpw.socialAction }}
+              {{ acpw?.socialAction?.title.fr }}
           </span>
         </span>
 
@@ -43,7 +43,7 @@ const props = defineProps<{ acpw: AccompanyingPeriodWork }>();
 
 const formatDate = (dateObject) => {
   if(dateObject) {
-    const parsedDate = ISOToDate(dateObject.date);
+    const parsedDate = ISOToDate(dateObject.datetime);
     return new Intl.DateTimeFormat('default', { dateStyle: 'short' }).format(parsedDate);
   }
 };

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

@@ -1,6 +1,6 @@
 <template>
     <div class="results">
-      <div v-for="acpw in acpwList" :key="acpw.id" class="list-item">
+      <div v-for="acpw in accompanyingPeriodWorks" :key="acpw.id" class="list-item">
         <label class="acpw-item">
 
           <div>
@@ -15,14 +15,19 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, defineModel } from "vue";
-import { AccompanyingPeriodWork } from "../../../types";
 import AccompanyingPeriodWorkItem
   from "ChillPersonAssets/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkItem.vue";
+import { AccompanyingPeriodWork} from "../../../types";
+import {defineProps, ref, watch} from "vue";
 
-const props = defineProps<{ acpwList: AccompanyingPeriodWork[] }>();
+const props = defineProps<{ accompanyingPeriodWorks: AccompanyingPeriodWork[] }>()
+const selectedAcpw = ref<AccompanyingPeriodWork | null>(null);
+
+const emit = defineEmits();
+watch(selectedAcpw, (newValue) => {
+  emit('update:selectedAcpw', newValue);
+});
 
-const selectedAcpw = defineModel<number | null>("selectedAcpw", { default: null });
 </script>
 
 <style>

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

@@ -1,5 +1,15 @@
 <template>
   <div>
+    <div class="row justify-content-end">
+      <div class="col-md-9 col-sm-12" 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>
+          </li>
+        </ul>
+      </div>
+    </div>
+
     <ul class="record_actions">
       <li>
         <a class="btn btn-sm btn-create mt-3" @click="openModal">
@@ -16,7 +26,7 @@
 
         <template #body>
           <accompanying-period-work-list
-              :acpw-list="acpwList"
+              :accompanying-period-works="accompanyingPeriodWorks"
               v-model:selectedAcpw="selectedAcpw"
           />
         </template>
@@ -27,24 +37,51 @@
       </modal>
     </teleport>
 
-    <input type="hidden" name="form[acpw]" :value="selectedAcpw" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import {ref, watch, onMounted, Ref} from "vue";
 import Modal from "ChillMainAssets/vuejs/_components/Modal.vue"
 import AccompanyingPeriodWorkList from "./AccompanyingPeriodWorkList.vue";
-import { AccompanyingPeriodWork } from "../../../types";
+import { AccompanyingPeriodWork} from "../../../types";
-import { trans, ACPW_DUPLICATE_SELECT_ACCOMPANYING_PERIOD_WORK, CANCEL_1, CONFIRM  } from "translator";
+import { trans, ACPW_DUPLICATE_SELECT_ACCOMPANYING_PERIOD_WORK, SOCIAL_ACTION, CONFIRM  } from "translator";
+import {makeFetch} from "ChillMainAssets/lib/api/apiMethods";
 
-const props = defineProps<{ acpwList: AccompanyingPeriodWork[] }>();
+const selectedAcpw = ref<AccompanyingPeriodWork | null>(null);
-const selectedAcpw = ref(null);
 const showModal = ref(false);
+const accompanyingPeriodWorks = ref([]);
+const props = defineProps({
+  accompanyingPeriodId: String,
+});
+
+onMounted(() => {
+  getAccompanyingPeriodWorks(parseInt(props.accompanyingPeriodId));
+});
+const getAccompanyingPeriodWorks = (periodId: number) => {
+  const url = `/api/1.0/person/accompanying-course/${periodId}/works.json`;
+
+  makeFetch("GET", url)
+      .then((response) => {
+        accompanyingPeriodWorks.value = response;
+      })
+      .catch((error) => {
+        console.log(error)
+      });
+};
+
+watch(selectedAcpw, (newValue) => {
+  const inputField = document.getElementById('find_accompanying_period_work_acpw') as HTMLInputElement;
+  console.log('selected Acpw', newValue);
+  if (inputField) {
+    inputField.value = String(newValue?.id);
+  }
+});
 
 const openModal = () => (showModal.value = true);
 const closeModal = () => (showModal.value = false);
 const confirmSelection = () => {
+  selectedAcpw.value = selectedAcpw.value;
   closeModal();
 };
 </script>

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriodWorkDuplicate/assign_acpw_duplicate.html.twig

@@ -11,7 +11,7 @@
         {{ form_start(form) }}
         {%- if form.acpw is defined -%}
             {{ form_row(form.acpw) }}
-            <div id="linked-acpw-selector" data-acpw-array='{{ acpwArray|json_encode }}'></div>
+            <div id="linked-acpw-selector" data-accompanying-period='{{ accompanyingCourse.id }}'></div>
         {% endif %}
         {{ form_rest(form) }}