Merge branch '363-display_actions_by_issue' into 'master'

Resolve "Change display of social issues and social actions"

Closes #363

See merge request Chill-Projet/chill-bundles!802

.changes/unreleased/Feature-20250224-150047.yaml

@@ -0,0 +1,6 @@
+kind: Feature
+body: Display social actions grouped per social issue within activity form
+time: 2025-02-24T15:00:47.139983981+01:00
+custom:
+    Issue: "363"
+    SchemaChange: No schema change

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

@@ -68,14 +68,23 @@
                             socialActionsSelected.length)
                     "
                 >
+                    <div
+                        id="actionsList"
+                        v-for="group in socialActionsList"
+                        :key="group.issue"
+                    >
+                        <span class="badge bg-chill-l-gray text-dark">{{
+                            group.issue
+                        }}</span>
                         <check-social-action
-                        v-for="action in socialActionsList"
+                            v-for="action in group.actions"
                             :key="action.id"
                             :action="action"
                             :selection="socialActionsSelected"
                             @updateSelected="updateActionsSelected"
                         >
                         </check-social-action>
+                    </div>
                 </template>
 
                 <span
@@ -249,7 +258,23 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "ChillMainAssets/module/bootstrap/shared";
+@import "ChillPersonAssets/chill/scss/mixins";
+@import "ChillMainAssets/chill/scss/chill_variables";
+
 span.multiselect__single {
     display: none !important;
 }
+
+#actionsList {
+    border-radius: 0.5rem;
+    padding: 1rem;
+    margin: 0.5rem;
+    background-color: whitesmoke;
+}
+
+span.badge {
+    margin-bottom: 0.5rem;
+    @include badge_social($social-issue-color);
+}
 </style>

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

@@ -10,7 +10,9 @@
                 :value="action"
             />
             <label class="form-check-label" :for="action.id">
-                <span class="badge bg-light text-dark">{{ action.text }}</span>
+                <span class="badge bg-light text-dark" :title="action.text">{{
+                    action.text
+                }}</span>
             </label>
         </div>
     </span>
@@ -43,5 +45,9 @@ span.badge {
     font-size: 95%;
     margin-bottom: 5px;
     margin-right: 1em;
+    max-width: 100%; /* Adjust as needed */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 </style>

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

@@ -124,9 +124,19 @@ const store = createStore({
         );
     },
     socialActionsListSorted(state) {
-      return [...state.socialActionsList].sort(
+      return [...state.socialActionsList]
-        (a, b) => a.ordering - b.ordering,
+        .sort((a, b) => a.ordering - b.ordering)
-      );
+        .reduce((acc, action) => {
+          const issueText = action.issue?.text || "Uncategorized";
+          // Find if the group for the issue already exists
+          let group = acc.find((item) => item.issue === issueText);
+          if (!group) {
+            group = { issue: issueText, actions: [] };
+            acc.push(group);
+          }
+          group.actions.push(action);
+          return acc;
+        }, []);
     },
   },
   mutations: {