feat: add flow item comment action (#205)

Author: hmbanan666

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

@@ -2,13 +2,13 @@
   <ActiveCard>
     <div class="flex flex-row gap-2 items-center">
       <UAvatar
-        v-if="item.userId"
+        v-if="item.userId && item.type === 'user_post'"
         :src="userAvatarUrl"
         class="size-8"
       />
       <UIcon
         v-else
-        name="i-lucide-clipboard-check"
+        :name="getIconName(item.type)"
         class="size-8 text-primary"
       />
 
@@ -59,4 +59,18 @@ const { item } = defineProps<{
 const userStore = useUserStore()
 const isViewed = computed(() => item.views.some((view) => view.userId === userStore?.id))
 const userAvatarUrl = computed(() => userStore.users.find((user) => user.id === item.userId)?.avatarUrl ?? undefined)
+
+function getIconName(type: FlowItemWithData['type']): string {
+  switch (type) {
+    case 'user_post':
+      return 'i-lucide-square-user-round'
+    case 'partner_maintenance':
+      return 'i-lucide-user'
+    case 'daily_task_report':
+    case 'weekly_task_report':
+      return 'i-lucide-clipboard-check'
+    default:
+      return 'i-lucide-clipboard'
+  }
+}
 </script>

apps/atrium-telegram/app/components/form/CreateFlowItemComment.vue

@@ -0,0 +1,73 @@
+<template>
+  <UForm
+    :validate="createValidator(createFlowItemCommentSchema)"
+    :state="state"
+    class="flex flex-col gap-3"
+    @submit="onSubmit"
+  >
+    <UFormField label="Ваше сообщение" name="text">
+      <UTextarea
+        v-model="state.text"
+        placeholder="Не торопись, осмотрись..."
+        autoresize
+        size="xl"
+        class="w-full"
+      />
+    </UFormField>
+
+    <UButton
+      type="submit"
+      variant="solid"
+      color="secondary"
+      size="xl"
+      icon="i-lucide-send"
+      block
+      class="mt-3"
+      :disabled="!state.text"
+      :label="$t('common.send')"
+    />
+  </UForm>
+</template>
+
+<script setup lang="ts">
+import type { CreateFlowItemComment } from '#shared/services/flow'
+import type { FormSubmitEvent } from '@nuxt/ui'
+import { createFlowItemCommentSchema } from '#shared/services/flow'
+
+const { itemId } = defineProps<{ itemId: string }>()
+
+const emit = defineEmits(['success', 'submitted'])
+
+const { vibrate } = useFeedback()
+const userStore = useUserStore()
+const flowStore = useFlowStore()
+
+const state = ref<Partial<CreateFlowItemComment>>({
+  text: undefined,
+})
+
+async function onSubmit(event: FormSubmitEvent<CreateFlowItemComment>) {
+  emit('submitted')
+
+  try {
+    await $fetch(`/api/flow/id/${itemId}/comment`, {
+      method: 'POST',
+      headers: {
+        Authorization: `tma ${userStore.initDataRaw}`,
+      },
+      body: event.data,
+    })
+
+    await Promise.all([
+      flowStore.update(),
+      userStore.update(),
+    ])
+
+    vibrate('success')
+    emit('success')
+  } catch (error) {
+    console.error(error)
+    vibrate('error')
+  }
+}
+</script>

apps/atrium-telegram/app/pages/agreement/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <PageContainer>
+    <SectionTitle title="Реестр договоров" />
+
+    <div>Чуть позже</div>
+  </PageContainer>
+</template>

apps/atrium-telegram/app/pages/flow/[itemId]/index.vue

@@ -37,7 +37,7 @@
         Посмотрели
       </h3>
 
-      <div class="flex flex-row gap-2">
+      <div class="flex flex-row flex-wrap gap-1">
         <UAvatar
           v-for="view in item?.views"
           :key="view.id"
@@ -61,16 +61,26 @@
         </UBadge>
       </div>
 
-      <UButton
-        variant="solid"
-        color="secondary"
-        size="xl"
-        block
-        class="items-center justify-center"
-        icon="i-lucide-message-circle"
-        label="Написать сообщение"
-        @click="vibrate()"
-      />
+      <UDrawer v-model:open="isDrawerOpened">
+        <UButton
+          variant="solid"
+          color="secondary"
+          size="xl"
+          block
+          class="items-center justify-center"
+          icon="i-lucide-message-circle"
+          label="Написать сообщение"
+          @click="vibrate()"
+        />
+
+        <template #body>
+          <FormCreateFlowItemComment
+            :item-id="item?.id ?? ''"
+            @submitted="isDrawerOpened = false"
+            @success="isDrawerOpened = false"
+          />
+        </template>
+      </UDrawer>
 
       <div v-if="item?.comments.length" class="w-full flex flex-col gap-3.5 flex-1 last-of-type:mb-20">
         <FlowItemComment
@@ -96,6 +106,8 @@ definePageMeta({
 const { params } = useRoute('flow-itemId')
 const { vibrate } = useFeedback()
 
+const isDrawerOpened = ref(false)
+
 const userStore = useUserStore()
 const flowStore = useFlowStore()
 const item = computed(() => flowStore.items.find((item) => item.id === params.itemId))

apps/atrium-telegram/app/pages/kitchen/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <PageContainer>
+    <SectionTitle title="Кухни" />
+
+    <div>Чуть позже</div>
+  </PageContainer>
+</template>

apps/atrium-telegram/app/pages/navigation.vue

@@ -1,5 +1,45 @@
 <template>
   <PageContainer>
-    <SectionTitle title="В работе" />
+    <div class="flex flex-col gap-2">
+      <UButton
+        v-for="item in items"
+        :key="item.label"
+        size="xl"
+        color="neutral"
+        variant="ghost"
+        :label="item.label"
+        :to="item.to"
+        :icon="item.icon"
+        :ui="{
+          base: 'px-0 pt-0 text-2xl/6 font-bold',
+        }"
+        @click="item.onClick"
+      />
+    </div>
   </PageContainer>
 </template>
+
+<script lang="ts" setup>
+const { vibrate } = useFeedback()
+
+const items = ref([
+  {
+    label: 'Реестр договоров',
+    to: '/agreement',
+    icon: 'i-lucide-list-checks',
+    onClick: () => vibrate(),
+  },
+  {
+    label: 'Партнеры',
+    to: '/partner',
+    icon: 'i-lucide-users',
+    onClick: () => vibrate(),
+  },
+  {
+    label: 'Кухни',
+    to: '/kitchen',
+    icon: 'i-lucide-store',
+    onClick: () => vibrate(),
+  },
+])
+</script>

apps/atrium-telegram/app/pages/partner/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <PageContainer>
+    <SectionTitle title="Партнеры" />
+
+    <div>Чуть позже</div>
+  </PageContainer>
+</template>

packages/database/src/types/entities.ts

@@ -31,7 +31,10 @@ export type TimeZone = '+00:00'
   | '+11:00'
   | '+12:00'
 
-export type FlowItemType = 'daily_task_report' | 'weekly_task_report' | 'user_post' | 'task_list'
+export type FlowItemType = 'daily_task_report'
+  | 'weekly_task_report'
+  | 'user_post'
+  | 'partner_maintenance'
 
 export type PermissionCode = 'product:view'
   | 'product:edit'