feat: agreements on page (#206)

Author: hmbanan666

apps/atrium-telegram/app/components/PartnerAgreementCard.vue

@@ -0,0 +1,75 @@
+<template>
+  <ActiveCard>
+    <div class="flex flex-row gap-2 items-center">
+      <UIcon name="i-lucide-scroll" class="size-8 text-primary" />
+
+      <div v-if="agreement.isActive" class="flex flex-row items-center gap-1.5 text-primary">
+        <UIcon
+          name="i-lucide-book-check"
+          class="size-8"
+        />
+        <p class="max-w-22 text-sm/4 font-bold">
+          Активный
+        </p>
+      </div>
+    </div>
+
+    <h3 class="text-xl/5 font-bold">
+      № {{ agreement.internalId }}
+    </h3>
+
+    <div>
+      {{ agreement.legalEntity?.name }}
+    </div>
+
+    <div>
+      <div v-if="agreement.concludedAt" class="w-full text-base/5 font-normal">
+        Заключен: {{ format(new Date(agreement.concludedAt), 'd MMMM yyyy', { locale: ru }) }}
+      </div>
+
+      <div v-if="agreement.willEndAt" class="w-full text-base/5 font-normal">
+        Заканчивается: {{ format(new Date(agreement.willEndAt), 'd MMMM yyyy', { locale: ru }) }}
+      </div>
+    </div>
+
+    <div>
+      <div v-if="agreement.royalty" class="w-full text-base/5 font-normal">
+        Роялти: {{ agreement.royalty }}%, минимум {{ agreement.minRoyaltyPerMonth }} ₽
+      </div>
+
+      <div v-if="agreement.royalty" class="w-full text-base/5 font-normal">
+        Роспатент: {{ getPatentStatus(agreement.patentStatus) }}
+      </div>
+    </div>
+
+    <div v-if="agreement.comment" class="w-full text-base/5 text-muted font-normal whitespace-pre-wrap break-words line-clamp-5">
+      {{ agreement.comment }}
+    </div>
+
+    <!-- <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">
+          <UIcon name="i-lucide-message-circle" class="size-5" />
+          <p>{{ epic?.comments.length }}</p>
+        </div>
+      </div>
+
+      <time
+        :datetime="epic.createdAt"
+        class="text-sm text-muted"
+        v-text="format(new Date(epic.createdAt), 'от d MMMM yyyy', { locale: ru })"
+      />
+    </div> -->
+  </ActiveCard>
+</template>
+
+<script setup lang="ts">
+import type { PartnerAgreementWithAllData } from '~/stores/partner'
+import { getPatentStatus } from '#shared/utils/helpers'
+import { format } from 'date-fns'
+import { ru } from 'date-fns/locale/ru'
+
+defineProps<{
+  agreement: PartnerAgreementWithAllData
+}>()
+</script>

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

@@ -27,7 +27,7 @@
       {{ item.title }}
     </h3>
 
-    <div class="w-full text-base/5 font-normal whitespace-pre-wrap break-words line-clamp-12">
+    <div class="w-full text-base/5 font-normal whitespace-pre-wrap break-words line-clamp-8">
       {{ item.description }}
     </div>
 

apps/atrium-telegram/app/pages/agreement/[agreementId]/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <PageContainer>
+    <SectionTitle :title="`Договор № ${agreement?.internalId}`" />
+
+    <PartnerAgreementCard v-if="agreement" :agreement="agreement" />
+  </PageContainer>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  name: 'agreement-agreementId',
+  canReturn: true,
+})
+
+const { params } = useRoute('agreement-agreementId')
+
+const partnerStore = usePartnerStore()
+const agreement = computed(() => partnerStore.agreements.find((agreement) => agreement.id === params.agreementId))
+</script>

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

@@ -1,7 +1,35 @@
 <template>
   <PageContainer>
-    <SectionTitle title="Реестр договоров" />
+    <div class="flex flex-row gap-2.5 items-center">
+      <SectionTitle title="Договоры" />
+      <UBadge
+        v-if="filteredAgreements.length"
+        size="sm"
+        color="primary"
+        variant="soft"
+        class="min-w-6 justify-center"
+      >
+        {{ filteredAgreements.length }}
+      </UBadge>
+    </div>
 
-    <div>Чуть позже</div>
+    <div class="flex flex-col gap-2.5">
+      <div class="flex flex-col gap-4">
+        <NuxtLink
+          v-for="agreement in filteredAgreements"
+          :key="agreement.id"
+          :to="`/agreement/${agreement.id}`"
+          class="motion-preset-slide-left"
+        >
+          <PartnerAgreementCard :agreement="agreement" />
+        </NuxtLink>
+      </div>
+    </div>
   </PageContainer>
 </template>
+
+<script setup lang="ts">
+const partnerStore = usePartnerStore()
+
+const filteredAgreements = computed(() => partnerStore.agreements.toSorted((a, b) => new Date(b.concludedAt ?? '').getTime() - new Date(a.concludedAt ?? '').getTime()))
+</script>

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

@@ -24,7 +24,7 @@ const { vibrate } = useFeedback()
 
 const items = ref([
   {
-    label: 'Реестр договоров',
+    label: 'Договоры',
     to: '/agreement',
     icon: 'i-lucide-list-checks',
     onClick: () => vibrate(),

apps/atrium-telegram/shared/utils/helpers.ts

@@ -1,4 +1,4 @@
-import type { UserGender } from '@roll-stack/database'
+import type { AgreementPatentStatus, UserGender } from '@roll-stack/database'
 import type { Resolution } from '../services/task'
 
 export function pluralizationRu(int: number, array: [string, string, string]): string {
@@ -45,3 +45,18 @@ export function getResolutionForSelect(): { value: Resolution, label: string, ic
     { value: 'unknown', label: 'Не ясно, есть вопросы', icon: 'i-lucide-circle-help' },
   ]
 }
+
+export function getPatentStatus(status: AgreementPatentStatus): string {
+  switch (status) {
+    case 'not_paid':
+      return 'Не оплачен'
+    case 'in_work':
+      return 'В работе'
+    case 'on_registration':
+      return 'На регистрации'
+    case 'registered':
+      return 'Зарегистрирован'
+    default:
+      return ''
+  }
+}