Open modal to select acpw

This commit is contained in:
Julie Lenaerts 2025-03-04 19:12:18 +01:00
parent d683fe002d
commit ef5eb5b907
7 changed files with 79 additions and 49 deletions

View File

@ -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(),
]);

View File

@ -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 acpwList = JSON.parse(el.dataset.acpwList);
createApp(AccompanyingPeriodWorkSelectorModal, { acpwList }).mount(el);
}
});

View File

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

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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) }}