mirror of
https://github.com/hcengineering/platform.git
synced 2025-05-13 19:00:09 +00:00
259 lines
9.6 KiB
Svelte
259 lines
9.6 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 { DisplayTx, TxViewlet } from '@hcengineering/activity'
|
|
import {
|
|
ActivityKey,
|
|
TxDisplayViewlet,
|
|
getValue,
|
|
newDisplayTx,
|
|
updateViewlet
|
|
} from '@hcengineering/activity-resources'
|
|
import activity from '@hcengineering/activity-resources/src/plugin'
|
|
import attachment from '@hcengineering/attachment'
|
|
import chunter from '@hcengineering/chunter'
|
|
import { Person, PersonAccount } from '@hcengineering/contact'
|
|
import { Avatar, personAccountByIdStore, personByIdStore } from '@hcengineering/contact-resources'
|
|
import core, { AnyAttribute, Class, Doc, Ref, TxCUD } from '@hcengineering/core'
|
|
import { Asset } from '@hcengineering/platform'
|
|
import { getClient } from '@hcengineering/presentation'
|
|
import { AnyComponent, Component, Icon, IconActivityEdit, Label } from '@hcengineering/ui'
|
|
import type { AttributeModel } from '@hcengineering/view'
|
|
import { ObjectPresenter } from '@hcengineering/view-resources'
|
|
|
|
export let tx: TxCUD<Doc>
|
|
export let objectId: Ref<Doc>
|
|
export let viewlets: Map<ActivityKey, TxViewlet[]>
|
|
const client = getClient()
|
|
|
|
let ptx: DisplayTx | undefined
|
|
let viewlet: TxDisplayViewlet | undefined
|
|
let props: any
|
|
|
|
let account: PersonAccount | undefined
|
|
let employee: Person | undefined
|
|
let model: AttributeModel[] = []
|
|
let iconComponent: AnyComponent | undefined = undefined
|
|
let modelIcon: Asset | undefined = undefined
|
|
|
|
$: if (tx._id !== ptx?.tx._id) {
|
|
ptx = newDisplayTx(tx, client.getHierarchy(), objectId === tx.objectId)
|
|
if (tx.modifiedBy !== account?._id) {
|
|
account = undefined
|
|
employee = undefined
|
|
}
|
|
props = undefined
|
|
viewlet = undefined
|
|
model = []
|
|
}
|
|
|
|
function getProps (props: any): any {
|
|
return { ...props, attr: ptx?.collectionAttribute }
|
|
}
|
|
|
|
$: ptx &&
|
|
updateViewlet(client, viewlets, ptx).then((result) => {
|
|
if (result.id === tx._id) {
|
|
viewlet = result.viewlet
|
|
modelIcon = result.modelIcon
|
|
iconComponent = result.iconComponent
|
|
props = getProps(result.props)
|
|
model = result.model
|
|
}
|
|
})
|
|
|
|
$: account = $personAccountByIdStore.get(tx.modifiedBy as Ref<PersonAccount>)
|
|
$: employee = account ? $personByIdStore.get(account?.person) : undefined
|
|
|
|
function isMessageType (attr?: AnyAttribute): boolean {
|
|
return attr?.type._class === core.class.TypeMarkup
|
|
}
|
|
|
|
async function updateMessageType (model: AttributeModel[], tx: DisplayTx): Promise<boolean> {
|
|
for (const m of model) {
|
|
if (isMessageType(m.attribute)) {
|
|
return true
|
|
}
|
|
const val = await getValue(client, m, tx)
|
|
if (val.added.length > 1 || val.removed.length > 1) {
|
|
return true
|
|
}
|
|
}
|
|
return false
|
|
}
|
|
let hasMessageType = false
|
|
$: ptx &&
|
|
updateMessageType(model, ptx).then((res) => {
|
|
hasMessageType = res
|
|
})
|
|
|
|
$: isComment = viewlet && viewlet?.editable
|
|
$: isAttached = isAttachment(tx)
|
|
$: isMentioned = isMention(tx.objectClass)
|
|
$: withAvatar = isComment || isMentioned || isAttached
|
|
$: isEmphasized = viewlet?.display === 'emphasized' || model.every((m) => isMessageType(m.attribute))
|
|
$: isColumn = isComment || isEmphasized || hasMessageType
|
|
|
|
function isAttachment (tx: TxCUD<Doc>): boolean {
|
|
return tx.objectClass === attachment.class.Attachment && tx._class === core.class.TxCreateDoc
|
|
}
|
|
function isMention (_class?: Ref<Class<Doc>>): boolean {
|
|
return _class === chunter.class.Backlink
|
|
}
|
|
</script>
|
|
|
|
{#if (viewlet !== undefined && !((viewlet?.hideOnRemove ?? false) && ptx?.removed)) || model.length > 0}
|
|
<div class="msgactivity-container">
|
|
{#if withAvatar}
|
|
<div class="msgactivity-avatar">
|
|
<Avatar avatar={employee?.avatar} size={'x-small'} name={employee?.name} />
|
|
</div>
|
|
{:else}
|
|
<div class="msgactivity-icon">
|
|
{#if iconComponent}
|
|
<Component is={iconComponent} {props} />
|
|
{:else if viewlet}
|
|
<Icon icon={viewlet.icon} size="medium" />
|
|
{:else if viewlet === undefined && model.length > 0}
|
|
<Icon icon={modelIcon !== undefined ? modelIcon : IconActivityEdit} size="medium" />
|
|
{:else}
|
|
<Icon icon={IconActivityEdit} size="medium" />
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
<div class="msgactivity-content" class:content={isColumn} class:comment={isComment}>
|
|
<div class="msgactivity-content__title labels-row">
|
|
{#if viewlet && viewlet?.editable}
|
|
{#if viewlet.label}
|
|
<span class="lower"><Label label={viewlet.label} params={viewlet.labelParams ?? {}} /></span>
|
|
{/if}
|
|
{#if ptx?.updated}
|
|
<span class="lower"><Label label={activity.string.Edited} /></span>
|
|
{/if}
|
|
{:else if viewlet && viewlet.label}
|
|
<span class="lower whitespace-nowrap">
|
|
<Label label={viewlet.label} params={viewlet.labelParams ?? {}} />
|
|
</span>
|
|
{/if}
|
|
{#if viewlet && viewlet.labelComponent}
|
|
<Component is={viewlet.labelComponent} {props} />
|
|
{/if}
|
|
|
|
{#if viewlet === undefined && model.length > 0 && ptx?.updateTx}
|
|
{#each model as m}
|
|
{#await getValue(client, m, ptx) then value}
|
|
{#if value.added.length}
|
|
<span class="lower"><Label label={activity.string.Added} /></span>
|
|
<span class="lower"><Label label={activity.string.To} /></span>
|
|
<span class="lower"><Label label={m.label} /></span>
|
|
{#each value.added as cvalue}
|
|
{#if value.isObjectAdded}
|
|
<ObjectPresenter value={cvalue} />
|
|
{:else}
|
|
<svelte:component this={m.presenter} value={cvalue} />
|
|
{/if}
|
|
{/each}
|
|
{:else if value.removed.length}
|
|
<span class="lower"><Label label={activity.string.Removed} /></span>
|
|
<span class="lower"><Label label={activity.string.From} /></span>
|
|
<span class="lower"><Label label={m.label} /></span>
|
|
{#each value.removed as cvalue}
|
|
{#if value.isObjectRemoved}
|
|
<ObjectPresenter value={cvalue} />
|
|
{:else}
|
|
<svelte:component this={m.presenter} value={cvalue} />
|
|
{/if}
|
|
{/each}
|
|
{:else if value.set === null || value.set === undefined || value.set === ''}
|
|
<span class="lower"><Label label={activity.string.Unset} /></span>
|
|
<span class="lower"><Label label={m.label} /></span>
|
|
{:else}
|
|
<span class="lower"><Label label={activity.string.Changed} /></span>
|
|
<span class="lower"><Label label={m.label} /></span>
|
|
<span class="lower"><Label label={activity.string.To} /></span>
|
|
|
|
{#if !hasMessageType}
|
|
<span class="strong">
|
|
{#if value.isObjectSet}
|
|
<ObjectPresenter value={value.set} accent />
|
|
{:else}
|
|
<svelte:component this={m.presenter} value={value.set} accent />
|
|
{/if}
|
|
</span>
|
|
{/if}
|
|
{/if}
|
|
{/await}
|
|
{/each}
|
|
{:else if viewlet === undefined && model.length > 0 && ptx?.mixinTx}
|
|
{#each model as m}
|
|
{#await getValue(client, m, ptx) then value}
|
|
{#if value.set === null || value.set === ''}
|
|
<span class="lower"><Label label={activity.string.Unset} /></span>
|
|
<span class="lower"><Label label={m.label} /></span>
|
|
{:else}
|
|
<span class="lower"><Label label={activity.string.Changed} /></span>
|
|
<span class="lower"><Label label={m.label} /></span>
|
|
<span class="lower"><Label label={activity.string.To} /></span>
|
|
|
|
{#if !hasMessageType}
|
|
<div class="strong">
|
|
{#if value.isObjectSet}
|
|
<ObjectPresenter value={value.set} accent />
|
|
{:else}
|
|
<svelte:component this={m.presenter} value={value.set} accent />
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
{/if}
|
|
{/await}
|
|
{/each}
|
|
{:else if viewlet && viewlet.display === 'inline' && viewlet.component}
|
|
{#if typeof viewlet.component === 'string'}
|
|
<Component is={viewlet.component} {props} />
|
|
{:else}
|
|
<svelte:component this={viewlet.component} {...props} />
|
|
{/if}
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<style lang="scss">
|
|
.msgactivity-container {
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
|
|
.msgactivity-content {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
margin-left: 0.5rem;
|
|
margin-right: 1rem;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
}
|
|
.msgactivity-icon,
|
|
.msgactivity-avatar {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
min-width: 0;
|
|
}
|
|
</style>
|