activity vue: list socialIssues checkbox from accompanyingCourse

src/Bundle/ChillActivityBundle/Entity/Activity.php

@@ -106,12 +106,14 @@ class Activity implements HasCenterInterface, HasScopeInterface
     /**
      * @ORM\ManyToMany(targetEntity="Chill\PersonBundle\Entity\SocialWork\SocialIssue")
      * @ORM\JoinTable(name="chill_activity_activity_chill_person_socialissue")
+     * @Groups({"read"})
      */
     private $socialIssues;
 
     /**
      * @ORM\ManyToMany(targetEntity="Chill\PersonBundle\Entity\SocialWork\SocialAction")
      * @ORM\JoinTable(name="chill_activity_activity_chill_person_socialaction")
+     * @Groups({"read"})
      */
     private $socialActions;
 

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

@@ -132,7 +132,7 @@ export default {
          this.persons.forEach(person => {
             participations.forEach(participation => {
                if (person.id === participation.id) {
-                  console.log(person.id);
+                  //console.log(person.id);
                   personsAssociated.push(person);
                   personsNotAssociated = personsNotAssociated.filter(p => p !== person);
                }

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

@@ -6,14 +6,35 @@
             <label>{{ $t('activity.social_issues') }}</label>
          </div>
          <div class="grid-8">
+            
+            <check-social-issue
+               v-for="issue in socialIssues.list"
+               v-bind:key="issue.id"
+               v-bind:issue="issue"
+               v-bind:selection="socialIssues.selected"
+               @updateSelected="updateSelected">
+            </check-social-issue>
+            
+            <div class="mt-4">
+            <VueMultiselect
+               name="otherIssues"
+               label="text"
+               track-by="id"
+               v-bind:close-on-select="true"
+               v-bind:multiple="false"
+               v-bind:searchable="true"
+               v-bind:allow-empty="true" 
+               v-bind:show-labels="false" 
+               v-bind:placeholder="$t('activity.choose_other_social_issue')"
+               v-bind:options="otherIssues"
+               v-model="value"
+               @select="updateSocialIssuesList"
+               >
+            </VueMultiselect>
             <!--
-            <div id="chill_activitybundle_activity_socialIssues" class="choice-widget-expanded">
-               <span class="inline-choice">
-                  <input type="checkbox" id="chill_activitybundle_activity_socialIssues_7" name="chill_activitybundle_activity[socialIssues][]" value="7" checked="checked">
-                  <label class="inline" for="chill_activitybundle_activity_socialIssues_7">ADULTE PREVENTION/PROTECTION &gt; ADULTE - DIFFICULTES FINANCIERES ET/OU ADMINISTRATIVES</label>
-               </span><br>
-            </div>
             -->
+            </div>
+            
          </div>
       </div>
 
@@ -37,10 +58,63 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
+import VueMultiselect from 'vue-multiselect';
+import CheckSocialIssue from './SocialIssuesAcc/CheckSocialIssue.vue';
+import { getSocialIssues } from 'ChillPersonAssets/vuejs/AccompanyingCourse/api.js';
+
 export default {
-   name: "SocialIssuesAcc"
+   name: "SocialIssuesAcc",
+   components: {
+      CheckSocialIssue,
+      VueMultiselect
+   },
+   data() {
+      return {
+         socialIssues: {
+            list: [],
+            selected: []
+         },
+         otherIssues: []
+      }
+   },
+   computed: {
+      ...mapState({
+         activitySocialIssues: state => state.activity.socialIssues,
+         //activitySocialActions: state => state.activity.socialActions,
+         accompanyingCourseSocialIssues: state => state.activity.accompanyingPeriod.socialIssues
+      })
+   },
+   mounted() {
+      this.loadSocialIssues();
+      this.loadOthersSocialIssues();
+   },
+   methods: {
+      loadSocialIssues() {
+         this.socialIssues.list = this.accompanyingCourseSocialIssues;
+         // TODO ajouter les issues déjà liées à activity
+      },
+      loadOthersSocialIssues() {
+         getSocialIssues().then(response => new Promise((resolve, reject) => {
+            this.otherIssues = response.results;
+            // TODO remove double checkbox results from select
+            resolve();
+         }));        
+      },
+      updateSocialIssuesList(value) {
+         console.log('updateSocialIssuesList', value);
+         // TODO ajouter la valeur cochée dans les checkbox
+         //this.socialIssues.list.push(value);       !?? l'ajoute dans vuex le store !!?
+         //this.socialIssues.selected.push(value);
+      },
+      updateSelected(value) {
+         console.log('updateSelected', value);
+         this.socialIssues.selected = value;
+      }
+   }
 }
 </script>
 
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>
 <style lang="scss" scoped>
 </style>

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

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

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js

@@ -3,14 +3,17 @@ import { personMessages } from 'ChillPersonAssets/vuejs/_js/i18n'
 const appMessages = {
    fr: {
       activity: {
+         //
+         social_issues: "Problématiques sociales",
+         choose_other_social_issue: "sélectionner une nouvelle problématique sociale...",
+         accompanying_actions: "Actions d'accompagnement",
+         //
          add_persons: "Ajouter des personnes concernées",
          bloc_persons: "Usagers",
          bloc_persons_associated: "Usagers du parcours",
          bloc_persons_not_associated: "Tiers non-pro.",
          bloc_thirdparty: "Tiers professionnels",
          bloc_users: "T(M)S",
-         social_issues: "Problématiques sociales",
-         accompanying_actions: "Actions d'accompagnement",
       }
    }
 }

src/Bundle/ChillActivityBundle/Resources/views/Activity/edit.html.twig

@@ -1,4 +1,8 @@
-<h1>{{ "Update activity"|trans }}</h1>
+<h1>{{ "Update activity"|trans ~ ' :' }}
+    <span style="font-size: 70%; text-transform: lowercase; margin-left: 1em;">
+        {{ entity.type.name|localize_translatable_string }}
+    </span>
+</h1>
 
 {{ form_start(edit_form) }}
 {{ form_errors(edit_form) }}
@@ -19,6 +23,7 @@
     {{ form_row(edit_form.scope) }}
 {% endif %}
 
+<!--
 {%- if edit_form.socialIssues is defined -%}
     {{ form_row(edit_form.socialIssues) }}
 {% endif %}
@@ -26,7 +31,7 @@
 {%- if edit_form.socialActions is defined -%}
     {{ form_row(edit_form.socialActions) }}
 {% endif %}
-
+-->
 <div id="social-issues-acc"></div>
 
 {%- if edit_form.reasons is defined -%}

src/Bundle/ChillPersonBundle/Entity/AccompanyingPeriod.php

@@ -848,7 +848,6 @@ class AccompanyingPeriod implements TrackCreationInterface, TrackUpdateInterface
                 }
             }
         }
-
         return $recursiveSocialIssues;
     }