feat: preloading, error handing

2025-03-09 04:25:25 -07:00
parent 9e49d16a43
commit f648b4b171
10 changed files with 112 additions and 76 deletions
--- 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);
--- 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);
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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[]
 }
--- a/frontend/src/types/validate.type.ts
+++ 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 }
--- a/frontend/src/utils/js/alert.utils.ts
+++ b/frontend/src/utils/js/alert.utils.ts
@@ -0,0 +1 @@
+export const alertWindow = alert