add date for movement editor

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/App.vue

@@ -1,6 +1,7 @@
 <template>
   <household></household>
   <concerned></concerned>
+  <dates></dates>
 </template>
 
 <script>
@@ -8,12 +9,14 @@
 import { mapState } from 'vuex';
 import Concerned from './components/Concerned.vue';
 import Household from './components/Household.vue';
+import Dates from './components/Dates.vue';
 
 export default {
   name: 'App',
   components: {
     Concerned,
     Household,
+    Dates,
   },
   computed: {
     // for debugging purpose

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Dates.vue

@@ -0,0 +1,36 @@
+<template>
+  <h2>{{ $t('household_member_editor.dates_title') }}</h2>
+
+  <p>
+    <label for="start_date">
+      {{ $t('household_member_editor.dates.start_date') }}
+    </label>
+    <input type="date" v-model="startDate" />
+  </p>
+</template>
+
+<script>
+
+export default {
+  name: 'Dates',
+  computed: {
+    startDate: {
+      get() {
+        return [
+          this.$store.state.startDate.getFullYear(),
+          (this.$store.state.startDate.getMonth() + 1).toString().padStart(2, '0'),
+          this.$store.state.startDate.getDate().toString().padStart(2, '0')
+        ].join('-');
+      },
+      set(value) {
+        let 
+          [year, month, day] = value.split('-'),
+            dValue = new Date(year, month-1, day);
+          
+        this.$store.dispatch('setStartDate', dValue);
+      }
+    }
+  }
+}
+
+</script>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/store/index.js

@@ -6,7 +6,6 @@ const concerned = window.household_members_editor_data.persons.map(p => {
   return {
     person: p,
     position: null,
-    start_date: null,
     allowRemove: false,
   };
 });
@@ -17,10 +16,12 @@ const store = createStore({
     concerned,
     household: window.household_members_editor_data.household,
     positions: window.household_members_editor_data.positions,
+    startDate: new Date(),
     allowHouseholdCreate: window.household_members_editor_data.allowHouseholdCreate,
     allowHouseholdSearch: window.household_members_editor_data.allowHouseholdSearch,
     allowLeaveWithoutHousehold: window.household_members_editor_data.allowLeaveWithoutHousehold,
-    forceLeaveWithoutHousehold: false
+    forceLeaveWithoutHousehold: false,
+
   },
   getters: {
     isHouseholdNew(state) {
@@ -68,7 +69,7 @@ const store = createStore({
       let persons = state.concerned.map(conc => conc.person.id);
       if (!persons.includes(person.id)) {
         state.concerned.push({ person, position: null, 
-          start_date: null, allowRemove: true });
+          allowRemove: true });
       } else {
         console.err("person already included");
       }
@@ -105,6 +106,9 @@ const store = createStore({
       state.household = null;
       state.forceLeaveWithoutHousehold = true;
     },
+    setStartDate(state, dateI) {
+      state.startDate = dateI
+    },
   },
   actions: {
     addConcerned({ commit }, person) {
@@ -132,6 +136,9 @@ const store = createStore({
     forceLeaveWithoutHousehold({ commit }) {
       commit('forceLeaveWithoutHousehold');
     },
+    setStartDate({ commit }, date) {
+      commit('setStartDate', date);
+    },
   }
 });