nothing

resources/js/Pages/Statistic/Components/ModalUnwantedEvents.vue

@@ -0,0 +1,115 @@
+<script setup>
+import {
+    NModal, NList, NListItem, NThing, NAvatar, NIcon,
+    NText, NDivider, NFlex, NButton, NScrollbar, NEmpty, NSpin
+} from 'naive-ui'
+import {useReportStore} from "../../../Stores/report.js";
+import { TbAlertCircle, TbPencil, TbTrashX } from 'vue-icons-plus/tb'
+import {ref, watch} from "vue";
+
+const props = defineProps({
+    departmentId: {
+        required: true
+    },
+    startAt: {
+        required: true
+    },
+    endAt: {
+        required: true
+    }
+})
+
+const open = defineModel('open')
+const loading = ref(true)
+
+const unwantedEvents = ref([])
+const fetchUnwantedEvents = () => {
+    loading.value = true
+    axios.get('/api/statistics/reports/unwanted-events', {
+        params: {
+            departmentId: props.departmentId,
+            startAt: props.startAt,
+            endAt: props.endAt
+        }
+    })
+        .then(res => {
+            unwantedEvents.value = res.data
+        })
+        .finally(() => {
+            loading.value = false
+        })
+}
+
+watch(() => [props.departmentId, props.endAt, props.startAt], () => {
+    if (props.departmentId && props.endAt && props.startAt) {
+        fetchUnwantedEvents()
+    }
+}, {
+    immediate: true,
+    deep: true
+})
+</script>
+
+<template>
+    <NModal v-model:show="open"
+            title="Нежелательные события"
+            preset="card"
+            :mask-closable="false"
+            :close-on-esc="false"
+            class="max-w-4xl overflow-clip h-[calc(100vh-220px)]"
+    >
+        <template v-if="loading">
+            <div class="flex items-center justify-center h-full">
+                <NSpin />
+            </div>
+        </template>
+        <template v-else-if="unwantedEvents.length">
+            <NScrollbar class="max-h-[calc(100vh-282px)] pr-3">
+                <NList>
+                    <NListItem v-for="event in unwantedEvents">
+                        <NThing>
+                            <template #avatar>
+                                <NAvatar>
+                                    <NIcon>
+                                        <TbAlertCircle class="text-red-400" />
+                                    </NIcon>
+                                </NAvatar>
+                            </template>
+                            <template #header>
+                                {{ event.title }}
+                            </template>
+                            <template #description>
+                                <NText depth="3">
+                                    {{ event.created_at }}
+                                </NText>
+                            </template>
+                            <NText>
+                                {{ event.comment }}
+                            </NText>
+                        </NThing>
+                    </NListItem>
+                </NList>
+            </NScrollbar>
+        </template>
+        <template v-else>
+            <div class="h-full flex items-center justify-center">
+                <NEmpty description="Нежелательные события не найдены!" />
+            </div>
+        </template>
+
+<!--        <template #action>-->
+<!--            <NFlex id="modal-action" align="center" justify="space-between">-->
+<!--                <NButton type="primary" secondary @click="onCreateEvent()">-->
+<!--                    <template #icon>-->
+<!--                        <TbCirclePlus />-->
+<!--                    </template>-->
+<!--                    Создать событие-->
+<!--                </NButton>-->
+<!--            </NFlex>-->
+<!--        </template>-->
+    </NModal>
+</template>
+
+<style scoped>
+
+</style>