Create a PickUserGroupOrUserDynamicType

- add necessary vue component to render usergroup within the component AddPersons;
- add necessary normalization and denormalization process for matching the selected usergroup with entities in database

src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss

@@ -238,6 +238,10 @@ div[class*='budget-'] {
         background-color: $chill-ll-gray;
         color: $chill-blue;
     }
+    &.bg-user-group {
+        background-color: $chill-l-gray;
+        color: $chill-blue;
+    }
     &.bg-confidential {
         background-color: $chill-ll-gray;
         color: $chill-red;

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue

@@ -27,6 +27,11 @@
             v-bind:item="item">
          </suggestion-user>
 
+        <suggestion-user-group
+            v-if="item.result.type === 'user_group'"
+            v-bind:item="item">
+        ></suggestion-user-group>
+
          <suggestion-household
                v-if="item.result.type === 'household'"
                v-bind:item="item">
@@ -41,6 +46,7 @@ import SuggestionPerson from './TypePerson';
 import SuggestionThirdParty from './TypeThirdParty';
 import SuggestionUser from './TypeUser';
 import SuggestionHousehold from './TypeHousehold';
+import SuggestionUserGroup from './TypeUserGroup';
 
 export default {
    name: 'PersonSuggestion',
@@ -49,6 +55,7 @@ export default {
       SuggestionThirdParty,
       SuggestionUser,
       SuggestionHousehold,
+      SuggestionUserGroup,
    },
    props: [
       'item',

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/TypeUserGroup.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+
+import {ResultItem, UserGroup} from "../../../../../../ChillMainBundle/Resources/public/types";
+import BadgeEntity from "ChillMainAssets/vuejs/_components/BadgeEntity.vue";
+import UserRenderBoxBadge from "ChillMainAssets/vuejs/_components/Entity/UserRenderBoxBadge.vue";
+import UserGroupRenderBox from "ChillMainAssets/vuejs/_components/Entity/UserGroupRenderBox.vue";
+
+interface TypeUserGroupProps {
+  item: ResultItem<UserGroup>;
+}
+
+const props = defineProps<TypeUserGroupProps>();
+</script>
+
+<template>
+  <div class="container user-group-container">
+    <div class="user-group-identification">
+      <user-group-render-box :user-group="props.item.result"></user-group-render-box>
+    </div>
+  </div>
+  <div class="right_actions">
+    <span class="badge rounded-pill bg-user-group">
+        Groupe d'utilisateur
+    </span>
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>