Adding an unrelated to issue to an accompanyingCourseWork

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js

@@ -22,9 +22,9 @@ const getUsers = () => {
 };
 
 const getReferrersSuggested = (course) => {
-  const url = `/api/1.0/person/accompanying-course/${course.id}/referrers-suggested.json`;
+   const url = `/api/1.0/person/accompanying-course/${course.id}/referrers-suggested.json`;
 
-  return fetchResults(url);
+   return fetchResults(url);
 }
 
 /*

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js

@@ -132,6 +132,10 @@ const appMessages = {
          sure_description: "Une fois le changement confirmé, il ne sera plus possible de le remettre à l'état de brouillon !",
          ok: "Confirmer le parcours"
       },
+      action: {
+         choose_other_social_issue: "Veuillez choisir un autre problématique",
+         cancel: "Annuler",
+      },
       // catch errors
       'Error while updating AccompanyingPeriod Course.': "Erreur du serveur lors de la mise à jour du parcours d'accompagnement.",
       'Error while retriving AccompanyingPeriod Course.': "Erreur du serveur lors du chargement du parcours d'accompagnement.",

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

@@ -5,24 +5,47 @@
 
   <div id="awc_create_form">
 
-    <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"><span class="badge bg-chill-l-gray text-dark">{{ si.text }}</span>
+      <div id="picking">
+          <p>{{ $t('pick_social_issue_linked_with_action') }}</p>
+          <div v-for="si in socialIssues">
+            <input type="radio" checked v-bind:value="si.id" name="socialIssue" v-model="socialIssuePicked"><span class="badge bg-chill-l-gray text-dark">{{ si.text }}</span>
+          </div>
+      <div class="my-3">
+        <div class="col-8">
+          <vue-multiselect
+              name="otherIssues"
+              label="text"
+              track-by="id"
+              open-direction="bottom"
+              :close-on-select="true"
+              :preserve-search="false"
+              :reset-after="true"
+              :hide-selected="true"
+              :taggable="false"
+              :multiple="false"
+              :searchable="true"
+              :allow-empty="true"
+              :show-labels="false"
+              :loading="issueIsLoading"
+              :placeholder="$t('action.choose_other_social_issue')"
+              :options="socialIssuesOther"
+              @select="addIssueInList">
+          </vue-multiselect>
+        </div>
       </div>
-
       <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 class="col-8">
+          <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>
 
       <div v-if="isLoadingSocialActions">
@@ -63,9 +86,9 @@
       <div>
         <ul class="record_actions">
           <li class="cancel">
-            <a href="#" class="btn btn-cancel">
+            <button class="btn btn-cancel" @click="goToPrevious">
               {{ $t('action.cancel') }}
-            </a>
+            </button>
           </li>
           <li v-if="hasSocialActionPicked">
             <button class="btn btn-save" v-show="!isPostingWork" @click="submit">
@@ -82,43 +105,7 @@
 
 </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;
-
-    #persons {
-      ul {
-        padding: 0;
-
-        list-style-type: none;
-      }
-    }
-  }
-
-  #start_date {
-    grid-area: start_date;
-  }
-
-  #end_date {
-    grid-area: end_date;
-  }
-
-  #confirm {
-    grid-area: confirm;
-  }
-}
-</style>
 
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
@@ -145,17 +132,38 @@ export default {
   name: 'App',
   components: {
     VueMultiselect,
-     PersonRenderBox,
+    PersonRenderBox,
   },
   methods: {
     submit() {
-      this.$store.dispatch('submit');
-    }
+      this.$store.dispatch('submit')
+          .catch(({name, violations}) => {
+          if (name === 'ValidationException' || name === 'AccessException') {
+            violations.forEach((violation) => this.$toast.open({message: violation}));
+          } else {
+            this.$toast.open({message: 'An error occurred'})
+          }
+      });
+    },
+    addIssueInList(value) {
+      this.$store.commit('addIssueInList', value);
+      this.$store.commit('removeIssueInOther', value);
+      this.$store.dispatch('pickSocialIssue', value.id);
+    },
+    goToPrevious() {
+      let params = new URLSearchParams(window.location.search);
+      if (params.has('returnPath')) {
+        window.location.replace(params.get('returnPath'));
+      } else {
+        return;
+      }
+    },
   },
   i18n,
   computed: {
     ...mapState([
       'socialIssues',
+      'socialIssuesOther',
       'socialActionsReachables',
       'errors',
       'personsReachables',
@@ -170,12 +178,12 @@ export default {
     personsPicked: {
       get() {
         let s = this.$store.state.personsPicked.map(p => p.id);
-        console.log('persons picked', s);
+        // console.log('persons picked', s);
 
         return s;
       },
       set(v) {
-        console.log('persons picked', v);
+        // console.log('persons picked', v);
         this.$store.commit('setPersonsPickedIds', v);
       }
     },
@@ -228,10 +236,48 @@ export default {
 @import 'ChillPersonAssets/chill/scss/mixins';
 @import 'ChillMainAssets/chill/scss/chill_variables';
 span.badge {
-   @include badge_social($social-issue-color);
-   font-size: 95%;
-   margin-bottom: 5px;
-   margin-right: 1em;
-   margin-left: 1em;
+  @include badge_social($social-issue-color);
+  font-size: 95%;
+  margin-bottom: 5px;
+  margin-right: 1em;
+  margin-left: 1em;
+}
+</style>
+
+<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;
+
+    #persons {
+      ul {
+        padding: 0;
+
+        list-style-type: none;
+      }
+    }
+  }
+
+  #start_date {
+    grid-area: start_date;
+  }
+
+  #end_date {
+    grid-area: end_date;
+  }
+
+  #confirm {
+    grid-area: confirm;
+  }
 }
 </style>

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

@@ -2,7 +2,8 @@
 import { createStore } from 'vuex';
 import { datetimeToISO } from 'ChillMainAssets/chill/js/date.js';
 import { findSocialActionsBySocialIssue } from 'ChillPersonAssets/vuejs/_api/SocialWorkSocialAction.js';
-import { create } from 'ChillPersonAssets/vuejs/_api/AccompanyingCourseWork.js';
+// import { create } from 'ChillPersonAssets/vuejs/_api/AccompanyingCourseWork.js';
+import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods';
 
 const debug = process.env.NODE_ENV !== 'production';
 
@@ -12,6 +13,7 @@ const store = createStore({
     accompanyingCourse: window.accompanyingCourse,
     socialIssues: window.accompanyingCourse.socialIssues,
     socialIssuePicked: null,
+    socialIssuesOther: [],
     socialActionsReachables: [],
     socialActionPicked: null,
     personsPicked: window.accompanyingCourse.participations.filter(p => p.endDate == null)
@@ -26,7 +28,6 @@ const store = createStore({
   },
   getters: {
     hasSocialActionPicked(state) {
-      console.log(state.socialActionPicked);
       return null !== state.socialActionPicked;
     },
     hasSocialIssuePicked(state) {
@@ -73,27 +74,43 @@ const store = createStore({
   },
   mutations: {
     setSocialActionsReachables(state, actions) {
-      console.log('set social action reachables');
-      console.log(actions);
+      // console.log('set social action reachables');
+      // console.log(actions);
 
       state.socialActionsReachables = actions;
     },
     setSocialAction(state, socialAction) {
-      console.log('socialAction', socialAction);
+      // console.log('socialAction', socialAction);
       state.socialActionPicked = socialAction;
     },
     setSocialIssue(state, socialIssueId) {
-      console.log('set social issue', socialIssueId);
+      // console.log('set social issue', socialIssueId);
       if (socialIssueId === null) {
         state.socialIssuePicked = null;
       } else {
         let mapped = state.socialIssues
           .find(e => e.id === socialIssueId);
-        console.log('mapped', mapped);
         state.socialIssuePicked = mapped;
-        console.log('social issue setted', state.socialIssuePicked);
+        // console.log('social issue setted', state.socialIssuePicked);
       }
     },
+    addIssueInList(state, issue) {
+      //console.log('add issue list', issue.id);
+      state.socialIssues.push(issue);
+    },
+    updateIssuesOther(state, payload) {
+      //console.log('update issues other');
+      state.socialIssuesOther = payload;
+    },
+    removeIssueInOther(state, issue) {
+      //console.log('remove issue other', issue.id);
+      state.socialIssuesOther = state.socialIssuesOther.filter(
+          (i) => i.id !== issue.id
+      );
+    },
+    updateSelected(state, payload) {
+      state.socialIssueSelected = payload;
+    },
     setIsLoadingSocialActions(state, s) {
       state.isLoadingSocialActions = s;
     },
@@ -131,8 +148,6 @@ const store = createStore({
 
       findSocialActionsBySocialIssue(socialIssueId).then(
         (response) => {
-          console.log(response);
-          console.log(response.results);
           commit('setSocialIssue', socialIssueId);
           commit('setSocialActionsReachables', response.results);
           commit('setIsLoadingSocialActions', false);
@@ -142,34 +157,34 @@ const store = createStore({
         });
     },
     submit({ commit, getters, state }) {
-      console.log('submit');
-      let
-        payload = getters.buildPayloadCreate,
-        errors = [];
-
+      let payload = getters.buildPayloadCreate;
+      const url = `/api/1.0/person/accompanying-course/${state.accompanyingCourse.id}/work.json`;
       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 });
-          }
+      makeFetch('POST', url, payload)
+        .then((response) => {
+          window.location.assign(`/fr/person/accompanying-period/work/${response.id}/edit`)
+        })
+        .catch((error) => {
+          throw error;
         });
     },
+    fetchOtherSocialIssues({commit}) {
+      const url = `/api/1.0/person/social-work/social-issue.json`;
+      return makeFetch('GET', url)
+        .then((response) => {
+          commit('updateIssuesOther', response.results);
+        })
+        .catch((error) => {
+          throw error;
+        })
+    }
   },
 
+
+
 });
 
+store.dispatch('fetchOtherSocialIssues');
+
 export { store };

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_api/AccompanyingCourseWork.js

@@ -1,30 +1,30 @@
-const create = (accompanying_period_id, payload) => {
-  const url = `/api/1.0/person/accompanying-course/${accompanying_period_id}/work.json`;
-  let status;
-  console.log('create', payload);
+// const create = (accompanying_period_id, payload) => {
+//   const url = `/api/1.0/person/accompanying-course/${accompanying_period_id}/work.json`;
+//   let status;
+//   console.log('create', payload);
 
-  return fetch(url, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify(payload),
-  })
-    .then(response => {
-      if (response.ok || response.status === 422) {
-        status = response.status;
+//   return fetch(url, {
+//     method: 'POST',
+//     headers: {
+//       'Content-Type': 'application/json',
+//     },
+//     body: JSON.stringify(payload),
+//   })
+//     .then(response => {
+//       if (response.ok || response.status === 422) {
+//         status = response.status;
 
-        return response.json();
-      }
+//         return response.json();
+//       }
 
-      throw new Error("Error while retrieving social actions: " + response.status +
-        " " + response.statusText);
-    })
-    .then(data => {
-      return new Promise((resolve, reject) => {
-        resolve({ status, data });
-      });
-    });
-};
+//       throw new Error("Error while retrieving social actions: " + response.status +
+//         " " + response.statusText);
+//     })
+//     .then(data => {
+//       return new Promise((resolve, reject) => {
+//         resolve({ status, data });
+//       });
+//     });
+// };
 
-export { create };
+// export { create };