add a spinner

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

@@ -6,6 +6,8 @@
   </div>
 
   <div v-if="hasSocialIssuePicked">
+    <h2>{{ $t('pick_an_action') }}</h2>
+
     <vue-multiselect
       v-model="socialActionPicked"
       label="text"
@@ -17,11 +19,30 @@
     ></vue-multiselect> 
   </div>
 
+  <div v-if="isLoadingSocialActions">
+    <p>spinner</p>
+  </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 >
+    <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>
+  </div>
+
 </template>
 
 
@@ -35,6 +56,11 @@ export default {
   components: {
     VueMultiselect,
   },
+  methods: {
+    submit() {
+      this.$store.dispatch('submit');
+    }
+  },
   computed: {
     ...mapState([
       'socialIssues',
@@ -43,6 +69,7 @@ export default {
     ...mapGetters([
       'hasSocialIssuePicked',
       'hasSocialActionPicked',
+      'isLoadingSocialActions',
     ]),
     socialIssuePicked: {
       get() {

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

@@ -16,6 +16,7 @@ const store = createStore({
     socialActionPicked: null,
     startDate: new Date(),
     endDate: null,
+    isLoadingSocialActions: false,
   },
   getters: {
     hasSocialActionPicked(state) {
@@ -26,6 +27,9 @@ const store = createStore({
       console.log(state.socialIssuePicked);
       return null !== state.socialIssuePicked;
     },
+    isLoadingSocialActions(state) {
+      return state.isLoadingSocialActions;
+    },
   },
   mutations: {
     setSocialActionsReachables(state, actions) {
@@ -43,12 +47,16 @@ const store = createStore({
       state.socialIssuePicked = state.socialIssues
         .find(e => e.id === socialIssueId);
     },
+    setIsLoadingSocialActions(state, s) {
+      state.isLoadingSocialActions = s;
+    }
   },
   actions: {
     pickSocialIssue({ commit }, payload) {
       console.log('pick social issue');
       console.log(payload);
 
+      commit('setIsLoadingSocialActions', true);
 
       findSocialActionsBySocialIssue(payload).then(
         (response) => {
@@ -56,12 +64,19 @@ const store = createStore({
           console.log(response.results);
           commit('setSocialIssue', payload);
           commit('setSocialActionsReachables', response.results);
+          commit('setIsLoadingSocialActions', false);
         })
         .catch(err => {
           console.error(err);
         });
-    }
+    },
+    submit({ commit, getters }) {
+      console.log('submit');
+
+
+    },
   },
+ 
 });
 
 export { store };