chore: keep assignment todo state -> introduce store

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

@@ -1,79 +1,34 @@
 <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 assignmentTodoListStore = useAssignmentTodoListStore();
-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;
-});
 </script>
 
 <template>
-  <template v-if="summary">
+  <h2 class="heading-2 mb-6 mt-6">{{ $t("a.Das wurde mit dir geteilt") }}</h2>
-    <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"
+        v-model="assignmentTodoListStore.selectedStatus"
         class="min-w-[10rem]"
-          :items="statusFilter"
+        :items="assignmentTodoListStore.statusOptions"
         borderless
       ></ItDropdownSelect>
       <ItDropdownSelect
-          v-model="circleFilterValue"
+        v-model="assignmentTodoListStore.selectedCircle"
         class="min-w-[18rem]"
-          :items="circleFilter"
+        :items="assignmentTodoListStore.circleOptions"
         borderless
       ></ItDropdownSelect>
     </div>
-      <template v-if="filteredAssignments.length > 0">
+    <template v-if="assignmentTodoListStore.filteredAssignments.length > 0">
-        <template v-for="item in filteredAssignments" :key="item.id">
+      <template
+        v-for="item in assignmentTodoListStore.filteredAssignments"
+        :key="item.id"
+      >
         <PraxisAssignmentItem
           v-if="item.type === 'praxis_assignment'"
           :circle-title="item.circle_name"
@@ -102,4 +57,3 @@ const filteredAssignments: Ref<Assignment[]> = computed(() => {
     </div>
   </div>
 </template>
-</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,
+  };
+});