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>