mirror of
https://github.com/hcengineering/platform.git
synced 2026-09-23 10:05:01 +02:00
TSK-959 Inbox (part1) (#2885)
Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>
This commit is contained in:
Denis Bykhov
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user