mirror of
https://github.com/hcengineering/platform.git
synced 2025-02-10 12:55:44 +00:00
61 lines
2.0 KiB
Svelte
61 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
import core, { Class, Doc, Ref } from '@hcengineering/core'
|
|
import { Component, IconAdd, IconDelete } from '@hcengineering/ui'
|
|
import { DisplayTx } from '../activity'
|
|
import { getDTxProps, TxDisplayViewlet } from './utils'
|
|
|
|
export let tx: DisplayTx
|
|
export let viewlet: TxDisplayViewlet
|
|
export let edit: boolean
|
|
export let onCancelEdit: () => void
|
|
|
|
function filterTx (dtx: DisplayTx[], _class: Ref<Class<Doc>>): DisplayTx[] {
|
|
return dtx.filter((it) => it.tx._class === _class)
|
|
}
|
|
function getProps (ctx: DisplayTx, edit: boolean): any {
|
|
if (viewlet?.pseudo) {
|
|
return { value: ctx.doc }
|
|
}
|
|
const dprops = getDTxProps(ctx)
|
|
return { ...dprops, edit }
|
|
}
|
|
</script>
|
|
|
|
<div class="flex-row-center flex-grow flex-wrap content">
|
|
{#each filterTx([...tx.txes, tx], core.class.TxCreateDoc) as ctx, i}
|
|
{#if i === 0}
|
|
<div class="mr-2"><IconAdd size={'small'} /></div>
|
|
{/if}
|
|
<div class="mr-2">
|
|
{#if typeof viewlet?.component === 'string'}
|
|
<Component is={viewlet?.component} props={getProps(ctx, edit)} on:close={onCancelEdit} />
|
|
{:else}
|
|
<svelte:component this={viewlet?.component} {...getProps(ctx, edit)} on:close={onCancelEdit} />
|
|
{/if}
|
|
</div>
|
|
{/each}
|
|
{#each filterTx([...tx.txes, tx], core.class.TxRemoveDoc) as ctx, i}
|
|
{#if i === 0}
|
|
<div class="mr-2"><IconDelete size={'small'} /></div>
|
|
{/if}
|
|
<div class="mr-2">
|
|
{#if typeof viewlet?.component === 'string'}
|
|
<Component is={viewlet?.component} props={getProps(ctx, edit)} on:close={onCancelEdit} />
|
|
{:else}
|
|
<svelte:component this={viewlet?.component} {...getProps(ctx, edit)} on:close={onCancelEdit} />
|
|
{/if}
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.content {
|
|
padding: 0.5rem;
|
|
min-width: 0;
|
|
color: var(--accent-color);
|
|
background: var(--theme-bg-accent-color);
|
|
border: 1px solid var(--theme-bg-accent-color);
|
|
border-radius: 0.75rem;
|
|
}
|
|
</style>
|