UI коструктора отчетов

resources/js/Pages/Analytics/Components/EditReportModal.vue

@@ -0,0 +1,60 @@
+<script setup>
+import { ref, watch } from 'vue'
+import { NModal, NForm, NFormItem, NInput, NButton, NFlex } from 'naive-ui'
+
+const props = defineProps({
+    show: { type: Boolean, default: false },
+    name: { type: String, default: '' },
+    description: { type: String, default: '' },
+})
+
+const emit = defineEmits(['update:show', 'save'])
+
+const localName = ref(props.name)
+const localDescription = ref(props.description)
+
+watch(() => props.show, (value) => {
+    if (value) {
+        localName.value = props.name
+        localDescription.value = props.description
+    }
+})
+
+const save = () => {
+    if (!localName.value.trim()) return
+    emit('save', { name: localName.value.trim(), description: localDescription.value.trim() })
+    emit('update:show', false)
+}
+</script>
+
+<template>
+    <NModal
+        :show="show"
+        preset="card"
+        title="Редактирование отчёта"
+        style="width: 460px; max-width: 94vw;"
+        @update:show="emit('update:show', $event)"
+    >
+        <NForm>
+            <NFormItem label="Название">
+                <NInput v-model:value="localName" maxlength="50" show-count placeholder="Название отчёта" />
+            </NFormItem>
+            <NFormItem label="Описание (необязательно)">
+                <NInput
+                    v-model:value="localDescription"
+                    type="textarea"
+                    maxlength="200"
+                    show-count
+                    placeholder="Введите описание отчёта"
+                    :autosize="{ minRows: 2, maxRows: 4 }"
+                />
+            </NFormItem>
+        </NForm>
+        <template #footer>
+            <NFlex justify="end" :size="8">
+                <NButton @click="emit('update:show', false)">Отменить</NButton>
+                <NButton type="primary" :disabled="!localName.trim()" @click="save">Сохранить</NButton>
+            </NFlex>
+        </template>
+    </NModal>
+</template>