Household/composition add + fixes household composition editor

This commit is contained in:
2022-01-24 10:59:00 +00:00
parent 2b47868d88
commit 53b3f98bba
35 changed files with 1489 additions and 63 deletions

View File

@@ -32,7 +32,7 @@
</button>
</li>
<li v-else>
<button class="btn btn-save" @click="confirm" :disabled="hasWarnings">
<button class="btn btn-save" @click="confirm" :disabled="hasWarnings || !lastStepIsSaveAllowed">
{{ $t('household_members_editor.app.save') }}
</button>
</li>
@@ -104,6 +104,13 @@ export default {
return false;
},
lastStepIsSaveAllowed() {
let r = !this.$store.getters.isHouseholdNew ||
(this.$store.state.numberOfChildren !== null && this.$store.state.householdCompositionType !== null);
console.log('is saved allowed ?', r);
return r;
},
},
methods: {
goToNext() {

View File

@@ -7,18 +7,14 @@
</div>
</div>
<div v-else>
<p>
{{ $t('household_members_editor.concerned.persons_will_be_moved') }}&nbsp;:
<span v-for="c in concerned" :key="c.person.id">
<person-render-box render="badge" :options="{addLink: false}" :person="c.person"></person-render-box>
<button class="btn" @click="removePerson(c.person)" v-if="c.allowRemove" style="padding-left:0;">
<span class="fa-stack fa-lg" :title="$t('household_members_editor.concerned.remove_concerned')">
<i class="fa fa-circle fa-stack-1x text-danger"></i>
<i class="fa fa-times fa-stack-1x"></i>
</span>
</button>
</span>
</p>
<p>{{ $t('household_members_editor.concerned.persons_will_be_moved') }}&nbsp;:</p>
<ul class="list-suggest remove-items inline">
<li v-for="c in concerned" :key="c.person.id" @click="removeConcerned(c)">
<span>{{ c.person.text }}</span>
</li>
</ul>
<div class="alert alert-info" v-if="concernedPersonsWithHouseholds.length > 0">
<p>{{ $t('household_members_editor.concerned.persons_with_household') }}</p>
<ul v-for="c in concernedPersonsWithHouseholds" :key="c.person.id">
@@ -108,9 +104,14 @@ export default {
this.$refs.addPersons.resetSearch(); // to cast child method
modal.showModal = false;
},
removePerson(person) {
console.log('remove person in concerned', person);
this.$store.dispatch('removePerson', person);
removeConcerned(concerned) {
console.log('removedconcerned', concerned);
if (!concerned.allowRemove) {
return;
}
this.$store.dispatch('removePerson', concerned.person);
},
makeHouseholdLink(id) {
return `/fr/person/household/${id}/summary`

View File

@@ -4,17 +4,38 @@
<h2>{{ $t('household_members_editor.dates.dates_title') }}</h2>
<p>
<label for="start_date">
<div class="mb-3 row">
<label for="start_date" class="col-form-label col-sm-4 required">
{{ $t('household_members_editor.dates.start_date') }}
</label>
<input type="date" v-model="startDate" />
</p>
<div class="col-sm-8">
<input type="date" v-model="startDate" class="form-control" />
</div>
</div>
<div v-if="this.isHouseholdNew">
<h2>{{ $t('household_members_editor.composition.composition') }}</h2>
<div class="mb-3 row">
<label class="col-form-label col-sm-4 required">{{ $t('household_members_editor.composition.household_composition') }}</label>
<div class="col-sm-8">
<select v-model="householdCompositionType" class="form-select form-control">
<option v-for="t in householdCompositionTypes" :key="t.id" :value="t.id">{{ t.label.fr }}</option>
</select>
</div>
</div>
<div class="mb-3 row">
<label class="col-form-label col-sm-4 required">{{ $t('household_members_editor.composition.number_of_children') }}</label>
<div class="col-sm-8">
<input type="number" v-model="numberOfChildren" min="0" max="30" class="form-control"/>
</div>
</div>
</div>
</template>
<script>
import CurrentHousehold from "./CurrentHousehold";
import {mapGetters, mapState} from 'vuex';
export default {
name: 'Dates',
@@ -22,6 +43,27 @@ export default {
CurrentHousehold
},
computed: {
...mapState(['householdCompositionTypes']),
...mapGetters(['isHouseholdNew']),
householdCompositionType: {
get() {
if (this.$store.state.householdCompositionType !== null) {
return this.$store.state.householdCompositionType.id;
}
return null;
},
set(value) {
this.$store.commit('setHouseholdCompositionType', value);
},
},
numberOfChildren: {
get() {
return this.$store.state.numberOfChildren;
},
set(value) {
this.$store.commit('setNumberOfChildren', value);
}
},
startDate: {
get() {
return [

View File

@@ -0,0 +1,42 @@
<template>
<ckeditor
name="content"
v-bind:placeholder="$t('comment.content')"
:editor="editor"
v-model="content"
tag-name="textarea">
</ckeditor>
</template>
<script>
import CKEditor from '@ckeditor/ckeditor5-vue';
import ClassicEditor from "ChillMainAssets/module/ckeditor5";
export default {
name: "PersonComment.vue",
components: {
ckeditor: CKEditor.component,
},
props: ['conc'],
data() {
return {
editor: ClassicEditor,
}
},
computed: {
content: {
get() {
return this.$props.conc.comment || '';
},
set(value) {
console.log('set content', value);
this.$store.commit('setComment', {conc: this.$props.conc, comment: value})
}
}
}
}
</script>
<style scoped>
</style>

View File

@@ -3,15 +3,15 @@
<h2>{{ $t('household_members_editor.positioning.persons_to_positionnate')}}</h2>
<div class="list-household-members">
<div class="list-household-members flex-table">
<div
v-for="conc in concerned"
class="item-bloc"
v-bind:key="conc.person.id"
>
<div class="pick-position">
<div class="pick-position item-row">
<div class="person">
<person-render-box render="badge" :options="{}" :person="conc.person"></person-render-box>
<h3>{{ conc.person.text }}</h3>
</div>
<div class="holder">
<button
@@ -37,6 +37,12 @@
</button>
</div>
</div>
<div class="item-row">
<div>
<h6>{{ $t('household_members_editor.positioning.comment') }}</h6>
<person-comment :conc="conc"></person-comment>
</div>
</div>
</div>
</div>
</template>
@@ -46,12 +52,14 @@ import MemberDetails from './MemberDetails.vue';
import {mapGetters, mapState} from "vuex";
import CurrentHousehold from "./CurrentHousehold";
import PersonRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/PersonRenderBox.vue';
import PersonComment from './PersonComment';
export default {
name: "Positioning",
components: {
CurrentHousehold,
PersonRenderBox,
PersonComment,
},
computed: {
...mapState([

View File

@@ -52,6 +52,7 @@ const appMessages = {
positioning: {
persons_to_positionnate: 'Usagers à positionner',
holder: "Titulaire",
comment: "Commentaire",
},
app: {
next: 'Suivant',
@@ -77,7 +78,12 @@ const appMessages = {
dates: {
start_date: "Début de validité",
end_date: "Fin de validité",
dates_title: "Période de validité",
dates_title: "Depuis le",
},
composition: {
composition: "Composition familiale",
household_composition: "Composition du ménage",
number_of_children: "Nombre d'enfants mineurs au sein du ménage",
},
confirmation: {
save: "Enregistrer",

View File

@@ -1,5 +1,6 @@
import { createStore } from 'vuex';
import { householdMove, fetchHouseholdSuggestionByAccompanyingPeriod, fetchAddressSuggestionByPerson} from './../api.js';
import { fetchResults } from 'ChillMainAssets/lib/api/apiMethods.js'
import { fetchHouseholdByAddressReference } from 'ChillPersonAssets/lib/household.js';
import { datetimeToISO } from 'ChillMainAssets/chill/js/date.js';
@@ -54,8 +55,11 @@ const store = createStore({
*/
householdSuggestionByAccompanyingPeriod: [], // TODO rename into householdsSuggestion
showHouseholdSuggestion: window.household_members_editor_expand_suggestions === 1,
householdCompositionType: null,
numberOfChildren: 0,
addressesSuggestion: [],
showAddressSuggestion: true,
householdCompositionTypes: [],
warnings: [],
errors: []
},
@@ -250,7 +254,8 @@ const store = createStore({
payload_conc,
payload = {
concerned: [],
destination: null
destination: null,
composition: null,
}
;
@@ -261,7 +266,6 @@ const store = createStore({
};
if (getters.isHouseholdNew && state.household.current_address !== null) {
console.log(state.household);
payload.destination.forceAddress = { id: state.household.current_address.address_id };
}
}
@@ -290,6 +294,19 @@ const store = createStore({
payload.concerned.push(payload_conc);
}
if (getters.isHouseholdNew) {
payload.composition = {
household_composition_type: {
type: state.householdCompositionType.type,
id: state.householdCompositionType.id,
},
number_of_children: state.numberOfChildren,
start_date: {
datetime: datetimeToISO(state.startDate),
},
};
}
return payload;
},
},
@@ -409,6 +426,15 @@ const store = createStore({
setErrors(state, errors) {
state.errors = errors;
},
setHouseholdCompositionTypes(state, types) {
state.householdCompositionTypes = types;
},
setHouseholdCompositionType(state, id) {
state.householdCompositionType = state.householdCompositionTypes.find(t => t.id = id);
},
setNumberOfChildren(state, number) {
state.numberOfChildren = Number.parseInt(number);
},
addAddressesSuggestion(state, addresses) {
let existingIds = state.addressesSuggestion
.map(a => a.address_id);
@@ -570,4 +596,8 @@ if (concerned.length > 0) {
});
}
fetchResults(`/api/1.0/person/houehold/composition/type.json`).then(types => {
store.commit('setHouseholdCompositionTypes', types);
})
export { store };

View File

@@ -1,23 +1,25 @@
{%- set countPersonLocation = accompanyingCourse.availablePersonLocation|length -%}
{%- set hasPersonLocation = countPersonLocation > 0 -%}
<div class="alert alert-danger {% if hasPersonLocation %}alert-with-actions{% endif %}">
<div class="float-button bottom"><div class="box">
<div class="action">
<ul class="record_actions">
<li>
<a class="btn btn-sm btn-update change-icon"
href="{{ path('chill_person_accompanying_course_edit', { 'accompanying_period_id': accompanyingCourse.id, '_fragment': 'section-20' }) }}">
<i class="fa fa-fw fa-crosshairs"></i>
{{ 'fix it'|trans }}
</a>
</li>
</ul>
<div class="float-button bottom">
<div class="box">
<div class="action">
<ul class="record_actions">
<li>
<a class="btn btn-sm btn-update change-icon"
href="{{ path('chill_person_accompanying_course_edit', { 'accompanying_period_id': accompanyingCourse.id, '_fragment': 'section-20' }) }}">
<i class="fa fa-fw fa-crosshairs"></i>
{{ 'fix it'|trans }}
</a>
</li>
</ul>
</div>
<p>
{{ 'This course is located at a temporarily address. You should locate this course to an user'|trans }}</p>
{% if not hasPersonLocation %}
<p>
{{ 'Associate at least one member with an household, and set an address to this household'|trans }}</p>
{% endif %}
</div>
<p>
{{ 'This course is located at a temporarily address. You should locate this course to an user'|trans }}</p>
{% if not hasPersonLocation %}
<p>
{{ 'Associate at least one member with an household, and set an address to this household'|trans }}</p>
{% endif %}
</div></div>
</div>
</div>

View File

@@ -4,12 +4,14 @@
{% block title 'household.Edit household members'|trans %}
{% block content %}
<div class="col-md-10 col-xxl household-members">
<div class="row">
<div class="col-md-10 col-xxl household-members">
<h1>{{ block('title') }}</h1>
<div id="household_members_editor"></div>
<h1>{{ block('title') }}</h1>
<div id="household_members_editor"></div>
</div>
</div>
</div>
{% endblock %}
{% block js %}

View File

@@ -51,7 +51,42 @@
</div>
<div class="item-bloc col-7 col-comment">
{% if form is null %}
{% set currentComposition = household.currentComposition %}
{% if currentComposition is not null %}
<div>
<h6>
{{ currentComposition.householdCompositionType.label|localize_translatable_string }}
</h6>
<p>
{{ 'household_composition.numberOfChildren children in household'|trans({'numberOfChildren': currentComposition.numberOfChildren}) }}
</p>
<p>
{{ 'household_composition.Since'|trans({'startDate': currentComposition.startDate}) }}
</p>
<ul class="record_actions">
<li>
<a class="btn btn-sm btn-update change-icon"
href="{{ path('chill_person_household_composition_index', {'id': household.id}) }}">
{{ 'household_composition.Update composition'|trans }}
</a>
</li>
</ul>
</div>
{% else %}
<div class="alert alert-danger">
<p>
{{ 'household_composition.Currently no composition'|trans }}
</p>
<ul class="record_actions" style="margin-bottom: 0">
<li>
<a class="btn btn-sm btn-update change-icon"
href="{{ path('chill_person_household_composition_index', {'id': household.id}) }}">
{{ 'household_composition.Add a composition'|trans }}
</a>
</li>
</ul>
</div>
{% endif %}
{% if household.waitingForBirth or not household.commentMembers.isEmpty() %}
<div class="p-4 bg-light">
{% if household.waitingForBirth %}
@@ -176,13 +211,26 @@
<span class="unfolded text-secondary">{{ 'household.Hide memberships'|trans }}</span>
</button>
</h2>
{% macro buttonsOldMembers(member) %}
{% set household = member.person.getCurrentHousehold %}
{% if household is not null %}
<li>
<a href="{{ path('chill_person_household_summary', { 'household_id': household.id }) }}" class="btn btn-sm btn-chill-beige"><i class="fa fa-home"></i></a>
</li>
{% endif %}
{% endmacro %}
<div id="collapse_{{ p == '_none' ? '_none' : p.id }}"
class="accordion-collapse collapse"
aria-labelledby="heading_{{ p == '_none' ? '_none' : p.id }}"
data-bs-parent="#nonCurrent">
<div class="flex-table my-0 list-household-members">
{% for m in old_members %}
{% include '@ChillPerson/Household/_render_member.html.twig' with { 'member': m } %}
{% include '@ChillPerson/Household/_render_member.html.twig' with {
'member': m,
'customButtons': { 'before': _self.buttonsOldMembers(m) }
} %}
{% endfor %}
</div>
</div>

View File

@@ -0,0 +1,96 @@
{% extends '@ChillPerson/Household/layout.html.twig' %}
{% block title 'household_composition.Compositions'|trans %}
{% block block_post_menu %}
<div class="post-menu"></div>
{% endblock %}
{% block content %}
<div class="household_composition">
<h1>{{ block('title') }}</h1>
{% if compositions|length == 0 %}
<p class="chill-no-data-statement">{{ 'household_composition.No composition yet'|trans }}</p>
{% else %}
<div class="flex-table">
{% for c in compositions %}
{% if c.id != editId %}
<div class="item-bloc">
<div class="item-row">
<div class="item-col">
<h3>{{ c.householdCompositionType.label|localize_translatable_string }}</h3>
<p>{{ 'household_composition.numberOfChildren'|trans }}: {{ c.numberOfChildren }}</p>
</div>
<div class="item-col">{{ 'household_composition.Since'|trans({'startDate': c.startDate}) }}</div>
</div>
<div class="item-row">
<div class="item-col">
{% if c.endDate is null %}
<span class="chill-no-data-statement">{{ 'household_composition.Still active'|trans }}</span>
{% else %}
{{ 'household_composition.Until'|trans({'endDate': c.endDate })}}
{% endif %}
</div>
</div>
{% if c.comment.comment is not empty %}
<div class="item-row separator">
{{ c.comment|chill_entity_render_box }}
</div>
{% endif %}
{% if is_granted('CHILL_PERSON_HOUSEHOLD_EDIT', c.household) %}
<div class="item-row">
<ul class="record_actions">
<li>
<a href="{{ path('chill_person_household_composition_index', {'id': c.household.id, 'edit': c.id}) }}" class="btn btn-edit"></a>
</li>
<li>
<a href="{{ path('chill_person_household_composition_index', {'id': c.household.id, 'edit': c.id}) }}" class="btn btn-edit"></a>
</li>
</ul>
</div>
{% endif %}
</div>
{% else %}
{{ form_start(form) }}
{{ form_widget(form) }}
<ul class="record_actions">
<li class="cancel">
<a href="{{ path('chill_person_household_composition_index', {'id': c.household.id}) }}">{{ 'Cancel'|trans }}</a>
</li>
<li>
<button type="submit" class="btn btn-create">{{ 'Save'|trans }}</button>
</li>
</ul>
{{ form_end(form) }}
{% endif %}
{% endfor %}
</div>
{% endif %}
<div id="collapseForm" class="{% if not isPosted %}collapse{% endif %}">
{{ form_start(form) }}
{{ form_widget(form) }}
<ul class="record_actions">
<li>
<button type="submit" class="btn btn-create">{{ 'Save'|trans }}</button>
</li>
</ul>
{{ form_end(form) }}
</div>
{% if editId == -1 %}
<ul class="record_actions sticky-form-buttons">
<li>
<button class="btn btn-primary btn-create change-icon" type="button" data-bs-toggle="collapse" data-bs-target="#collapseForm" aria-expanded="false" aria-controls="collapseForm">
{{ 'Create'|trans }}
</button>
</li>
</ul>
{% endif %}
</div>
{% endblock %}