calendar app: fix list for showing users and their colors (not in rgith place in page)

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue

@@ -1,13 +1,18 @@
 <template>
   <concerned-groups></concerned-groups>
-  <teleport to="#fullCalendar">
-    <FullCalendar ref="fullCalendar" :options="calendarOptions">
-      <template v-slot:eventContent='arg'>
-        <b>{{ arg.timeText }}</b>
-        <i>&nbsp;{{ arg.event.title }}</i>
+    <div>
+      <template v-for="uid in this.$store.state.currentView.users.keys()" :key="uid">
+        <calendar-active :user="this.$store.getters.getUserDataById(uid).user" ></calendar-active>
       </template>
-    </FullCalendar>
-  </teleport>
+    </div>
+    <teleport to="#fullCalendar">
+      <FullCalendar ref="fullCalendar" :options="calendarOptions">
+        <template v-slot:eventContent='arg'>
+          <b>{{ arg.timeText }}</b>
+          <i>&nbsp;{{ arg.event.title }}</i>
+        </template>
+      </FullCalendar>
+    </teleport>
   <location></location>
 </template>
 
@@ -22,6 +27,7 @@ import FullCalendar from '@fullcalendar/vue3';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import interactionPlugin from '@fullcalendar/interaction';
 import timeGridPlugin from '@fullcalendar/timegrid';
+import CalendarActive from './Components/CalendarActive';
 // import listPlugin from '@fullcalendar/list';
 
 export default {
@@ -29,8 +35,8 @@ export default {
   components: {
     ConcernedGroups,
     Location,
-    CalendarUserSelector,
-    FullCalendar
+    FullCalendar,
+    CalendarActive,
   },
   data() {
     return {
@@ -89,6 +95,11 @@ export default {
         }
       };
     },
+    getActiveUsers() {
+      return this.$store.state.currentView.users.keys()
+        .filter(id => this.$store.getters.hasUserDataById(id))
+        .map(id => this.$store.getters.getUserDataById().user);
+    }
   },
   methods: {
     init() {