Add v-slot and adapt PickEntity to use

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

@@ -1,30 +1,46 @@
 <template>
   <teleport to="#add-persons" v-if="isComponentVisible">
-    <div class="flex-bloc concerned-groups" :class="getContext">
-      <persons-bloc
-        v-for="bloc in contextPersonsBlocs"
-        :key="bloc.key"
-        :bloc="bloc"
-        :bloc-width="getBlocWidth"
-        :set-persons-in-bloc="setPersonsInBloc"
-        :remove-person-involved="removePersonInvolved"
-      />
-    </div>
-
     <ul class="record_actions">
-      <li class="add-persons">
+      <li class="add-persons w-100">
         <pick-entity
+          class="w-100 d-block"
           :uniqid="pickEntityUniqId"
           :types="pickEntityTypes"
           :picked="pickedEntities"
           :multiple="true"
           :removable-if-set="false"
-          :display-picked="false"
+          :display-picked="true"
           :suggested="suggestedEntities"
           :label="trans(ACTIVITY_ADD_PERSONS)"
           @add-new-entity="addNewEntityFromPicker"
           @add-new-entity-process-ended="setPersonsInBloc"
-        />
+        >
+          <template #picked-entities>
+            <div class="flex-bloc concerned-groups" :class="getContext">
+              <div
+                v-for="bloc in contextPersonsBlocs"
+                :key="bloc.key"
+                class="mb-3"
+              >
+                <label class="col-form-label row required">{{
+                  $t(bloc.title)
+                }}</label>
+                <div class="row">
+                  <ul
+                    class="list-suggest remove-items inline concerned-groups-badges"
+                  >
+                    <person-badge
+                      v-for="person in bloc.persons"
+                      :key="person.id"
+                      :person="person"
+                      @remove="removePersonInvolved"
+                    />
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </template>
+        </pick-entity>
       </li>
     </ul>
   </teleport>
@@ -33,7 +49,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
 import PickEntity from "ChillMainAssets/vuejs/PickEntity/PickEntity.vue";
-import PersonsBloc from "./ConcernedGroups/PersonsBloc.vue";
+import PersonBadge from "./ConcernedGroups/PersonBadge.vue";
 
 import { Entities, EntitiesOrMe, EntityType } from "ChillPersonAssets/types";
 import {
@@ -224,10 +240,6 @@ const pickedEntities = computed<Entities[]>(() => {
   return [...persons.value, ...thirdParties.value, ...users.value];
 });
 
-const getBlocWidth = computed(() => {
-  return `${Math.round(100 / contextPersonsBlocs.value.length)}%`;
-});
-
 const getCourseParticipations = (): Entities[] => {
   const participations: Entities[] = [];
   accompanyingCourse.value?.participations.forEach(
@@ -357,4 +369,38 @@ watch(
 );
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.concerned-groups {
+  display: flex;
+  flex-direction: column;
+}
+
+.concerned-groups .item-bloc {
+  flex-basis: 100%;
+  width: 100%;
+}
+
+.concerned-groups-input {
+  min-height: calc(1.5em + 0.75rem + 2px);
+  padding: 0.25rem 0.5rem;
+}
+
+.concerned-groups-badges {
+  margin: 0;
+  padding-left: 0;
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  width: 100%;
+}
+
+.concerned-groups-badges li {
+  margin: 0;
+}
+
+.record_actions > li.add-persons {
+  width: 100%;
+  flex-basis: 100%;
+}
+</style>

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

@@ -1,39 +0,0 @@
-<template>
-  <div class="item-bloc" :style="{ 'flex-basis': blocWidth }">
-    <div class="item-row">
-      <div class="item-col">
-        <h4>{{ $t(bloc.title) }}</h4>
-      </div>
-      <div class="item-col">
-        <ul class="list-suggest remove-items">
-          <person-badge
-            v-for="person in bloc.persons"
-            :key="person.id"
-            :person="person"
-            @remove="removePerson"
-          />
-        </ul>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import PersonBadge from "./PersonBadge.vue";
-export default {
-  name: "PersonsBloc",
-  components: {
-    PersonBadge,
-  },
-  props: ["bloc", "setPersonsInBloc", "blocWidth", "removePersonInvolved"],
-  methods: {
-    removePerson(item) {
-      console.log("@@ CLICK remove person: item", item);
-      this.removePersonInvolved(item);
-      this.setPersonsInBloc();
-    },
-  },
-};
-</script>
-
-<style lang="scss"></style>

src/Bundle/ChillMainBundle/Resources/public/vuejs/PickEntity/PickEntity.vue

@@ -1,34 +1,47 @@
 <template>
-  <div class="grey-card p-2">
-    <ul :class="listClasses" v-if="displayPicked">
-      <li
-        v-for="p in picked"
-        @click="removeEntity(p)"
-        :key="p === 'me' ? 'me' : p.type + p.id"
-      >
-        <span
-          v-if="'me' === p"
-          class="chill_denomination current-user updatedBy"
-          >{{ trans(USER_CURRENT_USER) }}</span
+  <div class="grey-card w-100 p-2">
+    <slot
+      name="picked-entities"
+      v-if="displayPicked"
+      :picked="picked"
+      :list-classes="listClasses"
+      :remove-entity="removeEntity"
+      :is-entity-household="isEntityHousehold"
+      :get-badge-class="getBadgeClass"
+      :get-badge-style="getBadgeStyle"
+      :trans="trans"
+      :current-user-label-key="USER_CURRENT_USER"
+    >
+      <ul :class="listClasses">
+        <li
+          v-for="p in picked"
+          @click="removeEntity(p)"
+          :key="p === 'me' ? 'me' : p.type + p.id"
         >
-        <span
-          v-else-if="!isEntityHousehold(p)"
-          :class="getBadgeClass(p)"
-          class="chill_denomination"
-          :style="getBadgeStyle(p)"
-        >
-          {{ p.text }}
-        </span>
-        <span
-          v-else
-          :class="getBadgeClass(p)"
-          class="chill_denomination"
-          :style="getBadgeStyle(p)"
-        >
-          Ménage n°{{ p.id }}
-        </span>
-      </li>
-    </ul>
+          <span
+            v-if="'me' === p"
+            class="chill_denomination current-user updatedBy"
+            >{{ trans(USER_CURRENT_USER) }}</span
+          >
+          <span
+            v-else-if="!isEntityHousehold(p)"
+            :class="getBadgeClass(p)"
+            class="chill_denomination"
+            :style="getBadgeStyle(p)"
+          >
+            {{ p.text }}
+          </span>
+          <span
+            v-else
+            :class="getBadgeClass(p)"
+            class="chill_denomination"
+            :style="getBadgeStyle(p)"
+          >
+            Ménage n°{{ p.id }}
+          </span>
+        </li>
+      </ul>
+    </slot>
     <ul class="record_actions mb-0">
       <li v-if="isCurrentUserPicker" class="btn btn-sm btn-misc">
         <label class="flex items-center gap-1">
@@ -42,7 +55,7 @@
           {{ trans(USER_CURRENT_USER) }}
         </label>
       </li>
-      <li class="add-persons">
+      <li class="add-persons w-100">
         <add-persons
           :options="addPersonsOptions"
           :key="uniqid"
@@ -122,6 +135,19 @@ const emits = defineEmits<{
   (e: "addNewEntityProcessEnded"): void;
 }>();
 
+defineSlots<{
+  "picked-entities"?: (props: {
+    picked: EntitiesOrMe[];
+    listClasses: Record<string, boolean>;
+    removeEntity: (entity: EntitiesOrMe) => void;
+    isEntityHousehold: typeof isEntityHousehold;
+    getBadgeClass: (entities: Entities) => string;
+    getBadgeStyle: (entities: Entities) => string[];
+    trans: typeof trans;
+    currentUserLabelKey: typeof USER_CURRENT_USER;
+  }) => unknown;
+}>();
+
 const itsMeCheckbox = ref<null | HTMLInputElement>(null);
 const addPersons = ref();