platform/plugins/chunter-resources/src/components/chat/create/CreateDirectChat.svelte
Kristina 0763624688
Add employee action to start conversation (#6687)
Signed-off-by: Kristina Fefelova <kristin.fefelova@gmail.com>
2024-09-23 18:24:25 +07:00

128 lines
3.4 KiB
Svelte

<!--
// Copyright © 2023 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 { createEventDispatcher, onMount } from 'svelte'
import contact, { Employee, PersonAccount } from '@hcengineering/contact'
import { Ref } from '@hcengineering/core'
import { SelectUsersPopup } from '@hcengineering/contact-resources'
import presentation, { createQuery, getClient } from '@hcengineering/presentation'
import { Modal, showPopup } from '@hcengineering/ui'
import chunter from '../../../plugin'
import { buildDmName, createDirect } from '../../../utils'
import ChannelMembers from '../../ChannelMembers.svelte'
import { openChannel } from '../../../navigation'
const dispatch = createEventDispatcher()
const client = getClient()
const query = createQuery()
let employeeIds: Ref<Employee>[] = []
let dmName = ''
let accounts: PersonAccount[] = []
let hidden = true
$: void loadDmName(accounts).then((r) => {
dmName = r
})
$: query.query(contact.class.PersonAccount, { person: { $in: employeeIds } }, (res) => {
accounts = res
})
async function loadDmName (employeeAccounts: PersonAccount[]): Promise<string> {
return await buildDmName(client, employeeAccounts)
}
async function createDirectMessage (): Promise<void> {
const dmId = await createDirect(employeeIds)
if (dmId !== undefined) {
openChannel(dmId, chunter.class.DirectMessage)
dispatch('close')
}
}
function handleCancel (): void {
dispatch('close')
}
onMount(() => {
openSelectUsersPopup(true)
})
function addMembersClicked (): void {
openSelectUsersPopup(false)
}
function openSelectUsersPopup (closeOnClose: boolean): void {
showPopup(
SelectUsersPopup,
{
okLabel: presentation.string.Next,
skipCurrentAccount: false,
skipInactive: true,
selected: employeeIds,
showStatus: true
},
'top',
(result?: Ref<Employee>[]) => {
if (result != null) {
employeeIds = result
hidden = false
} else if (closeOnClose) {
dispatch('close')
}
}
)
hidden = true
}
</script>
<Modal
label={chunter.string.NewDirectChat}
type="type-popup"
{hidden}
okLabel={presentation.string.Create}
okAction={createDirectMessage}
canSave={employeeIds.length > 0}
onCancel={handleCancel}
on:close
>
<div class="hulyModal-content__titleGroup" style="padding: 0">
<div class="title overflow-label mb-4" title={dmName}>
{dmName}
</div>
<ChannelMembers
ids={employeeIds}
on:add={addMembersClicked}
on:remove={(ev) => {
employeeIds = employeeIds.filter((id) => id !== ev.detail)
}}
/>
</div>
</Modal>
<style lang="scss">
.title {
font-size: 1.25rem;
font-weight: 500;
padding: var(--spacing-1);
max-width: 40rem;
color: var(--global-primary-TextColor);
}
</style>