refactor: cockpit store -> expert cockpit store

prepares for mentor cockpit store

client/src/pages/cockpit/cockpitPage/CockpitDates.vue

@@ -2,15 +2,15 @@
 import { useCurrentCourseSession } from "@/composables";
 import DueDateSingle from "@/components/dueDates/DueDateSingle.vue";
 import { computed } from "vue";
-import { useCockpitStore } from "@/stores/cockpit";
+import { useExpertCockpitStore } from "@/stores/expertCockpit";
 
-const cockpitStore = useCockpitStore();
+const expertCockpitStore = useExpertCockpitStore();
 const courseSession = useCurrentCourseSession();
 
 const circleDates = computed(() => {
   const dueDates = courseSession.value.due_dates.filter((dueDate) => {
-    if (!cockpitStore.currentCircle) return false;
-    return cockpitStore.currentCircle.id == dueDate?.circle?.id;
+    if (!expertCockpitStore.currentCircle) return false;
+    return expertCockpitStore.currentCircle.id == dueDate?.circle?.id;
   });
   return dueDates.slice(0, 4);
 });

client/src/pages/cockpit/cockpitPage/CockpitExpertPage.vue

@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import LearningPathDiagram from "@/components/learningPath/LearningPathDiagram.vue";
+import ItPersonRow from "@/components/ui/ItPersonRow.vue";
+
+import { useCourseSessionDetailQuery, useCurrentCourseSession } from "@/composables";
+import SubmissionsOverview from "@/pages/cockpit/cockpitPage/SubmissionsOverview.vue";
+import { useExpertCockpitStore } from "@/stores/expertCockpit";
+import log from "loglevel";
+import CockpitDates from "@/pages/cockpit/cockpitPage/CockpitDates.vue";
+import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
+import UserStatusCount from "@/pages/cockpit/cockpitPage/UserStatusCount.vue";
+import { useExpertCockpitPageData } from "@/pages/cockpit/cockpitPage/composables";
+
+const props = defineProps<{
+  courseSlug: string;
+}>();
+
+log.debug("CockpitIndexPage created", props.courseSlug);
+
+const { loading } = useExpertCockpitPageData(props.courseSlug);
+
+const expertCockpitStore = useExpertCockpitStore();
+const courseSession = useCurrentCourseSession();
+const courseSessionDetailResult = useCourseSessionDetailQuery();
+</script>
+
+<template>
+  <div v-if="!loading" class="bg-gray-200">
+    <div v-if="expertCockpitStore.circles?.length">
+      <div v-if="expertCockpitStore.currentCircle" class="container-large">
+        <div class="mb-9 flex flex-col lg:flex-row lg:items-center lg:justify-between">
+          <h1>Cockpit</h1>
+          <ItDropdownSelect
+            :model-value="expertCockpitStore.currentCircle"
+            class="mt-4 w-full lg:mt-0 lg:w-96"
+            :items="expertCockpitStore.circles"
+            @update:model-value="expertCockpitStore.setCurrentCourseCircleFromEvent"
+          ></ItDropdownSelect>
+        </div>
+        <!-- Status -->
+        <div class="mb-4 gap-4 lg:grid lg:grid-cols-3 lg:grid-rows-none">
+          <div class="my-4 flex flex-col justify-between bg-white p-6 lg:my-0">
+            <div>
+              <h3 class="heading-3 mb-4 flex items-center gap-2">
+                {{ $t("Trainerunterlagen") }}
+              </h3>
+              <div class="mb-4">
+                {{ $t("cockpit.trainerFilesText") }}
+              </div>
+            </div>
+            <div>
+              <a
+                href="https://vbvbern.sharepoint.com/sites/myVBV-AFA_K-CI"
+                class="btn-secondary min-w-min"
+                target="_blank"
+              >
+                {{ $t("MS Teams öffnen") }}
+              </a>
+            </div>
+          </div>
+          <div
+            v-if="courseSession.course.enable_circle_documents"
+            class="my-4 flex flex-col justify-between bg-white p-6 lg:my-0"
+            data-cy="circle-documents"
+          >
+            <div>
+              <h3 class="heading-3 mb-4 flex items-center gap-2">
+                {{ $t("a.Unterlagen für Teilnehmenden") }}
+              </h3>
+              <div class="mb-4">
+                {{ $t("a.Stelle deinen Lernenden zusätzliche Inhalte zur Verfügung.") }}
+              </div>
+              <!--            <div-->
+              <!--              v-if="courseSessionsStore.circleDocuments.length"-->
+              <!--              class="mb-4 flex items-center gap-x-2"-->
+              <!--            >-->
+              <!--              <it-icon-document />-->
+              <!--              {{ courseSessionsStore.circleDocuments.length }} {{ $t("a.Unterlagen") }}-->
+              <!--            </div>-->
+            </div>
+            <div>
+              <router-link
+                :to="`/course/${props.courseSlug}/cockpit/documents`"
+                class="btn-secondary min-w-min"
+              >
+                {{ $t("a.Zum Unterlagen-Upload") }}
+              </router-link>
+            </div>
+          </div>
+          <div class="my-4 flex flex-col justify-between bg-white p-6 lg:my-0">
+            <div>
+              <h3 class="heading-3 mb-4 flex items-center gap-2">
+                {{ $t("Anwesenheitskontrolle Präsenzkurse") }}
+              </h3>
+              <div class="mb-4">
+                {{
+                  $t(
+                    "Hier überprüfst und bestätigst du die Anwesenheit deiner Teilnehmenden."
+                  )
+                }}
+              </div>
+            </div>
+            <div>
+              <router-link
+                :to="`/course/${props.courseSlug}/cockpit/attendance`"
+                class="btn-secondary min-w-min"
+              >
+                {{ $t("Anwesenheit prüfen") }}
+              </router-link>
+            </div>
+          </div>
+        </div>
+
+        <div class="mb-4 bg-white p-6">
+          <CockpitDates></CockpitDates>
+        </div>
+        <SubmissionsOverview
+          :course-session="courseSession"
+          :selected-circle="expertCockpitStore.currentCircle.id"
+        ></SubmissionsOverview>
+        <div class="pt-4">
+          <!-- progress -->
+          <div
+            v-if="courseSessionDetailResult.filterMembers().length > 0"
+            class="bg-white p-6"
+          >
+            <h1 class="heading-3 mb-5">{{ $t("cockpit.progress") }}</h1>
+            <ul>
+              <ItPersonRow
+                v-for="csu in courseSessionDetailResult.filterMembers()"
+                :key="csu.user_id"
+                :name="`${csu.first_name} ${csu.last_name}`"
+                :avatar-url="csu.avatar_url"
+              >
+                <template #center>
+                  <div
+                    class="mt-2 flex w-full flex-col items-center justify-start lg:mt-0 lg:flex-row"
+                  >
+                    <LearningPathDiagram
+                      :course-session-id="courseSession.id"
+                      :course-slug="props.courseSlug"
+                      :user-id="csu.user_id"
+                      :show-circle-slugs="[expertCockpitStore.currentCircle.slug]"
+                      diagram-type="singleSmall"
+                      class="mr-4"
+                    ></LearningPathDiagram>
+                    <p class="lg:min-w-[150px]">
+                      {{ expertCockpitStore.currentCircle.title }}
+                    </p>
+                    <UserStatusCount
+                      :course-slug="props.courseSlug"
+                      :user-id="csu.user_id"
+                    ></UserStatusCount>
+                  </div>
+                </template>
+                <template #link>
+                  <router-link
+                    :to="`/course/${props.courseSlug}/cockpit/profile/${csu.user_id}`"
+                    class="link w-full lg:text-right"
+                  >
+                    {{ $t("general.profileLink") }}
+                  </router-link>
+                </template>
+              </ItPersonRow>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div v-else class="container-large mt-4">
+        <span class="text-lg text-orange-600">
+          {{ $t("a.Kein Circle verfügbar oder ausgewählt.") }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

client/src/pages/cockpit/cockpitPage/CockpitMentorPage.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import log from "loglevel";
+
+const props = defineProps<{
+  courseSlug: string;
+}>();
+
+log.debug("CockpitIndexPage created", props.courseSlug);
+</script>
+
+<template>
+  <div class="bg-gray-200">
+    <h1>Mentor</h1>
+  </div>
+</template>
+
+<style scoped></style>

client/src/pages/cockpit/cockpitPage/CockpitPage.vue

@@ -1,177 +1,20 @@
 <script setup lang="ts">
-import LearningPathDiagram from "@/components/learningPath/LearningPathDiagram.vue";
-import ItPersonRow from "@/components/ui/ItPersonRow.vue";
-
-import { useCourseSessionDetailQuery, useCurrentCourseSession } from "@/composables";
-import SubmissionsOverview from "@/pages/cockpit/cockpitPage/SubmissionsOverview.vue";
-import { useCockpitStore } from "@/stores/cockpit";
 import log from "loglevel";
-import CockpitDates from "@/pages/cockpit/cockpitPage/CockpitDates.vue";
-import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
-import UserStatusCount from "@/pages/cockpit/cockpitPage/UserStatusCount.vue";
-import { useExpertCockpitPageData } from "@/pages/cockpit/cockpitPage/composables";
 
 const props = defineProps<{
   courseSlug: string;
 }>();
 
-log.debug("CockpitIndexPage created", props.courseSlug);
+// FIXME: Decide which page to show
+//  -> CockpitExpertPage.vue
+//  -> CockpitMentorPage.vue
 
-const { loading } = useExpertCockpitPageData(props.courseSlug);
-
-const cockpitStore = useCockpitStore();
-const courseSession = useCurrentCourseSession();
-const courseSessionDetailResult = useCourseSessionDetailQuery();
+log.debug("Cockpit page created", props.courseSlug);
 </script>
 
 <template>
-  <div v-if="!loading" class="bg-gray-200">
-    <div v-if="cockpitStore.circles?.length">
-      <div v-if="cockpitStore.currentCircle" class="container-large">
-        <div class="mb-9 flex flex-col lg:flex-row lg:items-center lg:justify-between">
-          <h1>Cockpit</h1>
-          <ItDropdownSelect
-            :model-value="cockpitStore.currentCircle"
-            class="mt-4 w-full lg:mt-0 lg:w-96"
-            :items="cockpitStore.circles"
-            @update:model-value="cockpitStore.setCurrentCourseCircleFromEvent"
-          ></ItDropdownSelect>
-        </div>
-        <!-- Status -->
-        <div class="mb-4 gap-4 lg:grid lg:grid-cols-3 lg:grid-rows-none">
-          <div class="my-4 flex flex-col justify-between bg-white p-6 lg:my-0">
-            <div>
-              <h3 class="heading-3 mb-4 flex items-center gap-2">
-                {{ $t("Trainerunterlagen") }}
-              </h3>
-              <div class="mb-4">
-                {{ $t("cockpit.trainerFilesText") }}
-              </div>
-            </div>
-            <div>
-              <a
-                href="https://vbvbern.sharepoint.com/sites/myVBV-AFA_K-CI"
-                class="btn-secondary min-w-min"
-                target="_blank"
-              >
-                {{ $t("MS Teams öffnen") }}
-              </a>
-            </div>
-          </div>
-          <div
-            v-if="courseSession.course.enable_circle_documents"
-            class="my-4 flex flex-col justify-between bg-white p-6 lg:my-0"
-            data-cy="circle-documents"
-          >
-            <div>
-              <h3 class="heading-3 mb-4 flex items-center gap-2">
-                {{ $t("a.Unterlagen für Teilnehmenden") }}
-              </h3>
-              <div class="mb-4">
-                {{ $t("a.Stelle deinen Lernenden zusätzliche Inhalte zur Verfügung.") }}
-              </div>
-              <!--            <div-->
-              <!--              v-if="courseSessionsStore.circleDocuments.length"-->
-              <!--              class="mb-4 flex items-center gap-x-2"-->
-              <!--            >-->
-              <!--              <it-icon-document />-->
-              <!--              {{ courseSessionsStore.circleDocuments.length }} {{ $t("a.Unterlagen") }}-->
-              <!--            </div>-->
-            </div>
-            <div>
-              <router-link
-                :to="`/course/${props.courseSlug}/cockpit/documents`"
-                class="btn-secondary min-w-min"
-              >
-                {{ $t("a.Zum Unterlagen-Upload") }}
-              </router-link>
-            </div>
-          </div>
-          <div class="my-4 flex flex-col justify-between bg-white p-6 lg:my-0">
-            <div>
-              <h3 class="heading-3 mb-4 flex items-center gap-2">
-                {{ $t("Anwesenheitskontrolle Präsenzkurse") }}
-              </h3>
-              <div class="mb-4">
-                {{
-                  $t(
-                    "Hier überprüfst und bestätigst du die Anwesenheit deiner Teilnehmenden."
-                  )
-                }}
-              </div>
-            </div>
-            <div>
-              <router-link
-                :to="`/course/${props.courseSlug}/cockpit/attendance`"
-                class="btn-secondary min-w-min"
-              >
-                {{ $t("Anwesenheit prüfen") }}
-              </router-link>
-            </div>
-          </div>
-        </div>
-
-        <div class="mb-4 bg-white p-6">
-          <CockpitDates></CockpitDates>
-        </div>
-        <SubmissionsOverview
-          :course-session="courseSession"
-          :selected-circle="cockpitStore.currentCircle.id"
-        ></SubmissionsOverview>
-        <div class="pt-4">
-          <!-- progress -->
-          <div
-            v-if="courseSessionDetailResult.filterMembers().length > 0"
-            class="bg-white p-6"
-          >
-            <h1 class="heading-3 mb-5">{{ $t("cockpit.progress") }}</h1>
-            <ul>
-              <ItPersonRow
-                v-for="csu in courseSessionDetailResult.filterMembers()"
-                :key="csu.user_id"
-                :name="`${csu.first_name} ${csu.last_name}`"
-                :avatar-url="csu.avatar_url"
-              >
-                <template #center>
-                  <div
-                    class="mt-2 flex w-full flex-col items-center justify-start lg:mt-0 lg:flex-row"
-                  >
-                    <LearningPathDiagram
-                      :course-session-id="courseSession.id"
-                      :course-slug="props.courseSlug"
-                      :user-id="csu.user_id"
-                      :show-circle-slugs="[cockpitStore.currentCircle.slug]"
-                      diagram-type="singleSmall"
-                      class="mr-4"
-                    ></LearningPathDiagram>
-                    <p class="lg:min-w-[150px]">
-                      {{ cockpitStore.currentCircle.title }}
-                    </p>
-                    <UserStatusCount
-                      :course-slug="props.courseSlug"
-                      :user-id="csu.user_id"
-                    ></UserStatusCount>
-                  </div>
-                </template>
-                <template #link>
-                  <router-link
-                    :to="`/course/${props.courseSlug}/cockpit/profile/${csu.user_id}`"
-                    class="link w-full lg:text-right"
-                  >
-                    {{ $t("general.profileLink") }}
-                  </router-link>
-                </template>
-              </ItPersonRow>
-            </ul>
-          </div>
-        </div>
-      </div>
-      <div v-else class="container-large mt-4">
-        <span class="text-lg text-orange-600">
-          {{ $t("a.Kein Circle verfügbar oder ausgewählt.") }}
-        </span>
-      </div>
-    </div>
+  <div class="bg-gray-200">
+    <h1>TODO</h1>
   </div>
 </template>
 

client/src/pages/cockpit/cockpitPage/composables.ts

@@ -2,13 +2,13 @@ import {
   useCourseDataWithCompletion,
   useCourseSessionDetailQuery,
 } from "@/composables";
-import { useCockpitStore } from "@/stores/cockpit";
+import { useExpertCockpitStore } from "@/stores/expertCockpit";
 import { ref } from "vue";
 
 export function useExpertCockpitPageData(courseSlug: string) {
   const loading = ref(true);
 
-  const cockpitStore = useCockpitStore();
+  const cockpitStore = useExpertCockpitStore();
   const courseSessionDetailResult = useCourseSessionDetailQuery();
 
   async function loadData() {

client/src/pages/cockpit/documentPage/DocumentPage.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useCourseData, useCurrentCourseSession } from "@/composables";
 import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
-import { useCockpitStore } from "@/stores/cockpit";
+import { useExpertCockpitStore } from "@/stores/expertCockpit";
 import ItModal from "@/components/ui/ItModal.vue";
 import DocumentUploadForm from "@/pages/cockpit/documentPage/DocumentUploadForm.vue";
 import { computed, onMounted, ref, watch } from "vue";
@@ -18,7 +18,7 @@ import { useCourseSessionsStore } from "@/stores/courseSessions";
 import DocumentListItem from "@/components/circle/DocumentListItem.vue";
 import { useExpertCockpitPageData } from "@/pages/cockpit/cockpitPage/composables";
 
-const cockpitStore = useCockpitStore();
+const cockpitStore = useExpertCockpitStore();
 const courseSession = useCurrentCourseSession();
 const courseSessionsStore = useCourseSessionsStore();
 const courseData = useCourseData(courseSession.value?.course.slug);

client/src/router/index.ts

@@ -131,7 +131,7 @@ const router = createRouter({
       children: [
         {
           path: "",
-          component: () => import("@/pages/cockpit/cockpitPage/CockpitPage.vue"),
+          component: () => import("@/pages/cockpit/cockpitPage/CockpitExpertPage.vue"),
           props: true,
         },
         {

client/src/stores/expertCockpit.ts

@@ -4,24 +4,24 @@ import type { CircleLight, CourseSessionUser, ExpertSessionUser } from "@/types"
 import log from "loglevel";
 import { defineStore } from "pinia";
 
-type CircleCockpit = CircleLight & {
+type CircleExpertCockpit = CircleLight & {
   name: string;
 };
 
-export type CockpitStoreState = {
+export type ExpertCockpitStoreState = {
   courseSessionMembers: CourseSessionUser[] | undefined;
-  circles: CircleCockpit[] | undefined;
-  currentCircle: CircleCockpit | undefined;
+  circles: CircleExpertCockpit[] | undefined;
+  currentCircle: CircleExpertCockpit | undefined;
 };
 
-export const useCockpitStore = defineStore({
-  id: "cockpit",
+export const useExpertCockpitStore = defineStore({
+  id: "expertCockpit",
   state: () => {
     return {
       courseSessionMembers: undefined,
       circles: [],
       currentCircle: undefined,
-    } as CockpitStoreState;
+    } as ExpertCockpitStoreState;
   },
   actions: {
     async loadCircles(