From e55a2691b7a75ce94353618db1fe88cdec3bedd3 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 25 Jun 2021 13:59:44 +0200
Subject: [PATCH 01/11] move vue activity component app in subcomponent
 concernedGroups

---
 .../Resources/public/vuejs/Activity/App.vue   | 160 +----------------
 .../Activity/components/ConcernedGroups.vue   | 170 ++++++++++++++++++
 .../{ => ConcernedGroups}/PersonBadge.vue     |   0
 .../{ => ConcernedGroups}/PersonsBloc.vue     |   0
 4 files changed, 174 insertions(+), 156 deletions(-)
 create mode 100644 src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups.vue
 rename src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/{ => ConcernedGroups}/PersonBadge.vue (100%)
 rename src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/{ => ConcernedGroups}/PersonsBloc.vue (100%)

diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue
index bf8467c2b..f8d3556e9 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue
@@ -1,167 +1,15 @@
 <template>
-   <teleport to="#add-persons">
-
-      <div class="flex-bloc concerned-groups" :class="getContext">
-         <persons-bloc 
-            v-for="bloc in contextPersonsBlocs"
-            v-bind:key="bloc.key"
-            v-bind:bloc="bloc"
-            v-bind:setPersonsInBloc="setPersonsInBloc">
-         </persons-bloc>
-      </div>
-
-      <add-persons 
-         buttonTitle="activity.add_persons"
-         modalTitle="activity.add_persons"
-         v-bind:key="addPersons.key"
-         v-bind:options="addPersons.options"
-         @addNewPersons="addNewPersons"
-         ref="addPersons">
-      </add-persons>
- 
-  </teleport>
+   <concerned-groups></concerned-groups>
+   
 </template>
 
 <script>
-import { mapState } from 'vuex';
-import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
-import PersonsBloc from './components/PersonsBloc.vue';
+import ConcernedGroups from './components/ConcernedGroups.vue';
 
 export default {
    name: "App",
    components: {
-      AddPersons,
-      PersonsBloc
-   },
-   data() {
-      return {
-         personsBlocs: [
-            {  key: 'persons', 
-               title: 'activity.bloc_persons', 
-               persons: [], 
-               included: false 
-            },
-            {  key: 'personsAssociated', 
-               title: 'activity.bloc_persons_associated', 
-               persons: [], 
-               included: false 
-            },
-            {  key: 'personsNotAssociated', 
-               title: 'activity.bloc_persons_not_associated', 
-               persons: [], 
-               included: false 
-            },
-            {  key: 'thirdparty', 
-               title: 'activity.bloc_thirdparty', 
-               persons: [], 
-               included: true
-            },
-            {  key: 'users', 
-               title: 'activity.bloc_users', 
-               persons: [], 
-               included: true
-            },
-         ],
-         addPersons: {
-            key: 'activity',
-            options: {
-               type: ['person', 'thirdparty'], // TODO add 'user'
-               priority: null,
-               uniq: false,
-            }
-         }
-      }
-   },
-   computed: {
-      ...mapState({
-         persons: state => state.activity.persons,
-         thirdParties: state => state.activity.thirdParties,
-         users: state => state.activity.users,
-         accompanyingCourse: state => state.activity.accompanyingPeriod
-      }),
-      getContext() {
-         return (this.accompanyingCourse) ? "accompanyingCourse" : "person";
-      },
-      contextPersonsBlocs() {
-         return this.personsBlocs.filter(bloc => bloc.included !== false);
-      }
-   },
-   mounted() {
-      this.setPersonsInBloc();
-   },
-   methods: {
-      setPersonsInBloc() {
-         let groups; 
-         if (this.accompanyingCourse) {
-            groups = this.splitPersonsInGroups();
-         }     
-         this.personsBlocs.forEach(bloc => {
-            if (this.accompanyingCourse) {
-               switch (bloc.key) {
-                  case 'personsAssociated':
-                     bloc.persons = groups.personsAssociated;
-                     bloc.included = true;
-                     break;
-                  case 'personsNotAssociated':
-                     bloc.persons = groups.personsNotAssociated;
-                     bloc.included = true;
-                     break;
-               }
-            } else {
-               switch (bloc.key) {
-                  case 'persons': 
-                     bloc.persons = this.persons;
-                     bloc.included = true;
-                     break;
-               }
-            }
-            switch (bloc.key) {
-               case 'thirdparty':
-                  bloc.persons = this.thirdParties;
-                  break;
-               case 'users':
-                  bloc.persons = this.users;
-                  break;
-            }
-         }, groups);
-      },
-      splitPersonsInGroups() {
-         let personsAssociated = [];
-         let personsNotAssociated = this.persons;
-         let participations = this.getCourseParticipations();         
-         this.persons.forEach(person => {
-            participations.forEach(participation => {
-               if (person.id === participation.id) {
-                  console.log(person.id);
-                  personsAssociated.push(person);
-                  personsNotAssociated = personsNotAssociated.filter(p => p !== person);
-               }
-            });
-         });
-         return { 
-            'personsAssociated': personsAssociated, 
-            'personsNotAssociated': personsNotAssociated 
-         };
-      },
-      getCourseParticipations() {
-         let participations = [];
-         this.accompanyingCourse.participations.forEach(participation => {
-            if (!participation.endDate) {
-               participations.push(participation.person);
-            }
-         });
-         return participations;
-      },
-      addNewPersons({ selected, modal }) {
-         console.log('@@@ CLICK button addNewPersons', selected);
-         selected.forEach(function(item) {
-               this.$store.dispatch('addPersonsInvolved', item);
-            }, this
-         );
-         this.$refs.addPersons.resetSearch(); // to cast child method
-         modal.showModal = false;
-         this.setPersonsInBloc();
-      }
+      ConcernedGroups
    }
 }
 </script>
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups.vue
new file mode 100644
index 000000000..f75716dd3
--- /dev/null
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups.vue
@@ -0,0 +1,170 @@
+<template>
+   <teleport to="#add-persons">
+
+      <div class="flex-bloc concerned-groups" :class="getContext">
+         <persons-bloc 
+            v-for="bloc in contextPersonsBlocs"
+            v-bind:key="bloc.key"
+            v-bind:bloc="bloc"
+            v-bind:setPersonsInBloc="setPersonsInBloc">
+         </persons-bloc>
+      </div>
+
+      <add-persons 
+         buttonTitle="activity.add_persons"
+         modalTitle="activity.add_persons"
+         v-bind:key="addPersons.key"
+         v-bind:options="addPersons.options"
+         @addNewPersons="addNewPersons"
+         ref="addPersons">
+      </add-persons>
+ 
+  </teleport>  
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
+import PersonsBloc from './ConcernedGroups/PersonsBloc.vue';
+
+export default {
+   name: "ConcernedGroups",
+   components: {
+      AddPersons,
+      PersonsBloc
+   },
+   data() {
+      return {
+         personsBlocs: [
+            {  key: 'persons', 
+               title: 'activity.bloc_persons', 
+               persons: [], 
+               included: false 
+            },
+            {  key: 'personsAssociated', 
+               title: 'activity.bloc_persons_associated', 
+               persons: [], 
+               included: false 
+            },
+            {  key: 'personsNotAssociated', 
+               title: 'activity.bloc_persons_not_associated', 
+               persons: [], 
+               included: false 
+            },
+            {  key: 'thirdparty', 
+               title: 'activity.bloc_thirdparty', 
+               persons: [], 
+               included: true
+            },
+            {  key: 'users', 
+               title: 'activity.bloc_users', 
+               persons: [], 
+               included: true
+            },
+         ],
+         addPersons: {
+            key: 'activity',
+            options: {
+               type: ['person', 'thirdparty'], // TODO add 'user'
+               priority: null,
+               uniq: false,
+            }
+         }
+      }
+   },
+   computed: {
+      ...mapState({
+         persons: state => state.activity.persons,
+         thirdParties: state => state.activity.thirdParties,
+         users: state => state.activity.users,
+         accompanyingCourse: state => state.activity.accompanyingPeriod
+      }),
+      getContext() {
+         return (this.accompanyingCourse) ? "accompanyingCourse" : "person";
+      },
+      contextPersonsBlocs() {
+         return this.personsBlocs.filter(bloc => bloc.included !== false);
+      }
+   },
+   mounted() {
+      this.setPersonsInBloc();
+   },
+   methods: {
+      setPersonsInBloc() {
+         let groups; 
+         if (this.accompanyingCourse) {
+            groups = this.splitPersonsInGroups();
+         }     
+         this.personsBlocs.forEach(bloc => {
+            if (this.accompanyingCourse) {
+               switch (bloc.key) {
+                  case 'personsAssociated':
+                     bloc.persons = groups.personsAssociated;
+                     bloc.included = true;
+                     break;
+                  case 'personsNotAssociated':
+                     bloc.persons = groups.personsNotAssociated;
+                     bloc.included = true;
+                     break;
+               }
+            } else {
+               switch (bloc.key) {
+                  case 'persons': 
+                     bloc.persons = this.persons;
+                     bloc.included = true;
+                     break;
+               }
+            }
+            switch (bloc.key) {
+               case 'thirdparty':
+                  bloc.persons = this.thirdParties;
+                  break;
+               case 'users':
+                  bloc.persons = this.users;
+                  break;
+            }
+         }, groups);
+      },
+      splitPersonsInGroups() {
+         let personsAssociated = [];
+         let personsNotAssociated = this.persons;
+         let participations = this.getCourseParticipations();         
+         this.persons.forEach(person => {
+            participations.forEach(participation => {
+               if (person.id === participation.id) {
+                  console.log(person.id);
+                  personsAssociated.push(person);
+                  personsNotAssociated = personsNotAssociated.filter(p => p !== person);
+               }
+            });
+         });
+         return { 
+            'personsAssociated': personsAssociated, 
+            'personsNotAssociated': personsNotAssociated 
+         };
+      },
+      getCourseParticipations() {
+         let participations = [];
+         this.accompanyingCourse.participations.forEach(participation => {
+            if (!participation.endDate) {
+               participations.push(participation.person);
+            }
+         });
+         return participations;
+      },
+      addNewPersons({ selected, modal }) {
+         console.log('@@@ CLICK button addNewPersons', selected);
+         selected.forEach(function(item) {
+               this.$store.dispatch('addPersonsInvolved', item);
+            }, this
+         );
+         this.$refs.addPersons.resetSearch(); // to cast child method
+         modal.showModal = false;
+         this.setPersonsInBloc();
+      }
+   }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/PersonBadge.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonBadge.vue
similarity index 100%
rename from src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/PersonBadge.vue
rename to src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonBadge.vue
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/PersonsBloc.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonsBloc.vue
similarity index 100%
rename from src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/PersonsBloc.vue
rename to src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonsBloc.vue

From fe22e6c7dcbd9055f69d0cd5c1914b1976a306f8 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 25 Jun 2021 14:26:42 +0200
Subject: [PATCH 02/11] activity: create new vue subcomponent socialIssuesAcc

---
 .../ChillActivityBundle/Form/ActivityType.php | 30 +++++++++++--------
 .../Resources/public/vuejs/Activity/App.vue   |  6 ++--
 .../Activity/components/SocialIssuesAcc.vue   | 14 +++++++++
 .../Resources/views/Activity/edit.html.twig   |  8 +++--
 .../Resources/views/Activity/new.html.twig    |  9 +++---
 5 files changed, 45 insertions(+), 22 deletions(-)
 create mode 100644 src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue

diff --git a/src/Bundle/ChillActivityBundle/Form/ActivityType.php b/src/Bundle/ChillActivityBundle/Form/ActivityType.php
index 8af7a204c..55c68972e 100644
--- a/src/Bundle/ChillActivityBundle/Form/ActivityType.php
+++ b/src/Bundle/ChillActivityBundle/Form/ActivityType.php
@@ -105,7 +105,11 @@ class ActivityType extends AbstractType
         }
 
         if ($activityType->isVisible('socialIssues') && $accompanyingPeriod) {
-            $builder->add('socialIssues', EntityType::class, [
+            $builder->add('socialIssues', 
+            /*
+            HiddenType::class
+            */
+            EntityType::class, [
                 'label' => $activityType->getLabel('socialIssues'),
                 'required' => $activityType->isRequired('socialIssues'),
                 'class' => SocialIssue::class,
@@ -115,11 +119,16 @@ class ActivityType extends AbstractType
                 'multiple' => true,
                 'choices' => $accompanyingPeriod->getRecursiveSocialIssues(),
                 'expanded' => true,
-            ]);
+            ] 
+            );
         }
 
         if ($activityType->isVisible('socialActions') && $accompanyingPeriod) {
-            $builder->add('socialActions', EntityType::class, [
+            $builder->add('socialActions', 
+            /*
+            HiddenType::class
+            */
+            EntityType::class, [
                 'label' => $activityType->getLabel('socialActions'),
                 'required' => $activityType->isRequired('socialActions'),
                 'class' => SocialAction::class,
@@ -129,7 +138,8 @@ class ActivityType extends AbstractType
                 'multiple' => true,
                 'choices' => $accompanyingPeriod->getRecursiveSocialActions(),
                 'expanded' => true,
-            ]);
+            ] 
+            );
         }
 
         if ($activityType->isVisible('date')) {
@@ -203,9 +213,7 @@ class ActivityType extends AbstractType
         }
 
         if ($activityType->isVisible('persons')) {
-            $builder->add('persons', HiddenType::class, [
-               //'data_class' => Person::class,
-            ]);
+            $builder->add('persons', HiddenType::class);
             $builder->get('persons')
                ->addModelTransformer(new CallbackTransformer(
                    function (iterable $personsAsIterable): string {
@@ -226,9 +234,7 @@ class ActivityType extends AbstractType
         }
 
         if ($activityType->isVisible('thirdParties')) {
-            $builder->add('thirdParties', HiddenType::class, [
-               //'data_class' => ThirdParty::class,
-            ]);
+            $builder->add('thirdParties', HiddenType::class);
             $builder->get('thirdParties')
                ->addModelTransformer(new CallbackTransformer(
                    function (iterable $thirdpartyAsIterable): string {
@@ -260,9 +266,7 @@ class ActivityType extends AbstractType
         }
 
         if ($activityType->isVisible('users')) {
-            $builder->add('users', HiddenType::class, [
-               //'data_class' => User::class,
-            ]);
+            $builder->add('users', HiddenType::class);
             $builder->get('users')
                ->addModelTransformer(new CallbackTransformer(
                    function (iterable $usersAsIterable): string {
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue
index f8d3556e9..1ef31cc2e 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue
@@ -1,15 +1,17 @@
 <template>
    <concerned-groups></concerned-groups>
-   
+   <social-issues-acc></social-issues-acc>
 </template>
 
 <script>
 import ConcernedGroups from './components/ConcernedGroups.vue';
+import SocialIssuesAcc from './components/SocialIssuesAcc.vue';
 
 export default {
    name: "App",
    components: {
-      ConcernedGroups
+      ConcernedGroups,
+      SocialIssuesAcc
    }
 }
 </script>
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue
new file mode 100644
index 000000000..093c3ec6b
--- /dev/null
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue
@@ -0,0 +1,14 @@
+<template>
+   <teleport to="#social-issues-acc">
+      boum
+   </teleport>
+</template>
+
+<script>
+export default {
+   name: "SocialIssuesAcc"
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/edit.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/edit.html.twig
index 3024148e1..b8ba44419 100644
--- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/edit.html.twig
+++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/edit.html.twig
@@ -19,13 +19,15 @@
     {{ form_row(edit_form.scope) }}
 {% endif %}
 
+{%- if edit_form.socialIssues is defined -%}
+    {{ form_row(edit_form.socialIssues) }}
+{% endif %}
+
 {%- if edit_form.socialActions is defined -%}
     {{ form_row(edit_form.socialActions) }}
 {% endif %}
 
-{%- if edit_form.socialIssues is defined -%}
-    {{ form_row(edit_form.socialIssues) }}
-{% endif %}
+<div id="social-issues-acc"></div>
 
 {%- if edit_form.reasons is defined -%}
     {{ form_row(edit_form.reasons) }}
diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/new.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/new.html.twig
index 2cca7ad2e..35e466915 100644
--- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/new.html.twig
+++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/new.html.twig
@@ -24,14 +24,15 @@
     {{ form_row(form.scope) }}
 {% endif %}
 
-{%- if form.socialActions is defined -%}
-    {{ form_row(form.socialActions) }}
-{% endif %}
-
 {%- if form.socialIssues is defined -%}
     {{ form_row(form.socialIssues) }}
 {% endif %}
 
+{%- if form.socialActions is defined -%}
+    {{ form_row(form.socialActions) }}
+{% endif %}
+
+<div id="social-issues-acc"></div>
 
 {%- if form.reasons is defined -%}
     {{ form_row(form.reasons) }}

From 7cae9e1769a829659f1a72e28e565a642ae99aa1 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Sat, 26 Jun 2021 12:09:18 +0200
Subject: [PATCH 03/11] wip

---
 .../Activity/components/SocialIssuesAcc.vue   | 34 ++++++++++++++++++-
 .../Resources/public/vuejs/Activity/i18n.js   |  2 ++
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue
index 093c3ec6b..dbc697441 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue
@@ -1,6 +1,38 @@
 <template>
    <teleport to="#social-issues-acc">
-      boum
+      
+      <div class="container">
+         <div class="grid-4 clear">
+            <label>{{ $t('activity.social_issues') }}</label>
+         </div>
+         <div class="grid-8">
+            <!--
+            <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 class="container">
+         <div class="grid-4 clear">
+            <label>{{ $t('activity.accompanying_actions') }}</label>
+         </div>
+         <div class="grid-8">
+            <!--
+            <div id="chill_activitybundle_activity_socialActions" class="choice-widget-expanded">
+               <span class="inline-choice">
+                  <input type="checkbox" id="chill_activitybundle_activity_socialActions_5" name="chill_activitybundle_activity[socialActions][]" value="5">
+                  <label class="inline" for="chill_activitybundle_activity_socialActions_5">Informer, conseiller</label>
+               </span><br>
+            </div>
+            -->
+         </div>
+      </div>
+      
    </teleport>
 </template>
 
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js
index 778072e61..7797ae91c 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js
@@ -9,6 +9,8 @@ const appMessages = {
          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",
       }
    }
 }

From 3a81124e04bbcac9ad789cdbf2b52ec50fbf1a2e Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Sat, 26 Jun 2021 12:40:23 +0200
Subject: [PATCH 04/11] activity vue: list socialIssues checkbox from
 accompanyingCourse

---
 .../ChillActivityBundle/Entity/Activity.php   |  2 +
 .../Activity/components/ConcernedGroups.vue   |  2 +-
 .../Activity/components/SocialIssuesAcc.vue   | 88 +++++++++++++++++--
 .../SocialIssuesAcc/CheckSocialIssue.vue      | 34 +++++++
 .../Resources/public/vuejs/Activity/i18n.js   |  7 +-
 .../Resources/views/Activity/edit.html.twig   |  9 +-
 .../Entity/AccompanyingPeriod.php             |  1 -
 7 files changed, 130 insertions(+), 13 deletions(-)
 create mode 100644 src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialIssue.vue

diff --git a/src/Bundle/ChillActivityBundle/Entity/Activity.php b/src/Bundle/ChillActivityBundle/Entity/Activity.php
index b0a84fa4e..eb1a8386e 100644
--- a/src/Bundle/ChillActivityBundle/Entity/Activity.php
+++ b/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;
 
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups.vue
index f75716dd3..cf97f6502 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups.vue
+++ b/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);
                }
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue
index dbc697441..22d24d184 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue
+++ b/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>
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialIssue.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialIssue.vue
new file mode 100644
index 000000000..0f223eced
--- /dev/null
+++ b/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>
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js
index 7797ae91c..1b00ab801 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js
+++ b/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",
       }
    }
 }
diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/edit.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/edit.html.twig
index b8ba44419..e588d7a62 100644
--- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/edit.html.twig
+++ b/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 -%}
diff --git a/src/Bundle/ChillPersonBundle/Entity/AccompanyingPeriod.php b/src/Bundle/ChillPersonBundle/Entity/AccompanyingPeriod.php
index 47bb3c953..b2de73651 100644
--- a/src/Bundle/ChillPersonBundle/Entity/AccompanyingPeriod.php
+++ b/src/Bundle/ChillPersonBundle/Entity/AccompanyingPeriod.php
@@ -848,7 +848,6 @@ class AccompanyingPeriod implements TrackCreationInterface, TrackUpdateInterface
                 }
             }
         }
-
         return $recursiveSocialIssues;
     }
 

From e06aded1ec34fc27b12b1886f9a1faf0687198fd Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Sun, 27 Jun 2021 14:20:06 +0200
Subject: [PATCH 05/11] remove from multiselect when adding social issues +
 disable accompanyingcourse issues loading

---
 .../Activity/components/SocialIssuesAcc.vue   | 32 +++++++++++++------
 .../Resources/public/vuejs/Activity/i18n.js   |  2 +-
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue
index 22d24d184..c2a0a5521 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue
@@ -15,12 +15,17 @@
                @updateSelected="updateSelected">
             </check-social-issue>
             
-            <div class="mt-4">
+            <div class="mt-3">
             <VueMultiselect
                name="otherIssues"
                label="text"
                track-by="id"
+               open-direction="bottom"
                v-bind:close-on-select="true"
+               v-bind:preserve-search="false"
+               v-bind:reset-after="true"
+               v-bind:hide-selected="true"
+               v-bind:taggable="false"
                v-bind:multiple="false"
                v-bind:searchable="true"
                v-bind:allow-empty="true" 
@@ -30,9 +35,12 @@
                v-model="value"
                @select="updateSocialIssuesList"
                >
+                  
+               <template v-slot:selection="{ values, search, isOpen }"><!-- {{ values.length }} {{ isOpen }} -->
+                  <span v-if="values.length > 0" class="multiselect__single"></span>
+               </template>
+               
             </VueMultiselect>
-            <!--
-            -->
             </div>
             
          </div>
@@ -86,29 +94,30 @@ export default {
       })
    },
    mounted() {
-      this.loadSocialIssues();
+      //this.loadSocialIssues();
       this.loadOthersSocialIssues();
    },
    methods: {
       loadSocialIssues() {
+         console.log('when mounted load socialIssues');
          this.socialIssues.list = this.accompanyingCourseSocialIssues;
          // TODO ajouter les issues déjà liées à activity
       },
       loadOthersSocialIssues() {
          getSocialIssues().then(response => new Promise((resolve, reject) => {
+            console.log('load others issues in multiselect');
             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);
+         this.socialIssues.list.push(value);
+         this.socialIssues.selected.push(value);
+         this.otherIssues = this.otherIssues.filter(item => item !== value);
       },
       updateSelected(value) {
-         console.log('updateSelected', value);
+         console.log('updateSelected issue', value);
          this.socialIssues.selected = value;
       }
    }
@@ -116,5 +125,8 @@ export default {
 </script>
 
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>
-<style lang="scss" scoped>
+<style lang="scss">
+   span.multiselect__single {
+      display: none !important;
+   }
 </style>
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js
index 1b00ab801..459218469 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js
@@ -5,7 +5,7 @@ const appMessages = {
       activity: {
          //
          social_issues: "Problématiques sociales",
-         choose_other_social_issue: "sélectionner une nouvelle problématique sociale...",
+         choose_other_social_issue: "ajouter une nouvelle problématique sociale...",
          accompanying_actions: "Actions d'accompagnement",
          //
          add_persons: "Ajouter des personnes concernées",

From 28b4d9562c5ef6f4c87a018948b9531172e87534 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Sun, 27 Jun 2021 19:10:01 +0200
Subject: [PATCH 06/11] add socialAction checkbox list

---
 .../Activity/components/SocialIssuesAcc.vue   | 47 +++++++++++++++++--
 .../SocialIssuesAcc/CheckSocialAction.vue     | 38 +++++++++++++++
 2 files changed, 80 insertions(+), 5 deletions(-)
 create mode 100644 src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialAction.vue

diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue
index c2a0a5521..3d43ce16e 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue
+++ b/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();
+         }));
       }
    }
 }
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialAction.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialAction.vue
new file mode 100644
index 000000000..0a9b9e28c
--- /dev/null
+++ b/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>

From 61c2934d64fddbcf81d47a0d9aeebb85e1b28dd4 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Mon, 28 Jun 2021 15:19:36 +0200
Subject: [PATCH 07/11] activity: get social Actions, improve reactivity

---
 .../Resources/public/vuejs/Activity/App.vue   |   3 -
 .../Resources/public/vuejs/Activity/api.js    |  18 ++
 .../Activity/components/SocialIssuesAcc.vue   | 157 ++++++++++++------
 .../SocialIssuesAcc/CheckSocialAction.vue     |  32 ++--
 .../Resources/public/vuejs/Activity/i18n.js   |   4 +-
 .../Resources/public/vuejs/Activity/store.js  |   4 +-
 6 files changed, 146 insertions(+), 72 deletions(-)
 create mode 100644 src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/api.js

diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue
index 1ef31cc2e..07fe84319 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue
@@ -15,6 +15,3 @@ export default {
    }
 }
 </script>
-
-<style lang="scss">
-</style>
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/api.js b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/api.js
new file mode 100644
index 000000000..79b4ec8fc
--- /dev/null
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/api.js
@@ -0,0 +1,18 @@
+import { getSocialIssues } from 'ChillPersonAssets/vuejs/AccompanyingCourse/api.js';
+
+/*
+*  Load socialActions by socialIssue (id)
+*/
+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'); 
+      });
+};
+
+export {
+   getSocialIssues,
+   getSocialActionByIssue
+};
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue
index 3d43ce16e..0c0fcf38b 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue
@@ -29,12 +29,12 @@
                v-bind:multiple="false"
                v-bind:searchable="true"
                v-bind:allow-empty="true" 
-               v-bind:show-labels="false" 
+               v-bind:show-labels="false"
+               v-bind:loading="socialIssues.isLoading"
                v-bind:placeholder="$t('activity.choose_other_social_issue')"
-               v-bind:options="otherIssues"
+               v-bind:options="socialIssues.other"
                v-model="value"
-               @select="updateSocialIssuesList"
-               >
+               @select="addInSocialIssuesList">
                   
                <template v-slot:selection="{ values, search, isOpen }"><!-- {{ values.length }} {{ isOpen }} -->
                   <span v-if="values.length > 0" class="multiselect__single"></span>
@@ -48,19 +48,16 @@
 
       <div class="container">
          <div class="grid-4 clear">
-            <label>{{ $t('activity.accompanying_actions') }}</label>
+            <label>{{ $t('activity.social_actions') }}</label>
          </div>
          <div class="grid-8">
-            <!--
-            <div id="chill_activitybundle_activity_socialActions" class="choice-widget-expanded">
-               <span class="inline-choice">
-                  <input type="checkbox" id="chill_activitybundle_activity_socialActions_5" name="chill_activitybundle_activity[socialActions][]" value="5">
-                  <label class="inline" for="chill_activitybundle_activity_socialActions_5">Informer, conseiller</label>
-               </span><br>
+            
+            <div v-if="socialActions.isLoading === true">
+               <i class="chill-green fa fa-circle-o-notch fa-spin fa-lg"></i>
             </div>
-            -->
             
             <check-social-action
+               v-if="socialIssues.selected.length"
                v-for="action in socialActions.list"
                v-bind:key="action.id"
                v-bind:action="action"
@@ -68,6 +65,10 @@
                @updateSelected="updateSelectedAction">
             </check-social-action>
             
+            <span v-else class="inline-choice chill-no-data-statement mt-3">
+               {{ $t('activity.select_first_a_social_issue') }}
+            </span>
+            
          </div>
       </div>
       
@@ -75,11 +76,11 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { readonly } from 'vue';
 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';
+import { getSocialIssues, getSocialActionByIssue } from '../api.js';
 
 export default {
    name: "SocialIssuesAcc",
@@ -92,70 +93,130 @@ export default {
       return {
          socialIssues: {
             list: [],
-            selected: []
+            selected: [],
+            other: [],
+            isLoading: false
          },
-         otherIssues: [],
          socialActions: {
             list: [],
-            selected: []
+            selected: [],
+            isLoading: false
          },
-         otherActions: []
       }
    },
    computed: {
-      ...mapState({
-         activitySocialIssues: state => state.activity.socialIssues,
-         //activitySocialActions: state => state.activity.socialActions,
-         accompanyingCourseSocialIssues: state => state.activity.accompanyingPeriod.socialIssues
-      })
+      accompanyingCourseSocialIssuesList() {
+         return readonly(this.$store.state.activity.accompanyingPeriod.socialIssues);
+      },
+      activitySocialIssuesSelected() {
+         return readonly(this.$store.state.activity.socialIssues);
+      },
+      activitySocialActionsSelected() {
+         return readonly(this.$store.state.activity.socialActions);
+      }
    },
    mounted() {
-      //this.loadSocialIssues();
+      // this.loadSocialIssues(); // TODO 1 ne pas muter le store
       this.loadOthersSocialIssues();
    },
    methods: {
+      /* When mounted, load SocialIssues associated to AccompanyingCourse (checkboxes)
+      */
       loadSocialIssues() {
-         console.log('when mounted load socialIssues');
-         this.socialIssues.list = this.accompanyingCourseSocialIssues;
-         // TODO ajouter les issues déjà liées à activity
+         console.log('loadSocialIssues');
+         this.socialIssues.list = this.accompanyingCourseSocialIssuesList;
       },
+      /* When loaded, load all others socialIssues in a multiselect
+      */
       loadOthersSocialIssues() {
+         this.socialIssues.isLoading = true;
          getSocialIssues().then(response => new Promise((resolve, reject) => {
             console.log('load others issues in multiselect');
-            this.otherIssues = response.results;
+            this.socialIssues.other = response.results;
+            
+            this.loadSelected();
+            this.socialIssues.isLoading = false;
             resolve();
          }));        
       },
-      updateSocialIssuesList(value) {
-         console.log('updateSocialIssuesList', value);
+      /* Load finally all issues and actions already linked to activity
+      */
+      loadSelected() {
+         console.log('loadSelected');
+         this.activitySocialIssuesSelected.forEach(issue => {
+            
+            this.addInSocialIssuesList(issue)
+            
+         }, this);
+         this.activitySocialActionsSelected.forEach(action => {
+            console.log('* add action', action.id);
+            
+            this.socialActions.list.push(action);
+            this.socialActions.selected.push(action);
+            
+            this.filterActionsList();
+            
+         }, this);
+      },
+      /* When choosing an issue in multiselect, add it in checkboxes (as selected), 
+         remove it from multiselect, and add socialActions concerned
+      */
+      addInSocialIssuesList(value) {
+         console.log('addInSocialIssuesList', value);
          this.socialIssues.list.push(value);
-         this.otherIssues = this.otherIssues.filter(item => item !== value);
+         this.socialIssues.other = this.socialIssues.other.filter(item => item !== value);
+         
          this.socialIssues.selected.push(value);
-         this.addInActionsList(value.id);
+         this.updateActionsList();
       },
+      /* Update value for selected issues checkboxes
+      */
       updateSelectedIssue(value) {
-         console.log('updateSelected issue', value);
+         console.log('updateSelectedIssue', value);
          this.socialIssues.selected = value;
-         this.addInActionsList(value.id);
+         
+         this.updateActionsList();
       },
-      addInActionsList(id) {
-         console.log('update action list');
+      /* Add socialActions concerned: reset actions list, then loop on each issue selected 
+         to get social actions concerned
+      */
+      updateActionsList() {
+         console.log('updateActionsList');
          
-         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'); 
-               });
-         };
+         console.log('* reset actions list');
+         this.socialActions.list = [];
          
-         getSocialActionByIssue(id)
+         this.socialIssues.selected.forEach(item => {
+            console.log('* for issue', item.id);
+            
+            this.socialActions.isLoading = true;
+            getSocialActionByIssue(item.id)
             .then(actions => new Promise((resolve, reject) => {
-               //console.log('actions', actions.results);
-               this.socialActions.list = actions.results;
+               
+               actions.results.forEach(action => {
+                  console.log('* add action', action.id);
+                  this.socialActions.list.push(action);
+               }, this);
+               
+               this.filterActionsList();
+               this.socialActions.isLoading = false;
+               
                resolve();
-         }));
+            }));
+         }, this);
+      },
+      /* Filter social actions list: order by and uniq
+      */
+      filterActionsList() {
+         console.log('filterActionsList', this.socialActions.list);
+         
+         console.log('* filter ' + this.socialActions.list.length + ' items: uniq');
+         // TODO 2 filtrer la liste pour supprimer les doublons
+         this.socialActions.list = this.socialActions.list.filter((v, i, a) => a.indexOf(v) === i);
+         //this.socialActions.list = [...new Set(this.socialActions.list)];
+         
+         console.log('* filter ' + this.socialActions.list.length + ' items: sort');
+         this.socialActions.list.sort((a,b) => (a.text > b.text) ? 1 : ((b.text > a.text) ? -1 : 0));
       }
    }
 }
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialAction.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialAction.vue
index 0a9b9e28c..4da3a7ffc 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialAction.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialAction.vue
@@ -1,19 +1,18 @@
 <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>
+   <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>
@@ -33,6 +32,3 @@ export default {
    }
 }
 </script>
-
-<style lang="css" scoped>
-</style>
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js
index 459218469..89646b2ed 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js
@@ -6,7 +6,9 @@ const appMessages = {
          //
          social_issues: "Problématiques sociales",
          choose_other_social_issue: "ajouter une nouvelle problématique sociale...",
-         accompanying_actions: "Actions d'accompagnement",
+         social_actions: "Actions d'accompagnement",
+         select_first_a_social_issue: "Sélectionnez d'abord une problématique sociale",
+         
          //
          add_persons: "Ajouter des personnes concernées",
          bloc_persons: "Usagers",
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/store.js b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/store.js
index 4f30cf516..8e003dfc2 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/store.js
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/store.js
@@ -57,7 +57,7 @@ const store = createStore({
    },
    actions: {
       addPersonsInvolved({ commit }, payload) {
-         console.log('### action addPersonsInvolved', payload.result.type);
+         //console.log('### action addPersonsInvolved', payload.result.type);
          switch (payload.result.type) {
             case 'person':
                let aPersons = document.getElementById("chill_activitybundle_activity_persons");
@@ -75,7 +75,7 @@ const store = createStore({
          commit('addPersonsInvolved', payload);
       },
       removePersonInvolved({ commit }, payload) {
-         console.log('### action removePersonInvolved', payload);
+         //console.log('### action removePersonInvolved', payload);
          switch (payload.type) {
             case 'person':
                let aPersons = document.getElementById("chill_activitybundle_activity_persons");

From 3748b4fbf419014b5d8b7ec19390d3feef61e126 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Mon, 28 Jun 2021 16:40:55 +0200
Subject: [PATCH 08/11] vue activity: manage datas in store, not with data()

---
 .../Activity/components/SocialIssuesAcc.vue   | 155 +++++++-----------
 .../Resources/public/vuejs/Activity/i18n.js   |   2 +-
 .../Resources/public/vuejs/Activity/store.js  |  90 ++++++++--
 3 files changed, 136 insertions(+), 111 deletions(-)

diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue
index 0c0fcf38b..d35bbdc6c 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue
@@ -8,10 +8,10 @@
          <div class="grid-8">
             
             <check-social-issue
-               v-for="issue in socialIssues.list"
+               v-for="issue in socialIssuesList"
                v-bind:key="issue.id"
                v-bind:issue="issue"
-               v-bind:selection="socialIssues.selected"
+               v-bind:selection="socialIssuesSelected"
                @updateSelected="updateSelectedIssue">
             </check-social-issue>
             
@@ -30,9 +30,9 @@
                v-bind:searchable="true"
                v-bind:allow-empty="true" 
                v-bind:show-labels="false"
-               v-bind:loading="socialIssues.isLoading"
+               v-bind:loading="issueIsLoading"
                v-bind:placeholder="$t('activity.choose_other_social_issue')"
-               v-bind:options="socialIssues.other"
+               v-bind:options="socialIssuesOther"
                v-model="value"
                @select="addInSocialIssuesList">
                   
@@ -52,16 +52,16 @@
          </div>
          <div class="grid-8">
             
-            <div v-if="socialActions.isLoading === true">
+            <div v-if="actionIsLoading === true">
                <i class="chill-green fa fa-circle-o-notch fa-spin fa-lg"></i>
             </div>
             
             <check-social-action
-               v-if="socialIssues.selected.length"
-               v-for="action in socialActions.list"
+               v-if="socialIssuesSelected.length"
+               v-for="action in socialActionsList"
                v-bind:key="action.id"
                v-bind:action="action"
-               v-bind:selection="socialActions.selected"
+               v-bind:selection="socialActionsSelected"
                @updateSelected="updateSelectedAction">
             </check-social-action>
             
@@ -91,90 +91,73 @@ export default {
    },
    data() {
       return {
-         socialIssues: {
-            list: [],
-            selected: [],
-            other: [],
-            isLoading: false
-         },
-         socialActions: {
-            list: [],
-            selected: [],
-            isLoading: false
-         },
+         issueIsLoading: false,
+         actionIsLoading: false
       }
    },
    computed: {
-      accompanyingCourseSocialIssuesList() {
-         return readonly(this.$store.state.activity.accompanyingPeriod.socialIssues);
+      socialIssuesList() {
+         return this.$store.state.activity.accompanyingPeriod.socialIssues;
       },
-      activitySocialIssuesSelected() {
-         return readonly(this.$store.state.activity.socialIssues);
+      socialIssuesSelected() {
+         return this.$store.state.activity.socialIssues;
       },
-      activitySocialActionsSelected() {
-         return readonly(this.$store.state.activity.socialActions);
+      socialIssuesOther() {
+         return this.$store.state.socialIssuesOther;
+      },
+      socialActionsList() {
+         return this.$store.state.socialActionsList;
+      },
+      socialActionsSelected() {
+         return this.$store.state.activity.socialActions;
       }
    },
    mounted() {
-      // this.loadSocialIssues(); // TODO 1 ne pas muter le store
-      this.loadOthersSocialIssues();
+      console.log('load others issues in multiselect');
+      
+      this.issueIsLoading = true;
+      getSocialIssues().then(response => new Promise((resolve, reject) => {
+         this.$store.commit('updateSocialIssuesOther', response.results);
+         
+         this.socialIssuesSelected.forEach(issue => {
+            this.$store.commit('addSocialIssueInList', issue);
+         }, this);
+         
+         console.log(this.socialIssuesOther.length, this.socialIssuesOther);
+         this.socialIssuesList.forEach(issue => {
+            this.$store.commit('removeSocialIssueInOther', issue);
+         }, this);
+         console.log(this.socialIssuesOther.length); // grr !!! 
+         // TODO décompter les issues initiales du multiselect
+         
+         this.$store.commit('filterList', 'issues');
+         
+         this.socialActionsSelected.forEach(action => {
+            this.$store.commit('addSocialActionInList', action);
+         }, this);
+         this.$store.commit('filterList', 'actions');
+         
+         this.issueIsLoading = false;
+         resolve();
+      }));   
    },
    methods: {
-      /* When mounted, load SocialIssues associated to AccompanyingCourse (checkboxes)
-      */
-      loadSocialIssues() {
-         console.log('loadSocialIssues');
-         this.socialIssues.list = this.accompanyingCourseSocialIssuesList;
-      },
-      /* When loaded, load all others socialIssues in a multiselect
-      */
-      loadOthersSocialIssues() {
-         this.socialIssues.isLoading = true;
-         getSocialIssues().then(response => new Promise((resolve, reject) => {
-            console.log('load others issues in multiselect');
-            this.socialIssues.other = response.results;
-            
-            this.loadSelected();
-            this.socialIssues.isLoading = false;
-            resolve();
-         }));        
-      },
-      /* Load finally all issues and actions already linked to activity
-      */
-      loadSelected() {
-         console.log('loadSelected');
-         this.activitySocialIssuesSelected.forEach(issue => {
-            
-            this.addInSocialIssuesList(issue)
-            
-         }, this);
-         this.activitySocialActionsSelected.forEach(action => {
-            console.log('* add action', action.id);
-            
-            this.socialActions.list.push(action);
-            this.socialActions.selected.push(action);
-            
-            this.filterActionsList();
-            
-         }, this);
-      },
+   
       /* When choosing an issue in multiselect, add it in checkboxes (as selected), 
          remove it from multiselect, and add socialActions concerned
       */
       addInSocialIssuesList(value) {
          console.log('addInSocialIssuesList', value);
-         this.socialIssues.list.push(value);
-         this.socialIssues.other = this.socialIssues.other.filter(item => item !== value);
-         
-         this.socialIssues.selected.push(value);
+         this.$store.commit('addSocialIssueInList', value);
+         this.$store.commit('addSocialIssueSelected', value);
+         this.$store.commit('removeSocialIssueInOther', value);
          this.updateActionsList();
       },
       /* Update value for selected issues checkboxes
       */
       updateSelectedIssue(value) {
          console.log('updateSelectedIssue', value);
-         this.socialIssues.selected = value;
-         
+         this.$store.commit('updateSocialIssuesSelected', value);
          this.updateActionsList();
       },
       /* Add socialActions concerned: reset actions list, then loop on each issue selected 
@@ -183,41 +166,27 @@ export default {
       updateActionsList() {
          console.log('updateActionsList');
          
-         console.log('* reset actions list');
-         this.socialActions.list = [];
+         this.$store.commit('resetSocialActionList');
          
-         this.socialIssues.selected.forEach(item => {
-            console.log('* for issue', item.id);
+         this.socialIssuesSelected.forEach(item => {
+            console.log('for issue', item.id);
             
-            this.socialActions.isLoading = true;
+            this.actionIsLoading = true;
             getSocialActionByIssue(item.id)
             .then(actions => new Promise((resolve, reject) => {
                
                actions.results.forEach(action => {
-                  console.log('* add action', action.id);
-                  this.socialActions.list.push(action);
+                  this.$store.commit('addSocialActionInList', action);
                }, this);
                
-               this.filterActionsList();
-               this.socialActions.isLoading = false;
+               this.$store.commit('filterList', 'actions');
                
+               this.actionIsLoading = false;
                resolve();
             }));
          }, this);
-      },
-      /* Filter social actions list: order by and uniq
-      */
-      filterActionsList() {
-         console.log('filterActionsList', this.socialActions.list);
-         
-         console.log('* filter ' + this.socialActions.list.length + ' items: uniq');
-         // TODO 2 filtrer la liste pour supprimer les doublons
-         this.socialActions.list = this.socialActions.list.filter((v, i, a) => a.indexOf(v) === i);
-         //this.socialActions.list = [...new Set(this.socialActions.list)];
-         
-         console.log('* filter ' + this.socialActions.list.length + ' items: sort');
-         this.socialActions.list.sort((a,b) => (a.text > b.text) ? 1 : ((b.text > a.text) ? -1 : 0));
       }
+
    }
 }
 </script>
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js
index 89646b2ed..2af716fc7 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js
@@ -5,7 +5,7 @@ const appMessages = {
       activity: {
          //
          social_issues: "Problématiques sociales",
-         choose_other_social_issue: "ajouter une nouvelle problématique sociale...",
+         choose_other_social_issue: "ajouter une autre problématique sociale...",
          social_actions: "Actions d'accompagnement",
          select_first_a_social_issue: "Sélectionnez d'abord une problématique sociale",
          
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/store.js b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/store.js
index 8e003dfc2..3d4481fa6 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/store.js
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/store.js
@@ -4,28 +4,68 @@ import { createStore } from 'vuex';
 const debug = process.env.NODE_ENV !== 'production';
 //console.log('window.activity', window.activity);
 
-const addIdToValue = (string, id) => {
-   let array = string ? string.split(',') : [];
-   array.push(id.toString());
-   let str = array.join();
-   return str;
-};
-
-const removeIdFromValue = (string, id) => {
-   let array = string.split(',');
-   array = array.filter(el => el !== id.toString());
-   let str = array.join();
-   return str;
-};
-
 const store = createStore({
    strict: debug,
    state: {
-     activity: window.activity
-   },
-   getters: {
+     activity: window.activity,
+     socialIssuesOther: [],
+     socialActionsList: [],
    },
    mutations: {
+      
+      // SocialIssueAcc
+      addSocialIssueInList(state, issue) {
+         console.log('add list issue', issue.id);
+         state.activity.accompanyingPeriod.socialIssues.push(issue);         
+      },
+      addSocialIssueSelected(state, issue) {
+         console.log('add selected issue', issue.id);
+         state.activity.socialIssues.push(issue);
+      },
+      updateSocialIssuesSelected(state, issue) {
+         console.log('update selected issues');
+         state.activity.socialIssues = issue;
+      },
+      updateSocialIssuesOther(state, payload) {
+         console.log('update other issues');
+         state.socialIssuesOther = payload;
+      },
+      removeSocialIssueInOther(state, issue) {
+         console.log('remove other issue', issue.id);
+         state.socialIssuesOther = state.socialIssuesOther.filter(item => item !== issue);
+      },
+      resetSocialActionList(state) {
+         console.log('reset actions list');
+         state.socialActionsList = [];
+      },
+      addSocialActionInList(state, action) {
+         console.log('add list action', action.id);
+         state.socialActionsList.push(action);         
+      },
+      addSocialActionSelected(state, action) {
+         console.log('add selected action', action.id);
+         state.activity.socialActions.push(action);
+      },
+      filterList(state, list) {
+         const filterList = (list) => {
+            console.log('filter ' + list.length + ' items: uniq'); // grr !!!
+            // TODO un filtrage qui enlève les doublons
+            //list = list.filter((v, i, a) => a.indexOf(v) === i);
+            let _list = [...new Set(list)];
+            
+            console.log('filter ' + list.length + ' items: sort', list);
+            _list.sort((a,b) => (a.text > b.text) ? 1 : ((b.text > a.text) ? -1 : 0));
+            return _list;
+         };
+         if (list === 'issues') {
+            state.activity.accompanyingPeriod.socialIssues = filterList(state.activity.accompanyingPeriod.socialIssues);
+         }
+         if (list === 'actions') {
+            state.socialActionsList = filterList(state.socialActionsList);
+         }
+      },
+      
+      // ConcernedGroups
       addPersonsInvolved(state, payload) {
          //console.log('### mutation addPersonsInvolved', payload.result.type);
          switch (payload.result.type) {
@@ -58,6 +98,14 @@ const store = createStore({
    actions: {
       addPersonsInvolved({ commit }, payload) {
          //console.log('### action addPersonsInvolved', payload.result.type);
+         
+         const addIdToValue = (string, id) => {
+            let array = string ? string.split(',') : [];
+            array.push(id.toString());
+            let str = array.join();
+            return str;
+         };
+         
          switch (payload.result.type) {
             case 'person':
                let aPersons = document.getElementById("chill_activitybundle_activity_persons");
@@ -76,6 +124,14 @@ const store = createStore({
       },
       removePersonInvolved({ commit }, payload) {
          //console.log('### action removePersonInvolved', payload);
+         
+         const removeIdFromValue = (string, id) => {
+            let array = string.split(',');
+            array = array.filter(el => el !== id.toString());
+            let str = array.join();
+            return str;
+         };
+
          switch (payload.type) {
             case 'person':
                let aPersons = document.getElementById("chill_activitybundle_activity_persons");

From 020759180b8914013cc799be99a3bc8910c87c25 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Mon, 28 Jun 2021 20:07:53 +0200
Subject: [PATCH 09/11] prepare dispatch

---
 .../Activity/components/SocialIssuesAcc.vue   | 11 ++--
 .../Resources/public/vuejs/Activity/store.js  | 51 +++++++++++--------
 2 files changed, 37 insertions(+), 25 deletions(-)

diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue
index d35bbdc6c..b111ca6f4 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue
@@ -149,15 +149,15 @@ export default {
       addInSocialIssuesList(value) {
          console.log('addInSocialIssuesList', value);
          this.$store.commit('addSocialIssueInList', value);
-         this.$store.commit('addSocialIssueSelected', value);
          this.$store.commit('removeSocialIssueInOther', value);
+         this.$store.dispatch('addSocialIssueSelected', value);
          this.updateActionsList();
       },
       /* Update value for selected issues checkboxes
       */
       updateSelectedIssue(value) {
          console.log('updateSelectedIssue', value);
-         this.$store.commit('updateSocialIssuesSelected', value);
+         this.$store.dispatch('updateSocialIssuesSelected', value);
          this.updateActionsList();
       },
       /* Add socialActions concerned: reset actions list, then loop on each issue selected 
@@ -185,8 +185,13 @@ export default {
                resolve();
             }));
          }, this);
+      },
+      /* Update value for selected actions checkboxes
+      */
+      updateSelectedAction(value) {
+         console.log('updateSelectedAction', value);
+         this.$store.dispatch('updateSocialActionsSelected', value);
       }
-
    }
 }
 </script>
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/store.js b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/store.js
index 3d4481fa6..da79f8476 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/store.js
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/store.js
@@ -4,6 +4,20 @@ import { createStore } from 'vuex';
 const debug = process.env.NODE_ENV !== 'production';
 //console.log('window.activity', window.activity);
 
+const addIdToValue = (string, id) => {
+   let array = string ? string.split(',') : [];
+   array.push(id.toString());
+   let str = array.join();
+   return str;
+};
+
+const removeIdFromValue = (string, id) => {
+   let array = string.split(',');
+   array = array.filter(el => el !== id.toString());
+   let str = array.join();
+   return str;
+};
+
 const store = createStore({
    strict: debug,
    state: {
@@ -22,9 +36,9 @@ const store = createStore({
          console.log('add selected issue', issue.id);
          state.activity.socialIssues.push(issue);
       },
-      updateSocialIssuesSelected(state, issue) {
-         console.log('update selected issues');
-         state.activity.socialIssues = issue;
+      updateSocialIssuesSelected(state, issues) {
+         console.log('update selected issues', issues);
+         state.activity.socialIssues = issues;
       },
       updateSocialIssuesOther(state, payload) {
          console.log('update other issues');
@@ -42,9 +56,9 @@ const store = createStore({
          console.log('add list action', action.id);
          state.socialActionsList.push(action);         
       },
-      addSocialActionSelected(state, action) {
-         console.log('add selected action', action.id);
-         state.activity.socialActions.push(action);
+      updateSocialActionsSelected(state, actions) {
+         console.log('update selected actions', actions);
+         state.activity.socialActions = actions;
       },
       filterList(state, list) {
          const filterList = (list) => {
@@ -96,16 +110,17 @@ const store = createStore({
       }
    },
    actions: {
+      addSocialIssueSelected({ commit }, issue) {
+         commit('addSocialIssueSelected', issue);
+      },
+      updateSocialIssuesSelected({ commit }, payload) {
+         commit('updateSocialIssuesSelected', payload);
+      },
+      updateSocialActionsSelected({ commit }, payload) {
+         commit('updateSocialActionsSelected', payload);
+      },
       addPersonsInvolved({ commit }, payload) {
          //console.log('### action addPersonsInvolved', payload.result.type);
-         
-         const addIdToValue = (string, id) => {
-            let array = string ? string.split(',') : [];
-            array.push(id.toString());
-            let str = array.join();
-            return str;
-         };
-         
          switch (payload.result.type) {
             case 'person':
                let aPersons = document.getElementById("chill_activitybundle_activity_persons");
@@ -124,14 +139,6 @@ const store = createStore({
       },
       removePersonInvolved({ commit }, payload) {
          //console.log('### action removePersonInvolved', payload);
-         
-         const removeIdFromValue = (string, id) => {
-            let array = string.split(',');
-            array = array.filter(el => el !== id.toString());
-            let str = array.join();
-            return str;
-         };
-
          switch (payload.type) {
             case 'person':
                let aPersons = document.getElementById("chill_activitybundle_activity_persons");

From 6f1209eaf5323bb3b7084a495ca7c7c88e8b5c7f Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Mon, 28 Jun 2021 20:20:54 +0200
Subject: [PATCH 10/11] rename methods, improve logic

---
 .../Activity/components/SocialIssuesAcc.vue   | 46 +++++++++----------
 .../Resources/public/vuejs/Activity/i18n.js   |  2 +-
 .../Resources/public/vuejs/Activity/store.js  | 28 +++++------
 3 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue
index b111ca6f4..304a119bc 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue
@@ -12,7 +12,7 @@
                v-bind:key="issue.id"
                v-bind:issue="issue"
                v-bind:selection="socialIssuesSelected"
-               @updateSelected="updateSelectedIssue">
+               @updateSelected="updateIssuesSelected">
             </check-social-issue>
             
             <div class="my-3">
@@ -34,7 +34,7 @@
                v-bind:placeholder="$t('activity.choose_other_social_issue')"
                v-bind:options="socialIssuesOther"
                v-model="value"
-               @select="addInSocialIssuesList">
+               @select="addIssueInList">
                   
                <template v-slot:selection="{ values, search, isOpen }"><!-- {{ values.length }} {{ isOpen }} -->
                   <span v-if="values.length > 0" class="multiselect__single"></span>
@@ -62,7 +62,7 @@
                v-bind:key="action.id"
                v-bind:action="action"
                v-bind:selection="socialActionsSelected"
-               @updateSelected="updateSelectedAction">
+               @updateSelected="updateActionsSelected">
             </check-social-action>
             
             <span v-else class="inline-choice chill-no-data-statement mt-3">
@@ -117,15 +117,15 @@ export default {
       
       this.issueIsLoading = true;
       getSocialIssues().then(response => new Promise((resolve, reject) => {
-         this.$store.commit('updateSocialIssuesOther', response.results);
+         this.$store.commit('updateIssuesOther', response.results);
          
          this.socialIssuesSelected.forEach(issue => {
-            this.$store.commit('addSocialIssueInList', issue);
+            this.$store.commit('addIssueInList', issue);
          }, this);
          
          console.log(this.socialIssuesOther.length, this.socialIssuesOther);
          this.socialIssuesList.forEach(issue => {
-            this.$store.commit('removeSocialIssueInOther', issue);
+            this.$store.commit('removeIssueInOther', issue);
          }, this);
          console.log(this.socialIssuesOther.length); // grr !!! 
          // TODO décompter les issues initiales du multiselect
@@ -133,7 +133,7 @@ export default {
          this.$store.commit('filterList', 'issues');
          
          this.socialActionsSelected.forEach(action => {
-            this.$store.commit('addSocialActionInList', action);
+            this.$store.commit('addActionInList', action);
          }, this);
          this.$store.commit('filterList', 'actions');
          
@@ -146,27 +146,33 @@ export default {
       /* When choosing an issue in multiselect, add it in checkboxes (as selected), 
          remove it from multiselect, and add socialActions concerned
       */
-      addInSocialIssuesList(value) {
-         console.log('addInSocialIssuesList', value);
-         this.$store.commit('addSocialIssueInList', value);
-         this.$store.commit('removeSocialIssueInOther', value);
-         this.$store.dispatch('addSocialIssueSelected', value);
+      addIssueInList(value) {
+         console.log('addIssueInList', value);
+         this.$store.commit('addIssueInList', value);
+         this.$store.commit('removeIssueInOther', value);
+         this.$store.dispatch('addIssueSelected', value);
          this.updateActionsList();
       },
       /* Update value for selected issues checkboxes
       */
-      updateSelectedIssue(value) {
-         console.log('updateSelectedIssue', value);
-         this.$store.dispatch('updateSocialIssuesSelected', value);
+      updateIssuesSelected(issues) {
+         console.log('updateIssuesSelected', issues);
+         this.$store.dispatch('updateIssuesSelected', issues);
          this.updateActionsList();
       },
+      /* Update value for selected actions checkboxes
+      */
+      updateActionsSelected(actions) {
+         console.log('updateActionsSelected', actions);
+         this.$store.dispatch('updateActionsSelected', actions);
+      },
       /* Add socialActions concerned: reset actions list, then loop on each issue selected 
          to get social actions concerned
       */
       updateActionsList() {
          console.log('updateActionsList');
          
-         this.$store.commit('resetSocialActionList');
+         this.$store.commit('resetActionsList');
          
          this.socialIssuesSelected.forEach(item => {
             console.log('for issue', item.id);
@@ -176,7 +182,7 @@ export default {
             .then(actions => new Promise((resolve, reject) => {
                
                actions.results.forEach(action => {
-                  this.$store.commit('addSocialActionInList', action);
+                  this.$store.commit('addActionInList', action);
                }, this);
                
                this.$store.commit('filterList', 'actions');
@@ -185,12 +191,6 @@ export default {
                resolve();
             }));
          }, this);
-      },
-      /* Update value for selected actions checkboxes
-      */
-      updateSelectedAction(value) {
-         console.log('updateSelectedAction', value);
-         this.$store.dispatch('updateSocialActionsSelected', value);
       }
    }
 }
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js
index 2af716fc7..3262a37a5 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js
@@ -5,7 +5,7 @@ const appMessages = {
       activity: {
          //
          social_issues: "Problématiques sociales",
-         choose_other_social_issue: "ajouter une autre problématique sociale...",
+         choose_other_social_issue: "Ajouter une autre problématique sociale...",
          social_actions: "Actions d'accompagnement",
          select_first_a_social_issue: "Sélectionnez d'abord une problématique sociale",
          
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/store.js b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/store.js
index da79f8476..22b186b99 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/store.js
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/store.js
@@ -28,35 +28,35 @@ const store = createStore({
    mutations: {
       
       // SocialIssueAcc
-      addSocialIssueInList(state, issue) {
+      addIssueInList(state, issue) {
          console.log('add list issue', issue.id);
          state.activity.accompanyingPeriod.socialIssues.push(issue);         
       },
-      addSocialIssueSelected(state, issue) {
+      addIssueSelected(state, issue) {
          console.log('add selected issue', issue.id);
          state.activity.socialIssues.push(issue);
       },
-      updateSocialIssuesSelected(state, issues) {
+      updateIssuesSelected(state, issues) {
          console.log('update selected issues', issues);
          state.activity.socialIssues = issues;
       },
-      updateSocialIssuesOther(state, payload) {
+      updateIssuesOther(state, payload) {
          console.log('update other issues');
          state.socialIssuesOther = payload;
       },
-      removeSocialIssueInOther(state, issue) {
+      removeIssueInOther(state, issue) {
          console.log('remove other issue', issue.id);
          state.socialIssuesOther = state.socialIssuesOther.filter(item => item !== issue);
       },
-      resetSocialActionList(state) {
+      resetActionsList(state) {
          console.log('reset actions list');
          state.socialActionsList = [];
       },
-      addSocialActionInList(state, action) {
+      addActionInList(state, action) {
          console.log('add list action', action.id);
          state.socialActionsList.push(action);         
       },
-      updateSocialActionsSelected(state, actions) {
+      updateActionsSelected(state, actions) {
          console.log('update selected actions', actions);
          state.activity.socialActions = actions;
       },
@@ -110,14 +110,14 @@ const store = createStore({
       }
    },
    actions: {
-      addSocialIssueSelected({ commit }, issue) {
-         commit('addSocialIssueSelected', issue);
+      addIssueSelected({ commit }, issue) {
+         commit('addIssueSelected', issue);
       },
-      updateSocialIssuesSelected({ commit }, payload) {
-         commit('updateSocialIssuesSelected', payload);
+      updateIssuesSelected({ commit }, payload) {
+         commit('updateIssuesSelected', payload);
       },
-      updateSocialActionsSelected({ commit }, payload) {
-         commit('updateSocialActionsSelected', payload);
+      updateActionsSelected({ commit }, payload) {
+         commit('updateActionsSelected', payload);
       },
       addPersonsInvolved({ commit }, payload) {
          //console.log('### action addPersonsInvolved', payload.result.type);

From b705c5910f07bdbf96c5f63aec4a6fd544a95308 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Mon, 28 Jun 2021 20:46:30 +0200
Subject: [PATCH 11/11] dispatch action change value of hidden fields,
 persisted when submited

---
 .../ChillActivityBundle/Form/ActivityType.php | 68 ++++++++++---------
 .../Activity/components/SocialIssuesAcc.vue   |  1 +
 .../Resources/public/vuejs/Activity/store.js  | 12 ++++
 .../Resources/views/Activity/edit.html.twig   |  3 +-
 4 files changed, 50 insertions(+), 34 deletions(-)

diff --git a/src/Bundle/ChillActivityBundle/Form/ActivityType.php b/src/Bundle/ChillActivityBundle/Form/ActivityType.php
index 221de2e5d..80d0991e7 100644
--- a/src/Bundle/ChillActivityBundle/Form/ActivityType.php
+++ b/src/Bundle/ChillActivityBundle/Form/ActivityType.php
@@ -112,41 +112,45 @@ class ActivityType extends AbstractType
         }
 
         if ($activityType->isVisible('socialIssues') && $accompanyingPeriod) {
-            $builder->add('socialIssues', 
-            /*
-            HiddenType::class
-            */
-            EntityType::class, [
-                'label' => $activityType->getLabel('socialIssues'),
-                'required' => $activityType->isRequired('socialIssues'),
-                'class' => SocialIssue::class,
-                'choice_label' => function (SocialIssue $socialIssue) {
-                    return $this->socialIssueRender->renderString($socialIssue, []);
-                },
-                'multiple' => true,
-                'choices' => $accompanyingPeriod->getRecursiveSocialIssues(),
-                'expanded' => true,
-            ] 
-            );
+            $builder->add('socialIssues', HiddenType::class);
+            $builder->get('socialIssues')
+               ->addModelTransformer(new CallbackTransformer(
+                   function (iterable $socialIssuesAsIterable): string {
+                       $socialIssueIds = [];
+                       foreach ($socialIssuesAsIterable as $value) {
+                          $socialIssueIds[] = $value->getId();
+                       }
+                       return implode(',', $socialIssueIds);
+                   },
+                   function (?string $socialIssuesAsString): array {
+                       return array_map(
+                          fn(string $id): ?SocialIssue => $this->om->getRepository(SocialIssue::class)->findOneBy(['id' => (int) $id]),
+                          explode(',', $socialIssuesAsString)
+                       );
+                   }
+               ))
+           ;
         }
 
         if ($activityType->isVisible('socialActions') && $accompanyingPeriod) {
-            $builder->add('socialActions', 
-            /*
-            HiddenType::class
-            */
-            EntityType::class, [
-                'label' => $activityType->getLabel('socialActions'),
-                'required' => $activityType->isRequired('socialActions'),
-                'class' => SocialAction::class,
-                'choice_label' => function (SocialAction $socialAction) {
-                    return $this->socialActionRender->renderString($socialAction, []);
-                },
-                'multiple' => true,
-                'choices' => $accompanyingPeriod->getRecursiveSocialActions(),
-                'expanded' => true,
-            ] 
-            );
+            $builder->add('socialActions', HiddenType::class);
+            $builder->get('socialActions')
+               ->addModelTransformer(new CallbackTransformer(
+                   function (iterable $socialActionsAsIterable): string {
+                       $socialActionIds = [];
+                       foreach ($socialActionsAsIterable as $value) {
+                          $socialActionIds[] = $value->getId();
+                       }
+                       return implode(',', $socialActionIds);
+                   },
+                   function (?string $socialActionsAsString): array {
+                       return array_map(
+                          fn(string $id): ?SocialAction => $this->om->getRepository(SocialAction::class)->findOneBy(['id' => (int) $id]),
+                          explode(',', $socialActionsAsString)
+                       );
+                   }
+               ))
+           ;
         }
 
         if ($activityType->isVisible('date')) {
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue
index 304a119bc..4ac1b1957 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue
@@ -69,6 +69,7 @@
                {{ $t('activity.select_first_a_social_issue') }}
             </span>
             
+            
          </div>
       </div>
       
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/store.js b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/store.js
index 22b186b99..9684ab375 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/store.js
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/store.js
@@ -111,12 +111,24 @@ const store = createStore({
    },
    actions: {
       addIssueSelected({ commit }, issue) {
+         let aSocialIssues = document.getElementById("chill_activitybundle_activity_socialIssues");
+         aSocialIssues.value = addIdToValue(aSocialIssues.value, issue.id);
          commit('addIssueSelected', issue);
       },
       updateIssuesSelected({ commit }, payload) {
+         let aSocialIssues = document.getElementById("chill_activitybundle_activity_socialIssues");
+         aSocialIssues.value = '';
+         payload.forEach(item => {
+            aSocialIssues.value = addIdToValue(aSocialIssues.value, item.id);
+         });
          commit('updateIssuesSelected', payload);
       },
       updateActionsSelected({ commit }, payload) {
+         let aSocialActions = document.getElementById("chill_activitybundle_activity_socialActions");
+         aSocialActions.value = '';
+         payload.forEach(item => {
+            aSocialActions.value = addIdToValue(aSocialActions.value, item.id);
+         });
          commit('updateActionsSelected', payload);
       },
       addPersonsInvolved({ commit }, payload) {
diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/edit.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/edit.html.twig
index e588d7a62..56a7c96b4 100644
--- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/edit.html.twig
+++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/edit.html.twig
@@ -23,7 +23,6 @@
     {{ form_row(edit_form.scope) }}
 {% endif %}
 
-<!--
 {%- if edit_form.socialIssues is defined -%}
     {{ form_row(edit_form.socialIssues) }}
 {% endif %}
@@ -31,7 +30,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 -%}