From f648b4b1716dcf5c819782099b1ebac7db47efe2 Mon Sep 17 00:00:00 2001
From: opbnq-q <cko.vladislav@gmai.com>
Date: Sun, 9 Mar 2025 04:25:25 -0700
Subject: [PATCH] feat: preloading, error handing

---
 .../app/internal/services/authorservice.ts    |   8 +-
 .../app/internal/services/postservice.ts      |   8 +-
 frontend/src/author/AuthorScheme.vue          |  21 +++-
 .../src/components/selects/MultiSelect.vue    |   4 +-
 frontend/src/post/PostScheme.vue              |   2 +-
 frontend/src/table/DialogWindow.vue           | 109 ++++++++++--------
 frontend/src/table/Table.vue                  |  27 ++---
 frontend/src/types/table-props.type.ts        |   5 +-
 frontend/src/types/validate.type.ts           |   3 +
 frontend/src/utils/js/alert.utils.ts          |   1 +
 10 files changed, 112 insertions(+), 76 deletions(-)
 create mode 100644 frontend/src/types/validate.type.ts
 create mode 100644 frontend/src/utils/js/alert.utils.ts

diff --git a/frontend/bindings/app/internal/services/authorservice.ts b/frontend/bindings/app/internal/services/authorservice.ts
index 6ec3d81..b6380f1 100644
--- a/frontend/bindings/app/internal/services/authorservice.ts
+++ b/frontend/bindings/app/internal/services/authorservice.ts
@@ -20,7 +20,7 @@ export function Count(): Promise<number> & { cancel(): void } {
 
 export function Create(item: $models.Author): Promise<$models.Author> & { cancel(): void } {
     let $resultPromise = $Call.ByID(3684602449, item) as any;
-    let $typingPromise = $resultPromise.then(($result) => {
+    let $typingPromise = $resultPromise.then(($result: any) => {
         return $$createType0($result);
     }) as any;
     $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
@@ -34,7 +34,7 @@ export function Delete(id: number): Promise<void> & { cancel(): void } {
 
 export function GetAll(): Promise<($models.Author | null)[]> & { cancel(): void } {
     let $resultPromise = $Call.ByID(3248293926) as any;
-    let $typingPromise = $resultPromise.then(($result) => {
+    let $typingPromise = $resultPromise.then(($result: any) => {
         return $$createType2($result);
     }) as any;
     $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
@@ -43,7 +43,7 @@ export function GetAll(): Promise<($models.Author | null)[]> & { cancel(): void
 
 export function GetById(id: number): Promise<$models.Author | null> & { cancel(): void } {
     let $resultPromise = $Call.ByID(1703016211, id) as any;
-    let $typingPromise = $resultPromise.then(($result) => {
+    let $typingPromise = $resultPromise.then(($result: any) => {
         return $$createType1($result);
     }) as any;
     $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
@@ -52,7 +52,7 @@ export function GetById(id: number): Promise<$models.Author | null> & { cancel()
 
 export function Update(item: $models.Author): Promise<$models.Author> & { cancel(): void } {
     let $resultPromise = $Call.ByID(2240704960, item) as any;
-    let $typingPromise = $resultPromise.then(($result) => {
+    let $typingPromise = $resultPromise.then(($result: any) => {
         return $$createType0($result);
     }) as any;
     $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
diff --git a/frontend/bindings/app/internal/services/postservice.ts b/frontend/bindings/app/internal/services/postservice.ts
index 04dec58..72d6196 100644
--- a/frontend/bindings/app/internal/services/postservice.ts
+++ b/frontend/bindings/app/internal/services/postservice.ts
@@ -20,7 +20,7 @@ export function Count(): Promise<number> & { cancel(): void } {
 
 export function Create(item: $models.Post): Promise<$models.Post> & { cancel(): void } {
     let $resultPromise = $Call.ByID(1443399856, item) as any;
-    let $typingPromise = $resultPromise.then(($result) => {
+    let $typingPromise = $resultPromise.then(($result: any) => {
         return $$createType0($result);
     }) as any;
     $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
@@ -39,7 +39,7 @@ export function ExportToExcel(): Promise<void> & { cancel(): void } {
 
 export function GetAll(): Promise<($models.Post | null)[]> & { cancel(): void } {
     let $resultPromise = $Call.ByID(65691059) as any;
-    let $typingPromise = $resultPromise.then(($result) => {
+    let $typingPromise = $resultPromise.then(($result: any) => {
         return $$createType2($result);
     }) as any;
     $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
@@ -48,7 +48,7 @@ export function GetAll(): Promise<($models.Post | null)[]> & { cancel(): void }
 
 export function GetById(id: number): Promise<$models.Post | null> & { cancel(): void } {
     let $resultPromise = $Call.ByID(4074736792, id) as any;
-    let $typingPromise = $resultPromise.then(($result) => {
+    let $typingPromise = $resultPromise.then(($result: any) => {
         return $$createType1($result);
     }) as any;
     $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
@@ -57,7 +57,7 @@ export function GetById(id: number): Promise<$models.Post | null> & { cancel():
 
 export function Update(item: $models.Post): Promise<$models.Post> & { cancel(): void } {
     let $resultPromise = $Call.ByID(137798821, item) as any;
-    let $typingPromise = $resultPromise.then(($result) => {
+    let $typingPromise = $resultPromise.then(($result: any) => {
         return $$createType0($result);
     }) as any;
     $typingPromise.cancel = $resultPromise.cancel.bind($resultPromise);
diff --git a/frontend/src/author/AuthorScheme.vue b/frontend/src/author/AuthorScheme.vue
index 2849028..2e9e6e2 100644
--- a/frontend/src/author/AuthorScheme.vue
+++ b/frontend/src/author/AuthorScheme.vue
@@ -1,18 +1,27 @@
 <script setup lang="ts">
 import Table from "../table/Table.vue";
-import { onMounted, reactive } from "vue";
+import { onMounted, reactive, ref } from "vue";
 import { getDefaultValues } from "../utils/structs/defaults.util";
 import Service from "./author.service.ts";
 import type { Scheme } from "../types/scheme.type";
 import { Author } from "../../bindings/app/internal/services";
 
 import PostService from "../post/post.service.ts";
+import type { Validate } from "../types/validate.type.ts";
 const postService = new PostService();
 
 const service = new Service();
 
-onMounted(async () => {
+const items = ref<Author[]>([])
+
+async function load() {
   (scheme as any).Posts.type!.nested!.values = await postService.readAll();
+  items.value = await service.readAll();
+  return items.value;
+}
+
+onMounted(async () => {
+  load()
 });
 
 const scheme: Scheme<Author> = reactive({
@@ -44,10 +53,16 @@ const scheme: Scheme<Author> = reactive({
 });
 
 const getDefaults = () => getDefaultValues(scheme);
+
+const validate: Validate<Author> = (data, mode): ReturnType<Validate<Author>> => {
+  return {
+    status: 'success',
+  }
+}
 </script>
 
 <template>
   <main class="w-screen h-screen">
-    <Table :scheme :service :getDefaults></Table>
+    <Table :scheme :service :get-defaults :validate :items :load></Table>
   </main>
 </template>
diff --git a/frontend/src/components/selects/MultiSelect.vue b/frontend/src/components/selects/MultiSelect.vue
index b5c5b66..8f70de7 100644
--- a/frontend/src/components/selects/MultiSelect.vue
+++ b/frontend/src/components/selects/MultiSelect.vue
@@ -2,7 +2,6 @@
 import { structView } from '../../utils/structs/structs-view.util';
 import type { IEntity } from '../../types/entity.type';
 import Checkbox from '../checkboxes/Checkbox.vue';
-import { onMounted, watch } from 'vue';
 
 const { entityId } = defineProps<{
     options: T[]
@@ -33,8 +32,7 @@ const setNullIds = () => {
 
 <template>
     <div class="relative">
-        <p class="flex items-center h-8 p-3">{{ structView(selected, path) }}</p>
-        <ul class="absolute max-h-20 overflow-y-auto bg-white rounded-md p-3 w-full border">
+        <ul class="absolute max-h-48 h-auto overflow-y-auto bg-white rounded-md p-3 w-full border">
             <li v-for="option in options" :key="option.Id" class="flex items-center gap-2">
                 <Checkbox :checked="selected.some(item => item.Id == option.Id)" @click="pushOrRemove(option)" />
                 <label :for="option.Id.toString()">{{ structView(option, path) }}</label>
diff --git a/frontend/src/post/PostScheme.vue b/frontend/src/post/PostScheme.vue
index df24301..7ee3ca7 100644
--- a/frontend/src/post/PostScheme.vue
+++ b/frontend/src/post/PostScheme.vue
@@ -70,6 +70,6 @@ const getDefaults = () => getDefaultValues(scheme);
 
 <template>
   <main class="w-screen h-screen">
-    <Table :scheme :service :getDefaults></Table>
+    <Table :scheme :service :get-defaults></Table>
   </main>
 </template>
diff --git a/frontend/src/table/DialogWindow.vue b/frontend/src/table/DialogWindow.vue
index cdc313d..f29c54d 100644
--- a/frontend/src/table/DialogWindow.vue
+++ b/frontend/src/table/DialogWindow.vue
@@ -7,16 +7,20 @@ import { manyStructsView } from '../utils/structs/structs-view.util';
 import { type UnwrapRef } from 'vue';
 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';
 
 const showCreate = defineModel<boolean>('show')
 const createItem = defineModel<T>('item')
-const items = defineModel<UnwrapRef<T[]>>('items')
 
 const props = defineProps<{
     scheme: Scheme<T>,
     getDefaults: () => Partial<T>,
     service: IService<T>,
     updateMode?: boolean
+    validate: Validate<T>
+    items: T[]
+    load(): Promise<T[]>
 }>()
 
 type Key = keyof T
@@ -27,63 +31,74 @@ const emits = defineEmits<{
     (e: 'onSaveUpdate', data: T): void
     (e: 'onSaveCreate', data: T): void
 }>()
+
+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);
+        return;
+    }
+    try {
+        if (props.updateMode) {
+            await props.service.update.call(props.service, createItem.value as T);
+            await emits('onSaveUpdate', createItem.value as T);
+            await emits('onSave', createItem.value as T);
+        } else {
+            await props.service.create.call(props.service, createItem.value as T);
+            await emits('onSaveCreate', createItem.value as T);
+            await emits('onSave', createItem.value as T);
+        }
+    } catch (e) {
+        alertWindow(e.message);
+        return
+    }
+    props.load()
+    showCreate.value = false;
+}
+
 </script>
 
 <template>
     <Dialog v-model:visible="showCreate">
-        <div class="flex flex-col justify-center gap-5">
+        <div class="flex flex-col justify-start gap-5 min-h-[40vh]">
             <div v-for="key in keys" v-show="!props.scheme[key].hidden && !props.scheme[key].readonly"
                 class="flex items-center gap-5">
                 <h1 class="w-[200px]">{{ props.scheme[key].russian }}</h1>
-                <div>
-                    <div v-if="props.scheme[key]?.customWindow?.[props.updateMode ? 'update' : 'create']">
-                        <slot :name="<string>key + (props.updateMode ? 'Update' : 'Create')"></slot>
-                    </div>
-                    <div v-else-if="props.scheme[key]?.customWindow?.common">
-                        <slot :name="<string>key"></slot>
-                    </div>
-                    <InputNumber class="w-[300px]" v-model:model-value="<number>createItem![key]"
-                        v-else-if="props.scheme[key]?.type?.primitive === 'number'" />
-                    <InputText class="w-[300px]" v-model:model-value="<string>createItem![key]"
-                        v-else-if="props.scheme[key].type?.primitive === 'string'" />
-                    <DatePicker class="w-[300px]" :default-value="toDate(createItem![key] as number)" @value-change="v => {
-                        createItem![key] = toTimestamp(v as Date) as any
-                    }" show-time
-                        v-else-if="props.scheme[key].type?.primitive === 'date'" />
-                    <Textarea class="w-[300px]" v-model="<string>createItem![key]"
-                        v-else-if="props.scheme[key].type?.primitive === 'multiple'" />
-                    <ToggleSwitch class="w-[300px]" v-model:model-value="<boolean>createItem![key]"
-                        v-else-if="props.scheme[key].type?.primitive === 'boolean'" />
-                    <Select v-else-if="props.scheme[key].type?.nested?.values && !props.scheme[key]?.many"
-                        v-model:model-value="createItem![key]" :options="props.scheme[key].type.nested.values"
-                        :placeholder="`Выберите ${props.scheme[key].russian}`" class="w-[300px]">
-                        <template #option="{ option }">
-                            {{ manyStructsView(option, props.scheme[key].type.nested.field) }}
-                        </template>
-                        <template #value="{ value }">
-                            {{ manyStructsView(value, props.scheme[key].type.nested.field) }}
-                        </template>
-                    </Select>
-                    <MultiSelect v-else-if="props.scheme[key].type?.nested?.values && props.scheme[key]?.many" class="w-[300px]"
-                        v-model="<T[]>createItem![key]" :options="props.scheme[key].type.nested.values"
-                        :path="props.scheme[key].type.nested.field" :entity-id="props.scheme.entityId" />
+                <div v-if="props.scheme[key]?.customWindow?.[props.updateMode ? 'update' : 'create']">
+                    <slot :name="<string>key + (props.updateMode ? 'Update' : 'Create')"></slot>
                 </div>
+                <div v-else-if="props.scheme[key]?.customWindow?.common">
+                    <slot :name="<string>key"></slot>
+                </div>
+                <InputNumber class="w-[300px]" v-model:model-value="<number>createItem![key]"
+                    v-else-if="props.scheme[key]?.type?.primitive === 'number'" />
+                <InputText class="w-[300px]" v-model:model-value="<string>createItem![key]"
+                    v-else-if="props.scheme[key].type?.primitive === 'string'" />
+                <DatePicker class="w-[300px]" :default-value="toDate(createItem![key] as number)" @value-change="v => {
+                    createItem![key] = toTimestamp(v as Date) as any
+                }" show-time v-else-if="props.scheme[key].type?.primitive === 'date'" />
+                <Textarea class="w-[300px]" v-model="<string>createItem![key]"
+                    v-else-if="props.scheme[key].type?.primitive === 'multiple'" />
+                <ToggleSwitch class="w-[300px]" v-model:model-value="<boolean>createItem![key]"
+                    v-else-if="props.scheme[key].type?.primitive === 'boolean'" />
+                <Select v-else-if="props.scheme[key].type?.nested?.values && !props.scheme[key]?.many"
+                    v-model:model-value="createItem![key]" :options="props.scheme[key].type.nested.values"
+                    :placeholder="`Выберите ${props.scheme[key].russian}`" class="w-[300px]">
+                    <template #option="{ option }">
+                        {{ manyStructsView(option, props.scheme[key].type.nested.field) }}
+                    </template>
+                    <template #value="{ value }">
+                        {{ manyStructsView(value, props.scheme[key].type.nested.field) }}
+                    </template>
+                </Select>
+                <MultiSelect v-else-if="props.scheme[key].type?.nested?.values && props.scheme[key]?.many"
+                    class="w-[300px]" v-model="<T[]>createItem![key]" :options="props.scheme[key].type.nested.values"
+                    :path="props.scheme[key].type.nested.field" :entity-id="props.scheme.entityId" />
             </div>
         </div>
         <template #footer>
-            <Button severity="success" @click="async () => {
-                if (props.updateMode) {
-                    await props.service.update(createItem as T)
-                    await emits('onSaveUpdate', createItem as T)
-                    await emits('onSave', createItem as T)
-                } else {
-                    await props.service.create(createItem as T)
-                    await emits('onSaveCreate', createItem as T)
-                    await emits('onSave', createItem as T)
-                }
-                items = await props.service.readAll() as UnwrapRef<T[]>
-                showCreate = false
-            }">Сохранить</Button>
+            <Button severity="success" class="mt-5" @click="handleSave">Сохранить</Button>
         </template>
     </Dialog>
 </template>
\ No newline at end of file
diff --git a/frontend/src/table/Table.vue b/frontend/src/table/Table.vue
index d23b5af..ffe6668 100644
--- a/frontend/src/table/Table.vue
+++ b/frontend/src/table/Table.vue
@@ -7,15 +7,12 @@ import type { TableEmits } from "../types/table-emits.type";
 import FloatingButton from "../components/buttons/FloatingButton.vue";
 import type { IEntity } from "../types/entity.type";
 import DialogWindow from "./DialogWindow.vue";
-import { timestampToDate } from "../utils/date/converters.util";
 import { viewDate } from "../utils/date/view.util";
 
 const props = defineProps<TableProps<T>>();
 
-const items = ref<T[]>([]);
-
 onMounted(async () => {
-    items.value = await props.service.readAll();
+    props.load()
 });
 
 type Key = keyof T;
@@ -71,12 +68,14 @@ const updateSlotName = (key: any) => key + "Update";
 
 <template>
     <DialogWindow
-        :scheme="props.scheme"
-        :service="props.service"
-        :get-defaults="props.getDefaults"
+        :load
+        :items
+        :validate
+        :scheme
+        :service
+        :get-defaults
         v-model:item="<T>createItem"
         v-model:show="showCreate"
-        v-model:items="items"
         @on-save="data => emits('onSave', data)"
         @on-save-create="data => emits('onSaveCreate', data)"
     >
@@ -88,13 +87,15 @@ const updateSlotName = (key: any) => key + "Update";
         </template>
     </DialogWindow>
     <DialogWindow
-        :scheme="props.scheme"
+        :load
+        :items
+        :validate
+        :scheme
         update-mode
-        :service="props.service"
-        :get-defaults="props.getDefaults"
+        :service
+        :get-defaults
         v-model:item="<T>updateItem"
         v-model:show="showUpdate"
-        v-model:items="items"
         @on-save="data => emits('onSave', data)"
         @on-save-update="data => emits('onSaveUpdate', data)"
     >
@@ -145,7 +146,7 @@ const updateSlotName = (key: any) => key + "Update";
                             @click="async () => {
                               await emits('onDelete', data)
                               await props.service.delete(data.Id)
-                              items = await props.service.readAll() as UnwrapRef<T[]>
+                              await load()
                             }"
                         ></Button>
                     </div>
diff --git a/frontend/src/types/table-props.type.ts b/frontend/src/types/table-props.type.ts
index 2c4bf7a..3679539 100644
--- a/frontend/src/types/table-props.type.ts
+++ b/frontend/src/types/table-props.type.ts
@@ -1,11 +1,14 @@
 import type { IEntity } from "./entity.type";
 import type { Scheme } from "./scheme.type";
 import type { IService } from "./service.type";
+import type { Validate } from "./validate.type";
 
 export interface TableProps<T extends IEntity> {
     service: IService<T>
     scheme: Scheme<T>
     name?: string
     getDefaults: () => Partial<T>
-    validate?: (data: T) => never | void
+    validate: Validate<T>
+    load(): Promise<T[]>
+    items: T[]
 }
\ No newline at end of file
diff --git a/frontend/src/types/validate.type.ts b/frontend/src/types/validate.type.ts
new file mode 100644
index 0000000..ee1e765
--- /dev/null
+++ b/frontend/src/types/validate.type.ts
@@ -0,0 +1,3 @@
+import type { IEntity } from "./entity.type";
+
+export type Validate<T extends IEntity> = (data: T, mode: "update" | "create") => { status: "error" | "success", message?: string }
\ No newline at end of file
diff --git a/frontend/src/utils/js/alert.utils.ts b/frontend/src/utils/js/alert.utils.ts
new file mode 100644
index 0000000..6c0dac2
--- /dev/null
+++ b/frontend/src/utils/js/alert.utils.ts
@@ -0,0 +1 @@
+export const alertWindow = alert
\ No newline at end of file