sposchedule

1
<script setup lang="ts">
2
  import { reactive, 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 { FilterMatchMode } from '@primevue/core/api';
10
  import {
11
    useBuildingsQuery,
12
    useDestroyBuilding,
13
    useStoreBuilding,
14
    useUpdateBuilding,
15
  } from '@/queries/buildings';
16

17
  const toast = useToast();
18

19
  const editingRows = ref([]);
20
  const selectedBuildings = ref([]);
21

22
  const { data: buildings } = useBuildingsQuery();
23

24
  const filters = ref({
25
    global: { value: null, matchMode: FilterMatchMode.CONTAINS },
26
    name: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
27
    location: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
28
  });
29
  const { mutateAsync: updateBuilding } = useUpdateBuilding();
30
  async function onRowEditSave(event) {
31
    let { newData, index } = event;
32
    try {
33
      await updateBuilding({
34
        name: buildings.value[index].name,
35
        body: newData,
36
      });
37
    } catch (e) {
38
      toast.add({
39
        severity: 'error',
40
        summary: 'Ошибка',
41
        detail: e?.response.data.message,
42
        life: 3000,
43
        closable: true,
44
      });
45
      return;
46
    }
47
  }
48

49
  const { mutateAsync: storeSubject } = useStoreBuilding();
50
  const addSubject = async () => {
51
    try {
52
      await storeSubject(newBuilding);
53
    } catch (e) {
54
      // newSubjectError.value = true
55
      toast.add({
56
        severity: 'error',
57
        summary: 'Ошибка',
58
        detail: e?.response.data.message,
59
        life: 3000,
60
        closable: true,
61
      });
62
      newBuilding.name = '';
63
      newBuilding.location = '';
64
      return;
65
    }
66
    // newSubjectError.value = false
67
    newBuilding.name = '';
68
    newBuilding.location = '';
69
  };
70

71
  const { mutateAsync: destroyBuilding } = useDestroyBuilding();
72
  const deleteBuildings = async () => {
73
    if (!selectedBuildings.value.length) return;
74

75
    for (let i = 0; i < selectedBuildings.value.length; i++) {
76
      try {
77
        await destroyBuilding(selectedBuildings.value[i].name);
78
      } catch (e) {
79
        toast.add({
80
          severity: 'error',
81
          summary: 'Ошибка',
82
          detail: e?.response.data.message,
83
          life: 3000,
84
          closable: true,
85
        });
86
        return;
87
      }
88
    }
89
    selectedBuildings.value = [];
90
  };
91

92
  const newBuilding = reactive({
93
    name: '',
94
    location: '',
95
  });
96
</script>
97
<template>
98
  <div class="flex flex-col gap-4">
99
    <div class="flex flex-wrap justify-between items-baseline">
100
      <h1 class="text-2xl">Корпуса</h1>
101
    </div>
102
    <div class="">
103
      <form
104
        class="flex flex-wrap items-center gap-4 p-4 rounded-lg bg-surface-100 dark:bg-surface-800"
105
      >
106
        <InputText
107
          v-model="newBuilding.name"
108
          placeholder="Название корпуса"
109
          class="w-full md:w-60"
110
        />
111
        <InputText
112
          v-model="newBuilding.location"
113
          placeholder="Адрес"
114
          class="w-full md:w-60"
115
        />
116

117
        <Button
118
          :disabled="!newBuilding.name"
119
          type="submit"
120
          @click.prevent="addSubject"
121
        >
122
          Добавить корпус
123
        </Button>
124
      </form>
125
    </div>
126
    <div class="">
127
      <DataTable
128
        v-model:filters="filters"
129
        v-model:selection="selectedBuildings"
130
        v-model:editing-rows="editingRows"
131
        :value="buildings"
132
        paginator
133
        :rows="10"
134
        edit-mode="row"
135
        data-key="name"
136
        :pt="{
137
          table: { style: 'min-width: 50rem' },
138
        }"
139
        @row-edit-save="onRowEditSave"
140
      >
141
        <template #header>
142
          <div class="flex justify-between flex-wrap gap-2">
143
            <Button
144
              :disabled="!selectedBuildings.length || !buildings.length"
145
              severity="danger"
146
              type="button"
147
              icon="pi pi-trash"
148
              label="Удалить"
149
              outlined
150
              @click="deleteBuildings"
151
            />
152
            <InputText v-model="filters['global'].value" placeholder="Поиск" />
153
          </div>
154
        </template>
155
        <Column selection-mode="multiple" header-style="width: 3rem" />
156

157
        <Column field="name" header="Название корпуса">
158
          <!-- <template #editor="{ data, field }">
159
                            <InputText class="w-full" v-model="data[field]" />
160
                        </template> -->
161
        </Column>
162
        <Column field="location" header="Адрес">
163
          <template #editor="{ data, field }">
164
            <InputText v-model="data[field]" class="w-full" />
165
          </template>
166
        </Column>
167

168
        <Column field="updated_at" header="Дата изменения">
169
          <template #body="slotProps">
170
            {{ useDateFormat(slotProps.data.updated_at, 'DD.MM.YY HH:mm:ss') }}
171
          </template>
172
        </Column>
173
        <Column
174
          :row-editor="true"
175
          style="width: 10%; min-width: 8rem"
176
          body-style="text-align:center"
177
        />
178
      </DataTable>
179
    </div>
180
  </div>
181
</template>
182