Files
tgCrewAdmin/src/components/pnUserListItemBody.vue
2026-01-03 18:14:30 +03:00

58 lines
1.5 KiB
Vue

<template>
<q-item-section avatar>
<pn-auto-avatar
:img="item.photo"
:name="item.section1"
/>
</q-item-section>
<q-item-section>
<slot/>
<q-item-label lines="1" v-if="showStatus && getUserStatus(item) && getUserStatus(item)?.status">
<q-badge :color="getUserStatus(item)?.color">
{{ $t(getUserStatus(item)?.text ?? '') }}
</q-badge>
</q-item-label>
<q-item-label lines="1" class="text-bold" v-if="item.section1">
{{item.section1}}
</q-item-label>
<q-item-label lines="2" caption v-if="item.section3">
{{item.section3}}
</q-item-label>
<q-item-label caption v-if="item.section2_1 || item.section2_2">
<pn-inline-pair
:item1="item.section2_1 ? item.section2_1 :null"
item1Class="text-bold"
item1Icon="telegram"
item1IconColor="tgcolor"
:item2="item.section2_2 ? '@' + item.section2_2 : null"
item2Class="text-blue"
/>
</q-item-label>
</q-item-section>
</template>
<script setup lang="ts">
import { getUserStatus } from 'utils/users'
import pnInlinePair from 'components/pnInlinePair.vue'
import type { User } from 'types/User'
type UserListItem = User & {
section1: string
section2_1: string
section2_2: string
section3: string
is_blocked: boolean
is_leave: boolean
companyName?: string | null
}
defineProps<{
item: UserListItem
showStatus?: boolean
}>()
</script>
<style scoped>
</style>