sposchedule

1
<script setup lang="ts">
2
  import ScheduleItem from '../../components/schedule/AdminMainScheduleItem.vue';
3
  import Select from 'primevue/select';
4
  import { computed, watch, watchEffect } from 'vue';
5
  import { useGroupsQuery } from '@/queries/groups';
6
  import { useMainSchedulesQuery } from '@/queries/schedules';
7
  import { useScheduleStore } from '@/stores/schedule';
8
  import { storeToRefs } from 'pinia';
9
  import { useRoute } from 'vue-router';
10
  import router from '@/router';
11
  import { useStorage } from '@vueuse/core';
12
  import Button from 'primevue/button';
13

14
  const route = useRoute();
15

16
  const scheduleStore = useScheduleStore();
17
  const { schedules, selectedMainGroupName, selectedMainSemester } =
18
    storeToRefs(scheduleStore);
19
  const { data: groups, isFetched } = useGroupsQuery();
20
  const { setSchedules } = scheduleStore;
21

22
  // Используем useStorage для сохранения query параметров в localStorage
23
  const storedParams = useStorage('mainSchedules', { group: '', semester: '' });
24
  // Запросы данных
25
  const selectedMainGroup = computed(() =>
26
    groups.value?.find(group => group.name == selectedMainGroupName.value)
27
  );
28
  const semesters = computed(() => selectedMainGroup.value?.semesters);
29
  const { data: mainSchedules } = useMainSchedulesQuery(
30
    selectedMainGroup,
31
    selectedMainSemester
32
  );
33

34
  // Обновление query параметров в URL и localStorage
35
  const updateQueryParams = () => {
36
    const newQuery = {
37
      ...route.query,
38
      group: selectedMainGroupName.value,
39
    };
40

41
    router.replace({ query: newQuery });
42

43
    // Сохраняем новые параметры в localStorage
44
    storedParams.value.group = selectedMainGroupName.value;
45
  };
46

47
  // Следим за изменениями выбранной группы и семестра для обновления query параметров
48
  watch([selectedMainGroupName], updateQueryParams, { deep: true });
49

50
  // Следим за изменениями данных расписания и устанавливаем их в store
51
  watch(mainSchedules, newData => {
52
    if (newData) {
53
      setSchedules(newData);
54
    }
55
  });
56

57
  watchEffect(() => {
58
    if (isFetched.value) {
59
      if (
60
        route.query.group &&
61
        groups.value?.find(item => item.name === route.query.group)
62
      ) {
63
        // Если группы нет в query, используем из localStorage
64
        selectedMainGroupName.value = route.query.group;
65
        storedParams.value.group = route.query.group as string; // Сохраняем в localStorage
66
      } else if (
67
        storedParams.value.group &&
68
        groups.value?.find(item => item.name === storedParams.value.group)
69
      ) {
70
        selectedMainGroupName.value = storedParams.value.group;
71
      }
72
    }
73
  });
74
</script>
75

76
<template>
77
  <div class="flex flex-col gap-4">
78
    <div class="flex flex-wrap justify-between items-baseline">
79
      <h1 class="text-2xl">Расписание</h1>
80
    </div>
81
    <div
82
      class="flex flex-wrap items-center justify-between gap-4 p-4 rounded-lg bg-surface-100 dark:bg-surface-800"
83
    >
84
      <div class="flex flex-wrap gap-2 items-center">
85
        <Select
86
          v-model="selectedMainGroupName"
87
          fluid
88
          filter
89
          :options="groups"
90
          option-value="name"
91
          option-label="name"
92
          placeholder="Группа"
93
          class=""
94
        />
95
        <Select
96
          v-model="selectedMainSemester"
97
          fluid
98
          :options="semesters"
99
          option-label="name"
100
          placeholder="Семестр"
101
          class=""
102
        />
103
        <Button
104
          target="_blank"
105
          icon="pi pi-print"
106
          as="router-link"
107
          :to="{
108
            path: '/print/main',
109
          }"
110
        />
111
      </div>
112
    </div>
113
    <div class="flex flex-col gap-6">
114
      <ScheduleItem
115
        v-for="(item, index) in schedules"
116
        :group="selectedMainGroup"
117
        :semester="selectedMainSemester"
118
        :item="item"
119
        :lessons="item.lessons"
120
        :published="item?.published"
121
        :week-day="index.toString()"
122
      />
123
    </div>
124
    <div v-if="!schedules" class="">
125
      <p class="text-lg">
126
        Здесь заполняется Основное расписание, которое в дальнейшем можно будет
127
        использовать при заполнении изменений. Оно заполняется один раз.
128
      </p>
129
      <p class="text-lg">
130
        Чтобы начать, выберите сначала <b>группу</b> и <b>семестр</b>.
131
      </p>
132
    </div>
133
  </div>
134
</template>
135