chore: keep assignment todo state -> introduce store

client/src/pages/learningMentor/mentor/MentorOverviewPage.vue

@@ -1,105 +1,59 @@
 <script setup lang="ts">
-import type { Assignment } from "@/services/learningMentees";
-import { useLearningMentees } from "@/services/learningMentees";
-import { useCurrentCourseSession } from "@/composables";
 import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
-import { computed, type Ref, ref } from "vue";
 import PraxisAssignmentItem from "@/components/learningMentor/PraxisAssignmentItem.vue";
-import { useTranslation } from "i18next-vue";
 import SelfAssignmentFeedbackAssignmentItem from "@/components/learningMentor/SelfAssignmentFeedbackAssignmentItem.vue";
+import { useAssignmentTodoListStore } from "@/stores/learningMentor/assignmentTodoList";
 
-const { t } = useTranslation();
-const courseSession = useCurrentCourseSession();
-
-const learningMentees = useLearningMentees(courseSession.value.id);
-const summary = learningMentees.summary;
-
-const statusFilterValue = ref({ name: t("a.Zu erledigen"), id: "_todo" });
-
-const statusFilter = ref([
-  { name: t("Alle"), id: "_all" },
-  { name: t("a.Zu erledigen"), id: "_todo" },
-]);
-
-const circleFilterValue = ref({ name: t("a.AlleCircle"), id: "_all" });
-
-const circleFilter = computed(() => {
-  if (!summary.value) return [];
-
-  return [
-    { name: t("a.AlleCircle"), id: "_all" },
-    ...summary.value.circles.map((circle) => ({
-      name: `Circle: ${circle.title}`,
-      id: circle.id,
-    })),
-  ];
-});
-
-const filteredAssignments: Ref<Assignment[]> = computed(() => {
-  if (!summary.value) return [];
-
-  let filtered = summary.value.assignments;
-
-  if (statusFilterValue.value.id !== "_all") {
-    filtered = filtered.filter((item) => item.pending_evaluations > 0);
-  }
-
-  if (circleFilterValue.value.id !== "_all") {
-    filtered = filtered.filter(
-      (item) => item.circle_id === String(circleFilterValue.value.id)
-    );
-  }
-
-  return filtered;
-});
+const assignmentTodoListStore = useAssignmentTodoListStore();
 </script>
 
 <template>
-  <template v-if="summary">
-    <h2 class="heading-2 mb-6 mt-6">{{ t("a.Das wurde mit dir geteilt") }}</h2>
-    <div class="flex flex-col bg-white pb-5 pt-1">
-      <div class="flex flex-col lg:flex-row lg:space-x-2">
-        <ItDropdownSelect
-          v-model="statusFilterValue"
-          class="min-w-[10rem]"
-          :items="statusFilter"
-          borderless
-        ></ItDropdownSelect>
-        <ItDropdownSelect
-          v-model="circleFilterValue"
-          class="min-w-[18rem]"
-          :items="circleFilter"
-          borderless
-        ></ItDropdownSelect>
-      </div>
-      <template v-if="filteredAssignments.length > 0">
-        <template v-for="item in filteredAssignments" :key="item.id">
-          <PraxisAssignmentItem
-            v-if="item.type === 'praxis_assignment'"
-            :circle-title="item.circle_name"
-            :pending-tasks="item.pending_evaluations"
-            :task-link="{
-              name: 'learningMentorPraxisAssignments',
-              params: { praxisAssignmentId: item.id },
-            }"
-            :task-title="item.title"
-          />
-          <SelfAssignmentFeedbackAssignmentItem
-            v-else-if="item.type === 'self_evaluation_feedback'"
-            :circle-title="item.circle_name"
-            :pending-tasks="item.pending_evaluations"
-            :task-link="{
-              name: 'learningMentorSelfEvaluationFeedbackAssignments',
-              params: { learningUnitId: item.id },
-            }"
-            :task-title="item.title"
-          />
-        </template>
-      </template>
-      <div v-else class="mx-5 flex flex-row items-center bg-green-200 pl-2">
-        <it-icon-check class="it-icon"></it-icon-check>
-        <p class="py-4 text-base">{{ $t("a.Du hast alles erledigt.") }}</p>
-      </div>
+  <h2 class="heading-2 mb-6 mt-6">{{ $t("a.Das wurde mit dir geteilt") }}</h2>
+  <div class="flex flex-col bg-white pb-5 pt-1">
+    <div class="flex flex-col lg:flex-row lg:space-x-2">
+      <ItDropdownSelect
+        v-model="assignmentTodoListStore.selectedStatus"
+        class="min-w-[10rem]"
+        :items="assignmentTodoListStore.statusOptions"
+        borderless
+      ></ItDropdownSelect>
+      <ItDropdownSelect
+        v-model="assignmentTodoListStore.selectedCircle"
+        class="min-w-[18rem]"
+        :items="assignmentTodoListStore.circleOptions"
+        borderless
+      ></ItDropdownSelect>
     </div>
-  </template>
+    <template v-if="assignmentTodoListStore.filteredAssignments.length > 0">
+      <template
+        v-for="item in assignmentTodoListStore.filteredAssignments"
+        :key="item.id"
+      >
+        <PraxisAssignmentItem
+          v-if="item.type === 'praxis_assignment'"
+          :circle-title="item.circle_name"
+          :pending-tasks="item.pending_evaluations"
+          :task-link="{
+            name: 'learningMentorPraxisAssignments',
+            params: { praxisAssignmentId: item.id },
+          }"
+          :task-title="item.title"
+        />
+        <SelfAssignmentFeedbackAssignmentItem
+          v-else-if="item.type === 'self_evaluation_feedback'"
+          :circle-title="item.circle_name"
+          :pending-tasks="item.pending_evaluations"
+          :task-link="{
+            name: 'learningMentorSelfEvaluationFeedbackAssignments',
+            params: { learningUnitId: item.id },
+          }"
+          :task-title="item.title"
+        />
+      </template>
+    </template>
+    <div v-else class="mx-5 flex flex-row items-center bg-green-200 pl-2">
+      <it-icon-check class="it-icon"></it-icon-check>
+      <p class="py-4 text-base">{{ $t("a.Du hast alles erledigt.") }}</p>
+    </div>
+  </div>
 </template>

client/src/stores/learningMentor/assignmentTodoList.ts

@@ -0,0 +1,64 @@
+import { useCurrentCourseSession } from "@/composables";
+import { useLearningMentees } from "@/services/learningMentees";
+import { useTranslation } from "i18next-vue";
+import { defineStore } from "pinia";
+import { computed, ref } from "vue";
+
+interface FilterOption {
+  name: string;
+  id: string | number;
+}
+
+export const useAssignmentTodoListStore = defineStore("filters", () => {
+  const { t } = useTranslation();
+  const courseSession = useCurrentCourseSession();
+  const learningMentees = useLearningMentees(courseSession.value.id);
+  const summary = computed(() => learningMentees.summary.value);
+
+  const statusOptions = ref<FilterOption[]>([
+    { name: t("Alle"), id: "_all" },
+    { name: t("a.Zu erledigen"), id: "_todo" },
+  ]);
+
+  const selectedStatus = ref<FilterOption>(statusOptions.value[1]);
+
+  const allCircles = { name: t("a.AlleCircle"), id: "_all" };
+  const circleOptions = computed(() => {
+    if (!summary.value) return [allCircles];
+    return [
+      allCircles,
+      ...summary.value.circles.map((circle) => ({
+        name: `Circle: ${circle.title}`,
+        id: circle.id,
+      })),
+    ];
+  });
+
+  const selectedCircle = ref<FilterOption>(circleOptions.value[0]);
+
+  const filteredAssignments = computed(() => {
+    if (!summary.value) return [];
+
+    let filtered = summary.value.assignments;
+
+    if (selectedStatus.value.id !== "_all") {
+      filtered = filtered.filter((item) => item.pending_evaluations > 0);
+    }
+
+    if (selectedCircle.value.id !== "_all") {
+      filtered = filtered.filter(
+        (item) => item.circle_id === String(selectedCircle.value.id)
+      );
+    }
+
+    return filtered;
+  });
+
+  return {
+    selectedStatus,
+    statusOptions,
+    selectedCircle,
+    circleOptions,
+    filteredAssignments,
+  };
+});