141 lines
3.9 KiB
Vue
141 lines
3.9 KiB
Vue
<template>
|
|
<pn-page-template>
|
|
<template #title>
|
|
{{ $t('chat_card__title') }}
|
|
</template>
|
|
|
|
<template #card-actions>
|
|
<q-btn
|
|
rounded color="primary"
|
|
class="w100"
|
|
@click="onSubmit"
|
|
v-if="chat"
|
|
>
|
|
{{ $t("chat_card__go_chat") }}
|
|
</q-btn>
|
|
</template>
|
|
|
|
<div
|
|
v-if="chat"
|
|
class="flex column items-center q-px-md q-pt-md q-pb-sm"
|
|
>
|
|
<pn-auto-avatar
|
|
:img="chat.logo"
|
|
:name="chat.name"
|
|
size="100px"
|
|
rounded
|
|
/>
|
|
<div
|
|
class="flex row items-start justify-center q-pt-md text-bold text-center"
|
|
>
|
|
{{ chat.name }}
|
|
</div>
|
|
<div
|
|
v-if="chat.description"
|
|
class="flex row items-start justify-center text-caption text-center text-grey"
|
|
>
|
|
{{ chat.description }}
|
|
</div>
|
|
</div>
|
|
<div class="q-pb-md w100" v-if="chat">
|
|
<pn-chat-type-item
|
|
:access="chat.bot_access"
|
|
:time="chat.bot_access_date"
|
|
/>
|
|
<pn-chat-type-item
|
|
v-if="chat.state !== 1"
|
|
:state="chat.state"
|
|
:time="chat.state_date ?? 0"
|
|
/>
|
|
</div>
|
|
|
|
<q-list v-if="chatUsers.length !== 0">
|
|
<q-item-label class="text-caption text-bold q-py-none" header>
|
|
{{ $t('chat_card__members') + ' (' + chatUsers.length +')' }}
|
|
</q-item-label>
|
|
<q-item
|
|
v-for="item in chatUsers"
|
|
:key="item.id"
|
|
v-ripple
|
|
clickable
|
|
class="w100"
|
|
@click="goUserInfo(item.id)"
|
|
>
|
|
<pn-user-list-item-body :item showStatus>
|
|
<q-item-label class="text-caption text-amber-10" lines="1" v-if="chat?.owner_id === item.id">
|
|
<div class="flex items-center">
|
|
<q-icon name="star" class="q-pr-xs"/>
|
|
{{ $t('chat_card__owner') }}
|
|
</div>
|
|
</q-item-label>
|
|
</pn-user-list-item-body>
|
|
</q-item>
|
|
</q-list>
|
|
</pn-page-template>
|
|
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, watch, inject } from 'vue'
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
import { useChatsStore } from 'stores/chats'
|
|
import { useUsersStore } from 'stores/users'
|
|
import { useCompaniesStore } from 'stores/companies'
|
|
import { parseIntString } from 'utils/helpers'
|
|
import { useUserSection } from 'composables/useUserSection'
|
|
import pnChatTypeItem from 'components/pnChatTypeItem.vue'
|
|
import pnUserListItemBody from 'components/pnUserListItemBody.vue'
|
|
import type { Chat } from 'types/Chat'
|
|
import type { WebApp } from '@twa-dev/types'
|
|
|
|
const tg = inject('tg') as WebApp
|
|
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const chatsStore = useChatsStore()
|
|
const usersStore = useUsersStore()
|
|
|
|
const chat = ref<Chat | null>(null)
|
|
const chatId = computed(() => parseIntString(route.params.chatId))
|
|
|
|
function initChat() {
|
|
if (chatsStore.isInit && chatId.value) {
|
|
const foundChat = chatsStore.chatById(chatId.value)
|
|
if (foundChat) {
|
|
chat.value = { ...foundChat } as Chat
|
|
}
|
|
}
|
|
}
|
|
|
|
if (chatsStore.isInit) initChat()
|
|
|
|
watch(() => chatsStore.isInit, initChat)
|
|
|
|
function onSubmit () {
|
|
if (chat.value) tg.openTelegramLink('https://t.me/c/' + chat.value.telegram_id + '/' + chat.value.message_id)
|
|
}
|
|
|
|
const users = computed(() => usersStore.users)
|
|
const companiesStore = useCompaniesStore()
|
|
const { userSection } = useUserSection()
|
|
|
|
const chatUsers = computed(() => {
|
|
if (!chat.value) return []
|
|
const idSet = new Set(chat.value.users)
|
|
const arr = users.value.filter(el => idSet.has(el.id))
|
|
return arr.map(el => ({
|
|
...el,
|
|
...userSection(el),
|
|
companyName:
|
|
(el.company_id && companiesStore.companyById(el.company_id))
|
|
? companiesStore.companyById(el.company_id)?.name ?? null
|
|
: null
|
|
}))
|
|
})
|
|
|
|
async function goUserInfo (id: number) {
|
|
await router.push({ name: 'user_info', params: { id: route.params.id, userId: id }})
|
|
}
|
|
|
|
</script>
|