sposchedule

1
<script setup lang="ts">
2
  import { toRef } from 'vue';
3
  import DatePicker from 'primevue/datepicker';
4
  import Checkbox from 'primevue/checkbox';
5
  import Button from 'primevue/button';
6
  import { useDestroyBellPeriod, useUpdateBellPeriod } from '@/queries/bells';
7
  import { useToast } from 'primevue/usetoast';
8

9
  const toast = useToast();
10

11
  const props = defineProps({
12
    period: {
13
      type: Object,
14
    },
15
  });
16

17
  const period = toRef(props.period);
18

19
  const { mutateAsync: updatePeriod } = useUpdateBellPeriod();
20
  const { mutateAsync: destroyPeriod } = useDestroyBellPeriod();
21

22
  function formatTime(time) {
23
    if (Object.prototype.toString.call(time) === '[object Date]') {
24
      const hours = time.getHours().toString().padStart(2, '0');
25
      const minutes = time.getMinutes().toString().padStart(2, '0');
26
      return `${hours}:${minutes}`;
27
    }
28

29
    return time;
30
  }
31

32
  async function editPeriod(period) {
33
    let body = {
34
      ...period,
35
      period_from: formatTime(period.period_from),
36
      period_to: formatTime(period.period_to),
37
    };
38
    console.log(period.has_break);
39
    if (
40
      period.has_break &&
41
      period.period_from_after &&
42
      period.period_to_after
43
    ) {
44
      body.period_from_after = formatTime(period.period_from_after);
45
      body.period_to_after = formatTime(period.period_to_after);
46
    } else if (
47
      !period.has_break &&
48
      !period?.period_from_after &&
49
      !period?.period_to_after
50
    ) {
51
      body.period_from_after = formatTime(period.period_from);
52
      body.period_to_after = formatTime(period.period_to);
53
    } else {
54
      body.period_from_after = null;
55
      body.period_to_after = null;
56
    }
57

58
    try {
59
      await updatePeriod({
60
        id: period.id,
61
        body,
62
      });
63
    } catch (e) {
64
      toast.add({
65
        severity: 'error',
66
        summary: 'Ошибка',
67
        detail: e?.response?.data.message || 'Не удалось обновить период',
68
        life: 3000,
69
        closable: true,
70
      });
71
    }
72
  }
73

74
  async function deletePeriod(id) {
75
    try {
76
      await destroyPeriod(id);
77
    } catch (e) {
78
      toast.add({
79
        severity: 'error',
80
        summary: 'Ошибка',
81
        detail: e?.response?.data.message,
82
        life: 3000,
83
        closable: true,
84
      });
85
    }
86
  }
87
</script>
88

89
<template>
90
  <tr
91
    class="border dark:border-surface-700 border-surface-200 bg-surface-100 dark:bg-surface-800"
92
  >
93
    <td class="text-center text-lg">
94
      {{ period.index }}
95
    </td>
96

97
    <td class="">
98
      <div class="flex justify-center items-center flex-col gap-2 py-2">
99
        <div class="flex gap-2 items-center">
100
          <DatePicker
101
            id="datepicker-timeonly"
102
            v-model="period.period_from"
103
            time-only
104
            fluid
105
            @blur="editPeriod(period)"
106
          />
107
          -
108
          <DatePicker
109
            id="datepicker-timeonly"
110
            v-model="period.period_to"
111
            time-only
112
            fluid
113
            @blur="editPeriod(period)"
114
          />
115
        </div>
116
        <div v-if="period.has_break" class="flex gap-2 items-center">
117
          <DatePicker
118
            id="datepicker-timeonly"
119
            v-model="period.period_from_after"
120
            time-only
121
            fluid
122
            @blur="editPeriod(period)"
123
          />
124
          -
125
          <DatePicker
126
            id="datepicker-timeonly"
127
            v-model="period.period_to_after"
128
            time-only
129
            fluid
130
            @blur="editPeriod(period)"
131
          />
132
        </div>
133
      </div>
134
    </td>
135

136
    <td class="text-center">
137
      <Checkbox
138
        v-model="period.has_break"
139
        :binary="true"
140
        @change="editPeriod(period)"
141
      />
142
    </td>
143

144
    <td class="">
145
      <div class="flex justify-center">
146
        <Button
147
          text
148
          icon="pi pi-trash"
149
          severity="danger"
150
          @click="deletePeriod(period.id)"
151
        />
152
      </div>
153
    </td>
154
  </tr>
155
</template>
156