ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Allow multi-circle selection in cockpit

This commit is contained in:
Christian Cueni 2022-12-14 07:58:16 +01:00
parent b950f11942
commit fb42625354
2 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
client/src/pages/cockpit/CockpitIndexPage.vue
View File

@ -27,7 +27,6 @@ function userCountStatus(userId: number) {
} }
const data = { const data = {
circles: ["KMU Teil 1", "KMU Teil 2", "3-Säuli-Prinzip"],
transferProgress: { transferProgress: {
fail: 0, fail: 0,
success: 3, success: 3,
@ -35,17 +34,11 @@ const data = {
}, },
}; };
const selectedCircle = ref(1);
function setActiveClasses(id: number) { function setActiveClasses(id: number) {
return cockpitStore.selectedCircle === id return cockpitStore.selectedCircles.indexOf(id) > -1
? ["bg-blue-900", "text-white"] ? ["bg-blue-900", "text-white"]
: ["text-bg-900"]; : ["text-bg-900"];
} }
function setActiveCircle(id: number) {
cockpitStore.selectedCircle = id;
}
</script> </script>
<template> <template>
@ -62,7 +55,7 @@ function setActiveCircle(id: number) {
<button <button
class="border-2 border-blue-900 rounded-full px-4 mr-4 last:mr-0" class="border-2 border-blue-900 rounded-full px-4 mr-4 last:mr-0"
:class="setActiveClasses(circle.id)" :class="setActiveClasses(circle.id)"
@click="setActiveCircle(circle.id)" @click="cockpitStore.toggleCourseSelection(circle.id)"
> >
{{ circle.title }} {{ circle.title }}
</button> </button>

17
client/src/stores/cockpit.ts
View File

@ -7,7 +7,7 @@ import { defineStore } from "pinia";
export type CockpitStoreState = { export type CockpitStoreState = {
courseSessionUsers: CourseSessionUser[] | undefined; courseSessionUsers: CourseSessionUser[] | undefined;
cockpitSessionUser: ExpertSessionUser | undefined; cockpitSessionUser: ExpertSessionUser | undefined;
selectedCircle: number; selectedCircles: number[];
}; };
export const useCockpitStore = defineStore({ export const useCockpitStore = defineStore({
@ -16,7 +16,7 @@ export const useCockpitStore = defineStore({
return { return {
courseSessionUsers: undefined, courseSessionUsers: undefined,
cockpitSessionUser: undefined, cockpitSessionUser: undefined,
selectedCircle: -1, selectedCircles: [],
} as CockpitStoreState; } as CockpitStoreState;
}, },
getters: { getters: {
@ -33,7 +33,7 @@ export const useCockpitStore = defineStore({
this.cockpitSessionUser = data.cockpit_user; this.cockpitSessionUser = data.cockpit_user;
if (this.cockpitSessionUser.circles?.length > 0) { if (this.cockpitSessionUser.circles?.length > 0) {
this.selectedCircle = this.cockpitSessionUser.circles[0].id; this.selectedCircles = [this.cockpitSessionUser.circles[0].id];
} }
if (!this.courseSessionUsers) { if (!this.courseSessionUsers) {
@ -41,5 +41,16 @@ export const useCockpitStore = defineStore({
} }
return this.courseSessionUsers; 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);
}
},
}, },
}); });