sposchedule

1
<script setup lang="ts">
2
  import { useDateFormat } from '@vueuse/core';
3
  import DataTable from 'primevue/datatable';
4
  import Column from 'primevue/column';
5
  import { FilterMatchMode } from '@primevue/core/api';
6
  import { useHistoryQuery } from '@/queries/history';
7
  import { ref, watch } from 'vue';
8
  import InputText from 'primevue/inputtext';
9

10
  const selectedHistories = ref([]);
11
  const currentPage = ref(1); // Текущая страница
12
  const rowsPerPage = ref(10); // Количество записей на странице
13

14
  const searchTerm = ref('');
15
  // Вызываем запрос с параметрами пагинации
16
  const {
17
    data: histories,
18
    isLoading,
19
    refetch,
20
  } = useHistoryQuery(currentPage, rowsPerPage, searchTerm);
21

22
  // Следим за изменениями пагинации
23
  watch([currentPage, rowsPerPage], () => {
24
    refetch();
25
  });
26

27
  // const { mutateAsync: destroyHistory } = useDestroyHistory()
28
  // const deleteHistories = async () => {
29
  //     if (selectedHistories.value.length === 0) return;
30

31
  //     for (let i = 0; i < selectedHistories.value.length; i++) {
32
  //         try {
33
  //             await destroyHistory(selectedHistories.value[i].id)
34
  //         }
35
  //         catch (e) {
36
  //             toast.add({ severity: 'error', summary: 'Ошибка', detail: e?.response.data.message, life: 3000, closable: true });
37
  //             return
38
  //         }
39
  //     }
40
  //     selectedHistories.value = []
41
  // }
42

43
  const filters = ref({
44
    global: { value: null, matchMode: FilterMatchMode.CONTAINS },
45
    action: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
46
    details: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
47
    created_at: { value: null, matchMode: FilterMatchMode.DATE_IS },
48
  });
49
</script>
50

51
<template>
52
  <div class="flex flex-col gap-4">
53
    <div class="flex flex-wrap justify-between items-baseline">
54
      <h1 class="text-2xl">История</h1>
55
    </div>
56

57
    <div class="">
58
      <DataTable
59
        v-model:filters="filters"
60
        v-model:selection="selectedHistories"
61
        class="datatable-wrapper"
62
        :loading="isLoading"
63
        paginator
64
        :rows="rowsPerPage"
65
        :first="(currentPage - 1) * rowsPerPage"
66
        :total-records="histories?.meta?.total"
67
        lazy
68
        :global-filter-fields="['action', 'details', 'created_at']"
69
        :value="histories?.data"
70
        :on-page="
71
          event => {
72
            currentPage = event.page + 1;
73
            rowsPerPage = event.rows;
74
          }
75
        "
76
        table-style="min-width: 50rem"
77
      >
78
        <template #header>
79
          <div class="flex flex-wrap items-center gap-2 justify-between">
80
            <!-- <Button severity="danger" :disabled="!selectedHistories.length || !histories.length"
81
                            type="button" icon="pi pi-trash" label="Удалить" outlined @click="deleteHistories" /> -->
82
            <InputText v-model="searchTerm" placeholder="Поиск" />
83
          </div>
84
        </template>
85
        <!-- <Column selectionMode="multiple" headerStyle="width: 3rem"></Column> -->
86

87
        <Column field="id" header="ID" />
88
        <Column field="action" header="Действие" />
89
        <!-- <Column field="details" header="Подробности">
90
                    <template #body="slotProps">
91
                        <Inplace>
92
                            <template #display>Показать</template>
93
                            <template #content>
94
                                <p class="m-0">
95
                                    {{ slotProps.data.details }}
96
                                </p>
97
                            </template>
98
                        </Inplace>
99
                    </template>
100
                </Column> -->
101
        <Column field="created_at" header="Дата">
102
          <template #body="slotProps">
103
            {{ useDateFormat(slotProps.data.created_at, 'DD.MM.YY HH:mm:ss') }}
104
          </template>
105
        </Column>
106
        <Column field="user_name" header="Пользователь" />
107
      </DataTable>
108
    </div>
109
  </div>
110
</template>
111