mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
prepare subcomponents for evaluation, share addResult styles
This commit is contained in:
Marc Ducobu
parent
d67483fd9a
commit
9ac14ff5e3
@ -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,167 +212,6 @@
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import '~ChillMainAssets/module/bootstrap/shared';
|
||||
@import '~ChillMainAssets/chill/scss/mixins';
|
||||
|
||||
#workEditor {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"title title"
|
||||
"startDate endDate"
|
||||
"comment comment"
|
||||
"objectives objectives"
|
||||
"evaluations evaluations"
|
||||
"persons persons"
|
||||
"handling handling"
|
||||
"tparties tparties"
|
||||
"errors errors"
|
||||
;
|
||||
|
||||
grid-template-columns: 50%;
|
||||
column-gap: 0rem;
|
||||
|
||||
& > div {
|
||||
@include border-collapse;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
#title {
|
||||
grid-area: title;
|
||||
|
||||
.action_title_label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.action_title {
|
||||
margin-top: 0;
|
||||
font-weight: bold;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
#startDate {
|
||||
grid-area: startDate;
|
||||
}
|
||||
#endDate {
|
||||
grid-area: endDate;
|
||||
}
|
||||
#comment {
|
||||
grid-area: comment;
|
||||
}
|
||||
#objectives {
|
||||
grid-area: objectives;
|
||||
|
||||
& > div {
|
||||
display: grid;
|
||||
grid-template-areas: "obj res";
|
||||
grid-template-columns: 50%;
|
||||
column-gap: 0rem;
|
||||
|
||||
& > div {
|
||||
@include border-collapse;
|
||||
padding: 1em;
|
||||
|
||||
&:nth-child(1) {
|
||||
grid-area: obj;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
grid-area: res;
|
||||
}
|
||||
}
|
||||
|
||||
& > div.results_without_objective {
|
||||
background: repeating-linear-gradient(
|
||||
45deg,
|
||||
$gray-500,
|
||||
$gray-500 10px,
|
||||
$gray-100 10px,
|
||||
$gray-100 20px
|
||||
);
|
||||
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
ul.list-objectives {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
div.objective-title {
|
||||
font-weight: bold;
|
||||
/*
|
||||
margin-top: 1rem;
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
*/
|
||||
|
||||
i.fa {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
i.fa-times {
|
||||
background-color: $red;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
li.badge, div.badge {
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-left: 0;
|
||||
|
||||
i.fa {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
i.fa-plus {
|
||||
background-color: $green;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
#objectives, #evaluations {
|
||||
padding: 0;
|
||||
|
||||
& > div.title {
|
||||
background-color: $gray-200;
|
||||
color: $gray-700;
|
||||
|
||||
h3 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
#evaluations {
|
||||
grid-area: evaluations;
|
||||
& > div {
|
||||
@include border-collapse;
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
#persons {
|
||||
grid-area: persons;
|
||||
}
|
||||
#handlingThirdParty {
|
||||
grid-area: handling;
|
||||
}
|
||||
#thirdParties {
|
||||
grid-area: tparties;
|
||||
}
|
||||
#errors {
|
||||
grid-area: errors;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters, } from 'vuex';
|
||||
import { dateToISO, ISOToDate, ISOToDatetime } from 'ChillMainAssets/chill/js/date.js';
|
||||
@ -374,6 +219,7 @@ 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';
|
||||
@ -415,6 +261,7 @@ export default {
|
||||
ckeditor: CKEditor.component,
|
||||
AddResult,
|
||||
AddEvaluation,
|
||||
NewEvaluation,
|
||||
AddPersons,
|
||||
Person,
|
||||
ShowAddress,
|
||||
@ -555,3 +402,196 @@ export default {
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '~ChillMainAssets/module/bootstrap/shared';
|
||||
@import '~ChillMainAssets/chill/scss/mixins';
|
||||
|
||||
#workEditor {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"title title"
|
||||
"startDate endDate"
|
||||
"comment comment"
|
||||
"objectives objectives"
|
||||
"evaluations evaluations"
|
||||
"persons persons"
|
||||
"handling handling"
|
||||
"tparties tparties"
|
||||
"errors errors";
|
||||
|
||||
grid-template-columns: 50%;
|
||||
column-gap: 0rem;
|
||||
|
||||
& > div {
|
||||
@include border-collapse;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
#title {
|
||||
grid-area: title;
|
||||
|
||||
.action_title_label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.action_title {
|
||||
margin-top: 0;
|
||||
font-weight: bold;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
#startDate {
|
||||
grid-area: startDate;
|
||||
}
|
||||
#endDate {
|
||||
grid-area: endDate;
|
||||
}
|
||||
#comment {
|
||||
grid-area: comment;
|
||||
}
|
||||
#objectives {
|
||||
grid-area: objectives;
|
||||
|
||||
& > div {
|
||||
display: grid;
|
||||
grid-template-areas: "obj res";
|
||||
grid-template-columns: 50%;
|
||||
column-gap: 0rem;
|
||||
|
||||
& > div {
|
||||
@include border-collapse;
|
||||
padding: 1em;
|
||||
|
||||
&:nth-child(1) {
|
||||
grid-area: obj;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
grid-area: res;
|
||||
}
|
||||
}
|
||||
|
||||
& > div.results_without_objective {
|
||||
background: repeating-linear-gradient(
|
||||
45deg,
|
||||
$gray-500,
|
||||
$gray-500 10px,
|
||||
$gray-100 10px,
|
||||
$gray-100 20px
|
||||
);
|
||||
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
ul.list-objectives {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
div.objective-title {
|
||||
font-weight: bold;
|
||||
/*
|
||||
margin-top: 1rem;
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
*/
|
||||
|
||||
i.fa {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
i.fa-times {
|
||||
background-color: $red;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
li.badge, div.badge {
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
padding-left: 0;
|
||||
|
||||
i.fa {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
i.fa-plus {
|
||||
background-color: $green;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
#objectives, #evaluations {
|
||||
padding: 0;
|
||||
|
||||
& > div.title {
|
||||
background-color: $gray-200;
|
||||
color: $gray-700;
|
||||
|
||||
h3 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
#evaluations {
|
||||
grid-area: evaluations;
|
||||
& > div {
|
||||
@include border-collapse;
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
#persons {
|
||||
grid-area: persons;
|
||||
}
|
||||
#handlingThirdParty {
|
||||
grid-area: handling;
|
||||
}
|
||||
#thirdParties {
|
||||
grid-area: tparties;
|
||||
}
|
||||
#errors {
|
||||
grid-area: errors;
|
||||
}
|
||||
}
|
||||
|
||||
button.hide {
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
ul.list-results,
|
||||
ul.list-evaluations {
|
||||
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>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -0,0 +1,10 @@
|
||||
<template>
|
||||
le formulaire d'ajout
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "NewEvaluation",
|
||||
props: [],
|
||||
}
|
||||
</script>
|
||||
@ -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)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user