first impl for create form

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

@@ -0,0 +1,89 @@
+<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>
+
+  <div v-if="hasSocialIssuePicked">
+    <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="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>
+
+</template>
+
+
+<script>
+import { mapState, mapActions, mapGetters } from 'vuex';
+import VueMultiselect from 'vue-multiselect';
+import { dateToISO } from 'ChillMainAssets/js/date.js';
+
+export default {
+  name: 'App',
+  components: {
+    VueMultiselect,
+  },
+  computed: {
+    ...mapState([
+      'socialIssues',
+      'socialActionsReachables',
+    ]),
+    ...mapGetters([
+      'hasSocialIssuePicked',
+      'hasSocialActionPicked',
+    ]),
+    socialIssuePicked: {
+      get() {
+        let s = this.$store.state.socialIssuePicked;
+
+        if (s === null) {
+          return null;
+        }
+
+        return s.id;
+      },
+      set(value) {
+        this.$store.dispatch('pickSocialIssue', value);
+      }
+    },
+    socialActionPicked: {
+      get() {
+        return this.$store.state.socialActionPicked;
+      },
+      set(value) {
+        this.$store.commit('setSocialAction', value);
+      }
+    },
+    startDate: {
+      get() {
+        let d = this.$store.state.startDate;
+        return dateToISO(d);
+      },
+      set(value) {
+        this.$store.commit('setStartDate', ISOToDate(value));
+      }
+    },
+    endDate: {
+      get() {
+        return this.$store.state.endDate;
+      },
+      set(value) {
+        this.$store.commit('setEndDate', value);
+      }
+    },
+  }
+}
+
+</script>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkCreate/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_create');

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

@@ -0,0 +1,67 @@
+
+import { createStore } from 'vuex';
+import { datetimeToISO } from 'ChillMainAssets/js/date.js';
+import { findSocialActionsBySocialIssue } from 'ChillPersonAssets/vuejs/_api/SocialWorkSocialAction.js';
+
+const debug = process.env.NODE_ENV !== 'production';
+
+const socialIssues = window.accompanyingCourse.socialIssues;
+
+const store = createStore({
+  strict: debug,
+  state: {
+    socialIssues: socialIssues,
+    socialIssuePicked: null,
+    socialActionsReachables: [],
+    socialActionPicked: null,
+    startDate: new Date(),
+    endDate: null,
+  },
+  getters: {
+    hasSocialActionPicked(state) {
+      console.log(state.socialActionPicked);
+      return null !== state.socialActionPicked;
+    },
+    hasSocialIssuePicked(state) {
+      console.log(state.socialIssuePicked);
+      return null !== state.socialIssuePicked;
+    },
+  },
+  mutations: {
+    setSocialActionsReachables(state, actions) {
+      console.log('set social action reachables');
+      console.log(actions);
+
+      state.socialActionsReachables = actions;
+    },
+    setSocialAction(state, socialAction) {
+      console.log('socialAction', socialAction);
+      state.socialActionPicked = socialAction;
+    },
+    setSocialIssue(state, socialIssueId) {
+      console.log('socialAction', socialIssueId);
+      state.socialIssuePicked = state.socialIssues
+        .find(e => e.id === socialIssueId);
+    },
+  },
+  actions: {
+    pickSocialIssue({ commit }, payload) {
+      console.log('pick social issue');
+      console.log(payload);
+
+
+      findSocialActionsBySocialIssue(payload).then(
+        (response) => {
+          console.log(response);
+          console.log(response.results);
+          commit('setSocialIssue', payload);
+          commit('setSocialActionsReachables', response.results);
+        })
+        .catch(err => {
+          console.error(err);
+        });
+    }
+  },
+});
+
+export { store };

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

@@ -0,0 +1,21 @@
+
+const findSocialActionsBySocialIssue = (id) => {
+  const url = `/api/1.0/person/social/social-action/by-social-issue/${id}.json`;
+
+  return fetch(url)
+    .then(response => {
+      if (!response.ok) {
+        throw new Error("Error while retrieving social actions " + response.status 
+          + " " + response.statusText)
+      }
+      return response.json();
+    })
+    .catch(err => {
+      throw err
+    })
+  ;
+};
+
+export {
+  findSocialActionsBySocialIssue
+};