fix form create + WIP form edit for Accompanying Period Work

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

@@ -13,8 +13,7 @@
       </div>
 
       <div v-if="hasSocialIssuePicked">
-        <h2>{{ $t('pick_an_action') }}</h2>
-
+        <h2>{{ $t('pick_an_action') }}</h2> 
         <vue-multiselect
           v-model="socialActionPicked"
           label="text"

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

@@ -38,7 +38,7 @@ const store = createStore({
     buildPayloadCreate(state) {
       let payload = {
         type: 'accompanying_period_work',
-        social_action: {
+        socialAction: {
           type: 'social_work_social_action',
           id: state.socialActionPicked.id
         },
@@ -144,9 +144,6 @@ const store = createStore({
             commit('addErrors', { errors, cancel_posting: true });
           }
         });
-
-
-
     },
   },
  

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

@@ -0,0 +1,89 @@
+<template>
+  <h1>Hello</h1>
+
+  <div id="workEditor">
+    <div>
+      <label>{{ $t('action_title') }}</label>
+      <p>{{ work.socialAction.text }}</p>
+    </div>
+    <div>
+      <label>{{ $t('startDate') }}</label>
+      <input type="date" v-model="startDate" />
+    </div>
+    <div>
+      <label>{{ $t('endDate') }}</label>
+      <input type="date" v-model="endDate" />
+    </div>
+    <div>
+      <ckeditor 
+        :editor="editor"
+        v-model="note"
+        tag-name="textarea"
+      ></ckeditor>
+    </div>
+    <div class="objectives_list">
+      <div class="title" aria="hidden">
+        <div><h3>Objectifs</h3></div>
+        <div><h3>Résultats</h3></div>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<style lang="scss">
+
+
+</style>
+
+<script>
+
+import { mapState } from 'vuex';
+import { dateToISO, ISOToDatetime } from 'ChillMainAssets/js/date.js';
+import CKEditor from '@ckeditor/ckeditor5-vue';
+import ClassicEditor from 'ChillMainAssets/modules/ckeditor5/index.js';
+
+export default {
+  name: 'App',
+  components: {
+    ckeditor: CKEditor.component,
+  },
+  data() {
+    return {
+      editor: ClassicEditor,
+    };
+  },
+  computed: {
+    ...mapState([
+      'work'
+    ]),
+    startDate: {
+      get() {
+        console.log('get start date', this.$store.state.startDate);
+        return dateToISO(this.$store.state.startDate);
+      },
+      set(v) {
+        this.$store.mutate('setStartDate', ISOToDate(v));
+      }
+    },
+    endDate: {
+      get() {
+        console.log('get end date', this.$store.state.endDate);
+        return dateToISO(this.$store.state.endDate);
+      },
+      set(v) {
+        this.$store.mutate('setEndDate', ISOToDate(v));
+      }
+    },
+    note: {
+      get() {
+        return this.$store.state.note;
+      },
+      set(v) {
+        this.$store.mutate('setNote', note);
+      }
+    },
+  }
+};
+
+</script>

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

@@ -0,0 +1,15 @@
+import { createApp } from 'vue';
+import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n';
+import { store } from './store';
+import { personMessages } from 'ChillPersonAssets/vuejs/_js/i18n'
+import App from './App.vue';
+
+const i18n = _createI18n(personMessages);
+
+const app = createApp({
+   template: `<app></app>`,
+})
+.use(store)
+.use(i18n)
+.component('app', App)
+.mount('#accompanying_course_work_edit');

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

@@ -0,0 +1,139 @@
+import { createStore } from 'vuex';
+import { datetimeToISO, ISOToDatetime } 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';
+
+console.log(window.accompanyingCourseWork);
+
+const store = createStore({
+  strict: debug,
+  state: {
+    work: window.accompanyingCourseWork,
+    startDate: ISOToDatetime(window.accompanyingCourseWork.startDate.datetime),
+    endDate: (window.accompanyingCourseWork.endDate !== null ?
+      ISOToDatetime(window.accompanyingCourseWork.endDate.datetime) : null),
+    note: window.accompanyingCourseWork.note,
+    goalsPicked: window.accompanyingCourseWork.goals,
+    resultsPicked: window.accompanyingCourseWork.results,
+    resultsForAction: [],
+    goalsForAction: [],
+    resultsForGoal: [],
+    errors: [],
+  },
+  getters: {
+    socialAction(state) {
+      return state.work.socialAction;
+    },
+  },
+  mutations: {
+    setStartDate(state, date) {
+      state.startDate = date;
+    },
+    setEndDate(state, date) {
+      state.endDate = date;
+    },
+    setResultsForAction(state, results) {
+      console.log('set results for action', results);
+      state.resultsForAction = results;
+    },
+    setResultsForGoal(state, { goal, results }) {
+      console.log('set results for goal', results);
+      state.goalsForAction = goal;
+      for (let i in results) {
+        let r = results[i];
+        r.goalId = goal.id;
+        console.log('adding result', r);
+        state.resultsForGoal.push(r);
+      }
+    },
+    addErrors(state, errors) {
+      console.log('handling errors', errors);
+      for (let i in errors) {
+        state.push(errors[i]);
+      }
+    },
+    setNote(state, note) {
+      state.note = note;
+    },
+  },
+  actions: {
+    getReachablesGoalsForAction({ getters, commit, dispatch }) {
+      console.log('getReachablesGoalsForAction');
+      let
+        socialActionId = getters.socialAction.id,
+        url = `/api/1.0/person/social-work/goal/by-social-action/${socialActionId}.json`
+      ;
+
+      console.log(url);
+
+      window
+        .fetch(
+          url
+        ).then( response => {
+          if (response.ok) {
+            return response.json();
+          }
+          throw { m: 'Error while retriving goal for social action', s: response.status, b: response.body };
+        }).then( data => {
+           for (let i in data.results) {
+             dispatch('getReachablesResultsForGoal', data.results[i]);
+           }
+        }).catch( errors => {
+            commit('addErrors', errors);
+        });
+    },
+    getReachablesResultsForGoal({ commit }, goal) {
+      console.log('getReachablesResultsForGoal');
+      let
+        url = `/api/1.0/person/social-work/result/by-goal/${goal.id}.json`
+      ;
+
+      console.log(url);
+
+      window.fetch(url)
+        .then(response => {
+          if (response.ok) {
+            return response.json();
+          }
+
+          throw { m: 'Error while retriving results for goal', s: response.status, b: response.body };
+        })
+        .then(data => {
+          console.log('data');
+          commit('setResultsForGoal', { goal, results: data.results });
+        });
+    },
+    getReachablesResultsForAction({ getters, commit }) {
+      console.log('getReachablesResultsForAction');
+      let
+        socialActionId = getters.socialAction.id,
+        url = `/api/1.0/person/social-work/result/by-social-action/${socialActionId}.json`
+      ;
+
+      console.log(url);
+
+      window.fetch(url)
+        .then(response => {
+          if (response.ok) {
+            return response.json();
+          }
+
+          throw { m: 'Error while retriving results for social action', s: response.status, b: response.body };
+        })
+        .then(data => {
+          console.log('data retrived', data);
+          commit('setResultsForAction', data.results);
+        });
+    },
+    initAsync({ dispatch }) {
+      dispatch('getReachablesResultsForAction');
+      dispatch('getReachablesGoalsForAction');
+    },
+  }
+});
+
+store.dispatch('initAsync');
+
+export { store };