init

pages/index.vue

@@ -13,19 +13,19 @@
 
     <UiTable :table-data="tableData" :columns="columns" height="600px" width="600px" />
 
-    <UserModal v-if="selectedUser" v-model:model-value="open" :selected-user="selectedUser" />
+    <UserModal v-if="selectedUser" :user="selectedUser" @close="selectedUser = null" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { UiTableShortText } from '#components'
+import type { ColumnDef } from '@tanstack/table-core'
 import { createColumnHelper } from '@tanstack/vue-table'
 import { useDebounceFn } from '@vueuse/core'
 import { useGetPosts, useGetUsers } from '~/api/queries'
 import UserModal from '~/components/modals/UserModal.vue'
+import ShortText from '~/components/ShortText.vue'
 import UiTable from '~/components/UiTable.vue'
 
-const open = ref(false)
 const selectedUser = ref<User | null>(null)
 const search = ref('')
 const updateSearch = useDebounceFn((value: string) => {
@@ -34,67 +34,66 @@ const updateSearch = useDebounceFn((value: string) => {
 const { data: posts, isLoading: postsIsLoading } = useGetPosts(search)
 const { data: users, isLoading: usersIsLoading } = useGetUsers()
 
-const tableData = computed(() => (posts?.value ?? []).map(post => ({
-  userId: post?.userId,
-  userEmail: users?.value?.find(user => user?.id === post?.userId)?.email,
-  id: post?.id,
-  title: post?.title,
-  body: post?.body,
-})))
+interface TablePost extends Post {
+  userEmail: User['email']
+}
 
-const columnHelper = createColumnHelper<Posts>()
+const tableData = computed(() => {
+  return (posts?.value ?? []).map(post => ({
+    userId: post?.userId,
+    userEmail: users?.value?.find(user => user?.id === post?.userId)?.email,
+    id: post?.id,
+    title: post?.title,
+    body: post?.body,
+  } as TablePost))
+})
+
+const columnHelper = createColumnHelper<TablePost>()
 const columns = [
   columnHelper.accessor('id', {
     header: 'ID',
-    footer: props => props?.column?.id,
     meta: {
-      style: {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-      },
+      width: '50px',
     },
-    size: 50,
   }),
   columnHelper.accessor('title', {
     header: 'Заголовок',
-    cell: info => h(UiTableShortText, {
+    cell: info => h(ShortText, {
       text: info.getValue(),
-      maxLength: 10,
     }),
-    size: 150,
+    meta: {
+      width: '150px',
+    },
   }),
   columnHelper.accessor('userEmail', {
     header: 'Автор',
     cell: info =>
-      h(UiTableShortText, {
+      h(ShortText, {
         text: info.getValue(),
-        hideIcon: true,
-        class: 'title-cell',
+        textPrimary: true,
         onClick: () => openPost(info.row.original),
       }),
     meta: {
-      style: {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-      },
+      width: '170px',
     },
-    size: 170,
   }),
   columnHelper.accessor('body', {
     header: 'Контент',
-    cell: info => h(UiTableShortText, {
+    cell: info => h(ShortText, {
       text: info.getValue(),
-      maxLength: 18,
     }),
-    size: 230,
+    meta: {
+      width: 'minmax(220px, 1fr)',
+    },
   }),
-]
+] as ColumnDef<TablePost>[]
 
 function openPost(post: Post) {
-  selectedUser.value = users?.value?.find(user => user?.id === post?.userId)
-  open.value = true
+  const foundUser = users?.value?.find(user => user?.id === post?.userId)
+
+  if (foundUser) {
+    selectedUser.value = foundUser
+  }
 }
 </script>
 
@@ -124,15 +123,4 @@ function openPost(post: Post) {
     }
   }
 }
-
-//userEmail
-.title-cell {
-  cursor: pointer;
-  text-decoration: underline;
-  color: var(--ui-primary);
-}
-
-.title-cell:hover {
-  color: var(--ui-primary-hover);
-}
 </style>