Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-07 18:44:08 +00:00
Code Issues Actions Projects Releases Wiki Activity

Styling and organization of components

Browse Source
This commit is contained in:
Julie Lenaerts 2025-03-05 12:27:48 +01:00
parent a52aac2d98
commit e253d1b276
8 changed files with 100 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/Bundle/ChillPersonBundle/Controller/AccompanyingPeriodWorkDuplicateController.php
View File

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

2
src/Bundle/ChillPersonBundle/Resources/public/mod/DuplicateSelector/AccompanyingPeriodWorkSelector.js
View File

@ -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');

48
src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkItem.vue Normal file
View File

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

32
src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkList.vue Normal file
View File

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

22
src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/DuplicateSelector/AccompanyingPeriodWorkSelectorModal.vue → src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AccompanyingPeriodWorkSelector/AccompanyingPeriodWorkSelectorModal.vue
View File

@ -1,25 +1,28 @@
<template>
<div>
<button type="button" class="btn btn-primary" @click="openModal">
acpw_duplicate.Select accompanying period work
</button>
<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 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">Confirm</button>
<button type="button" class="btn btn-save" @click="confirmSelection">{{ trans(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);

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

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

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

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

4
src/Bundle/ChillPersonBundle/translations/messages.fr.yml
View File

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