add socialAction checkbox list

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue

@@ -12,10 +12,10 @@
                v-bind:key="issue.id"
                v-bind:issue="issue"
                v-bind:selection="socialIssues.selected"
-               @updateSelected="updateSelected">
+               @updateSelected="updateSelectedIssue">
             </check-social-issue>
             
-            <div class="mt-3">
+            <div class="my-3">
             <VueMultiselect
                name="otherIssues"
                label="text"
@@ -59,6 +59,15 @@
                </span><br>
             </div>
             -->
+            
+            <check-social-action
+               v-for="action in socialActions.list"
+               v-bind:key="action.id"
+               v-bind:action="action"
+               v-bind:selection="socialActions.selected"
+               @updateSelected="updateSelectedAction">
+            </check-social-action>
+            
          </div>
       </div>
       
@@ -69,12 +78,14 @@
 import { mapState } from 'vuex';
 import VueMultiselect from 'vue-multiselect';
 import CheckSocialIssue from './SocialIssuesAcc/CheckSocialIssue.vue';
+import CheckSocialAction from './SocialIssuesAcc/CheckSocialAction.vue';
 import { getSocialIssues } from 'ChillPersonAssets/vuejs/AccompanyingCourse/api.js';
 
 export default {
    name: "SocialIssuesAcc",
    components: {
       CheckSocialIssue,
+      CheckSocialAction,
       VueMultiselect
    },
    data() {
@@ -83,7 +94,12 @@ export default {
             list: [],
             selected: []
          },
-         otherIssues: []
+         otherIssues: [],
+         socialActions: {
+            list: [],
+            selected: []
+         },
+         otherActions: []
       }
    },
    computed: {
@@ -113,12 +129,33 @@ export default {
       updateSocialIssuesList(value) {
          console.log('updateSocialIssuesList', value);
          this.socialIssues.list.push(value);
-         this.socialIssues.selected.push(value);
          this.otherIssues = this.otherIssues.filter(item => item !== value);
+         this.socialIssues.selected.push(value);
+         this.addInActionsList(value.id);
       },
-      updateSelected(value) {
+      updateSelectedIssue(value) {
          console.log('updateSelected issue', value);
          this.socialIssues.selected = value;
+         this.addInActionsList(value.id);
+      },
+      addInActionsList(id) {
+         console.log('update action list');
+         
+         const getSocialActionByIssue = (id) => { 
+            const url = `/api/1.0/person/social/social-action/by-social-issue/${id}.json`;
+            return fetch(url)
+               .then(response => {
+                  if (response.ok) { return response.json(); }
+                  throw Error('Error with request resource response'); 
+               });
+         };
+         
+         getSocialActionByIssue(id)
+            .then(actions => new Promise((resolve, reject) => {
+               //console.log('actions', actions.results);
+               this.socialActions.list = actions.results;
+               resolve();
+         }));
       }
    }
 }

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialAction.vue

@@ -0,0 +1,38 @@
+<template>
+   
+      <span class="inline-choice">
+         
+         <input 
+            type="checkbox" 
+            v-model="selected"
+            name="action"
+            v-bind:id="action.id" 
+            v-bind:value="action"
+            />
+         <label class="inline" v-bind:for="action.id">
+            {{ action.text }}
+         </label>
+         
+      </span><br>
+</template>
+
+<script>
+export default {
+   name: "CheckSocialAction",
+   props: [ 'action', 'selection' ],
+   emits: [ 'updateSelected' ],
+   computed: {
+      selected: {
+         set(value) {
+            this.$emit('updateSelected', value);
+         },
+         get() {
+            return this.selection;
+         }
+      }
+   }
+}
+</script>
+
+<style lang="css" scoped>
+</style>