mirror of
https://github.com/hcengineering/platform.git
synced 2026-09-30 05:25:00 +02:00
TSK-959 Inbox (part1) (#2885)
Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>
This commit is contained in:
Denis Bykhov
@@ -0,0 +1,97 @@
|
||||
<!--
|
||||
// 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 activity, { TxViewlet } from '@hcengineering/activity'
|
||||
import { activityKey, ActivityKey } from '@hcengineering/activity-resources'
|
||||
import { Class, Doc, getCurrentAccount, Ref } from '@hcengineering/core'
|
||||
import notification, { DocUpdates } from '@hcengineering/notification'
|
||||
import { createQuery, getClient } from '@hcengineering/presentation'
|
||||
import { AnyComponent, Component, Label, Loading, Scroller } from '@hcengineering/ui'
|
||||
import view from '@hcengineering/view'
|
||||
import NotificationView from './NotificationView.svelte'
|
||||
|
||||
const client = getClient()
|
||||
const hierarchy = client.getHierarchy()
|
||||
const query = createQuery()
|
||||
|
||||
let docs: DocUpdates[] = []
|
||||
let loading = true
|
||||
|
||||
$: query.query(
|
||||
notification.class.DocUpdates,
|
||||
{
|
||||
user: getCurrentAccount()._id
|
||||
},
|
||||
(res) => {
|
||||
docs = res
|
||||
if (loading && docs.length > 0) {
|
||||
select(docs[0].attachedTo, docs[0].attachedToClass)
|
||||
}
|
||||
loading = false
|
||||
},
|
||||
{
|
||||
sort: {
|
||||
lastTxTime: -1
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
function select (objectId: Ref<Doc>, objectClass: Ref<Class<Doc>>) {
|
||||
const targetClass = hierarchy.getClass(objectClass)
|
||||
const panelComponent = hierarchy.as(targetClass, view.mixin.ObjectPanel)
|
||||
component = panelComponent.component ?? view.component.EditDoc
|
||||
_id = objectId
|
||||
_class = objectClass
|
||||
}
|
||||
|
||||
function selectHandler (e: CustomEvent) {
|
||||
select(e.detail._id, e.detail._class)
|
||||
}
|
||||
|
||||
let component: AnyComponent | undefined
|
||||
let _id: Ref<Doc> | undefined
|
||||
let _class: Ref<Class<Doc>> | undefined
|
||||
|
||||
let viewlets: Map<ActivityKey, TxViewlet>
|
||||
|
||||
const descriptors = createQuery()
|
||||
descriptors.query(activity.class.TxViewlet, {}, (result) => {
|
||||
viewlets = new Map(result.map((r) => [activityKey(r.objectClass, r.txClass), r]))
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="flex h-full">
|
||||
<div class="antiPanel-component border-right filled indent aside">
|
||||
<div class="antiNav-header bottom-divider">
|
||||
<span class="fs-title overflow-label">
|
||||
<Label label={notification.string.Inbox} />
|
||||
</span>
|
||||
</div>
|
||||
<Scroller>
|
||||
{#if loading}
|
||||
<Loading />
|
||||
{:else}
|
||||
{#each docs as doc}
|
||||
<NotificationView value={doc} selected={doc.attachedTo === _id} {viewlets} on:click={selectHandler} />
|
||||
{/each}
|
||||
{/if}
|
||||
</Scroller>
|
||||
</div>
|
||||
{#if loading}
|
||||
<Loading />
|
||||
{:else if component && _id && _class}
|
||||
<Component is={component} props={{ embedded: true, _id, _class }} />
|
||||
{/if}
|
||||
</div>
|
||||
@@ -1,6 +1,5 @@
|
||||
<!--
|
||||
// Copyright © 2020, 2021 Anticrm Platform Contributors.
|
||||
// Copyright © 2021, 2022 Hardcore Engineering Inc.
|
||||
// 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
|
||||
@@ -15,199 +14,121 @@
|
||||
-->
|
||||
<script lang="ts">
|
||||
import { TxViewlet } from '@hcengineering/activity'
|
||||
import { ActivityKey, DisplayTx, newDisplayTx, TxView } from '@hcengineering/activity-resources'
|
||||
import core, { Doc, TxCUD, TxProcessor, WithLookup, Ref, Class } from '@hcengineering/core'
|
||||
import { Notification, NotificationStatus } from '@hcengineering/notification'
|
||||
import { getClient } from '@hcengineering/presentation'
|
||||
import { Button, Component, getPlatformColor, IconBack, IconCheck, IconDelete } from '@hcengineering/ui'
|
||||
import type { AnyComponent } from '@hcengineering/ui'
|
||||
import { ActivityKey } from '@hcengineering/activity-resources'
|
||||
import contact, { EmployeeAccount, getName } from '@hcengineering/contact'
|
||||
import { Avatar, employeeByIdStore } from '@hcengineering/contact-resources'
|
||||
import core, { Doc, Ref, TxCUD, TxProcessor } from '@hcengineering/core'
|
||||
import notification, { DocUpdates } from '@hcengineering/notification'
|
||||
import { getResource } from '@hcengineering/platform'
|
||||
import { createQuery, getClient } from '@hcengineering/presentation'
|
||||
import { AnySvelteComponent, Label, TimeSince } from '@hcengineering/ui'
|
||||
import view from '@hcengineering/view'
|
||||
import { getObjectPreview } from '@hcengineering/view-resources'
|
||||
import plugin from '../plugin'
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
import TxView from './TxView.svelte'
|
||||
|
||||
export let notification: WithLookup<Notification>
|
||||
export let value: DocUpdates
|
||||
export let viewlets: Map<ActivityKey, TxViewlet>
|
||||
export let selected: boolean
|
||||
let doc: Doc | undefined = undefined
|
||||
let tx: TxCUD<Doc> | undefined = undefined
|
||||
|
||||
let account: EmployeeAccount | undefined = undefined
|
||||
|
||||
const client = getClient()
|
||||
const hierarchy = client.getHierarchy()
|
||||
|
||||
function getDisplayTx (notification: WithLookup<Notification>): DisplayTx | undefined {
|
||||
let tx = notification.$lookup?.tx
|
||||
if (tx) {
|
||||
if (hierarchy.isDerived(tx._class, core.class.TxCollectionCUD)) {
|
||||
tx = TxProcessor.extractTx(tx) as TxCUD<Doc>
|
||||
$: value.lastTx &&
|
||||
client.findOne(core.class.TxCUD, { _id: value.lastTx }).then((res) => {
|
||||
if (res !== undefined) {
|
||||
tx = TxProcessor.extractTx(res) as TxCUD<Doc>
|
||||
} else {
|
||||
tx = res
|
||||
}
|
||||
return newDisplayTx(tx, hierarchy)
|
||||
}
|
||||
}
|
||||
|
||||
async function changeState (notification: Notification, status: NotificationStatus): Promise<void> {
|
||||
if (notification.status === status) return
|
||||
await client.updateDoc(notification._class, notification.space, notification._id, {
|
||||
status
|
||||
})
|
||||
|
||||
let presenter: AnySvelteComponent | undefined = undefined
|
||||
$: presenterRes =
|
||||
hierarchy.classHierarchyMixin(value.attachedToClass, notification.mixin.NotificationObjectPresenter)?.presenter ??
|
||||
hierarchy.classHierarchyMixin(value.attachedToClass, view.mixin.ObjectPresenter)?.presenter
|
||||
$: if (presenterRes) {
|
||||
getResource(presenterRes).then((res) => (presenter = res))
|
||||
}
|
||||
|
||||
$: displayTx = getDisplayTx(notification)
|
||||
const query = createQuery()
|
||||
$: tx &&
|
||||
query.query(contact.class.EmployeeAccount, { _id: tx.modifiedBy as Ref<EmployeeAccount> }, (r) => ([account] = r))
|
||||
$: employee = account && $employeeByIdStore.get(account.employee)
|
||||
|
||||
let presenter: AnyComponent | undefined
|
||||
let doc: Doc | undefined
|
||||
let visible: boolean = false
|
||||
async function updatePreviewPresenter (ref?: Ref<Class<Doc>>): Promise<void> {
|
||||
presenter = ref !== undefined ? await getObjectPreview(client, ref) : undefined
|
||||
}
|
||||
$: if (displayTx) updatePreviewPresenter(displayTx.tx.objectClass)
|
||||
$: if (presenter !== undefined && displayTx) {
|
||||
client.findOne(displayTx.tx.objectClass, { _id: displayTx.tx.objectId }).then((res) => (doc = res))
|
||||
}
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
const docQuery = createQuery()
|
||||
$: docQuery.query(value.attachedToClass, { _id: value.attachedTo }, (res) => ([doc] = res))
|
||||
|
||||
$: newTxes = value.txes.length
|
||||
</script>
|
||||
|
||||
{#if displayTx}
|
||||
{@const isNew = notification.status !== NotificationStatus.Read}
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
{#if doc}
|
||||
<div
|
||||
class="content {isNew ? 'new' : 'readed'} with-document"
|
||||
class:visible
|
||||
style:--color={isNew ? getPlatformColor(11) : '#555555'}
|
||||
on:click|preventDefault|stopPropagation={() => {
|
||||
changeState(notification, NotificationStatus.Read)
|
||||
visible = !visible
|
||||
}}
|
||||
class="container cursor-pointer bottom-divider"
|
||||
class:selected
|
||||
on:click={() => dispatch('click', { _id: value.attachedTo, _class: value.attachedToClass })}
|
||||
>
|
||||
<div class="subheader">
|
||||
<div class="flex-grow">
|
||||
<Component
|
||||
is={view.component.ObjectPresenter}
|
||||
props={{
|
||||
objectId: displayTx.tx.objectId,
|
||||
_class: displayTx.tx.objectClass,
|
||||
value: displayTx.doc,
|
||||
inline: true
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div class="buttons-group xsmall-gap">
|
||||
<Button
|
||||
icon={isNew ? IconCheck : IconBack}
|
||||
iconProps={!isNew ? { kind: 'curve' } : {}}
|
||||
kind={'transparent'}
|
||||
showTooltip={{ label: plugin.string.MarkAsRead }}
|
||||
size={'medium'}
|
||||
on:click={() => {
|
||||
if (!isNew && visible) visible = false
|
||||
changeState(notification, isNew ? NotificationStatus.Read : NotificationStatus.Notified)
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
icon={IconDelete}
|
||||
kind={'transparent'}
|
||||
showTooltip={{ label: plugin.string.Remove }}
|
||||
size={'medium'}
|
||||
on:click={() => {
|
||||
client.remove(notification)
|
||||
}}
|
||||
/>
|
||||
<div class="content">
|
||||
<div class="header flex">
|
||||
<Avatar avatar={employee?.avatar} size="medium" />
|
||||
<div class="ml-2 w-full">
|
||||
<div class="flex-between mb-1">
|
||||
<div class="caption-color flex">
|
||||
{#if employee}
|
||||
{getName(employee)}
|
||||
{:else}
|
||||
<Label label={core.string.System} />
|
||||
{/if}
|
||||
{#if newTxes > 0}
|
||||
<div class="counter ml-2">
|
||||
{newTxes}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex-center">
|
||||
<div class="time ml-2"><TimeSince value={tx?.modifiedOn} /></div>
|
||||
</div>
|
||||
</div>
|
||||
{#if presenter}
|
||||
<svelte:component this={presenter} value={doc} />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{#if tx}
|
||||
<TxView {tx} {viewlets} />
|
||||
{/if}
|
||||
</div>
|
||||
<TxView tx={displayTx} {viewlets} showIcon={false} contentHidden={!visible} />
|
||||
{#if presenter && doc}
|
||||
<div class="document-preview">
|
||||
<Component is={presenter} props={{ object: doc }} />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 0.75rem;
|
||||
padding: 0.5rem 0.75rem 0.75rem;
|
||||
min-height: 0;
|
||||
border: 1px solid var(--button-border-color);
|
||||
border-radius: 0.75rem;
|
||||
transition-property: border-color, background-color, height;
|
||||
transition-duration: 0.3s, 0.15s, 0.15s;
|
||||
transition-timing-function: ease-in-out;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
&.new {
|
||||
background-color: var(--popup-bg-hover);
|
||||
}
|
||||
&.readed {
|
||||
background-color: var(--body-accent);
|
||||
}
|
||||
.container {
|
||||
&:hover {
|
||||
border-color: var(--button-border-hover);
|
||||
background-color: var(--board-card-bg-hover);
|
||||
}
|
||||
&.with-document {
|
||||
cursor: pointer;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -0.25rem;
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
width: calc(100% - 2rem);
|
||||
height: 0.75rem;
|
||||
background-color: var(--body-accent);
|
||||
border: 1px solid var(--divider-color);
|
||||
border-radius: 0.5rem;
|
||||
z-index: -1;
|
||||
transition: bottom 0.15s ease-in-out;
|
||||
box-shadow: var(--primary-shadow);
|
||||
}
|
||||
&:hover::before {
|
||||
bottom: -0.4rem;
|
||||
}
|
||||
&.visible::before {
|
||||
bottom: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.subheader {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 0 0.5rem 1.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
min-height: 0;
|
||||
border-bottom: 1px solid var(--divider-color);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0.5rem;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
background-color: var(--color);
|
||||
transform: translateY(calc(-50% - 0.25rem));
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.document-preview {
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
margin-top: -0.5rem;
|
||||
padding: 0;
|
||||
max-height: 0;
|
||||
background-color: var(--body-color);
|
||||
border: 1px solid var(--divider-color);
|
||||
border-radius: 0.5rem;
|
||||
opacity: 0;
|
||||
transition-property: margin-top, max-height, opacity;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-duration: 0.15s;
|
||||
}
|
||||
&.visible .document-preview {
|
||||
visibility: visible;
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
max-height: max-content;
|
||||
opacity: 1;
|
||||
&.selected {
|
||||
background-color: var(--board-card-bg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.counter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid;
|
||||
border-color: var(--divider-color);
|
||||
border-radius: 50%;
|
||||
height: 1.25rem;
|
||||
width: 1.25rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,114 +0,0 @@
|
||||
<!--
|
||||
// Copyright © 2020, 2021 Anticrm Platform Contributors.
|
||||
// Copyright © 2021, 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 activity, { TxViewlet } from '@hcengineering/activity'
|
||||
import { activityKey, ActivityKey } from '@hcengineering/activity-resources'
|
||||
import { EmployeeAccount } from '@hcengineering/contact'
|
||||
import core, { getCurrentAccount, WithLookup } from '@hcengineering/core'
|
||||
import { Notification, NotificationStatus } from '@hcengineering/notification'
|
||||
import { createQuery, getClient } from '@hcengineering/presentation'
|
||||
import { Button, IconCheckAll, IconDelete, Scroller, deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
|
||||
import { Label } from '@hcengineering/ui'
|
||||
import notification from '../plugin'
|
||||
import NotificationView from './NotificationView.svelte'
|
||||
|
||||
const query = createQuery()
|
||||
let notifications: WithLookup<Notification>[] = []
|
||||
const client = getClient()
|
||||
|
||||
$: query.query(
|
||||
notification.class.Notification,
|
||||
{
|
||||
attachedTo: (getCurrentAccount() as EmployeeAccount).employee
|
||||
},
|
||||
(res) => {
|
||||
notifications = res
|
||||
},
|
||||
{
|
||||
sort: {
|
||||
'$lookup.tx.modifiedOn': -1
|
||||
},
|
||||
limit: 30,
|
||||
lookup: {
|
||||
tx: core.class.TxCUD
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
let viewlets: Map<ActivityKey, TxViewlet>
|
||||
|
||||
const descriptors = createQuery()
|
||||
$: descriptors.query(activity.class.TxViewlet, {}, (result) => {
|
||||
viewlets = new Map(result.map((r) => [activityKey(r.objectClass, r.txClass), r]))
|
||||
})
|
||||
|
||||
const deleteNotifications = async () => {
|
||||
const allNotifications = await client.findAll(notification.class.Notification, {
|
||||
attachedTo: (getCurrentAccount() as EmployeeAccount).employee
|
||||
})
|
||||
for (const n of allNotifications) {
|
||||
await client.remove(n)
|
||||
}
|
||||
}
|
||||
const markAsReadNotifications = async () => {
|
||||
const allNotifications = await client.findAll(notification.class.Notification, {
|
||||
attachedTo: (getCurrentAccount() as EmployeeAccount).employee
|
||||
})
|
||||
for (const n of allNotifications) {
|
||||
if (n.status !== NotificationStatus.Read) {
|
||||
await client.updateDoc(n._class, n.space, n._id, {
|
||||
status: NotificationStatus.Read
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
$: isMobile = $deviceInfo.isMobile
|
||||
</script>
|
||||
|
||||
<div class="notifyPopup" class:justify-center={notifications.length === 0} class:min-w-168={!isMobile}>
|
||||
<div class="header flex-between">
|
||||
<span class="fs-title overflow-label"><Label label={notification.string.Notifications} /></span>
|
||||
{#if notifications.length > 0}
|
||||
<div class="buttons-group xxsmall-gap">
|
||||
<Button
|
||||
icon={IconCheckAll}
|
||||
kind={'list'}
|
||||
showTooltip={{ label: notification.string.MarkAllAsRead }}
|
||||
size={'medium'}
|
||||
on:click={markAsReadNotifications}
|
||||
/>
|
||||
<Button
|
||||
icon={IconDelete}
|
||||
kind={'list'}
|
||||
showTooltip={{ label: notification.string.RemoveAll }}
|
||||
size={'medium'}
|
||||
on:click={deleteNotifications}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if notifications.length > 0}
|
||||
<Scroller padding={'0 .5rem'}>
|
||||
{#each notifications as n}
|
||||
<NotificationView notification={n} {viewlets} />
|
||||
{/each}
|
||||
</Scroller>
|
||||
{:else}
|
||||
<div class="flex-grow flex-center">
|
||||
<Label label={notification.string.NoNotifications} />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,302 @@
|
||||
<!--
|
||||
// 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 { TxViewlet } from '@hcengineering/activity'
|
||||
import {
|
||||
ActivityKey,
|
||||
DisplayTx,
|
||||
getValue,
|
||||
newDisplayTx,
|
||||
TxDisplayViewlet,
|
||||
updateViewlet
|
||||
} from '@hcengineering/activity-resources'
|
||||
import activity from '@hcengineering/activity-resources/src/plugin'
|
||||
import contact, { EmployeeAccount } from '@hcengineering/contact'
|
||||
import core, { AnyAttribute, Doc, Ref, TxCUD } from '@hcengineering/core'
|
||||
import { createQuery, getClient } from '@hcengineering/presentation'
|
||||
import { Component, Label, ShowMore } from '@hcengineering/ui'
|
||||
import type { AttributeModel } from '@hcengineering/view'
|
||||
import { ObjectPresenter } from '@hcengineering/view-resources'
|
||||
|
||||
export let tx: TxCUD<Doc>
|
||||
export let viewlets: Map<ActivityKey, TxViewlet>
|
||||
export let contentHidden: boolean = false
|
||||
const client = getClient()
|
||||
|
||||
let ptx: DisplayTx | undefined
|
||||
let viewlet: TxDisplayViewlet | undefined
|
||||
let props: any
|
||||
|
||||
let employee: EmployeeAccount | undefined
|
||||
let model: AttributeModel[] = []
|
||||
|
||||
$: if (tx._id !== ptx?.tx._id) {
|
||||
ptx = newDisplayTx(tx, client.getHierarchy())
|
||||
if (tx.modifiedBy !== employee?._id) {
|
||||
employee = undefined
|
||||
}
|
||||
props = undefined
|
||||
viewlet = undefined
|
||||
model = []
|
||||
}
|
||||
|
||||
const query = createQuery()
|
||||
|
||||
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
|
||||
props = getProps(result.props)
|
||||
model = result.model
|
||||
}
|
||||
})
|
||||
|
||||
$: query.query(
|
||||
contact.class.EmployeeAccount,
|
||||
{ _id: tx.modifiedBy as Ref<EmployeeAccount> },
|
||||
(account) => {
|
||||
;[employee] = account
|
||||
},
|
||||
{ limit: 1 }
|
||||
)
|
||||
|
||||
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
|
||||
$: isMention = viewlet?.display === 'emphasized' || isMessageType(model[0]?.attribute)
|
||||
$: isColumn = isComment || isMention || hasMessageType
|
||||
</script>
|
||||
|
||||
{#if (viewlet !== undefined && !((viewlet?.hideOnRemove ?? false) && ptx?.removed)) || model.length > 0}
|
||||
<div class="msgactivity-container">
|
||||
<div class="msgactivity-content" class:content={isColumn} class:comment={isComment}>
|
||||
<div class="msgactivity-content__header">
|
||||
<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">
|
||||
<Label label={viewlet.label} params={viewlet.labelParams ?? {}} />
|
||||
</span>
|
||||
{#if viewlet.labelComponent}
|
||||
<Component is={viewlet.labelComponent} {props} />
|
||||
{/if}
|
||||
{/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} inline />
|
||||
{:else}
|
||||
<svelte:component this={m.presenter} value={cvalue} inline />
|
||||
{/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} inline />
|
||||
{:else}
|
||||
<svelte:component this={m.presenter} value={cvalue} inline />
|
||||
{/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} inline />
|
||||
{:else}
|
||||
<svelte:component this={m.presenter} value={value.set} inline />
|
||||
{/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} inline />
|
||||
{:else}
|
||||
<svelte:component this={m.presenter} value={value.set} inline />
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
{/await}
|
||||
{/each}
|
||||
{:else if viewlet && viewlet.display === 'inline' && viewlet.component}
|
||||
{#if typeof viewlet.component === 'string'}
|
||||
<Component is={viewlet.component} {props} inline />
|
||||
{:else}
|
||||
<svelte:component this={viewlet.component} {...props} inline />
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if viewlet && viewlet.display !== 'inline'}
|
||||
<div class="activity-content content" class:contentHidden>
|
||||
<ShowMore>
|
||||
{#if typeof viewlet.component === 'string'}
|
||||
<Component is={viewlet.component} {props} />
|
||||
{:else}
|
||||
<svelte:component this={viewlet.component} {...props} />
|
||||
{/if}
|
||||
</ShowMore>
|
||||
</div>
|
||||
{:else if hasMessageType && model.length > 0 && (ptx?.updateTx || ptx?.mixinTx)}
|
||||
{#await getValue(client, model[0], ptx) then value}
|
||||
<div class="activity-content content" class:contentHidden>
|
||||
<ShowMore>
|
||||
{#if value.isObjectSet}
|
||||
<ObjectPresenter value={value.set} inline />
|
||||
{:else}
|
||||
<svelte:component this={model[0].presenter} value={value.set} inline />
|
||||
{/if}
|
||||
</ShowMore>
|
||||
</div>
|
||||
{/await}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
.msgactivity-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.msgactivity-content {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
margin-right: 1rem;
|
||||
color: var(--content-color);
|
||||
|
||||
.msgactivity-content__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.msgactivity-content__title {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
&.content {
|
||||
flex-direction: column;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
&.comment {
|
||||
.activity-content {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
}
|
||||
&:not(.comment) {
|
||||
.msgactivity-content__header {
|
||||
min-height: 1.75rem;
|
||||
}
|
||||
}
|
||||
&:not(.content) {
|
||||
align-items: center;
|
||||
|
||||
.msgactivity-content__header {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global(.msgactivity-container + .msgactivity-container::before) {
|
||||
content: '';
|
||||
}
|
||||
|
||||
.activity-content {
|
||||
overflow: hidden;
|
||||
visibility: visible;
|
||||
margin-top: 0.125rem;
|
||||
max-height: max-content;
|
||||
opacity: 1;
|
||||
transition-property: max-height, opacity;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-duration: 0.15s;
|
||||
|
||||
&.contentHidden {
|
||||
visibility: hidden;
|
||||
padding: 0;
|
||||
margin-top: -0.5rem;
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user