form acc work edit: save action

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

@@ -41,11 +41,11 @@
         <div>
           <div @click="removeGoal(g)" class="objective-title">
             <i class="fa fa-times"></i>
-            {{ g.title.fr }}
+            {{ g.goal.title.fr }}
           </div> 
         </div>
         <div>
-          <add-result destination="goal" :goal="g"></add-result>  
+          <add-result destination="goal" :goal="g.goal"></add-result>  
         </div>
       </div>
 
@@ -145,21 +145,47 @@
         </ul>
       </div>
 
-        <ul class="record_actions">
-          <li>
-            <add-persons
-               buttonTitle="Ajouter des tiers"
-               modalTitle="Choisir des tiers"
-               v-bind:key="thirdPartyPicker.key"
-               v-bind:options="thirdPartyPicker.options"
-               @addNewPersons="addThirdParties"
-               ref="thirdPartyPicker"> <!-- to cast child method -->
-            </add-persons>
-          </li>
-        </ul>
+      <ul class="record_actions">
+        <li>
+          <add-persons
+             buttonTitle="Ajouter des tiers"
+             modalTitle="Choisir des tiers"
+             v-bind:key="thirdPartyPicker.key"
+             v-bind:options="thirdPartyPicker.options"
+             @addNewPersons="addThirdParties"
+             ref="thirdPartyPicker"> <!-- to cast child method -->
+          </add-persons>
+        </li>
+      </ul>
+    </div>
+
+    <div id="errors" v-if="errors.length > 0">
+      <p>Veuillez corriger les erreurs suivantes:</p>
+      <ul>
+        <li v-for="e in errors">{{ e }}</li>
+      </ul> 
     </div>
   </div>
 
+  <ul class="record_actions sticky-form-buttons">
+    <li v-if="!isPosting">
+      <button
+        class="sc-button bt-save"
+        @click="submit"
+      >
+        {{ $t('action.save') }}
+      </button>
+    </li>
+    <li v-if="isPosting">
+      <button
+        class="sc-button bt-save"
+        disabled
+      >
+        {{ $t('action.save') }}
+      </button>
+    </li>
+  </ul>
+
 </template>
 
 <style lang="scss">
@@ -174,6 +200,7 @@
     "persons persons"
     "handling handling"
     "tparties tparties"
+    "errors errors"
     ;
 
   grid-template-columns: 50%;
@@ -293,6 +320,9 @@
   #thirdParties {
     grid-area: tparties;
   }
+  #errors {
+    grid-area: errors;
+  }
 }
 
 </style>
@@ -314,9 +344,9 @@ const i18n = {
       action_title: "Action d'accompagnement",
       startDate: "Date de début",
       endDate: "Date de fin",
-      results_without_objective: "Résultats sans objectifs",
+      results_without_objective: "Résultats - orientations sans objectifs",
       add_objectif: "Ajouter un motif - objectif - dispositif",
-      persons_involved: "Usagers concernés", 
+      persons_involved: "Usagers concernés",
     }
 }
 };
@@ -360,7 +390,9 @@ export default {
       'goalsPicked',
       'personsReachables',
       'handlingThirdParty',
-      'thirdParties'
+      'thirdParties',
+      'isPosting',
+      'errors',
     ]),
     ...mapGetters([
       'hasResultsForAction',
@@ -390,11 +422,11 @@ export default {
         return this.$store.state.note;
       },
       set(v) {
-        this.$store.commit('setNote', note);
+        this.$store.commit('setNote', v);
       }
     },
     availableForCheckGoal() {
-      let pickedIds = this.$store.state.goalsPicked.map(g => g.id);
+      let pickedIds = this.$store.state.goalsPicked.map(g => g.goal.id);
       console.log('pickeds goals id', pickedIds);
       console.log(this.$store.state.goalsForAction);
 
@@ -445,6 +477,9 @@ export default {
       console.log('remove third party', t);
       this.$store.commit('removeThirdParty', t);
     },
+    submit() {
+      this.$store.dispatch('submit');
+    },
   }
 };
 

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/_components/AddResult.vue

@@ -31,7 +31,7 @@
   </div>
   <div class="noResult" v-if="!hasResult">
     <div class="chill-no-data-statement">
-      {{ $t('goal_has_ho_result') }}
+      {{ $t('goal_has_no_result') }}
     </div>
   </div>
 </template>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/store.js

@@ -25,6 +25,7 @@ const store = createStore({
       .map(p => p.person),
     handlingThirdParty: window.accompanyingCourseWork.handlingThierParty,
     thirdParties: window.accompanyingCourseWork.thirdParties,
+    isPosting: false,
     errors: [],
   },
   getters: {
@@ -40,7 +41,7 @@ const store = createStore({
       return founds === undefined ? [] : founds;
     },
     resultsPickedForGoal: (state) => (goal) => {
-      let found = state.goalsPicked.find(g => g.id === goal.id);
+      let found = state.goalsPicked.find(g => g.goal.id === goal.id);
       
       return found === undefined ? [] : found.results;
     },
@@ -50,6 +51,43 @@ const store = createStore({
     hasThirdParties(state) {
       return state.thirdParties.length > 0;
     },
+    buildPayload(state) {
+      return {
+        type: 'accompanying_period_work',
+        id: state.work.id,
+        startDate: {
+          datetime: datetimeToISO(state.startDate)
+        },
+        endDate: state.endDate === null ? null : {
+          datetime: datetimeToISO(state.endDate)
+        },
+        note: state.note,
+        persons: state.personsPicked.map(p => ({id: p.id, type: p.type})),
+        handlingThierParty: state.handlingThirdParty === null ? null : {
+          id: state.handlingThirdParty.id,
+          type: state.handlingThirdParty.type
+        },
+        results: state.resultsPicked.map(r => ({id: r.id, type: r.type})),
+        thirdParties: state.thirdParties.map(t => ({id: t.id, type: t.type})),
+        goals: state.goalsPicked.map(g => {
+          let o = {
+            type: g.type,
+            note: g.note,
+            goal: {
+              type: g.goal.type,
+              id: g.goal.id,
+            },
+            results: g.results.map(r => ({id: r.id, type: r.type})),
+          };
+
+          if (g.id !== undefined) {
+            o.id = g.id;
+          }
+
+          return o;
+        })
+      };
+    }
   },
   mutations: {
     setStartDate(state, date) {
@@ -79,16 +117,23 @@ const store = createStore({
       state.resultsPicked = state.resultsPicked.filter(r => r.id !== result.id);
     },
     addGoal(state, goal) {
-      let g = goal;
-      // initialize results to empty array
-      g.results = []
+      let g = {
+        type: "accompanying_period_work_goal",
+        goal: goal,
+        note: '',
+        results: []
+      }
       state.goalsPicked.push(g);
     },
     removeGoal(state, goal) {
       state.goalsPicked = state.goalsPicked.filter(g => g.id !== goal.id);
     },
     addResultForGoalPicked(state, { goal, result}) {
-      let found = state.goalsPicked.find(g => g.id === goal.id);
+      let found = state.goalsPicked.find(g => g.goal.id === goal.id);
+      console.log('adResultForGoalPicked');
+      console.log('found', found);
+      console.log('goal', goal);
+      console.log('result', result);
 
       if (found === undefined) {
         return;
@@ -97,7 +142,7 @@ const store = createStore({
       found.results.push(result);
     },
     removeResultForGoalPicked(state, { goal, result}) {
-      let found = state.goalsPicked.find(g => g.id === goal.id);
+      let found = state.goalsPicked.find(g => g.goal.id === goal.id);
 
       if (found === undefined) {
         return;
@@ -130,11 +175,12 @@ const store = createStore({
       state.thirdParties = state.thirdParties
         .filter(t => t.id !== thirdParty.id);
     },
-    addErrors(state, errors) {
+    setErrors(state, errors) {
       console.log('handling errors', errors);
-      for (let i in errors) {
-        state.push(errors[i]);
-      }
+      state.errors = errors;
+    },
+    setIsPosting(state, st) {
+      state.isPosting = st;
     },
   },
   actions: {
@@ -206,6 +252,46 @@ const store = createStore({
           commit('setResultsForAction', data.results);
         });
     },
+    submit({ getters, state, commit }) {
+      let
+        payload = getters.buildPayload,
+        url = `/api/1.0/person/accompanying-course/work/${state.work.id}.json`,
+        errors = []
+      ;
+
+      console.log('action subitting', payload, url);
+      commit('setIsPosting', true);
+
+      window.fetch(url, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(payload)
+      }).then(response => {
+        if (response.ok || response.status === 422) {
+          return response.json().then(data => ({data, status: response.status}));
+        }
+
+        throw new Error(response.status);
+      }).then(({data, status}) => {
+        if (status === 422) {
+          for (let i in data.violations) {
+            errors.push(data.violations[i].title);
+          }
+          commit('setErrors', errors);
+          commit('setIsPosting', false);
+        } else {
+          console.info('nothing to do here, bye bye');
+          window.location.assign(`/fr/person/accompanying-period/${state.work.accompanyingPeriod.id}/work`);
+        }
+      }).catch(e => {
+        commit('setErrors', [
+          'Erreur serveur ou réseau: veuillez ré-essayer. Code erreur: ' + e
+        ]);
+        commit('setIsPosting', false);
+      });
+    },
     initAsync({ dispatch }) {
       dispatch('getReachablesResultsForAction');
       dispatch('getReachablesGoalsForAction');