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/ChillMainBundle/Resources/public/types.ts

@@ -30,6 +30,11 @@ export interface Scope {
     };
 }
 
+export interface ResultItem<T> {
+    result: T;
+    relevance: number;
+}
+
 export interface User {
     type: "user";
     id: number;
@@ -43,12 +48,13 @@ export interface User {
 }
 
 export interface UserGroup {
-    type: "chill_main_user_group" | "user_group";
+    type: "user_group";
     id: number;
     label: TranslatableString;
     backgroundColor: string;
     foregroundColor: string;
     excludeKey: string;
+    text: string;
 }
 
 export type UserGroupOrUser = User | UserGroup;

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Entity/UserGroupRenderBox.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import {UserGroup} from "../../../types";
+import {computed} from "vue";
+
+interface UserGroupRenderBoxProps {
+    userGroup: UserGroup;
+}
+
+const props = defineProps<UserGroupRenderBoxProps>();
+
+const styles = computed<{color: string, "background-color": string}>(() => {
+    return {
+        color: props.userGroup.foregroundColor,
+        "background-color": props.userGroup.backgroundColor,
+    }
+});
+
+</script>
+
+<template>
+    <span class="badge-user-group" :style="styles">{{ userGroup.label.fr }}</span>
+</template>
+
+<style scoped lang="scss">
+
+</style>