platform/plugins/chunter-resources/src/components/DmHeader.svelte
Denis Bunakalya 833013c1d5
Chunter: Avatars in dm header and highlight on first message (#1499)
Signed-off-by: Denis Bunakalya <denis.bunakalya@xored.com>
2022-04-25 13:43:19 +06:00

75 lines
2.4 KiB
Svelte

<!--
// Copyright © 2022 Hardcore Engineering Inc.
//
// Licensed under the Eclipse Public License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License. You may
// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//
// See the License for the specific language governing permissions and
// limitations under the License.
-->
<script lang="ts">
import { DirectMessage } from '@anticrm/chunter'
import type { Ref } from '@anticrm/core'
import { getCurrentAccount } from '@anticrm/core'
import { createQuery, getClient, CombineAvatars } from '@anticrm/presentation'
import contact, { EmployeeAccount } from '@anticrm/contact'
import { showPanel } from '@anticrm/ui'
import chunter from '../plugin'
import { getDmName } from '../utils'
export let spaceId: Ref<DirectMessage> | undefined
const client = getClient()
const query = createQuery()
const myAccId = getCurrentAccount()._id
let dm: DirectMessage | undefined
$: query.query(chunter.class.DirectMessage, { _id: spaceId }, (result) => {
dm = result[0]
})
async function getEmpolyeeIds () {
const empAccIds = dm?.members.length !== 1 ? dm?.members.filter((accId) => accId !== myAccId) : dm?.members
const employeeAccounts = await client.findAll(contact.class.EmployeeAccount, {
_id: { $in: empAccIds as Ref<EmployeeAccount>[] }
})
return employeeAccounts.map((ea) => ea.employee)
}
async function onSpaceEdit (): Promise<void> {
if (dm === undefined) return
showPanel(chunter.component.EditChannel, dm._id, dm._class, 'right')
}
</script>
<div class="ac-header divide full">
{#if dm}
{#await getDmName(client, dm) then name}
{#await getEmpolyeeIds() then empolyeeIds}
<div class="ac-header__wrap-title" on:click={onSpaceEdit}>
<div class="ac-header__icon">
<CombineAvatars _class={contact.class.Employee} items={empolyeeIds} size={'x-small'} />
</div>
<span class="ac-header__title">{name}</span>
</div>
{/await}
{/await}
{/if}
</div>
<style lang="scss">
.ac-header__wrap-title:hover {
cursor: pointer;
span {
text-decoration: underline;
}
}
</style>