Open modal to select acpw

src/Bundle/ChillPersonBundle/Controller/AccompanyingPeriodWorkDuplicateController.php

@@ -11,19 +11,18 @@ declare(strict_types=1);
 
 namespace Chill\PersonBundle\Controller;
 
+use Chill\MainBundle\Templating\TranslatableStringHelperInterface;
 use Chill\PersonBundle\Entity\AccompanyingPeriod\AccompanyingPeriodWork;
 use Chill\PersonBundle\Form\FindAccompanyingPeriodWorkType;
 use Chill\PersonBundle\Repository\AccompanyingPeriod\AccompanyingPeriodWorkRepository;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\Routing\Annotation\Route;
-use Symfony\Component\Serializer\Serializer;
-use Symfony\Component\Serializer\SerializerInterface;
 use Symfony\Contracts\Translation\TranslatorInterface;
 use Sensio\Bundle\FrameworkExtraBundle\Configuration\ParamConverter;
 class AccompanyingPeriodWorkDuplicateController extends AbstractController
 {
-    public function __construct(private readonly AccompanyingPeriodWorkRepository $accompanyingPeriodWorkRepository, private readonly TranslatorInterface $translator, private readonly SerializerInterface $serializer) {}
+    public function __construct(private readonly AccompanyingPeriodWorkRepository $accompanyingPeriodWorkRepository, private readonly TranslatorInterface $translator, private readonly TranslatableStringHelperInterface $stringHelper) {}
 
     /**
      * @ParamConverter("accompanyingPeriodWork", options={"id": "acpw_id"})
@@ -35,10 +34,14 @@ class AccompanyingPeriodWorkDuplicateController extends AbstractController
 
         $acpwList = $this->accompanyingPeriodWorkRepository->findByAccompanyingPeriod($accompanyingPeriod);
 
-        $acpwListArray = $this->serializer->normalize($acpwList, 'json', ['groups' => ['read']]);
-        $acpwListJson = json_encode($acpwListArray);
-
-        dump($acpwListJson);
+        $acpwArray = array_map(function ($acpw) {
+            return [
+                'id' => $acpw->getId(),
+                'socialAction' => $this->stringHelper->localize($acpw->getSocialAction()->getTitle()),
+                'start_date' => $acpw->getStartDate(),
+                'end_date' => $acpw->getEndDate(),
+            ];
+        }, $acpwList);
 
         $this->denyAccessUnlessGranted(
             'CHILL_MAIN_ACCOMPANYING_PERIOD_WORK_UPDATE',
@@ -62,7 +65,7 @@ class AccompanyingPeriodWorkDuplicateController extends AbstractController
 
             $direction = $form->get('direction')->getData();
 
-            if ('starting' === $direction) {
+/*            if ('starting' === $direction) {
                 $params = [
                     'acpw1_id' => $acpw->getId(),
                     'acpw2_id' => $acpw2->getId(),
@@ -72,14 +75,14 @@ class AccompanyingPeriodWorkDuplicateController extends AbstractController
                     'acpw1_id' => $acpw2->getId(),
                     'acpw2_id' => $acpw->getId(),
                 ];
-            }
+            }*/
 
 //            return $this->redirectToRoute('chill_person_acpw_duplicate_confirm', $params);
         }
 
         return $this->render('@ChillPerson/AccompanyingPeriodWorkDuplicate/assign_acpw_duplicate.html.twig', [
             'accompanyingCourse' => $acpw->getAccompanyingPeriod(),
-            'acpwListJson' => $acpwListJson,
+            'acpwList' => $acpwArray,
             'acpw' => $acpw,
             'form' => $form->createView(),
         ]);

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

@@ -1,12 +1,10 @@
 import { createApp } from 'vue';
-import AccompanyingPeriodWorkSelector from "../../vuejs/_components/DuplicateSelector/AccompanyingPeriodWorkSelector.vue";
-
+import AccompanyingPeriodWorkSelectorModal from "../../vuejs/_components/DuplicateSelector/AccompanyingPeriodWorkSelectorModal.vue";
 
 document.addEventListener("DOMContentLoaded", () => {
-        const el = document.getElementById('linked-acpw-selector');
-        if (el) {
-        createApp(AccompanyingPeriodWorkSelector, {
-            acpwList: JSON.parse(el.dataset.acpwList)
-        }).mount(el);
+    const el = document.getElementById('linked-acpw-selector');
+    if (el) {
+        const acpwList = JSON.parse(el.dataset.acpwList);
+        createApp(AccompanyingPeriodWorkSelectorModal, { acpwList }).mount(el);
     }
 });

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

@@ -59,7 +59,7 @@ export interface AccompanyingPeriodWork {
   privateComment: PrivateCommentEmbeddable;
   referrersHistory: AccompanyingPeriodWorkReferrerHistory[];
   results: Result[];
-  socialAction?: SocialAction;
+  socialAction: SocialAction;
   startDate?: string;
   thirdParties: Thirdparty[];
   updatedAt?: string;

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

@@ -1,33 +1,25 @@
 <template>
   <div>
-    <h3>Select an Accompanying Period Work</h3>
-    <ul>
+    <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 :accompanying-period-work="acpw"/>
+        <input type="radio" :value="acpw.id" v-model="selectedAcpw" />
+        <accompanying-period-work-render-box :acpw="acpw" />
       </li>
     </ul>
-
-<!--    <input type="hidden" name="form[acpw]" :value="selectedAcpw" />-->
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, defineProps, defineModel } from "vue";
 import AccompanyingPeriodWorkRenderBox from "../Entity/AccompanyingPeriodWorkRenderBox.vue";
 import { AccompanyingPeriodWork } from "../../../types";
 
 const props = defineProps<{ acpwList: AccompanyingPeriodWork[] }>();
-
-const acpwList = props.acpwList;
-const selectedAcpw = ref(null);
-
-const selectAcpw = (id) => {
-  selectedAcpw.value = id;
-};
+const selectedAcpw = defineModel<number | null>("selectedAcpw", { default: null });
 </script>
 
+<style>
+.acpwList {
+  list-style-type: none;
+}
+</style>

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

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <button type="button" class="btn btn-primary" @click="openModal">
+      acpw_duplicate.Select accompanying period work
+    </button>
+
+    <teleport to="body">
+      <modal v-if="showModal" @close="closeModal">
+        <template #header>
+          <h3>acpw_duplicate.Select accompanying period work</h3>
+        </template>
+
+        <template #body>
+          <accompanying-period-work-selector
+              :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">Confirm</button>
+        </template>
+      </modal>
+    </teleport>
+
+    <input type="hidden" name="form[acpw]" :value="selectedAcpw" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import Modal from "ChillMainAssets/vuejs/_components/Modal.vue"
+import AccompanyingPeriodWorkSelector from "./AccompanyingPeriodWorkSelector.vue";
+import { AccompanyingPeriodWork } from "../../../types";
+
+const props = defineProps<{ acpwList: AccompanyingPeriodWork[] }>();
+const selectedAcpw = ref(null);
+const showModal = ref(false);
+
+const openModal = () => (showModal.value = true);
+const closeModal = () => (showModal.value = false);
+const confirmSelection = () => {
+  closeModal();
+};
+</script>

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

@@ -1,20 +1,12 @@
 <template>
-  <div class="item-row">
-    <div class="item-col">
-      <h4 class="badge-title">
-        <span class="title_action">
-
-        </span>
-      </h4>
-    </div>
-  </div>
+  <span>{{ acpw.socialAction }}</span>
 </template>
 
 <script setup lang="ts">
 import { AccompanyingPeriodWork } from "../../../types";
 
 const props = defineProps<{
-  accompanyingPeriodWork: AccompanyingPeriodWork;
+  acpw: AccompanyingPeriodWork;
 }>();
 </script>
 

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

@@ -4,14 +4,13 @@
 
 {% block title %}{{ 'Assign an accompanying period work duplicate' }}{% endblock %}
 
-
 {% block content %}
     <div class="person-duplicate">
 
-        <h1>{{ 'Assign an accompanying period work duplicate'|trans }}</h1>
+        <h1>{{ 'acpw_duplicate.Assign duplicate'|trans }}</h1>
         {{ form_start(form) }}
         {%- if form.acpw is defined -%}
-            <div id="linked-acpw-selector" data-acpw-list="{{ acpwListJson|raw }}"></div>
+            <div id="linked-acpw-selector" data-acpw-list='{{ acpwList|json_encode|raw }}'></div>
         {% endif %}
         {{ form_rest(form) }}