Resolve "Fusion actions d'accompagnement"

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

@@ -0,0 +1,60 @@
+<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 class="chill-entity entity-social-action">
+              <span class="badge bg-light text-dark">
+                {{ acpw?.socialAction?.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(acpw.startDate) }}</b>
+              </li>
+
+              <li v-if="acpw.endDate">
+                <span class="item-key">
+                  {{ trans(ACCOMPANYING_COURSE_WORK_END_DATE) }} :
+                </span>
+                <b>{{ formatDate(acpw.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,
+  trans,
+} from "translator";
+import { ISOToDate } from "ChillMainAssets/chill/js/date";
+import { DateTime } from "ChillMainAssets/types";
+import { AccompanyingPeriodWork } from "../../../types";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const props = defineProps<{ acpw: AccompanyingPeriodWork }>();
+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/AccompanyingPeriodWorkList.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="results">
+    <div
+      v-for="acpw in accompanyingPeriodWorks"
+      :key="acpw.id"
+      class="list-item"
+    >
+      <label class="acpw-item">
+        <div>
+          <input
+            type="radio"
+            :value="acpw"
+            v-model="selectedAcpw"
+            name="item"
+          />
+        </div>
+
+        <accompanying-period-work-item :acpw="acpw" />
+      </label>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+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[];
+}>();
+const selectedAcpw = ref<AccompanyingPeriodWork | null>(null);
+
+// eslint-disable-next-line vue/valid-define-emits
+const emit = defineEmits();
+
+watch(selectedAcpw, (newValue) => {
+  emit("update:selectedAcpw", newValue);
+});
+</script>
+
+<style>
+.acpw-item {
+  display: flex;
+}
+</style>

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

@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <div class="row justify-content-end">
+      <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">{{
+              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">
+          {{ trans(ACPW_DUPLICATE_SELECT_ACCOMPANYING_PERIOD_WORK) }}
+        </a>
+      </li>
+    </ul>
+
+    <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>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {onMounted, ref} from "vue";
+import Modal from "ChillMainAssets/vuejs/_components/Modal.vue";
+import AccompanyingPeriodWorkList from "./AccompanyingPeriodWorkList.vue";
+import {AccompanyingPeriodWork} from "../../../types";
+import {ACPW_DUPLICATE_SELECT_ACCOMPANYING_PERIOD_WORK, CONFIRM, trans,} from "translator";
+import {fetchResults} from "ChillMainAssets/lib/api/apiMethods";
+
+interface AccompanyingPeriodWorkSelectorModalProps {
+  accompanyingPeriodId: number;
+}
+
+const selectedAcpw = ref<AccompanyingPeriodWork | null>(null);
+const showModal = ref(false);
+const accompanyingPeriodWorks = ref<AccompanyingPeriodWork[]>([]);
+const props = defineProps<AccompanyingPeriodWorkSelectorModalProps>();
+
+const emit = defineEmits<{
+  pickWork: [payload: { work: AccompanyingPeriodWork | null }];
+}>();
+
+onMounted(() => {
+  if (props.accompanyingPeriodId) {
+    getAccompanyingPeriodWorks(props.accompanyingPeriodId);
+  } else {
+    console.error("No accompanyingperiod id was given");
+  }
+});
+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);
+  }
+/*  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);
+const confirmSelection = () => {
+  emit("pickWork", { work: selectedAcpw.value });
+  closeModal();
+};
+</script>