feat: preloading, error handing

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);

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);

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>

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-48 h-auto overflow-y-auto bg-white rounded-md p-3 w-full border">
-        <ul class="absolute max-h-20 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>

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>

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,15 +31,40 @@ 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>
@@ -48,8 +77,7 @@ const emits = defineEmits<{
                     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
+                }" show-time v-else-if="props.scheme[key].type?.primitive === 'date'" />
-                        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]"
@@ -64,26 +92,13 @@ const emits = defineEmits<{
                         {{ 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]"
+                <MultiSelect v-else-if="props.scheme[key].type?.nested?.values && props.scheme[key]?.many"
-                        v-model="<T[]>createItem![key]" :options="props.scheme[key].type.nested.values"
+                    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>
-        </div>
         <template #footer>
-            <Button severity="success" @click="async () => {
+            <Button severity="success" class="mt-5" @click="handleSave">Сохранить</Button>
-                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>
         </template>
     </Dialog>
 </template>

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"
+        :load
-        :service="props.service"
+        :items
-        :get-defaults="props.getDefaults"
+        :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"
+        :service
-        :get-defaults="props.getDefaults"
+        :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>

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[]
 }

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 }

frontend/src/utils/js/alert.utils.ts

@@ -0,0 +1 @@
+export const alertWindow = alert