From fb42625354bca0f1e427a6075306637aec4cd9d8 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Wed, 14 Dec 2022 07:58:16 +0100
Subject: [PATCH] Allow multi-circle selection in cockpit

---
 client/src/pages/cockpit/CockpitIndexPage.vue | 11 ++---------
 client/src/stores/cockpit.ts                  | 17 ++++++++++++++---
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/client/src/pages/cockpit/CockpitIndexPage.vue b/client/src/pages/cockpit/CockpitIndexPage.vue
index 38714db5..ff5a899e 100644
--- a/client/src/pages/cockpit/CockpitIndexPage.vue
+++ b/client/src/pages/cockpit/CockpitIndexPage.vue
@@ -27,7 +27,6 @@ function userCountStatus(userId: number) {
 }
 
 const data = {
-  circles: ["KMU Teil 1", "KMU Teil 2", "3-Säuli-Prinzip"],
   transferProgress: {
     fail: 0,
     success: 3,
@@ -35,17 +34,11 @@ const data = {
   },
 };
 
-const selectedCircle = ref(1);
-
 function setActiveClasses(id: number) {
-  return cockpitStore.selectedCircle === id
+  return cockpitStore.selectedCircles.indexOf(id) > -1
     ? ["bg-blue-900", "text-white"]
     : ["text-bg-900"];
 }
-
-function setActiveCircle(id: number) {
-  cockpitStore.selectedCircle = id;
-}
 </script>
 
 <template>
@@ -62,7 +55,7 @@ function setActiveCircle(id: number) {
             <button
               class="border-2 border-blue-900 rounded-full px-4 mr-4 last:mr-0"
               :class="setActiveClasses(circle.id)"
-              @click="setActiveCircle(circle.id)"
+              @click="cockpitStore.toggleCourseSelection(circle.id)"
             >
               {{ circle.title }}
             </button>
diff --git a/client/src/stores/cockpit.ts b/client/src/stores/cockpit.ts
index 336874ca..d5e333af 100644
--- a/client/src/stores/cockpit.ts
+++ b/client/src/stores/cockpit.ts
@@ -7,7 +7,7 @@ import { defineStore } from "pinia";
 export type CockpitStoreState = {
   courseSessionUsers: CourseSessionUser[] | undefined;
   cockpitSessionUser: ExpertSessionUser | undefined;
-  selectedCircle: number;
+  selectedCircles: number[];
 };
 
 export const useCockpitStore = defineStore({
@@ -16,7 +16,7 @@ export const useCockpitStore = defineStore({
     return {
       courseSessionUsers: undefined,
       cockpitSessionUser: undefined,
-      selectedCircle: -1,
+      selectedCircles: [],
     } as CockpitStoreState;
   },
   getters: {
@@ -33,7 +33,7 @@ export const useCockpitStore = defineStore({
       this.cockpitSessionUser = data.cockpit_user;
 
       if (this.cockpitSessionUser.circles?.length > 0) {
-        this.selectedCircle = this.cockpitSessionUser.circles[0].id;
+        this.selectedCircles = [this.cockpitSessionUser.circles[0].id];
       }
 
       if (!this.courseSessionUsers) {
@@ -41,5 +41,16 @@ export const useCockpitStore = defineStore({
       }
       return this.courseSessionUsers;
     },
+    toggleCourseSelection(id: number) {
+      if (this.selectedCircles.indexOf(id) < 0) {
+        this.selectedCircles.push(id);
+      } else {
+        if (this.selectedCircles.length === 1) {
+          return;
+        }
+        const index = this.selectedCircles.indexOf(id);
+        this.selectedCircles.splice(index, 1);
+      }
+    },
   },
 });