sposchedule

1
<script setup lang="ts">
2
  import { ref } from 'vue';
3
  import DataTable from 'primevue/datatable';
4
  import Column from 'primevue/column';
5
  import InputText from 'primevue/inputtext';
6
  import Button from 'primevue/button';
7
  import { useDateFormat } from '@vueuse/core';
8
  import { useToast } from 'primevue/usetoast';
9
  import DatePicker from 'primevue/datepicker';
10
  import {
11
    useStoreSemester,
12
    useSemestersQuery,
13
    useUpdateSemester,
14
    useDestroySemester,
15
  } from '@/queries/semesters';
16
  import { useConfirm } from 'primevue/useconfirm';
17

18
  const { data: semesters } = useSemestersQuery();
19

20
  const toast = useToast();
21

22
  const newSemesterError = ref(false);
23

24
  const editingRows = ref([]);
25
  const selectedSemesters = ref([]);
26

27
  const dates = ref();
28
  const years = ref();
29

30
  const indexSemester = ref(1);
31
  // const yearsSemester = ref(new Date(years.value[0]).getFullYear() + new Date(years.value[1]).getFullYear())
32
  // const startSemester = ref(dates.value[0])
33
  // const endSemester = ref(dates.value[1])
34

35
  const { mutateAsync: storeSemester, isPending: isStored } =
36
    useStoreSemester();
37
  const addSemester = async () => {
38
    try {
39
      await storeSemester({
40
        years: `${new Date(years.value[0]).getFullYear()}/${new Date(years.value[1]).getFullYear()}`,
41
        index: indexSemester.value,
42
        start: dates.value[0],
43
        end: dates.value[1],
44
      });
45
    } catch (e) {
46
      newSemesterError.value = true;
47
      toast.add({
48
        severity: 'error',
49
        summary: 'Ошибка',
50
        detail: e?.response.data.message,
51
        life: 3000,
52
        closable: true,
53
      });
54
      // inputSemester = { years: '', index: 1 }
55
      return;
56
    }
57
    newSemesterError.value = false;
58
    // inputSemester = { index: 1, years: '' }
59
  };
60

61
  const { mutateAsync, isPending: isUpdated } = useUpdateSemester();
62
  const onRowEditSave = async event => {
63
    let { newData } = event;
64
    try {
65
      await mutateAsync({ id: newData.id, body: newData });
66
    } catch (e) {
67
      toast.add({
68
        severity: 'error',
69
        summary: 'Ошибка',
70
        detail: e?.response.data.message,
71
        life: 3000,
72
        closable: true,
73
      });
74
      return;
75
    }
76
  };
77

78
  const { mutateAsync: destroySemester, isPending: isDestroyed } =
79
    useDestroySemester();
80
  const deleteSemesters = async () => {
81
    if (!selectedSemesters.value.length) return;
82

83
    for (let i = 0; i < selectedSemesters.value.length; i++) {
84
      try {
85
        await destroySemester(selectedSemesters.value[i].id);
86
      } catch (e) {
87
        toast.add({
88
          severity: 'error',
89
          summary: 'Ошибка',
90
          detail: e?.response.data.message,
91
          life: 3000,
92
          closable: true,
93
        });
94
        return;
95
      }
96
    }
97
    selectedSemesters.value = [];
98
  };
99

100
  const minDate = ref(new Date());
101

102
  const confirm = useConfirm();
103
  const confirmDelete = () => {
104
    confirm.require({
105
      message: 'Удаление семестра может сломать расписание',
106
      header: 'Вы уверены?',
107
      icon: 'pi pi-info-circle',
108
      rejectLabel: 'Отмена',
109
      rejectProps: {
110
        label: 'Отмена',
111
        severity: 'secondary',
112
        outlined: true,
113
      },
114
      acceptProps: {
115
        label: 'Удалить',
116
        severity: 'danger',
117
      },
118
      accept: async () => {
119
        await deleteSemesters();
120
      },
121
      reject: () => {},
122
    });
123
  };
124
</script>
125

126
<template>
127
  <div class="flex flex-col gap-4">
128
    <div class="flex flex-wrap justify-between items-baseline">
129
      <h1 class="text-2xl">Семестры</h1>
130
    </div>
131
    <div class="">
132
      <form
133
        class="flex flex-wrap items-end gap-4 p-4 rounded-lg bg-surface-100 dark:bg-surface-800"
134
      >
135
        <div class="">
136
          <label for="years" class="block mb-1">Учебный год</label>
137
          <!-- <InputText id="years" v-model="inputSemester.years" placeholder="2023/2024"></InputText> -->
138
          <DatePicker
139
            v-model="years"
140
            append-to="self"
141
            placeholder="Учебный год"
142
            :min-date="minDate"
143
            view="year"
144
            input-id="dates"
145
            date-format="yy"
146
            selection-mode="range"
147
            :manual-input="false"
148
          />
149
        </div>
150
        <div class="">
151
          <label for=" semester" class="block mb-1">Номер семестра</label>
152
          <InputText
153
            v-model="indexSemester"
154
            v-keyfilter.int
155
            placeholder="Номер семестра"
156
            input-id="semester"
157
            fluid
158
            class=""
159
          />
160
        </div>
161
        <div class="">
162
          <label for="dates" class="block mb-1">Начало - Конец семестра</label>
163
          <DatePicker
164
            v-model="dates"
165
            append-to="self"
166
            placeholder="Начало - Конец семестра"
167
            input-id="dates"
168
            date-format="dd.mm.yy"
169
            selection-mode="range"
170
            :manual-input="false"
171
          />
172
        </div>
173

174
        <Button
175
          :disabled="!years || !indexSemester || !dates"
176
          @click.prevent="addSemester"
177
        >
178
          Добавить
179
        </Button>
180
      </form>
181
    </div>
182
    <div class="">
183
      <DataTable
184
        v-model:selection="selectedSemesters"
185
        v-model:editing-rows="editingRows"
186
        paginator
187
        :rows="10"
188
        :loading="isUpdated || isDestroyed || isStored"
189
        :value="semesters"
190
        edit-mode="row"
191
        data-key="id"
192
        :pt="{
193
          table: { style: 'min-width: 50rem' },
194
        }"
195
        @row-edit-save="onRowEditSave"
196
      >
197
        <template #header>
198
          <div class="flex justify-between">
199
            <Button
200
              severity="danger"
201
              :disabled="!selectedSemesters.length || !semesters.length"
202
              type="button"
203
              icon="pi pi-trash"
204
              label="Удалить"
205
              outlined
206
              @click="confirmDelete"
207
            />
208
          </div>
209
        </template>
210
        <Column selection-mode="multiple" header-style="width: 3rem" />
211
        <Column field="years" header="Учебный год">
212
          <template #editor="{ data, field }">
213
            <InputText v-model="data[field]" />
214
          </template>
215
        </Column>
216
        <Column field="index" header="Семестр">
217
          <template #editor="{ data, field }">
218
            <InputText
219
              v-model="data[field]"
220
              v-keyfilter.int
221
              input-id="minmax-buttons"
222
            />
223
          </template>
224
        </Column>
225
        <Column field="start" header="Начало семестра">
226
          <template #body="slotProps">
227
            {{ useDateFormat(slotProps.data.start, 'DD.MM.YY') }}
228
          </template>
229
        </Column>
230
        <Column field="end" header="Конец семестра">
231
          <template #body="slotProps">
232
            {{ useDateFormat(slotProps.data.end, 'DD.MM.YY') }}
233
          </template>
234
        </Column>
235
        <Column
236
          :row-editor="true"
237
          style="width: 10%; min-width: 8rem"
238
          body-style="text-align:center"
239
        />
240
      </DataTable>
241
    </div>
242
  </div>
243
</template>
244