From 930d13b2a38019c760bbb83ff7e2b752e8dcca3a Mon Sep 17 00:00:00 2001 From: Kristina Date: Wed, 22 May 2024 11:32:45 +0400 Subject: [PATCH] Add chat UI fixes (#5632) Signed-off-by: Kristina Fefelova --- models/chunter/src/index.ts | 19 +++++------- models/view/src/index.ts | 1 + packages/theme/styles/components.scss | 8 +++-- .../src/components/chat/Chat.svelte | 7 ++++- plugins/chunter-resources/src/utils.ts | 29 +++++++++++++++++-- plugins/chunter/src/index.ts | 1 - plugins/view/src/types.ts | 1 + .../src/components/SpecialView.svelte | 3 +- tests/sanity/tests/model/channel-page.ts | 2 +- 9 files changed, 52 insertions(+), 19 deletions(-) diff --git a/models/chunter/src/index.ts b/models/chunter/src/index.ts index 20bbbe89c2..cccbcb20ac 100644 --- a/models/chunter/src/index.ts +++ b/models/chunter/src/index.ts @@ -38,8 +38,7 @@ import { type Ref, type Space, type Timestamp, - IndexKind, - SortingOrder + IndexKind } from '@hcengineering/core' import { ArrOf, @@ -77,9 +76,6 @@ export const DOMAIN_CHUNTER = 'chunter' as Domain export class TChunterSpace extends TSpace implements ChunterSpace { @Prop(TypeTimestamp(), chunter.string.LastMessage) lastMessage?: Timestamp - - @Prop(ArrOf(TypeRef(chunter.class.ChunterMessage)), chunter.string.PinnedMessages) - pinned?: Ref[] } @Model(chunter.class.Channel, chunter.class.ChunterSpace) @@ -352,15 +348,11 @@ export function createModel (builder: Builder): void { { attachTo: chunter.class.Channel, descriptor: view.viewlet.Table, - viewOptions: { - orderBy: [['modifiedOn', SortingOrder.Descending]], - groupBy: [], - other: [] - }, configOptions: { strict: true }, - config: ['', 'topic', 'private', 'archived', 'members'] + config: ['', 'topic', 'private', 'archived', 'members'], + props: { enableChecking: false } }, chunter.viewlet.Channels ) @@ -738,6 +730,11 @@ export function createModel (builder: Builder): void { }, chunter.action.ReplyToThreadAction ) + + builder.mixin(chunter.class.Channel, core.class.Class, view.mixin.ClassFilters, { + filters: ['name', 'topic', 'private', 'archived', 'members'], + strict: true + }) } export default chunter diff --git a/models/view/src/index.ts b/models/view/src/index.ts index c9efd027be..d2720fdc5e 100644 --- a/models/view/src/index.ts +++ b/models/view/src/index.ts @@ -300,6 +300,7 @@ export class TViewlet extends TDoc implements Viewlet { config!: (BuildModelKey | string)[] hiddenKeys?: string[] viewOptions?: ViewOptionsModel + props?: Record } @Model(view.class.Action, core.class.Doc, DOMAIN_MODEL) diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss index 80e87f2f5c..914ed75f87 100644 --- a/packages/theme/styles/components.scss +++ b/packages/theme/styles/components.scss @@ -1524,8 +1524,12 @@ th, td { padding: .5rem 1.5rem; text-align: left; - &:first-child { padding-left: 0; } - &:last-child { padding-right: 0; } + &:first-child { .metaColumn { + padding-left: 0; } + } + &:last-child { .metaColumn { + padding-right: 0; } + } } th { height: 3rem; diff --git a/plugins/chunter-resources/src/components/chat/Chat.svelte b/plugins/chunter-resources/src/components/chat/Chat.svelte index 058ddb6842..c8cebe0ac3 100644 --- a/plugins/chunter-resources/src/components/chat/Chat.svelte +++ b/plugins/chunter-resources/src/components/chat/Chat.svelte @@ -61,7 +61,10 @@ }) openedChannelStore.subscribe((data) => { - if (data && selectedData?._id !== data._id) { + if (data === undefined) { + selectedData = undefined + object = undefined + } else if (selectedData?._id !== data._id) { selectedData = data openChannel(data._id, data._class, data.thread) } @@ -94,6 +97,8 @@ const id = loc.path[3] if (!id) { + currentSpecial = undefined + clearChannel() return } diff --git a/plugins/chunter-resources/src/utils.ts b/plugins/chunter-resources/src/utils.ts index a5e861ad4a..e3927f5c66 100644 --- a/plugins/chunter-resources/src/utils.ts +++ b/plugins/chunter-resources/src/utils.ts @@ -12,7 +12,13 @@ // See the License for the specific language governing permissions and // limitations under the License. // -import { type Channel, type ChatMessage, type DirectMessage, type ThreadMessage } from '@hcengineering/chunter' +import { + type Channel, + type ChatMessage, + chunterId, + type DirectMessage, + type ThreadMessage +} from '@hcengineering/chunter' import contact, { type Employee, getName, type Person, type PersonAccount } from '@hcengineering/contact' import { employeeByIdStore, PersonIcon } from '@hcengineering/contact-resources' import { @@ -28,7 +34,7 @@ import { type Timestamp } from '@hcengineering/core' import { getClient } from '@hcengineering/presentation' -import { type AnySvelteComponent } from '@hcengineering/ui' +import { type AnySvelteComponent, getCurrentLocation, navigate } from '@hcengineering/ui' import { type Asset, translate } from '@hcengineering/platform' import { classIcon, getDocLinkTitle, getDocTitle } from '@hcengineering/view-resources' import activity, { @@ -49,6 +55,7 @@ import { get, type Unsubscriber } from 'svelte/store' import chunter from './plugin' import DirectIcon from './components/DirectIcon.svelte' import ChannelIcon from './components/ChannelIcon.svelte' +import { decodeChannelURI } from './navigation' export async function getDmName (client: Client, space?: Space): Promise { if (space === undefined) { @@ -395,6 +402,21 @@ export async function readChannelMessages ( } } +function resetChunterLoc (objectId: Ref): void { + const loc = getCurrentLocation() + const [_id] = decodeChannelURI(loc.path[3]) + + if (loc.path[2] !== chunterId || _id !== objectId) { + return + } + + loc.path[3] = '' + loc.path[4] = '' + loc.query = {} + loc.path.length = 3 + navigate(loc) +} + export async function leaveChannelAction (context?: DocNotifyContext): Promise { if (context === undefined) { return @@ -407,6 +429,7 @@ export async function leaveChannelAction (context?: DocNotifyContext): Promise { @@ -418,6 +441,8 @@ export async function removeChannelAction (context?: DocNotifyContext): Promise< await archiveContextNotifications(context) await client.remove(context) + + resetChunterLoc(context.attachedTo) } export function isThreadMessage (message: ActivityMessage): message is ThreadMessage { diff --git a/plugins/chunter/src/index.ts b/plugins/chunter/src/index.ts index 5f3923e0aa..469b51029a 100644 --- a/plugins/chunter/src/index.ts +++ b/plugins/chunter/src/index.ts @@ -27,7 +27,6 @@ import { Action } from '@hcengineering/view' */ export interface ChunterSpace extends Space { lastMessage?: Timestamp - pinned?: Ref[] } /** diff --git a/plugins/view/src/types.ts b/plugins/view/src/types.ts index 06905022c6..2ad8f71184 100644 --- a/plugins/view/src/types.ts +++ b/plugins/view/src/types.ts @@ -410,6 +410,7 @@ export interface Viewlet extends Doc { configOptions?: ViewletConfigOptions viewOptions?: ViewOptionsModel variant?: string + props?: Record } /** diff --git a/plugins/workbench-resources/src/components/SpecialView.svelte b/plugins/workbench-resources/src/components/SpecialView.svelte index 0296f386d8..d670fe2d59 100644 --- a/plugins/workbench-resources/src/components/SpecialView.svelte +++ b/plugins/workbench-resources/src/components/SpecialView.svelte @@ -129,7 +129,8 @@ createItemDialog: createComponent, createItemLabel: createLabel, query: resultQuery, - totalQuery: query + totalQuery: query, + ...viewlet.props }} /> {/if} diff --git a/tests/sanity/tests/model/channel-page.ts b/tests/sanity/tests/model/channel-page.ts index 1908417eb5..1a34326c04 100644 --- a/tests/sanity/tests/model/channel-page.ts +++ b/tests/sanity/tests/model/channel-page.ts @@ -12,7 +12,7 @@ export class ChannelPage { readonly textMessage = (): Locator => this.page.getByText('Test message') readonly channelName = (channel: string): Locator => this.page.getByText('general random').getByText(channel) readonly channelTab = (): Locator => this.page.getByRole('link', { name: 'Channels' }).getByRole('button') - readonly channelTable = (): Locator => this.page.locator('[class="antiTable metaColumn highlightRows"]') + readonly channelTable = (): Locator => this.page.getByRole('table') readonly channel = (channel: string): Locator => this.page.getByRole('button', { name: channel }) async sendMessage (message: string): Promise {