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/AccompanyingPeriodWorkList.vue

@@ -4,10 +4,10 @@
         <label class="acpw-item">
 
           <div>
-            <input type="radio" :value="acpw" v-model="selectedAcpw" name="item" />
+            <input type="radio" :value="acpw.id" v-model="selectedAcpw" name="item"/>
           </div>
 
-          <accompanying-period-work-item :acpw="acpw" />
+          <accompanying-period-work-item v-for="acpw in acpwList" :acpw="acpw" />
 
         </label>
       </div>

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

@@ -1,15 +1,5 @@
 <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 }}</span>
-          </li>
-        </ul>
-      </div>
-    </div>
-
     <ul class="record_actions">
       <li>
         <a class="btn btn-sm btn-create mt-3" @click="openModal">
@@ -37,32 +27,24 @@
       </modal>
     </teleport>
 
+    <input type="hidden" name="form[acpw]" :value="selectedAcpw" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref } from "vue";
 import Modal from "ChillMainAssets/vuejs/_components/Modal.vue"
 import AccompanyingPeriodWorkList from "./AccompanyingPeriodWorkList.vue";
 import { AccompanyingPeriodWork } from "../../../types";
-import { trans, ACPW_DUPLICATE_SELECT_ACCOMPANYING_PERIOD_WORK, SOCIAL_ACTION, CONFIRM  } from "translator";
+import { trans, ACPW_DUPLICATE_SELECT_ACCOMPANYING_PERIOD_WORK, CANCEL_1, CONFIRM  } from "translator";
 
 const props = defineProps<{ acpwList: AccompanyingPeriodWork[] }>();
 const selectedAcpw = ref(null);
 const showModal = ref(false);
 
-watch(selectedAcpw, (newValue: AccompanyingPeriodWork) => {
-  const inputField = document.getElementById('find_accompanying_period_work_acpw')
-  console.log(newValue.id)
-  if (inputField) {
-    inputField.value = newValue.id
-  }
-});
-
 const openModal = () => (showModal.value = true);
 const closeModal = () => (showModal.value = false);
 const confirmSelection = () => {
-  selectedAcpw.value = selectedAcpw.value;
   closeModal();
 };
 </script>

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/DuplicateSelector/AccompanyingPeriodWorkSelectorModal.vue

@@ -1,46 +0,0 @@
-<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,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>