Styling and organization of components

src/Bundle/ChillPersonBundle/Controller/AccompanyingPeriodWorkDuplicateController.php

@@ -38,8 +38,8 @@ class AccompanyingPeriodWorkDuplicateController extends AbstractController
             return [
                 'id' => $acpw->getId(),
                 'socialAction' => $this->stringHelper->localize($acpw->getSocialAction()->getTitle()),
-                'start_date' => $acpw->getStartDate(),
+                'startDate' => $acpw->getStartDate(),
-                'end_date' => $acpw->getEndDate(),
+                'endDate' => $acpw->getEndDate(),
             ];
         }, $acpwList);
 

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

@@ -1,5 +1,5 @@
 import { createApp } from 'vue';
-import AccompanyingPeriodWorkSelectorModal from "../../vuejs/_components/DuplicateSelector/AccompanyingPeriodWorkSelectorModal.vue";
+import AccompanyingPeriodWorkSelectorModal from "../../vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkSelectorModal.vue";
 
 document.addEventListener("DOMContentLoaded", () => {
     const el = document.getElementById('linked-acpw-selector');

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

@@ -0,0 +1,48 @@
+<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 }}
+          </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 { 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";
+
+const props = defineProps<{ acpw: AccompanyingPeriodWork }>();
+
+const formatDate = (dateObject) => {
+  const parsedDate = ISOToDate(dateObject.date);
+  return new Intl.DateTimeFormat('default', { dateStyle: 'short' }).format(parsedDate);
+};
+</script>

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

@@ -0,0 +1,32 @@
+<template>
+    <div class="results">
+      <div v-for="acpw in acpwList" :key="acpw.id" class="list-item">
+        <label class="acpw-item">
+
+          <div>
+            <input type="radio" :value="acpw.id" v-model="selectedAcpw" name="item"/>
+          </div>
+
+          <accompanying-period-work-item v-for="acpw in acpwList" :acpw="acpw" />
+
+        </label>
+      </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, defineModel } from "vue";
+import { AccompanyingPeriodWork } from "../../../types";
+import AccompanyingPeriodWorkItem
+  from "ChillPersonAssets/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkItem.vue";
+
+const props = defineProps<{ acpwList: AccompanyingPeriodWork[] }>();
+
+const selectedAcpw = defineModel<number | null>("selectedAcpw", { default: null });
+</script>
+
+<style>
+.acpw-item {
+  display: flex;
+}
+</style>

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

@@ -1,25 +1,28 @@
 <template>
   <div>
-    <button type="button" class="btn btn-primary" @click="openModal">
+    <ul class="record_actions">
-      acpw_duplicate.Select accompanying period work
+      <li>
-    </button>
+        <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 v-if="showModal" @close="closeModal" modal-dialog-class="modal-dialog-scrollable modal-xl">
         <template #header>
-          <h3>acpw_duplicate.Select accompanying period work</h3>
+          <h3>{{ trans(ACPW_DUPLICATE_SELECT_ACCOMPANYING_PERIOD_WORK) }}</h3>
         </template>
 
         <template #body>
-          <accompanying-period-work-selector
+          <accompanying-period-work-list
               :acpw-list="acpwList"
               v-model:selectedAcpw="selectedAcpw"
           />
         </template>
 
         <template #footer>
-          <button type="button" class="btn btn-cancel" @click="closeModal">Cancel</button>
+          <button type="button" class="btn btn-save" @click="confirmSelection">{{ trans(CONFIRM) }}</button>
-          <button type="button" class="btn btn-save" @click="confirmSelection">Confirm</button>
         </template>
       </modal>
     </teleport>
@@ -31,8 +34,9 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import Modal from "ChillMainAssets/vuejs/_components/Modal.vue"
-import AccompanyingPeriodWorkSelector from "./AccompanyingPeriodWorkSelector.vue";
+import AccompanyingPeriodWorkList from "./AccompanyingPeriodWorkList.vue";
 import { AccompanyingPeriodWork } from "../../../types";
+import { trans, ACPW_DUPLICATE_SELECT_ACCOMPANYING_PERIOD_WORK, CANCEL_1, CONFIRM  } from "translator";
 
 const props = defineProps<{ acpwList: AccompanyingPeriodWork[] }>();
 const selectedAcpw = ref(null);

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

@@ -1,25 +0,0 @@
-<template>
-  <div>
-    <ul class="acpwList">
-      <li v-for="acpw in acpwList" :key="acpw.id">
-        <input type="radio" :value="acpw.id" v-model="selectedAcpw" />
-        <accompanying-period-work-render-box :acpw="acpw" />
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, defineProps, defineModel } from "vue";
-import AccompanyingPeriodWorkRenderBox from "../Entity/AccompanyingPeriodWorkRenderBox.vue";
-import { AccompanyingPeriodWork } from "../../../types";
-
-const props = defineProps<{ acpwList: AccompanyingPeriodWork[] }>();
-const selectedAcpw = defineModel<number | null>("selectedAcpw", { default: null });
-</script>
-
-<style>
-.acpwList {
-  list-style-type: none;
-}
-</style>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/AccompanyingPeriodWorkRenderBox.vue

@@ -1,34 +0,0 @@
-<template>
-  <span>{{ acpw.socialAction }}</span>
-</template>
-
-<script setup lang="ts">
-import { AccompanyingPeriodWork } from "../../../types";
-
-const props = defineProps<{
-  acpw: AccompanyingPeriodWork;
-}>();
-</script>
-
-<style scoped>
-.item-row {
-  display: flex;
-  padding: 10px;
-  border: 1px solid #ccc;
-  border-radius: 8px;
-  margin-bottom: 10px;
-}
-
-.item-col {
-  flex-grow: 1;
-}
-
-.badge-title {
-  font-size: 1.2em;
-  font-weight: bold;
-}
-
-.title_action {
-  color: #007bff;
-}
-</style>

src/Bundle/ChillPersonBundle/translations/messages.fr.yml

@@ -1494,3 +1494,7 @@ entity_display_title:
     Evaluation (n°%eval%): "Évaluation (n°%eval%)"
     Work (n°%w%): "Action d'accompagnement (n°%w%)"
     Accompanying Course (n°%w%): "Parcours d'accompagnement (n°%w%)"
+
+acpw_duplicate:
+    Select accompanying period work: Selectionner un action d'accompagnement
+    Assign duplicate: Assigner un action d'accompagnement doublon