feat: agreement filters

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

@@ -5,7 +5,7 @@
 
       <div v-if="agreement.isActive" class="flex flex-row items-center gap-1.5 text-primary">
         <UIcon
-          name="i-lucide-book-check"
+          name="i-lucide-bookmark-check"
           class="size-8"
         />
         <p class="max-w-22 text-sm/4 font-bold">
@@ -32,16 +32,6 @@
       </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>
@@ -65,7 +55,6 @@
 
 <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'
 

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

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-row gap-2 items-start">
-    <div class="mt-2.5">
+    <div class="mt-3">
       <UAvatar :src="user?.avatarUrl ?? undefined" />
     </div>
     <div class="w-full flex flex-col gap-1.5">
@@ -15,15 +15,13 @@
         }"
       >
         <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">
-                {{ comment?.text }}
-              </div>
+          <div class="w-full relative flex flex-col gap-1">
+            <div class="text-base/5 whitespace-break-spaces text-default font-medium">
+              {{ comment?.text }}
+            </div>
 
-              <div v-if="comment?.createdAt" class="mt-1 flex justify-end text-xs text-muted">
-                {{ format(new Date(comment.createdAt), 'dd MMMM в HH:mm', { locale: ru }) }}
-              </div>
+            <div v-if="comment?.createdAt" class="mt-1 flex justify-end text-xs text-muted">
+              {{ format(new Date(comment.createdAt), 'dd MMMM в HH:mm', { locale: ru }) }}
             </div>
           </div>
         </ActiveCard>

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

@@ -1,12 +1,61 @@
 <template>
   <PageContainer>
-    <SectionTitle :title="`Договор № ${agreement?.internalId}`" />
+    <Section>
+      <div class="flex flex-row gap-2 items-center">
+        <UIcon
+          name="i-lucide-scroll"
+          class="size-10 text-primary"
+        />
 
-    <PartnerAgreementCard v-if="agreement" :agreement="agreement" />
+        <div v-if="agreement?.isActive" class="flex flex-row items-center gap-1.5 text-primary">
+          <UIcon
+            name="i-lucide-bookmark-check"
+            class="size-10"
+          />
+          <p class="max-w-22 text-sm/4 font-bold">
+            Активный
+          </p>
+        </div>
+      </div>
+
+      <SectionTitle :title="`Договор № ${agreement?.internalId}`" />
+
+      <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?.patentStatus" 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>
+    </Section>
   </PageContainer>
 </template>
 
 <script setup lang="ts">
+import { getPatentStatus } from '#shared/utils/helpers'
+import { format } from 'date-fns'
+import { ru } from 'date-fns/locale/ru'
+
 definePageMeta({
   name: 'agreement-agreementId',
   canReturn: true,

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

@@ -4,13 +4,37 @@
       <SectionTitle title="Договоры" />
       <UBadge
         v-if="filteredAgreements.length"
-        size="sm"
+        size="md"
         color="primary"
-        variant="soft"
-        class="min-w-6 justify-center"
-      >
-        {{ filteredAgreements.length }}
-      </UBadge>
+        variant="subtle"
+        :label="filteredAgreements.length"
+        class="min-w-8 justify-center"
+      />
+    </div>
+
+    <div class="grid grid-cols-1 gap-2.5 items-center">
+      <USelect
+        v-model="sortedBy"
+        size="xl"
+        trailing-icon="i-lucide-arrow-down-wide-narrow"
+        :items="[
+          { label: 'По дате заключения (убывание)', value: 'concludedAtDesc' },
+          { label: 'По дате заключения (возрастание)', value: 'concludedAtAsc' },
+          { label: 'По дате окончания (убывание)', value: 'willEndAtDesc' },
+          { label: 'По дате окончания (возрастание)', value: 'willEndAtAsc' },
+        ]"
+      />
+
+      <USelect
+        v-model="filteredBy"
+        size="xl"
+        trailing-icon="i-lucide-funnel"
+        :items="[
+          { label: 'Все', value: 'all' },
+          { label: 'Только активные', value: 'active' },
+          { label: 'Скоро окончатся (6 месяцев) ', value: 'willEndSoon' },
+        ]"
+      />
     </div>
 
     <div class="flex flex-col gap-2.5">
@@ -31,5 +55,79 @@
 <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()))
+const sortedBy = ref<'concludedAtDesc' | 'concludedAtAsc' | 'willEndAtDesc' | 'willEndAtAsc'>('concludedAtDesc')
+
+function sortByConcludedAtDesc(a: PartnerAgreementWithAllData, b: PartnerAgreementWithAllData) {
+  const aTime = a.concludedAt ? new Date(a.concludedAt).getTime() : 0
+  const bTime = b.concludedAt ? new Date(b.concludedAt).getTime() : 0
+  return bTime - aTime
+}
+
+function sortByConcludedAtAsc(a: PartnerAgreementWithAllData, b: PartnerAgreementWithAllData) {
+  const aTime = a.concludedAt ? new Date(a.concludedAt).getTime() : 0
+  const bTime = b.concludedAt ? new Date(b.concludedAt).getTime() : 0
+  return aTime - bTime
+}
+
+function sortByWillEndAtDesc(a: PartnerAgreementWithAllData, b: PartnerAgreementWithAllData) {
+  const aTime = a.willEndAt ? new Date(a.willEndAt).getTime() : 0
+  const bTime = b.willEndAt ? new Date(b.willEndAt).getTime() : 0
+  return bTime - aTime
+}
+
+function sortByWillEndAtAsc(a: PartnerAgreementWithAllData, b: PartnerAgreementWithAllData) {
+  const aTime = a.willEndAt ? new Date(a.willEndAt).getTime() : 0
+  const bTime = b.willEndAt ? new Date(b.willEndAt).getTime() : 0
+  return aTime - bTime
+}
+
+function chooseSortFunction() {
+  switch (sortedBy.value) {
+    case 'concludedAtDesc':
+      return sortByConcludedAtDesc
+    case 'concludedAtAsc':
+      return sortByConcludedAtAsc
+    case 'willEndAtDesc':
+      return sortByWillEndAtDesc
+    case 'willEndAtAsc':
+      return sortByWillEndAtAsc
+  }
+}
+
+const filteredBy = ref<'all' | 'active' | 'willEndSoon'>('all')
+
+function filterByAll() {
+  return true
+}
+
+function filterByActive(agreement: PartnerAgreementWithAllData) {
+  return agreement.concludedAt && agreement.isActive
+}
+
+function filterByWillEndSoon(agreement: PartnerAgreementWithAllData) {
+  const SIX_MONTHS = 6 * 30 * 24 * 60 * 60 * 1000
+  return (
+    agreement.isActive
+    && agreement.willEndAt
+    && new Date(agreement.willEndAt).getTime() - new Date().getTime() < SIX_MONTHS
+  )
+}
+
+function chooseFilterFunction() {
+  switch (filteredBy.value) {
+    case 'all':
+      return filterByAll
+    case 'active':
+      return filterByActive
+    case 'willEndSoon':
+      return filterByWillEndSoon
+  }
+}
+
+const filteredAgreements = computed(() => {
+  const sorted = partnerStore.agreements.toSorted(chooseSortFunction())
+  const filtered = sorted.filter(chooseFilterFunction())
+
+  return filtered
+})
 </script>

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

@@ -52,13 +52,12 @@
         <SectionTitle title="Комментарии" />
         <UBadge
           v-if="item?.comments.length"
-          size="sm"
+          size="md"
           color="primary"
-          variant="soft"
-          class="min-w-6 justify-center"
-        >
-          {{ item?.comments.length }}
-        </UBadge>
+          variant="subtle"
+          :label="item.comments.length"
+          class="min-w-8 justify-center"
+        />
       </div>
 
       <UDrawer v-model:open="isDrawerOpened">

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

@@ -1,17 +1,17 @@
 <template>
   <PageContainer>
-    <div class="flex flex-col gap-2">
+    <div class="flex flex-col gap-2.5">
       <UButton
         v-for="item in items"
         :key="item.label"
         size="xl"
-        color="neutral"
-        variant="ghost"
+        color="secondary"
+        variant="soft"
         :label="item.label"
         :to="item.to"
         :icon="item.icon"
         :ui="{
-          base: 'px-0 pt-0 text-2xl/6 font-bold',
+          base: 'text-2xl/6 font-bold',
         }"
         @click="item.onClick"
       />