Household/composition add + fixes household composition editor

2025-08-21 23:23:51 +00:00 · 2022-01-24 10:59:00 +00:00
parent 2b47868d88
commit 53b3f98bba
35 changed files with 1489 additions and 63 deletions
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/App.vue
@@ -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() {
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Concerned.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Concerned.vue
@@ -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`
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Dates.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Dates.vue
@@ -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 [
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/PersonComment.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/PersonComment.vue
@@ -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>
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Positioning.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Positioning.vue
@@ -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([
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/js/i18n.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/js/i18n.js
@@ -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",
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/store/index.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/store/index.js
@@ -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 };