From dba38f71b16432eb576b2d48b71d6fc2d4426397 Mon Sep 17 00:00:00 2001
From: opbnq-q <cko.vladislav@gmai.com>
Date: Fri, 14 Mar 2025 18:44:43 +0700
Subject: [PATCH] feat: sorting, searching

---
 frontend/src/author/AuthorScheme.vue          |   1 -
 .../src/components/selects/MultiSelect.vue    |   4 +-
 frontend/src/post/PostScheme.vue              |  23 +-
 frontend/src/post/post.service.ts             |   7 +-
 frontend/src/style.css                        |  15 ++
 frontend/src/table/DialogWindow.vue           |   2 +-
 frontend/src/table/SortingOptions.vue         |  25 +++
 frontend/src/table/Table.vue                  | 210 ++++++++++--------
 frontend/src/types/sort-options.type.ts       |   6 +
 frontend/src/types/sorting.type.ts            |   1 +
 frontend/src/types/table-emits.type.ts        |   1 +
 .../structs/default-sort-options.util.ts      |  16 ++
 12 files changed, 203 insertions(+), 108 deletions(-)
 create mode 100644 frontend/src/table/SortingOptions.vue
 create mode 100644 frontend/src/types/sort-options.type.ts
 create mode 100644 frontend/src/types/sorting.type.ts
 create mode 100644 frontend/src/utils/structs/default-sort-options.util.ts

diff --git a/frontend/src/author/AuthorScheme.vue b/frontend/src/author/AuthorScheme.vue
index f2e59a1..113b9fc 100644
--- a/frontend/src/author/AuthorScheme.vue
+++ b/frontend/src/author/AuthorScheme.vue
@@ -31,7 +31,6 @@ const load = async () => {
 
 onMounted(async () => {
   await load();
-  console.log(await SortedByOrder({"Comments": "DESC"}))
 });
 
 const scheme: Scheme<Author> = reactive({
diff --git a/frontend/src/components/selects/MultiSelect.vue b/frontend/src/components/selects/MultiSelect.vue
index 2ee8409..230e08a 100644
--- a/frontend/src/components/selects/MultiSelect.vue
+++ b/frontend/src/components/selects/MultiSelect.vue
@@ -17,7 +17,6 @@ const pushOrRemove = (option: T) => {
     } else {
         selected.value.push(option)
     }
-    //setNullIds()
 }
 
 const setNullIds = () => {
@@ -27,12 +26,11 @@ const setNullIds = () => {
     })
 }
 
-//onMounted(setNullIds)
 </script>
 
 <template>
     <div class="">
-        <ul class="max-h-48 h-auto overflow-y-auto background rounded-md p-3 w-full border-gray-500 border">
+        <ul class="max-h-48 h-auto overflow-y-auto background rounded-md p-3 w-full native-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 0fb0286..1366bb8 100644
--- a/frontend/src/post/PostScheme.vue
+++ b/frontend/src/post/PostScheme.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Table from "../table/Table.vue";
-import { onMounted, reactive } from "vue";
+import {onMounted, reactive, watch} from "vue";
 import { getDefaultValues } from "../utils/structs/defaults.util";
 import Service from "./post.service.ts";
 import type { Scheme } from "../types/scheme.type";
@@ -16,6 +16,7 @@ const posttypeService = new PosttypeService();
 
 import CommentService from "../comment/comment.service.ts";
 import { SortedByOrder } from "../../bindings/app/internal/services/postservice.ts";
+import {getDefaultSortOptions} from "../utils/structs/default-sort-options.util.ts";
 
 const commentService = new CommentService();
 
@@ -32,13 +33,12 @@ const load = async () => {
     (scheme as any).Comments.type!.nested!.values =
         await commentService.readAll();
 
-    items.value = await service.readAll();
+    items.value = await service.sort(sortOptions.value) ;
     return items.value;
 };
 
 onMounted(async () => {
     await load();
-    console.log(await SortedByOrder({ "Author": "DESC", "Text": "ASC" }));
 });
 
 const scheme: Scheme<Post> = reactive({
@@ -116,9 +116,6 @@ const scheme: Scheme<Post> = reactive({
                 values: [],
                 field: ["Text"],
             },
-        },
-        customWindow: {
-            create: true,
         }
     },
 });
@@ -132,12 +129,16 @@ const validate: Validate<Post> = (entity) => {
         status: "success",
     };
 };
+
+const search = async (input: string) => {
+    
+}
+
+const sortOptions = ref(getDefaultSortOptions(scheme))
+
+
 </script>
 
 <template>
-    <Table :scheme :service :get-defaults :load :items :validate >
-        <template #CommentsCreate="{ data }">
-            <p>{{ data }}</p>
-        </template>
-    </Table>
+    <Table :scheme :service :get-defaults :load :items :validate @on-search="search" v-model:sort-options="sortOptions"></Table>
 </template>
diff --git a/frontend/src/post/post.service.ts b/frontend/src/post/post.service.ts
index 01436ca..dbc73ee 100644
--- a/frontend/src/post/post.service.ts
+++ b/frontend/src/post/post.service.ts
@@ -4,10 +4,11 @@ import {
   Delete,
   GetById,
   Update,
-  Count,
+  Count, SortedByOrder,
 } from "../../bindings/app/internal/services/postservice.ts";
 import type { Post } from "../../bindings/app/internal/services";
 import type { IService } from "../types/service.type.ts";
+import type {SortOptions} from "../types/sort-options.type.ts";
 
 export default class PostService implements IService<Post> {
   async read(id: number) {
@@ -33,4 +34,8 @@ export default class PostService implements IService<Post> {
   async count() {
     return await Count();
   }
+
+  async sort(options: SortOptions<Post>) {
+    return await SortedByOrder(options) as Post[]
+  }
 }
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 070af99..1789f47 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -5,10 +5,25 @@
 
 html, body, .background {
     background: white;
+    color: rgb(51, 65, 85);
+}
+
+.secondary-background {
+    background: var(--p-content-background)
+}
+
+.native-border {
+    border: 1px solid var(--p-select-border-color);
 }
 
 @media (prefers-color-scheme: dark) {
     html, body, .background {
         background: #121212;
+        color: white;
     }
+
+    .native-border {
+        border: 1px solid rgb(100, 100, 109);
+    }
+
 }
\ No newline at end of file
diff --git a/frontend/src/table/DialogWindow.vue b/frontend/src/table/DialogWindow.vue
index 4e7707d..ddbc8b0 100644
--- a/frontend/src/table/DialogWindow.vue
+++ b/frontend/src/table/DialogWindow.vue
@@ -62,7 +62,7 @@ async function handleSave() {
 </script>
 
 <template>
-    <Dialog v-model:visible="showCreate">
+    <Dialog v-model:visible="showCreate" class="w-[500px]">
         <template #header>
             <h1>{{ props.updateMode ? 'Изменить' : 'Создать' }} {{ props.name?.toLowerCase() }}</h1>
         </template>
diff --git a/frontend/src/table/SortingOptions.vue b/frontend/src/table/SortingOptions.vue
new file mode 100644
index 0000000..b128389
--- /dev/null
+++ b/frontend/src/table/SortingOptions.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts" generic="T extends IEntity">
+import type {IEntity} from "../types/entity.type.ts";
+import type {SortOptions} from "../types/sort-options.type.ts";
+import type {Scheme} from "../types/scheme.type.ts";
+import {Select} from 'primevue'
+import {watch} from "vue";
+
+
+const options = defineModel<SortOptions<T>>()
+const optionsKeys = Object.keys(options.value as T) as (keyof T)[]
+
+defineProps<{
+  scheme: Scheme<T>
+  load: () => Promise<T[]>
+}>()
+</script>
+
+<template>
+  <ul class="flex flex-col gap-2 native-border secondary-background  p-3 rounded-md">
+    <li v-for="optionKey in optionsKeys" class="flex items-center justify-between w-full">
+      <h1>{{ scheme[optionKey].russian }}</h1>
+      <Select size="small" class="w-24" :options="['ASC', 'DESC']" v-model="options![optionKey]" @value-change="load"></Select>
+    </li>
+  </ul>
+</template>
diff --git a/frontend/src/table/Table.vue b/frontend/src/table/Table.vue
index 5b6c5f2..434a10d 100644
--- a/frontend/src/table/Table.vue
+++ b/frontend/src/table/Table.vue
@@ -1,20 +1,18 @@
 <script setup lang="ts" generic="T extends IEntity">
-import { onMounted, ref, watch, type UnwrapRef } from "vue";
-import type { TableProps } from "../types/table-props.type";
-import { DataTable, Column, Button } from "primevue";
-import { manyStructsView } from "../utils/structs/structs-view.util";
-import type { TableEmits } from "../types/table-emits.type";
+import {onMounted, ref, watch, type UnwrapRef} from "vue";
+import type {TableProps} from "../types/table-props.type";
+import {DataTable, Column, Button, InputText} from "primevue";
+import {manyStructsView} from "../utils/structs/structs-view.util";
+import type {TableEmits} from "../types/table-emits.type";
 import FloatingButton from "../components/buttons/FloatingButton.vue";
-import type { IEntity } from "../types/entity.type";
+import type {IEntity} from "../types/entity.type";
 import DialogWindow from "./DialogWindow.vue";
-import { viewDate } from "../utils/date/view.util";
+import {viewDate} from "../utils/date/view.util";
+import SortingOptions from "./SortingOptions.vue";
+import type {SortOptions} from "../types/sort-options.type.ts";
 
 const props = defineProps<TableProps<T>>();
 
-onMounted(async () => {
-    props.load()
-});
-
 type Key = keyof T;
 const keys = Object.keys(props.scheme) as Key[];
 const emits = defineEmits<TableEmits>();
@@ -26,39 +24,39 @@ const showUpdate = ref(false);
 const updateItem = ref<null | T>(null);
 
 watch(showUpdate, (value) => {
-    if (!value) {
-        updateItem.value = null;
-    }
+  if (!value) {
+    updateItem.value = null;
+  }
 });
 
 watch(updateItem, (value) => {
-    if (value) {
-        showUpdate.value = true;
-    } else {
-        showUpdate.value = false;
-    }
+  if (value) {
+    showUpdate.value = true;
+  } else {
+    showUpdate.value = false;
+  }
 });
 
 watch(showCreate, (value) => {
-    if (value) {
-        createItem.value = props.getDefaults();
-    } else {
-        createItem.value = null;
-    }
+  if (value) {
+    createItem.value = props.getDefaults();
+  } else {
+    createItem.value = null;
+  }
 });
 
 watch(createItem, (value) => {
-    if (value) {
-        showCreate.value = true;
-    } else {
-        showCreate.value = false;
-    }
+  if (value) {
+    showCreate.value = true;
+  } else {
+    showCreate.value = false;
+  }
 });
 
 const handleFloatingButtonClick = () => {
-    emits('onCreateOpen')
-    emits('onOpen')
-    showCreate.value = true;
+  emits('onCreateOpen')
+  emits('onOpen')
+  showCreate.value = true;
 };
 const slots = defineSlots();
 
@@ -66,78 +64,108 @@ const createSlotName = (key: any) => key + "Create";
 const updateSlotName = (key: any) => key + "Update";
 
 watch(() => props.items, () => {
-    if (props.colorize) {
-        const trs = document.querySelectorAll("tr");
-        props.items.forEach(item => {
-            const tr = trs[item.Id];
-            if (tr) {
-                tr.style.backgroundColor = props.colorize!(item);
-            }
-        })
-    }
+  if (props.colorize) {
+    const trs = document.querySelectorAll("tr");
+    props.items.forEach(item => {
+      const tr = trs[item.Id];
+      if (tr) {
+        tr.style.backgroundColor = props.colorize!(item);
+      }
+    })
+  }
 })
+
+const input = ref('')
+const sortOptions = defineModel<SortOptions<T>>('sort-options');
+const showSortOptions = ref(false)
+
 </script>
 
 <template>
-    <DialogWindow :name :load :items :validate :scheme :service :get-defaults v-model:item="<T>createItem"
-        v-model:show="showCreate" @on-save="data => emits('onSave', data)"
-        @on-save-create="data => emits('onSaveCreate', data)">
-        <template v-for="key in keys" #[key]="{ data }">
-            <slot :name="<string>key" :data></slot>
-        </template>
-        <template v-for="key in keys" #[createSlotName(key)]="{ data }">
-            <slot :name="createSlotName(key)" :data></slot>
-        </template>
-    </DialogWindow>
-    <DialogWindow :name :load :items :validate :scheme update-mode :service :get-defaults v-model:item="<T>updateItem"
-        v-model:show="showUpdate" @on-save="data => emits('onSave', data)"
-        @on-save-update="data => emits('onSaveUpdate', data)">
-        <template v-for="key in keys" #[key]="{ data }">
-            <slot :name="<string>key" :data></slot>
-        </template>
-        <template v-for="key in keys" #[updateSlotName(key)]="{ data }">
-            <slot :name="updateSlotName(key)" :data></slot>
-        </template>
-    </DialogWindow>
-    <div>
-        <DataTable :value="<[]>items" paginator :rows="10">
-            <template #header v-if="props.name">
-                <p>{{ props.name }}</p>
-            </template>
-            <template v-for="key in keys">
-                <Column :header="props.scheme[key]?.russian" v-if="!props.scheme[key].hidden">
-                    <template #body="{ data }">
-                        <p class="truncate max-w-56" v-tooltip="viewDate(manyStructsView(
+  <div class="m-2 flex flex-col items-center gap-2">
+    <div class="flex flex-col gap-2 relative">
+      <div class="flex items-center justify-center gap-2 h-10">
+        <Button severity="secondary" class="h-full aspect-square" @click="showSortOptions = !showSortOptions">
+          <span class="pi pi-sort"></span>
+        </Button>
+
+        <InputText class="h-full w-64" v-model="input"/>
+        <Button severity="secondary" class="h-full aspect-square" @click="emits('onSearch', input)">
+          <span class="pi pi-search"></span>
+        </Button>
+      </div>
+      <SortingOptions v-model="sortOptions as SortOptions<T>" :scheme v-if="showSortOptions"
+                      class="absolute z-10 w-full top-full translate-y-2" :load="props.load"></SortingOptions>
+    </div>
+
+  </div>
+  <DialogWindow :name :load :items :validate :scheme :service :get-defaults v-model:item="<T>createItem"
+                v-model:show="showCreate" @on-save="data => emits('onSave', data)"
+                @on-save-create="data => emits('onSaveCreate', data)">
+    <template v-for="key in keys" #[key]="{ data }">
+      <slot :name="<string>key" :data="data"></slot>
+    </template>
+    <template v-for="key in keys" #[createSlotName(key)]="{ data }">
+      <slot :name="createSlotName(key)" :data="data"></slot>
+    </template>
+  </DialogWindow>
+  <DialogWindow :name :load :items :validate :scheme update-mode :service :get-defaults v-model:item="<T>updateItem"
+                v-model:show="showUpdate" @on-save="data => emits('onSave', data)"
+                @on-save-update="data => emits('onSaveUpdate', data)">
+    <template v-for="key in keys" #[key]="{ data }">
+      <slot :name="<string>key" :data="data"></slot>
+    </template>
+    <template v-for="key in keys" #[updateSlotName(key)]="{ data }">
+      <slot :name="updateSlotName(key)" :data="data"></slot>
+    </template>
+  </DialogWindow>
+  <div>
+    <DataTable :value="<[]>items" paginator :rows="10">
+      <template #header v-if="props.name">
+        <p>{{ props.name }}</p>
+      </template>
+      <template v-for="key in keys">
+        <Column :header="props.scheme[key]?.russian" v-if="!props.scheme[key].hidden">
+          <template #body="{ data }">
+            <p class="truncate max-w-56" v-tooltip="viewDate(manyStructsView(
                             data[key],
                             props.scheme[key]?.type?.nested?.field,
                         ), scheme[key]?.type?.primitive)">
-                            {{
-                                viewDate(manyStructsView(
-                                    data[key],
-                                    props.scheme[key]?.type?.nested?.field,
-                                ), scheme[key]?.type?.primitive)
-                            }}
-                        </p>
-                    </template>
-                </Column>
-            </template>
-            <Column header="Действия">
-                <template #body="{ data }">
-                    <div class="flex gap-2">
-                        <Button severity="secondary" icon="pi pi-pencil" @click="async () => {
+              {{
+                viewDate(manyStructsView(
+                    data[key],
+                    props.scheme[key]?.type?.nested?.field,
+                ), scheme[key]?.type?.primitive)
+              }}
+            </p>
+          </template>
+        </Column>
+      </template>
+      <Column header="Действия">
+        <template #body="{ data }">
+          <div class="flex gap-2">
+            <Button severity="secondary" icon="pi pi-pencil" @click="async () => {
                             await emits('onUpdateOpen')
                             await emits('onOpen')
                             updateItem = data
                         }"></Button>
-                        <Button severity="danger" icon="pi pi-trash" @click="async () => {
+            <Button severity="danger" icon="pi pi-trash" @click="async () => {
                             await emits('onDelete', data)
                             await props.service.delete(data.Id)
                             await load()
                         }"></Button>
-                    </div>
-                </template>
-            </Column>
-        </DataTable>
-        <FloatingButton @click="handleFloatingButtonClick" />
-    </div>
+          </div>
+        </template>
+      </Column>
+      <template #paginatorstart>
+        <Button severity="secondary" @click="props.load">
+          <span class="pi pi-refresh"></span>
+        </Button>
+      </template>
+      <template #paginatorend>
+        <span></span>
+      </template>
+    </DataTable>
+    <FloatingButton @click="handleFloatingButtonClick"/>
+  </div>
 </template>
diff --git a/frontend/src/types/sort-options.type.ts b/frontend/src/types/sort-options.type.ts
new file mode 100644
index 0000000..f932081
--- /dev/null
+++ b/frontend/src/types/sort-options.type.ts
@@ -0,0 +1,6 @@
+import type { IEntity } from "./entity.type";
+import type { Sorting } from "./sorting.type";
+
+export type SortOptions<T extends IEntity> = {
+    [key in keyof Partial<T>]: Sorting
+}
\ No newline at end of file
diff --git a/frontend/src/types/sorting.type.ts b/frontend/src/types/sorting.type.ts
new file mode 100644
index 0000000..5e37cfa
--- /dev/null
+++ b/frontend/src/types/sorting.type.ts
@@ -0,0 +1 @@
+export type Sorting = "DESC" | "ASC"
\ No newline at end of file
diff --git a/frontend/src/types/table-emits.type.ts b/frontend/src/types/table-emits.type.ts
index 83cae1c..4710268 100644
--- a/frontend/src/types/table-emits.type.ts
+++ b/frontend/src/types/table-emits.type.ts
@@ -9,4 +9,5 @@ export type TableEmits = {
     (e: 'onSaveUpdate', data: any): Promise<void> | void
     (e: 'onSaveCreate', data: any): Promise<void> | void
     (e: 'onSave', data: any): Promise<void> | void
+    (e: 'onSearch', input: string): Promise<void> | void
 }
\ No newline at end of file
diff --git a/frontend/src/utils/structs/default-sort-options.util.ts b/frontend/src/utils/structs/default-sort-options.util.ts
new file mode 100644
index 0000000..05a0b3b
--- /dev/null
+++ b/frontend/src/utils/structs/default-sort-options.util.ts
@@ -0,0 +1,16 @@
+import type { IEntity } from "../../types/entity.type";
+import type { Scheme } from "../../types/scheme.type";
+import type { SortOptions } from "../../types/sort-options.type";
+
+export const getDefaultSortOptions = <T extends IEntity>(scheme: Scheme<T>): SortOptions<T> => {
+    const keys = Object.keys(scheme) as (keyof T)[]
+    const result: Partial<SortOptions<T>> = {}
+
+    keys.forEach(key => {
+        if (!scheme[key].hidden && key !== 'entityId' && !scheme[key].many) {
+            result[key] = 'ASC'
+        }
+    })
+
+    return result as SortOptions<T>
+}
\ No newline at end of file