Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-08-12 02:39:51 +00:00
Code Issues Actions Projects Releases Wiki Activity

prepare subcomponents for evaluation, share addResult styles

Browse Source
This commit is contained in:
Mathieu Jaumotte 2021-08-09 20:13:46 +02:00 committed by Marc Ducobu
parent d67483fd9a
commit 9ac14ff5e3
5 changed files with 299 additions and 209 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

430
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
View File

@ -1,5 +1,5 @@
<template>
<div id="workEditor">
<div id="workEditor" class="my-4">
<div id="title">
<label class="action_title_label">{{ $t('action_title') }}</label>
@ -83,22 +83,28 @@
<div><h3>{{ $t('Evaluations') }}</h3></div>
</div>
<!-- results which are not attached to an objective -->
<!-- list evaluations -->
<div v-if="hasEvaluationsForAction">
<add-evaluation :availableEvaluations="evaluationsForAction" destination="action"></add-evaluation>
<add-evaluation
:availableEvaluations="evaluationsForAction">
</add-evaluation>
</div>
<!-- box to add evaluation -->
<!-- box to add new evaluation -->
<div class="add_evaluation">
<div v-if="showAddEvaluation">
bim
<new-evaluation>
</new-evaluation>
</div>
<ul class="record_actions">
<li>
<button @click="toggleAddEvaluation" class="btn btn-create" :title="$t('add_an_evaluation')"></button>
<button
class="btn btn-create"
@click="toggleAddEvaluation"
:title="$t('add_an_evaluation')">
</button>
</li>
</ul>
<div><!-- empty for results --></div>
</div>
</div>
@ -206,6 +212,197 @@
</ul>
</template>
<script>
import { mapState, mapGetters, } from 'vuex';
import { dateToISO, ISOToDate, ISOToDatetime } from 'ChillMainAssets/chill/js/date.js';
import CKEditor from '@ckeditor/ckeditor5-vue';
import ClassicEditor from 'ChillMainAssets/module/ckeditor5/index.js';
import AddResult from './components/AddResult.vue';
import AddEvaluation from './components/AddEvaluation.vue';
import NewEvaluation from './components/NewEvaluation.vue';
import Person from 'ChillPersonAssets/vuejs/_components/Person/Person.vue';
import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
import ShowAddress from 'ChillMainAssets/vuejs/Address/components/ShowAddress.vue';
const i18n = {
messages: {
fr: {
action_title: "Action d'accompagnement",
comments: "Commentaire",
startDate: "Date de début",
endDate: "Date de fin",
goals_title: "Motifs - objectifs - dispositifs",
available_goals_text: "Motifs, objectifs et dispositifs disponibles pour ajout :",
results_title: "Orientations - résultats",
results_without_objective: "Résultats - orientations sans objectifs",
add_objectif: "Ajouter un motif - objectif - dispositif",
add_an_objective: "Ajouter un objectif",
Evaluations: "Évaluations",
add_an_evaluation: "Ajouter une évaluation",
persons_involved: "Usagers concernés",
handling_thirdparty: "Tiers traitant",
no_handling_thirdparty: "Aucun tiers traitant",
precise_handling_thirdparty: "Indiquer un tiers traitant",
choose_a_thirdparty: "Choisir un tiers",
remove_thirdparty: "Enlever le tiers",
remove_handling_thirdparty: "Enlever le tiers traitant",
thirdparty_intervener: "Tiers intervenants",
no_thirdparty_intervener: "Aucun tiers intervenant",
add_thirdparties: "Ajouter des tiers",
choose_thirdparties: "Choisir des tiers",
fix_these_errors: "Veuillez corriger les erreurs suivantes :",
}
}
};
export default {
name: 'App',
components: {
ckeditor: CKEditor.component,
AddResult,
AddEvaluation,
NewEvaluation,
AddPersons,
Person,
ShowAddress,
},
i18n,
data() {
return {
editor: ClassicEditor,
showAddObjective: false,
showAddEvaluation: false,
handlingThirdPartyPicker: {
key: 'handling-third-party',
options: {
type: [ 'thirdparty' ],
priority: null,
uniq: true,
button: {
display: false
}
},
},
thirdPartyPicker: {
key: 'third-party',
options: {
type: [ 'thirdparty' ],
priority: null,
uniq: false,
button: {
display: false
}
},
}
};
},
computed: {
...mapState([
'work',
'resultsForAction',
'evaluationsForAction',
'goalsPicked',
'personsReachables',
'handlingThirdParty',
'thirdParties',
'isPosting',
'errors',
]),
...mapGetters([
'hasResultsForAction',
'hasEvaluationsForAction',
'hasHandlingThirdParty',
'hasThirdParties',
]),
startDate: {
get() {
console.log('get start date', this.$store.state.startDate);
return dateToISO(this.$store.state.startDate);
},
set(v) {
this.$store.commit('setStartDate', ISOToDate(v));
}
},
endDate: {
get() {
console.log('get end date', this.$store.state.endDate);
return dateToISO(this.$store.state.endDate);
},
set(v) {
this.$store.commit('setEndDate', ISOToDate(v));
}
},
note: {
get() {
return this.$store.state.note;
},
set(v) {
this.$store.commit('setNote', v);
}
},
availableForCheckGoal() {
let pickedIds = this.$store.state.goalsPicked.map(g => g.goal.id);
console.log('pickeds goals id', pickedIds);
console.log(this.$store.state.goalsForAction);
return this.$store.state.goalsForAction.filter(g => !pickedIds.includes(g.id));
},
personsPicked: {
get() {
let s = this.$store.state.personsPicked.map(p => p.id);
console.log('persons picked', s);
return s;
},
set(v) {
console.log('persons picked', v);
this.$store.commit('setPersonsPickedIds', v);
}
},
},
methods: {
toggleAddObjective() {
this.showAddObjective = !this.showAddObjective;
},
addGoal(g) {
console.log('add Goal', g);
this.$store.commit('addGoal', g);
},
removeGoal(g) {
console.log('remove goal', g);
this.$store.commit('removeGoal', g);
},
toggleAddEvaluation() {
this.showAddEvaluation = !this.showAddEvaluation;
},
setHandlingThirdParty({ selected, modal }) {
console.log('setHandlingThirdParty', selected);
this.$store.commit('setHandlingThirdParty', selected.shift().result);
this.$refs.handlingThirdPartyPicker.resetSearch();
modal.showModal = false;
},
removeHandlingThirdParty() {
console.log('removeHandlingThirdParty');
this.$store.commit('setHandlingThirdParty', null);
},
addThirdParties({ selected, modal}) {
console.log('addThirdParties', selected);
this.$store.commit('addThirdParties', selected.map(r => r.result));
this.$refs.thirdPartyPicker.resetSearch();
modal.showModal = false;
},
removeThirdParty(t) {
console.log('remove third party', t);
this.$store.commit('removeThirdParty', t);
},
submit() {
this.$store.dispatch('submit');
},
}
};
</script>
<style lang="scss">
@import '~ChillMainAssets/module/bootstrap/shared';
@import '~ChillMainAssets/chill/scss/mixins';
@ -221,8 +418,7 @@
"persons persons"
"handling handling"
"tparties tparties"
"errors errors"
;
"errors errors";
grid-template-columns: 50%;
column-gap: 0rem;
@ -365,193 +561,37 @@
}
}
</style>
button.hide {
background-color: $primary;
}
<script>
import { mapState, mapGetters, } from 'vuex';
import { dateToISO, ISOToDate, ISOToDatetime } from 'ChillMainAssets/chill/js/date.js';
import CKEditor from '@ckeditor/ckeditor5-vue';
import ClassicEditor from 'ChillMainAssets/module/ckeditor5/index.js';
import AddResult from './components/AddResult.vue';
import AddEvaluation from './components/AddEvaluation.vue';
import Person from 'ChillPersonAssets/vuejs/_components/Person/Person.vue';
import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
import ShowAddress from 'ChillMainAssets/vuejs/Address/components/ShowAddress.vue';
ul.list-results,
ul.list-evaluations {
list-style-type: none;
padding: 0;
const i18n = {
messages: {
fr: {
action_title: "Action d'accompagnement",
comments: "Commentaire",
startDate: "Date de début",
endDate: "Date de fin",
goals_title: "Motifs - objectifs - dispositifs",
available_goals_text: "Motifs, objectifs et dispositifs disponibles pour ajout :",
results_title: "Orientations - résultats",
results_without_objective: "Résultats - orientations sans objectifs",
add_objectif: "Ajouter un motif - objectif - dispositif",
add_an_objective: "Ajouter un objectif",
Evaluations: "Évaluations",
add_an_evaluation: "Ajouter une évaluation",
persons_involved: "Usagers concernés",
handling_thirdparty: "Tiers traitant",
no_handling_thirdparty: "Aucun tiers traitant",
precise_handling_thirdparty: "Indiquer un tiers traitant",
choose_a_thirdparty: "Choisir un tiers",
remove_thirdparty: "Enlever le tiers",
remove_handling_thirdparty: "Enlever le tiers traitant",
thirdparty_intervener: "Tiers intervenants",
no_thirdparty_intervener: "Aucun tiers intervenant",
add_thirdparties: "Ajouter des tiers",
choose_thirdparties: "Choisir des tiers",
fix_these_errors: "Veuillez corriger les erreurs suivantes :",
li {
margin: 0.5rem;
}
li.badge {
padding-bottom: 0;
padding-top: 0;
padding-left: 0;
i.fa {
/*border-radius: 0.25rem; */
padding: 0.25rem;
}
i.fa-plus {
background-color: $green;
}
i.fa-times {
background-color: $red;
color: $white;
}
}
}
};
export default {
name: 'App',
components: {
ckeditor: CKEditor.component,
AddResult,
AddEvaluation,
AddPersons,
Person,
ShowAddress,
},
i18n,
data() {
return {
editor: ClassicEditor,
showAddObjective: false,
showAddEvaluation: false,
handlingThirdPartyPicker: {
key: 'handling-third-party',
options: {
type: [ 'thirdparty' ],
priority: null,
uniq: true,
button: {
display: false
}
},
},
thirdPartyPicker: {
key: 'third-party',
options: {
type: [ 'thirdparty' ],
priority: null,
uniq: false,
button: {
display: false
}
},
}
};
},
computed: {
...mapState([
'work',
'resultsForAction',
'evaluationsForAction',
'goalsPicked',
'personsReachables',
'handlingThirdParty',
'thirdParties',
'isPosting',
'errors',
]),
...mapGetters([
'hasResultsForAction',
'hasEvaluationsForAction',
'hasHandlingThirdParty',
'hasThirdParties',
]),
startDate: {
get() {
console.log('get start date', this.$store.state.startDate);
return dateToISO(this.$store.state.startDate);
},
set(v) {
this.$store.commit('setStartDate', ISOToDate(v));
}
},
endDate: {
get() {
console.log('get end date', this.$store.state.endDate);
return dateToISO(this.$store.state.endDate);
},
set(v) {
this.$store.commit('setEndDate', ISOToDate(v));
}
},
note: {
get() {
return this.$store.state.note;
},
set(v) {
this.$store.commit('setNote', v);
}
},
availableForCheckGoal() {
let pickedIds = this.$store.state.goalsPicked.map(g => g.goal.id);
console.log('pickeds goals id', pickedIds);
console.log(this.$store.state.goalsForAction);
return this.$store.state.goalsForAction.filter(g => !pickedIds.includes(g.id));
},
personsPicked: {
get() {
let s = this.$store.state.personsPicked.map(p => p.id);
console.log('persons picked', s);
return s;
},
set(v) {
console.log('persons picked', v);
this.$store.commit('setPersonsPickedIds', v);
}
},
},
methods: {
toggleAddObjective() {
this.showAddObjective = !this.showAddObjective;
},
addGoal(g) {
console.log('add Goal', g);
this.$store.commit('addGoal', g);
},
removeGoal(g) {
console.log('remove goal', g);
this.$store.commit('removeGoal', g);
},
toggleAddEvaluation() {
this.showAddEvaluation = !this.showAddEvaluation;
},
setHandlingThirdParty({ selected, modal }) {
console.log('setHandlingThirdParty', selected);
this.$store.commit('setHandlingThirdParty', selected.shift().result);
this.$refs.handlingThirdPartyPicker.resetSearch();
modal.showModal = false;
},
removeHandlingThirdParty() {
console.log('removeHandlingThirdParty');
this.$store.commit('setHandlingThirdParty', null);
},
addThirdParties({ selected, modal}) {
console.log('addThirdParties', selected);
this.$store.commit('addThirdParties', selected.map(r => r.result));
this.$refs.thirdPartyPicker.resetSearch();
modal.showModal = false;
},
removeThirdParty(t) {
console.log('remove third party', t);
this.$store.commit('removeThirdParty', t);
},
submit() {
this.$store.dispatch('submit');
},
}
};
</script>
</style>

81
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddEvaluation.vue
View File

@ -1,11 +1,88 @@
<template>
boum
affiche les évaluations
<div class="addEvaluation" v-if="hasEvaluation">
<p class="chill-no-data-statement" v-if="pickedEvaluations.length === 0">
{{ $t('no_evaluation_associated') }}
</p>
<ul class="list-evaluations">
<li v-for="e in pickedEvaluations" @click="removeEvaluation(e)" class="badge bg-primary">
<i class="fa fa-times"></i>
{{ e.id }}
</li>
<template v-if="isExpanded">
<li v-for="e in availableForCheckEvaluations" @click="addEvaluation(e)" class="badge bg-primary">
<i class="fa fa-plus"></i>
{{ e.id }}
</li>
</template>
</ul>
<ul class="record_actions">
<li>
actions
</li>
</ul>
</div>
<div class="noEvaluation" v-if="!hasEvaluation">
<div class="chill-no-data-statement">
{{ $t('evaluation_has_no_evaluation') }}
</div>
</div>
</template>
<script>
const i18n = {
messages: {
fr: {
no_evaluation_associated: "Aucune évaluation associée",
add_an_evaluation: "Évaluations disponibles",
evaluation_has_no_evaluation: "Aucune évaluation disponible",
}
}
};
export default {
name: "AddEvaluation",
props: ['destination', 'availableEvaluations'],
props: ['availableEvaluations'],
i18n,
data() {
return {
isExpanded: false,
};
},
computed: {
hasEvaluation() {
return this.$store.state.evaluationsForAction.length > 0;
},
pickedEvaluations() {
return this.$store.state.evaluationsPicked;
},
availableForCheckEvaluations() {
let pickedIds = this.$store.state.evaluationsPicked.map(e => e.id);
//console.log('picked ids', pickedIds);
return this.$store.state.evaluationsForAction.filter(e => !pickedIds.includes(e.id));
}
},
methods: {
toggleSelect() {
this.isExpanded = !this.isExpanded;
},
addEvaluation(e) {
//console.log('addEvaluation', e);
this.$store.commit('addEvaluationPicked', e);
return;
},
removeEvaluation(e) {
//console.log('removeEvaluation', e);
this.$store.commit('removeEvaluationPicked', e);
return;
}
}
}
</script>

38
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddResult.vue
View File

@ -36,45 +36,7 @@
</div>
</template>
<style lang="scss">
button.hide {
background-color: rgb(51, 77, 92);
}
ul.list-results {
list-style-type: none;
padding: 0;
li {
margin: 0.5rem;
}
li.badge {
padding-bottom: 0;
padding-top: 0;
padding-left: 0;
i.fa {
/*border-radius: 0.25rem; */
padding: 0.25rem;
}
i.fa-plus {
background-color: green;
}
i.fa-times {
background-color: red;
color: white;
}
}
}
</style>
<script>
const i18n = {
messages: {
fr: {

10
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/NewEvaluation.vue Normal file
View File

@ -0,0 +1,10 @@
<template>
le formulaire d'ajout
</template>
<script>
export default {
name: "NewEvaluation",
props: [],
}
</script>

3
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/store.js
View File

@ -16,10 +16,11 @@ const store = createStore({
ISOToDatetime(window.accompanyingCourseWork.endDate.datetime) : null),
note: window.accompanyingCourseWork.note,
goalsPicked: window.accompanyingCourseWork.goals,
goalsForAction: [],
resultsPicked: window.accompanyingCourseWork.results,
resultsForAction: [],
goalsForAction: [],
resultsForGoal: [],
evaluationsPicked: window.accompanyingCourseWork.accompanyingPeriodWorkEvaluations,
evaluationsForAction: [],
personsPicked: window.accompanyingCourseWork.persons,
personsReachables: window.accompanyingCourseWork.accompanyingPeriod.participations.filter(p => p.endDate == null)