feat: ticket message component

apps/atrium-telegram/app/components/flow/ItemCard.vue

@@ -24,7 +24,7 @@
 
     <div class="flex justify-between items-center">
       <div class="flex flex-row gap-4">
-        <div class="flex flex-row gap-1.5 items-center text-muted">
+        <div class="flex flex-row gap-1.5 items-center text-sm text-muted">
           <UIcon name="i-lucide-message-circle" class="size-5" />
           <p>{{ item?.comments.length }}</p>
         </div>

apps/atrium-telegram/app/components/TicketCard.vue → apps/atrium-telegram/app/components/ticket/Card.vue

@@ -10,9 +10,9 @@
       {{ ticket.description }}
     </div>
 
-    <div class="flex justify-between items-center">
+    <div class="mt-6 flex justify-between items-center">
       <div class="flex flex-row gap-4">
-        <div class="flex flex-row gap-1.5 items-center text-muted">
+        <div class="flex flex-row gap-1.5 items-center text-sm text-muted">
           <UIcon name="i-lucide-message-circle" class="size-5" />
           <p>{{ ticket?.messages.length }}</p>
         </div>

apps/atrium-telegram/app/components/TicketMessage.vue → apps/atrium-telegram/app/components/ticket/Message.vue

@@ -3,7 +3,7 @@
     <div class="mt-2.5">
       <UAvatar :src="user?.avatarUrl ?? undefined" />
     </div>
-    <div class="w-full flex flex-col gap-1.5">
+    <div class="relative w-full flex flex-col gap-1.5">
       <UDropdownMenu
         :items="items"
         :ui="{
@@ -14,38 +14,18 @@
           sideOffset: -32,
         }"
       >
-        <ActiveCard>
-          <div class="w-full relative flex flex-col justify-between gap-2">
-            <div class="flex flex-col gap-1">
-              <div class="text-base/5 whitespace-break-spaces text-default font-medium">
-                {{ message?.text }}
-              </div>
-
-              <div v-if="message?.fileUrl && message.fileType !== 'image'">
-                <UButton
-                  variant="solid"
-                  color="secondary"
-                  :icon="getFileIcon(message.fileType)"
-                  @click="handleFileClick(message.fileUrl)"
-                >
-                  Прикрепленный файл
-                </UButton>
-              </div>
-              <div v-else-if="message?.fileUrl && message.fileType === 'image'">
-                <img
-                  :src="message.fileUrl"
-                  alt=""
-                  class="w-full h-full object-contain rounded-lg"
-                  @click="handleFileClick(message.fileUrl)"
-                >
-              </div>
-
-              <div v-if="message?.createdAt" class="mt-1 flex justify-end text-xs text-muted">
-                {{ format(new Date(message.createdAt), 'dd MMMM в HH:mm', { locale: ru }) }}
-              </div>
-            </div>
-          </div>
-        </ActiveCard>
+        <TicketMessageText
+          v-if="isMessageWithText && message"
+          :message="message"
+        />
+        <TicketMessageImage
+          v-else-if="isMessageWithImage && message"
+          :message="message"
+        />
+        <TicketMessageFile
+          v-else-if="isMessageWithFile && message"
+          :message="message"
+        />
       </UDropdownMenu>
 
       <!-- <div v-if="message?.notifications?.length" class="-mt-4 ml-4 flex flex-row flex-wrap gap-1">
@@ -61,9 +41,6 @@
 
 <script setup lang="ts">
 import type { DropdownMenuItem } from '@nuxt/ui'
-import type { TicketMessage } from '@roll-stack/database'
-import { format } from 'date-fns'
-import { ru } from 'date-fns/locale/ru'
 
 const { ticketId, messageId } = defineProps<{
   ticketId: string
@@ -80,15 +57,27 @@ const ticket = computed(() => ticketStore.tickets.find((t) => t.id === ticketId)
 const message = computed(() => ticket.value?.messages.find((m) => m.id === messageId))
 const user = computed(() => userStore.find(message.value?.userId ?? ''))
 
+const isMessageWithText = computed(() => !message.value?.fileUrl)
+const isMessageWithImage = computed(() => message.value?.fileUrl && message.value?.fileType === 'image')
+const isMessageWithFile = computed(() => message.value?.fileUrl && message.value?.fileType !== 'image')
+
 const items = computed<DropdownMenuItem[]>(() => {
   const menuItems: DropdownMenuItem[] = [
+    {
+      label: 'Открыть',
+      icon: 'i-lucide-external-link',
+      color: 'neutral',
+      disabled: false,
+      onSelect: () => handleFileClick(message.value?.fileUrl),
+      condition: message.value?.fileUrl,
+    },
     {
       label: 'Скопировать сообщение',
       icon: 'i-lucide-copy',
       color: 'neutral',
       disabled: false,
       onSelect: () => navigator.clipboard.writeText(message.value?.text ?? ''),
-      condition: true,
+      condition: isMessageWithText.value,
     },
     // {
     //   label: 'Маякнуть (будет позже)',
@@ -125,20 +114,10 @@ const items = computed<DropdownMenuItem[]>(() => {
   return menuItems.filter((item) => item.condition)
 })
 
-function getFileIcon(type: TicketMessage['fileType']) {
-  switch (type) {
-    case 'image':
-      return 'i-lucide-image'
-    case 'video':
-      return 'i-lucide-video'
-    case 'document':
-      return 'i-lucide-file'
-    default:
-      return 'i-lucide-file'
+function handleFileClick(fileUrl: string | null | undefined) {
+  if (!fileUrl) {
+    return
   }
-}
-
-function handleFileClick(fileUrl: string) {
   window.open(fileUrl, '_blank')
 }
 </script>

apps/atrium-telegram/app/components/ticket/MessageFile.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="w-2/3 relative flex flex-col justify-between gap-1.5">
+    <div class="py-4 flex flex-col gap-2 items-center justify-center border border-default rounded-lg">
+      <UIcon :name="getFileData(message.fileType).icon" class="size-10 text-primary" />
+
+      <UButton
+        variant="solid"
+        color="secondary"
+        :label="getFileData(message.fileType).label"
+      />
+    </div>
+    <div v-if="message?.createdAt" class="flex justify-end text-xs text-muted">
+      {{ format(new Date(message.createdAt), 'dd MMMM в HH:mm', { locale: ru }) }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { TicketMessage } from '@roll-stack/database'
+import { format } from 'date-fns'
+import { ru } from 'date-fns/locale/ru'
+
+const { message } = defineProps<{
+  message: TicketMessage
+}>()
+
+function getFileData(type: TicketMessage['fileType']) {
+  switch (type) {
+    case 'image':
+      return {
+        icon: 'i-lucide-image',
+        label: 'Прикреплено фото',
+      }
+    case 'video':
+      return {
+        icon: 'i-lucide-video',
+        label: 'Прикреплено видео',
+      }
+    case 'document':
+      return {
+        icon: 'i-lucide-file',
+        label: 'Прикреплен документ',
+      }
+    default:
+      return {
+        icon: 'i-lucide-file',
+        label: 'Прикреплен файл',
+      }
+  }
+}
+</script>

apps/atrium-telegram/app/components/ticket/MessageImage.vue

@@ -0,0 +1,22 @@
+<template>
+  <div v-if="message.fileUrl" class="w-2/3 relative flex flex-col justify-between gap-1.5">
+    <img
+      :src="message.fileUrl"
+      alt=""
+      class="w-full h-full object-contain rounded-lg"
+    >
+    <div v-if="message?.createdAt" class="flex justify-end text-xs text-muted">
+      {{ format(new Date(message.createdAt), 'dd MMMM в HH:mm', { locale: ru }) }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { TicketMessage } from '@roll-stack/database'
+import { format } from 'date-fns'
+import { ru } from 'date-fns/locale/ru'
+
+const { message } = defineProps<{
+  message: TicketMessage
+}>()
+</script>

apps/atrium-telegram/app/components/ticket/MessageText.vue

@@ -0,0 +1,25 @@
+<template>
+  <ActiveCard>
+    <div class="w-full relative flex flex-col justify-between gap-2">
+      <div class="flex flex-col gap-1">
+        <div class="text-base/5 whitespace-break-spaces text-default font-medium">
+          {{ message?.text }}
+        </div>
+
+        <div v-if="message?.createdAt" class="mt-1 flex justify-end text-xs text-muted">
+          {{ format(new Date(message.createdAt), 'dd MMMM в HH:mm', { locale: ru }) }}
+        </div>
+      </div>
+    </div>
+  </ActiveCard>
+</template>
+
+<script setup lang="ts">
+import type { TicketMessage } from '@roll-stack/database'
+import { format } from 'date-fns'
+import { ru } from 'date-fns/locale/ru'
+
+const { message } = defineProps<{
+  message: TicketMessage
+}>()
+</script>

apps/atrium-telegram/app/pages/ticket/[ticketId]/index.vue

@@ -12,12 +12,21 @@
       <div class="w-full text-base/5 whitespace-pre-wrap break-words">
         {{ ticket?.description }}
       </div>
-    </Section>
 
-    <Section class="flex flex-row justify-between items-center">
-      <div class="flex flex-row items-center gap-2">
-        <UIcon name="i-lucide-message-circle" class="size-5" />
-        {{ ticket?.messages.length }} {{ pluralizationRu(ticket?.messages.length ?? 0, ['сообщение', 'сообщения', 'сообщений']) }}
+      <div class="mt-6 flex justify-between items-center">
+        <div class="flex flex-row gap-4">
+          <div class="flex flex-row gap-1.5 items-center text-muted text-sm">
+            <UIcon name="i-lucide-message-circle" class="size-5" />
+            <p>{{ ticket?.messages.length }} {{ pluralizationRu(ticket?.messages.length ?? 0, ['сообщение', 'сообщения', 'сообщений']) }}</p>
+          </div>
+        </div>
+
+        <time
+          v-if="ticket?.createdAt"
+          :datetime="ticket.createdAt"
+          class="text-sm text-muted"
+          v-text="format(new Date(ticket.createdAt), 'от d MMMM yyyy', { locale: ru })"
+        />
       </div>
     </Section>
 
@@ -60,6 +69,9 @@
 </template>
 
 <script setup lang="ts">
+import { format } from 'date-fns'
+import { ru } from 'date-fns/locale/ru'
+
 definePageMeta({
   name: 'ticket-ticketId',
   canReturn: true,
@@ -79,7 +91,7 @@ const isShowMore = computed<boolean>(() => messages.value?.length && ticket.valu
 // const isDrawerOpened = ref(false)
 
 function handleClickShowMore() {
-  vibrate()
+  vibrate('success')
   shownMessages.value += 10
 }
 </script>