feat: users on partners space (#54)

Author: hmbanan666

apps/web-app/app/components/PartnerCard.vue

@@ -2,12 +2,23 @@
   <ActiveCard padding="none" class="flex flex-col gap-2.5 group">
     <div class="relative">
       <img
-        :src="partner.avatarUrl ?? undefined"
+        :src="partnerUser?.avatarUrl ?? undefined"
         alt=""
         class="aspect-square w-full rounded-lg duration-200"
         :class="{ 'opacity-75 grayscale group-hover:grayscale-0 group-hover:opacity-100': imagesMode === 'grayscale' }"
       >
 
+      <div class="absolute top-2 left-2 right-0 w-full">
+        <UBadge
+          color="neutral"
+          variant="solid"
+          size="lg"
+          class="rounded-lg"
+        >
+          {{ partner.priceLevel }} уровень
+        </UBadge>
+      </div>
+
       <div
         class="absolute top-2 left-0 right-0 w-full opacity-0 group-hover:opacity-100 duration-200"
         :class="[
@@ -33,26 +44,30 @@
           />
         </div>
       </div>
-    </div>
 
-    <div class="min-h-20 h-full px-2.5 pb-2 flex flex-col gap-2.5">
-      <div class="flex flex-row items-center gap-2">
-        <UBadge
-          color="neutral"
-          variant="outline"
-          size="xl"
+      <div class="absolute bottom-2 left-2 right-2 w-full">
+        <UAvatarGroup
+          :max="2"
+          size="sm"
+          :ui="{
+            base: '-me-3',
+          }"
         >
-          {{ partner.priceLevel }}
-        </UBadge>
-
-        <h3 class="text-base/5 font-bold">
-          {{ partner.name }} {{ partner.surname }}
-        </h3>
+          <UAvatar
+            v-for="user in otherUsers"
+            :key="user.id"
+            :src="user?.avatarUrl ?? undefined"
+            alt=""
+            :class="{ 'opacity-75 grayscale group-hover:grayscale-0 group-hover:opacity-100': imagesMode === 'grayscale' }"
+          />
+        </UAvatarGroup>
       </div>
+    </div>
 
-      <p class="text-sm/4 text-muted line-clamp-3">
+    <div class="min-h-20 h-full px-2.5 pb-2 flex flex-col gap-2.5">
+      <h3 class="text-sm/4 font-bold">
         {{ partner.legalEntity?.name }}
-      </p>
+      </h3>
 
       <p class="text-sm/4 text-muted line-clamp-4">
         {{ partner.city }}
@@ -62,17 +77,17 @@
 </template>
 
 <script setup lang="ts">
-import type { Partner } from '@roll-stack/database'
-import type { PartnerLegalEntityWithData } from '~/stores/partner'
+import type { PartnerWithData } from '~/stores/partner'
 
 const { partner } = defineProps<{
-  partner: Partner & {
-    legalEntity: PartnerLegalEntityWithData | null
-  }
+  partner: PartnerWithData
 }>()
 
 const { imagesMode } = useApp()
 
+const partnerUser = computed(() => partner.users.filter((user) => user.type === 'partner')[0])
+const otherUsers = computed(() => partner.users.filter((user) => user.type !== 'partner'))
+
 const minimalAgreement = computed(() => partner.legalEntity?.agreements.filter((agreement) => agreement.isActive).toSorted((a, b) => new Date(a.willEndAt ?? '').getTime() - new Date(b.willEndAt ?? '').getTime())[0])
 
 const agreementProgress = computed(() => {

apps/web-app/app/stores/partner.ts

@@ -1,4 +1,4 @@
-import type { Kitchen, Partner, PartnerAgreement, PartnerAgreementFile, PartnerLegalEntity } from '@roll-stack/database'
+import type { Kitchen, Partner, PartnerAgreement, PartnerAgreementFile, PartnerLegalEntity, User } from '@roll-stack/database'
 
 export type PartnerAgreementWithAllData = PartnerAgreement & {
   files: PartnerAgreementFile[]
@@ -13,9 +13,10 @@ export type PartnerLegalEntityWithData = PartnerLegalEntity & {
   agreements: PartnerAgreementWithData[]
 }
 
-type PartnerWithData = Partner & {
+export type PartnerWithData = Partner & {
   kitchens: Kitchen[]
   legalEntity: PartnerLegalEntityWithData | null
+  users: User[]
 }
 
 export const usePartnerStore = defineStore('partner', () => {

packages/database/src/repository/partner.ts

@@ -39,6 +39,7 @@ export class Partner {
             },
           },
         },
+        users: true,
       },
     })
   }