feat: basic ui

frontend/src/App.vue

@@ -2,8 +2,7 @@
 import { Dialog } from "primevue";
 import { useErrorStore } from "./stores/error.store";
 import { RouterView } from "vue-router";
-import AuthorScheme from "./author/AuthorScheme.vue";
-import PostScheme from "./post/PostScheme.vue";
+import VHeader from "./components/headers/VHeader.vue";
 
 const errorStore = useErrorStore();
 </script>
@@ -17,8 +16,8 @@ const errorStore = useErrorStore();
         <template #header> Ошибка </template>
         <h1 class="text-red-500 text-2xl">{{ errorStore.message }}</h1>
     </Dialog>
-    <main class="w-screen h-screen">
+    <VHeader v-if="$route?.matched?.length > 1" />
+    <main>
        <RouterView />
-      <PostScheme />
     </main>
 </template>

frontend/src/components/cards/NavCard.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { Button, Card } from 'primevue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter()
+
+const navigateTo = (path: string) => {
+  localStorage.setItem('app-selection', path)
+  router.push(path)
+}
+
+defineProps<{
+    to: string
+    title: string
+    content?: string
+}>()
+</script>
+
+<template>
+    <Card>
+      <template #title>
+        <h1 class="text-md">{{ title }}</h1>
+      </template>
+      <template #content v-if="content">
+        <p class="w-56">{{ content }}</p>
+      </template>
+      <template #footer>
+        <Button @click="navigateTo(to)" severity="contrast" size="small">Перейти</Button>
+      </template>
+    </Card>
+</template>

frontend/src/components/headers/VHeader.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { Button, Toolbar } from 'primevue';
+import { useRoute, useRouter } from 'vue-router';
+
+const route = useRoute()
+const router = useRouter()
+
+const logout = () => {
+    localStorage.removeItem('app-selection')
+    router.replace('/')
+}
+
+</script>
+
+<template>
+    <header >
+        <Toolbar>
+            <template #start>
+                <p class="font-bold">{{ $route.matched?.[$route.matched.length - 2]?.name }} / {{ route.name }}</p>
+            </template>
+            <template #end>
+                <Button severity="danger" :size="'small'" @click="logout">Выйти</Button>
+            </template>
+        </Toolbar>
+    </header>
+</template>

frontend/src/main.ts

@@ -7,8 +7,9 @@ import 'primeicons/primeicons.css'
 import { ru } from 'primelocale/js/ru.js'
 import { createPinia } from 'pinia'
 import { router } from './router/router'
+import Tooltip from 'primevue/tooltip'
 
-createApp(App).use(router).use(createPinia()).use(Config, {
+createApp(App).directive('tooltip', Tooltip).use(router).use(createPinia()).use(Config, {
     theme: {
         preset: Aura,
     },

frontend/src/pages/Index.vue

@@ -1,22 +1,15 @@
 <script setup lang="ts">
-import Calendar from '../components/calendar/Calendar.vue';
-import { CalendarEvent } from '../components/calendar/event.class';
+import { Button } from 'primevue';
+import NavCard from '../components/cards/NavCard.vue';
 
-const events: CalendarEvent[] = []
-
-const newEvent = new CalendarEvent(
-  "Advanced algebra",
-  "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores assumenda corporis doloremque et expedita molestias necessitatibus quam quas temporibus veritatis. Deserunt excepturi illum nobis perferendis praesentium repudiandae saepe sapiente voluptatem!",
-  new Date("2025-03-11T12:05:00"),
-  new Date("2025-03-12T13:35:00"),
-  {
-    color: 'pink',
-  }
-)
-
-events.push(newEvent)
 </script>
 
 <template>
-  <Calendar :events="events" />
+  <div class="flex w-screen h-screen items-center gap-5 justify-center">
+    <NavCard :title="'Пользователь'" :to="'/user'" :content="'Может кидать зигу и не может пользоваться туалетной бумагой'" />
+  </div>
+  <footer class="fixed w-full bottom-10 flex items-center justify-center gap-2">
+    <Button severity="secondary">Импортировать данные</Button>
+    <Button severity="secondary">Экспортировать данные</Button>
+  </footer>
 </template>

frontend/src/pages/tables/PostTablePage.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import PostScheme from '../../post/PostScheme.vue';
+</script>
+
+<template>
+    <PostScheme />
+</template>

frontend/src/pages/user/UserPage.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { RouterView } from 'vue-router';
+
+
+</script>
+
+<template>
+    <RouterView />
+</template>

frontend/src/post/PostScheme.vue

@@ -15,7 +15,7 @@ import PosttypeService from "../posttype/posttype.service.ts";
 const posttypeService = new PosttypeService();
 
 import CommentService from "../comment/comment.service.ts";
-import {SortedByOrder} from "../../bindings/app/internal/services/postservice.ts";
+import { SortedByOrder } from "../../bindings/app/internal/services/postservice.ts";
 
 const commentService = new CommentService();
 
@@ -38,7 +38,7 @@ const load = async () => {
 
 onMounted(async () => {
     await load();
-    console.log(await SortedByOrder({"Author": "DESC", "Text": "ASC"}));
+    console.log(await SortedByOrder({ "Author": "DESC", "Text": "ASC" }));
 });
 
 const scheme: Scheme<Post> = reactive({
@@ -124,7 +124,7 @@ const scheme: Scheme<Post> = reactive({
 });
 
 const getDefaults = () => {
-    return ({...getDefaultValues(scheme), AuthorId: 1, PostTypeId: 1});
+    return ({ ...getDefaultValues(scheme), AuthorId: 1, PostTypeId: 1 });
 };
 
 const validate: Validate<Post> = (entity) => {
@@ -135,11 +135,9 @@ const validate: Validate<Post> = (entity) => {
 </script>
 
 <template>
-    <main class="w-screen h-screen">
-        <Table :scheme :service :get-defaults :load :items :validate>
-            <template #CommentsCreate="{ data }">
-                <p>{{ data.Comments }}</p>
-            </template>
-        </Table>
-    </main>
+    <Table :scheme :service :get-defaults :load :items :validate>
+        <template #CommentsCreate="{ data }">
+            <p>{{ data.Comments }}</p>
+        </template>
+    </Table>
 </template>

frontend/src/router/router.ts

@@ -1,10 +1,24 @@
 import { createRouter, createWebHistory, type RouteRecordRaw } from "vue-router";
 import Index from "../pages/Index.vue";
+import UserPage from "../pages/user/UserPage.vue";
+import PostTablePage from "../pages/tables/PostTablePage.vue";
 
 export const routes: RouteRecordRaw[] = [{
     path: "/",
     component: Index,
-    name: 'Главная',
+    name: 'Главная'
+}, {
+    path: '/user',
+    name: 'Пользователь',
+    component: UserPage,
+    redirect: '/user/post',
+    children: [
+        {
+            component: PostTablePage,
+            path: '/user/post',
+            name: 'Новости'
+        }
+    ]
 }]
 
 export const router = createRouter({

frontend/src/table/Table.vue

@@ -100,14 +100,17 @@ watch(() => props.items, () => {
         </template>
     </DialogWindow>
     <div>
-        <DataTable :value="<[]>items">
+        <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="">
+                        <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],