feat: error handing: alert -> dialog

frontend/src/App.vue

@@ -1,11 +1,19 @@
 <script setup lang="ts">
 import PostScheme from './post/PostScheme.vue';
 import AuthorScheme from "./author/AuthorScheme.vue";
-import MultiSelect from './components/selects/MultiSelect.vue';
+import { Dialog } from 'primevue';
+import { useErrorStore } from './stores/error.store';
 
+const errorStore = useErrorStore()
 </script>
 
 <template>
+    <Dialog v-model:visible="errorStore.show" maximizable class="w-[400px] h-[400px]">
+        <template #header>
+            Ошибка
+        </template>
+            <h1 class="text-red-500 text-2xl">{{ errorStore.message }}</h1>
+    </Dialog>
     <main class="w-screen h-screen">
          <AuthorScheme></AuthorScheme>
     </main>

frontend/src/main.ts

@@ -5,8 +5,9 @@ import { Config } from 'primevue'
 import Aura from '@primevue/themes/aura'
 import 'primeicons/primeicons.css'
 import { ru } from 'primelocale/js/ru.js'
+import { createPinia } from 'pinia'
 
-createApp(App).use(Config, {
+createApp(App).use(createPinia()).use(Config, {
     theme: {
         preset: Aura,
     },

frontend/src/stores/error.store.ts

@@ -0,0 +1,23 @@
+import { defineStore } from "pinia";
+
+export interface ErrorState {
+    show: boolean
+    message: string
+}
+
+export const useErrorStore = defineStore("error", {
+    state: (): ErrorState => ({
+        show: false,
+        message: ""
+    }),
+    actions: {
+        summon(message: string) {
+            this.show = true
+            this.message = message
+        },
+        close() {
+            this.show = false
+            this.message = ""
+        }
+    }
+})

frontend/src/table/DialogWindow.vue

@@ -9,10 +9,13 @@ import { toDate, toTimestamp } from '../utils/date/converters.util';
 import MultiSelect from '../components/selects/MultiSelect.vue';
 import { alertWindow } from '../utils/js/alert.utils';
 import type { Validate } from '../types/validate.type';
+import { useErrorStore } from '../stores/error.store';
 
 const showCreate = defineModel<boolean>('show')
 const createItem = defineModel<T>('item')
 
+const errorStore = useErrorStore()
+
 const props = defineProps<{
     scheme: Scheme<T>,
     getDefaults: () => Partial<T>,
@@ -36,7 +39,7 @@ async function handleSave() {
     const mode = props.updateMode ? 'update' : 'create';
     const result = props.validate(createItem.value as T, mode);
     if (result.status === 'error') {
-        alertWindow(result.message);
+        errorStore.summon(result.message);
         return;
     }
     try {
@@ -50,7 +53,7 @@ async function handleSave() {
             await emits('onSave', createItem.value as T);
         }
     } catch (e) {
-        alertWindow(e.message);
+        errorStore.summon(e.message)
         return
     }
     props.load()
@@ -98,7 +101,7 @@ async function handleSave() {
             </div>
         </div>
         <template #footer>
-            <Button severity="success" class="mt-5" @click="handleSave">Сохранить</Button>
+            <Button class="mt-5" @click="handleSave">Сохранить</Button>
         </template>
     </Dialog>
 </template>