feat: filters on partner page (#243)

Author: hmbanan666

apps/atrium-telegram/app/app.vue

@@ -16,7 +16,7 @@
 
 <script setup lang="ts">
 import * as locales from '@nuxt/ui/locale'
-import { retrieveLaunchParams, themeParams } from '@tma.js/sdk-vue'
+import { themeParams } from '@tma.js/sdk-vue'
 
 const { locale } = useI18n()
 
@@ -34,20 +34,17 @@ useHead({
   }],
 })
 
-// App
-const launchParams = retrieveLaunchParams()
-const { tgWebAppPlatform: platform } = launchParams
-const debug = (launchParams.tgWebAppStartParam || '').includes('debug') || import.meta.env.DEV
+// Telegram
+const isDev = import.meta.env.DEV
 
-await init({
-  debug,
-  eruda: debug && ['ios', 'android'].includes(platform),
-  mockForMacOS: platform === 'macos',
+init({
+  debug: isDev,
+  eruda: isDev,
+  mockForMacOS: false,
+}).then(() => {
+  useBackButton()
 })
 
-// Telegram
-useBackButton()
-
 // Fix system theme
 const isDark = computed(() => themeParams.isDark())
 const colorMode = useColorMode()

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

@@ -1,6 +1,6 @@
 <template>
   <UBadge
-    v-if="value != null && value > 0"
+    v-if="value != null && value !== '0' && value !== 0"
     size="lg"
     color="secondary"
     variant="solid"
@@ -10,5 +10,5 @@
 </template>
 
 <script setup lang="ts">
-defineProps<{ value?: number | null }>()
+defineProps<{ value?: string | number | null }>()
 </script>

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

@@ -134,8 +134,6 @@ function chooseFilterFunction() {
 
 const filteredAgreements = computed(() => {
   const sorted = partnerStore.agreements.toSorted(chooseSortFunction())
-  const filtered = sorted.filter(chooseFilterFunction())
-
-  return filtered
+  return sorted.filter(chooseFilterFunction())
 })
 </script>

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

@@ -3,6 +3,7 @@
     <div class="flex flex-row gap-2.5 items-center">
       <SectionTitle title="Партнеры" />
       <CounterBadge :value="filteredPartners.length" />
+      <CounterBadge :value="`${new Intl.NumberFormat().format(totalBalance)} ₽`" />
     </div>
 
     <div class="grid grid-cols-1 gap-2.5 items-center">
@@ -16,6 +17,35 @@
         }"
         class="motion-preset-slide-down"
       />
+
+      <USelect
+        v-model="sortedBy"
+        size="xl"
+        trailing-icon="i-lucide-arrow-down-wide-narrow"
+        :ui="{
+          base: 'rounded-lg text-lg/5 font-bold ring-0',
+        }"
+        :items="[
+          { label: 'По фамилии (возрастание)', value: 'nameAsc' },
+          { label: 'По балансу (возрастание)', value: 'balanceAsc' },
+          { label: 'По балансу (убывание)', value: 'balanceDesc' },
+        ]"
+        class="motion-preset-slide-down"
+      />
+
+      <USelect
+        v-model="filteredBy"
+        size="xl"
+        trailing-icon="i-lucide-funnel"
+        :ui="{
+          base: 'rounded-lg text-lg/5 font-bold ring-0',
+        }"
+        :items="[
+          { label: 'Все', value: 'all' },
+          { label: 'Только должники', value: 'negativeBalance' },
+        ]"
+        class="motion-preset-slide-up"
+      />
     </div>
 
     <div class="grid grid-cols-2 gap-2.5 items-start">
@@ -32,20 +62,69 @@
 </template>
 
 <script setup lang="ts">
+import type { PartnerWithData } from '~/stores/partner'
+
 const partnerStore = usePartnerStore()
 
+const totalBalance = computed(() => partnerStore.partners.reduce((acc, partner) => acc + partner.balance, 0))
+
+const sortedBy = ref<'nameAsc' | 'balanceAsc' | 'balanceDesc'>('nameAsc')
+
+function sortByNameAsc(a: PartnerWithData, b: PartnerWithData): number {
+  return a.legalEntity?.name?.localeCompare(b.legalEntity?.name ?? '') ?? 0
+}
+
+function sortByBalanceAsc(a: PartnerWithData, b: PartnerWithData) {
+  return a.balance - b.balance
+}
+
+function sortByBalanceDesc(a: PartnerWithData, b: PartnerWithData) {
+  return b.balance - a.balance
+}
+
+function chooseSortFunction() {
+  switch (sortedBy.value) {
+    case 'nameAsc':
+      return sortByNameAsc
+    case 'balanceAsc':
+      return sortByBalanceAsc
+    case 'balanceDesc':
+      return sortByBalanceDesc
+  }
+}
+
 const search = ref('')
 
+const filteredBy = ref<'all' | 'negativeBalance'>('all')
+
+function filterByAll() {
+  return true
+}
+
+function filterByNegativeBalance(partner: PartnerWithData) {
+  return partner.balance < 0
+}
+
+function chooseFilterFunction() {
+  switch (filteredBy.value) {
+    case 'all':
+      return filterByAll
+    case 'negativeBalance':
+      return filterByNegativeBalance
+  }
+}
+
 const filteredPartners = computed(() => {
+  const sorted = partnerStore.partners.toSorted(chooseSortFunction())
+  const filtered = sorted.filter(chooseFilterFunction())
+
   if (!search.value) {
     // Show all
-    return partnerStore.partners
+    return filtered
   }
 
-  const filteredBySearch = partnerStore.partners.filter((partner) => {
+  return filtered.filter((partner) => {
     return partner.legalEntity?.name?.toLowerCase().includes(search.value.toLowerCase()) ?? false
   })
-
-  return filteredBySearch
 })
 </script>

apps/atrium-telegram/app/utils/init.ts

@@ -80,18 +80,6 @@ export async function init(options: {
   if (viewport.mount.isAvailable()) {
     await viewport.mount()
     viewport.bindCssVars()
-
-    if (viewport.requestFullscreen.isAvailable()) {
-      await viewport.requestFullscreen()
-
-      setTimeout(() => {
-        // The app is now in fullscreen
-        if (window.innerWidth > 600) {
-          // Application should be in fullscreen mode only on small screens!
-          viewport.exitFullscreen()
-        }
-      }, 100)
-    }
   }
 
   if (closingBehavior.mount.isAvailable()) {