init

pages/index.vue

@@ -13,32 +13,20 @@
 
     <UiTable :table-data="tableData" :columns="columns" />
 
-    <UModal v-model:open="open" :title="selectedUser?.email">
-      <template #body>
-        <div>
-          <div>Имя: {{ selectedUser?.name }}</div>
-          <div>Логин: {{ selectedUser?.username }}</div>
-          <div>Электронная почта: {{ selectedUser?.email }}</div>
-          <div>Телефон: {{ selectedUser?.phone }}</div>
-          <a :href="`https://${selectedUser?.website}`" target="_blank">Веб-сайт: <span class="title-cell">{{ selectedUser?.website }}</span></a>
-          <div>Название компании: {{ selectedUser?.company?.name }}</div>
-          <div>Адрес: {{ `${selectedUser?.address?.street} ${selectedUser?.address?.suite} ${selectedUser?.address?.city}` }}</div>
-        </div>
-      </template>
-    </UModal>
+    <UserModal v-model:model-value="open" :selected-user="selectedUser" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { UTooltip } from '#components'
+import { UiTableShortText } from '#components'
 import {
   createColumnHelper,
 } from '@tanstack/vue-table'
-import { useDebounceFn, useMediaQuery } from '@vueuse/core'
+import { useDebounceFn } from '@vueuse/core'
 import { useGetPosts, useGetUsers } from '~/api/queries'
+import UserModal from '~/components/modals/UserModal.vue'
 import UiTable from '~/components/UiTable.vue'
 
-const isMobile = useMediaQuery('(max-width: 1280px)')
 const open = ref(false)
 const selectedUser = ref<User | null>(null)
 const search = ref('')
@@ -72,24 +60,21 @@ const columns = [
   }),
   columnHelper.accessor('title', {
     header: 'Заголовок',
-    cell: info => isMobile.value
-      ? info.getValue()
-      : h(UTooltip, { text: info.getValue(),
-        }, {
-          default: () => h('span', { class: 'ellipsis' }, truncate(info.getValue()),
-          ),
-        }),
+    cell: info => h(UiTableShortText, {
+      text: info.getValue(),
+      maxLength: 10,
+    }),
     size: 150,
   }),
   columnHelper.accessor('userEmail', {
     header: 'Автор',
-    cell: info => isMobile.value
-      ? info.getValue()
-      : h(UTooltip, { text: info.getValue(),
-        }, {
-          default: () => h('div', { class: 'title-cell', onClick: () => openPost(info?.row?.original) }, truncate(info.getValue()),
-          ),
-        }),
+    cell: info =>
+      h(UiTableShortText, {
+        text: info.getValue(),
+        hideIcon: true,
+        class: 'title-cell',
+        onClick: () => openPost(info.row.original),
+      }),
     meta: {
       style: {
         display: 'flex',
@@ -101,14 +86,11 @@ const columns = [
   }),
   columnHelper.accessor('body', {
     header: 'Контент',
-    cell: info => isMobile.value
-      ? info.getValue()
-      : h(UTooltip, {
-          text: info.getValue(),
-        }, {
-          default: () => h('span', { class: 'ellipsis' }, truncate(info.getValue(), 22)),
-        }),
-    size: 220,
+    cell: info => h(UiTableShortText, {
+      text: info.getValue(),
+      maxLength: 18,
+    }),
+    size: 230,
   }),
 ]
 
@@ -116,10 +98,6 @@ function openPost(post: Post) {
   selectedUser.value = users?.value?.find(user => user?.id === post?.userId)
   open.value = true
 }
-
-function truncate(text: string, max = 15) {
-  return text?.length > max ? `${text?.slice(0, max)}…` : text
-}
 </script>
 
 <style lang="scss">
@@ -149,8 +127,7 @@ function truncate(text: string, max = 15) {
   }
 }
 
-/* -------------------- CLICKABLE USER EMAIL CELL -------------------- */
-
+//userEmail
 .title-cell {
   cursor: pointer;
   text-decoration: underline;