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">
+    <div>
-    <FullCalendar ref="fullCalendar" :options="calendarOptions">
+      <template v-for="uid in this.$store.state.currentView.users.keys()" :key="uid">
-      <template v-slot:eventContent='arg'>
+        <calendar-active :user="this.$store.getters.getUserDataById(uid).user" ></calendar-active>
-        <b>{{ arg.timeText }}</b>
-        <i>&nbsp;{{ arg.event.title }}</i>
       </template>
-    </FullCalendar>
+    </div>
-  </teleport>
+    <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() {

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/Components/CalendarActive.vue

@@ -0,0 +1,34 @@
+<template>
+<span class="badge" :style="style">{{ user.text }}</span>
+</template>
+
+<script>
+import {mapGetters} from 'vuex';
+
+export default {
+  name: "CalendarActive",
+  props: ['user'],
+  computed: {
+    style() {
+      return {
+        backgroundColor: this.$store.getters.getUserData(this.user).mainColor,
+      };
+    },
+    mainColor() {
+      return 'blue';
+      console.log('mainColor userId', this.userId);
+      console.log(this.$store.state.usersData);
+
+      if (!this.$store.getters.hasUserDataById(this.userId)) {
+        return 'blue';
+      }
+
+      return this.$store.getters.getUserDataById(this.userId).mainColor;
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/actions.js

@@ -18,10 +18,11 @@ export default {
       }
 
       let promises = [];
-      if (null !== getters.getMainUser) {
+      for (const uid of state.currentView.users.keys()) {
+        console.log('fetchCalendarEventsFor', uid);
         promises.push(
           dispatch('fetchCalendarRangeForUser',
-            {user: getters.getMainUser, start: state.currentView.start, end: state.currentView.end})
+            {user: state.usersData.get(uid).user, start: state.currentView.start, end: state.currentView.end})
         );
       }
 

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/getters.js

@@ -77,6 +77,9 @@ export default {
   getUserData: (state) => (user) => {
     return state.usersData.get(user.id);
   },
+  getUserDataById: (state) => (userId) => {
+    return state.usersData.get(userId);
+  },
   /**
    * return true if the user has an entry in userData
    *
@@ -86,6 +89,9 @@ export default {
   hasUserData: (state) => (user) => {
     return state.usersData.has(user.id);
   },
+  hasUserDataById: (state) => (userId) => {
+    return state.usersData.has(userId);
+  },
   /**
    * return true if there was a fetch query for event between this date (start and end),
    * those date are included.

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/store/mutations.js

@@ -10,7 +10,11 @@ export default {
   },
   showUserOnCalendar(state, {user, what}) {
     console.log('showUserOnCalendar', {user: user.id, what});
+    if (!state.usersData.has(user.id)) {
+      state.usersData.set(user.id, createUserData(user, state.usersData.size));
+    }
     state.currentView.users.set(user.id, what);
+    console.log('state at end', state);
   },
 
   // ConcernedGroups