layout for form

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

@@ -1,55 +1,125 @@
 <template>
-  <h1>{{ $t('create_work') }}</h1>
 
-  <div v-for="si in socialIssues">
-    <input type="radio" v-bind:value="si.id" name="socialIssue" v-model="socialIssuePicked"> {{ si.title.fr }}
-  </div>
+  <h2>{{ $t('pick_social_issue') }}</h2>
 
-  <div v-if="hasSocialIssuePicked">
-    <h2>{{ $t('pick_an_action') }}</h2>
 
-    <vue-multiselect
-      v-model="socialActionPicked"
-      label="text"
-      :options="socialActionsReachables"
-      :searchable="true"
-      :close-on-select="true"
-      :show-labels="true"
-      track-by="id"
-    ></vue-multiselect> 
-  </div>
+  <div id="awc_create_form">
 
-  <div v-if="isLoadingSocialActions">
-    <p>spinner</p>
-  </div>
+    <div id="picking">
+      <p>{{ $t('pick_social_issue_linked_with_action') }}</p>
+        
+      <div v-for="si in socialIssues">
+        <input type="radio" v-bind:value="si.id" name="socialIssue" v-model="socialIssuePicked"> {{ si.title.fr }}
+      </div>
 
-  <div v-if="hasSocialActionPicked">
-    <p><label>{{ $t('start_date') }}</label> <input type="date" v-model="startDate" /></p>
-    <p><label>{{ $t('end_date') }}</label> <input type="date" v-model="endDate" /></p>
-  </div>
+      <div v-if="hasSocialIssuePicked">
+        <h2>{{ $t('pick_an_action') }}</h2>
 
-  <div >
-    <ul class="record_actions">
-      <li class="cancel">
-        <a href="#" class="sc-button bt-cancel">
-          {{ $t('Cancel') }}
-        </a>
-      </li>
-      <li v-if="hasSocialActionPicked">
-        <button class="sc-button bt-save" @click="submit">
-          {{ $t('Save') }}
-        </button>
-      </li>
-    </ul>
+        <vue-multiselect
+          v-model="socialActionPicked"
+          label="text"
+          :options="socialActionsReachables"
+          :searchable="true"
+          :close-on-select="true"
+          :show-labels="true"
+          track-by="id"
+        ></vue-multiselect> 
+      </div>
+
+      <div v-if="isLoadingSocialActions">
+        <p>spinner</p>
+      </div>
+    </div>
+
+    <div v-if="hasSocialActionPicked" id="start_date">
+      <p><label>{{ $t('startDate') }}</label> <input type="date" v-model="startDate" /></p>
+    </div>
+
+    <div v-if="hasSocialActionPicked" id="end_date">
+      <p><label>{{ $t('endDate') }}</label> <input type="date" v-model="endDate" /></p>
+    </div>
+
+    <div id="confirm">
+      <div v-if="hasErrors">
+        <p>{{ $t('form_has_errors') }}</p>
+
+        <ul>
+          <li v-for="e in errors">
+            {{ e }}
+          </li>
+        </ul>
+      </div>
+
+      <div>
+        <ul class="record_actions">
+          <li class="cancel">
+            <a href="#" class="sc-button bt-cancel">
+              {{ $t('action.cancel') }}
+            </a>
+          </li>
+          <li v-if="hasSocialActionPicked">
+            <button class="sc-button bt-save" v-show="!isPostingWork" @click="submit">
+              {{ $t('action.save') }}
+            </button>
+            <button class="sc-button bt-save" v-show="isPostingWork" disabled>
+              {{ $t('Save') }}
+            </button>
+          </li>
+        </ul>
+      </div>
+    </div>
   </div>
 
 </template>
 
+<style lang="scss">
+
+#awc_create_form {
+  display: grid;
+  grid-template-areas: 
+    "picking picking"
+    "start_date end_date"
+    "confirm confirm"
+    ;
+  grid-template-columns: 50% 50%;
+  column-gap: 1.5rem;
+
+  #picking {
+    grid-area: picking;
+  }
+
+  #start_date {
+    grid-area: start_date;
+  }
+
+  #end_date {
+    grid-area: end_date;
+  }
+
+  #confirm {
+    grid-area: confirm;
+  }
+}
+</style>
 
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
 import VueMultiselect from 'vue-multiselect';
-import { dateToISO } from 'ChillMainAssets/js/date.js';
+import { dateToISO, ISOToDate } from 'ChillMainAssets/js/date.js';
+
+const i18n = {
+  messages: {
+    fr: {
+      startDate: "Date de début",
+      endDate: "Date de fin",
+      form_has_errors: "Le formulaire comporte des erreurs",
+      pick_social_issue: "Choisir une problématique sociale",
+      pick_an_action: "Choisir une action d'accompagnement",
+      pick_social_issue_linked_with_action: "Indiquez la problématique sociale liée à l'action d'accompagnement",
+
+    }
+  }
+}
 
 export default {
   name: 'App',
@@ -61,15 +131,19 @@ export default {
       this.$store.dispatch('submit');
     }
   },
+  i18n,
   computed: {
     ...mapState([
       'socialIssues',
       'socialActionsReachables',
+      'errors',
     ]),
     ...mapGetters([
       'hasSocialIssuePicked',
       'hasSocialActionPicked',
       'isLoadingSocialActions',
+      'isPostingWork',
+      'hasErrors',
     ]),
     socialIssuePicked: {
       get() {
@@ -104,10 +178,10 @@ export default {
     },
     endDate: {
       get() {
-        return this.$store.state.endDate;
+        return dateToISO(this.$store.state.endDate);
       },
       set(value) {
-        this.$store.commit('setEndDate', value);
+        this.$store.commit('setEndDate', ISOToDate(value));
       }
     },
   }

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

@@ -2,21 +2,23 @@
 import { createStore } from 'vuex';
 import { datetimeToISO } from 'ChillMainAssets/js/date.js';
 import { findSocialActionsBySocialIssue } from 'ChillPersonAssets/vuejs/_api/SocialWorkSocialAction.js';
+import { create } from 'ChillPersonAssets/vuejs/_api/AccompanyingCourseWork.js';
 
 const debug = process.env.NODE_ENV !== 'production';
 
-const socialIssues = window.accompanyingCourse.socialIssues;
-
 const store = createStore({
   strict: debug,
   state: {
-    socialIssues: socialIssues,
+    accompanyingCourse: window.accompanyingCourse,
+    socialIssues: window.accompanyingCourse.socialIssues,
     socialIssuePicked: null,
     socialActionsReachables: [],
     socialActionPicked: null,
     startDate: new Date(),
     endDate: null,
     isLoadingSocialActions: false,
+    isPostingWork: false,
+    errors: [],
   },
   getters: {
     hasSocialActionPicked(state) {
@@ -30,6 +32,32 @@ const store = createStore({
     isLoadingSocialActions(state) {
       return state.isLoadingSocialActions;
     },
+    isPostingWork(state) {
+      return state.isPostingWork;
+    },
+    buildPayloadCreate(state) {
+      let payload = {
+        type: 'accompanying_period_work',
+        social_action: {
+          type: 'social_work_social_action',
+          id: state.socialActionPicked.id
+        },
+        startDate: {
+          datetime: datetimeToISO(state.startDate)
+        }
+      };
+
+      if (null !== state.endDate) {
+        payload.endDate = {
+          datetime: datetimeToISO(state.endDate)
+        };
+      }
+
+      return payload;
+    },
+    hasErrors(state) {
+      return state.errors.length > 0;
+    },
   },
   mutations: {
     setSocialActionsReachables(state, actions) {
@@ -43,26 +71,46 @@ const store = createStore({
       state.socialActionPicked = socialAction;
     },
     setSocialIssue(state, socialIssueId) {
-      console.log('socialAction', socialIssueId);
+      if (socialIssueId === null) {
+        state.socialIssuePicked = null;
+        return;
+      }
       state.socialIssuePicked = state.socialIssues
         .find(e => e.id === socialIssueId);
     },
     setIsLoadingSocialActions(state, s) {
       state.isLoadingSocialActions = s;
-    }
+    },
+    setPostingWork(state) {
+      state.isPostingWork = true;
+    },
+    setStartDate(state, date) {
+      state.startDate = date;
+    },
+    setEndDate(state, date) {
+      state.endDate = date;
+    },
+    addErrors(state, { errors, cancel_posting }) {
+      console.log('add errors', errors);
+      state.errors = errors;
+      if (cancel_posting) {
+        state.isPostingWork = false;
+      }
+    },
   },
   actions: {
-    pickSocialIssue({ commit }, payload) {
+    pickSocialIssue({ commit }, socialIssueId) {
       console.log('pick social issue');
-      console.log(payload);
 
       commit('setIsLoadingSocialActions', true);
+      commit('setSocialIssue', null);
+      commit('setSocialActionsReachables', []);
 
-      findSocialActionsBySocialIssue(payload).then(
+      findSocialActionsBySocialIssue(socialIssueId).then(
         (response) => {
           console.log(response);
           console.log(response.results);
-          commit('setSocialIssue', payload);
+          commit('setSocialIssue', socialIssueId);
           commit('setSocialActionsReachables', response.results);
           commit('setIsLoadingSocialActions', false);
         })
@@ -70,8 +118,33 @@ const store = createStore({
           console.error(err);
         });
     },
-    submit({ commit, getters }) {
+    submit({ commit, getters, state }) {
       console.log('submit');
+      let 
+        payload = getters.buildPayloadCreate,
+        errors = [];
+
+      commit('setPostingWork');
+
+      create(state.accompanyingCourse.id, payload)
+        .then( ({status, data}) => {
+          console.log('created return', { status, data});
+          if (status === 200) {
+            console.log('created, nothing to do here any more. Bye-bye!');
+            window.location.assign(`/fr/person/accompanying-period/work/${data.id}/edit`);
+          } else if (status === 422) {
+            console.log(data);
+            for (let i in data.violations) {
+              console.log(i);
+              console.log(data.violations[i].title);
+              errors.push(data.violations[i].title);
+            }
+            console.log('errors after reseponse handling', errors);
+            console.log({errors, cancel_posting: true});
+            commit('addErrors', { errors, cancel_posting: true });
+          }
+        });
+
 
 
     },