platform/plugins/activity-resources/src/components/Activity.svelte

<!--
// Copyright © 2020, 2021 Anticrm Platform Contributors.
// Copyright © 2021 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 '@anticrm/activity'
  import chunter from '@anticrm/chunter'
  import type { AttachedDoc, Doc, Ref, TxCollectionCUD, TxCUD } from '@anticrm/core'
  import core, { SortingOrder } from '@anticrm/core'
  import { createQuery, getClient } from '@anticrm/presentation'
  import { ReferenceInput } from '@anticrm/text-editor'
  import { Grid, IconActivity, ScrollBox } from '@anticrm/ui'
  import { ActivityKey, activityKey } from '../utils'
  import TxView from './TxView.svelte'

  export let fullSize: boolean = false
  export let object: Doc

  let txes1: TxCUD<Doc>[] = []
  let txes2: TxCUD<Doc>[] = []

  let txes: TxCUD<Doc>[]

  $: txes = Array.from(txes1)
    .concat(txes2)
    .sort((a, b) => b.modifiedOn - a.modifiedOn)

  const client = getClient()

  const txQuery1 = createQuery()
  const txQuery2 = createQuery()

  let isAttached = false

  $: isAttached = client.getHierarchy().isDerived(object._class, core.class.AttachedDoc)
  $: txQuery1.query<TxCollectionCUD<Doc, AttachedDoc>>(
    isAttached ? core.class.TxCollectionCUD : core.class.TxCUD,
    isAttached
      ? { 'tx.objectId': object._id as Ref<AttachedDoc> }
      : {
          objectId: object._id,
          _class: { $in: [core.class.TxCreateDoc, core.class.TxUpdateDoc, core.class.TxRemoveDoc] }
        },
    (result) => {
      txes1 = result
    },
    { sort: { modifiedOn: SortingOrder.Descending } }
  )

  $: txQuery2.query<TxCUD<Doc>>(
    core.class.TxCollectionCUD,
    {
      objectId: object._id,
      'tx._class': { $in: [core.class.TxCreateDoc, core.class.TxRemoveDoc] }
    },
    (result) => {
      txes2 = result
    },
    { sort: { modifiedOn: SortingOrder.Descending } }
  )

  function onMessage (event: CustomEvent) {
    client.addCollection(chunter.class.Comment, object.space, object._id, object._class, 'comments', {
      message: event.detail
    })
  }

  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>

{#if fullSize}
  <div class="flex-row-center header">
    <div class="icon"><IconActivity size={'small'} /></div>
    <div class="title">Activity</div>
  </div>
  <div class="flex-col h-full right-content">
    <ScrollBox vertical stretch>
      {#if txes}
        <Grid column={1} rowGap={1.5}>
          {#each txes as tx}
            <TxView {tx} {viewlets} />
          {/each}
        </Grid>
      {/if}
    </ScrollBox>
  </div>
  <div class="ref-input"><ReferenceInput on:message={onMessage} /></div>
{:else}
  <div class="unionSection">
    <ScrollBox vertical stretch noShift>
      <div class="flex-col content">
        <slot />
      </div>
      <div class="flex-row-center activity header">
        <div class="icon"><IconActivity size={'small'} /></div>
        <div class="title">Activity</div>
      </div>
      <div class="flex-col activity content">
        {#if txes}
          <Grid column={1} rowGap={1.5}>
            {#each txes as tx}
              <TxView {tx} {viewlets} />
            {/each}
          </Grid>
        {/if}
      </div>
    </ScrollBox>
    <div class="ref-input"><ReferenceInput on:message={onMessage} /></div>
  </div>
{/if}

<style lang="scss">
  .header {
    flex-shrink: 0;
    padding: 0 2.5rem;
    height: 4.5rem;
    border-bottom: 1px solid var(--theme-card-divider);

    .icon {
      opacity: 0.6;
    }
    .title {
      flex-grow: 1;
      margin-left: 0.5rem;
      font-weight: 500;
      font-size: 1rem;
      color: var(--theme-caption-color);
      user-select: none;
    }
  }
  .activity {
    background-color: var(--theme-bg-accent-color);
    &.header {
      border-bottom: none;
    }
    &.content {
      flex-grow: 1;
      padding-bottom: 0;
      background-color: var(--theme-bg-accent-color);
    }
  }

  .ref-input {
    background-color: var(--theme-bg-accent-color);
    padding: 1.5rem 2.5rem;
  }

  .right-content {
    flex-grow: 1;
    padding: 2.5rem 2.5rem 0;
    background-color: var(--theme-dialog-accent);
  }

  .unionSection {
    flex-grow: 1;

    display: flex;
    flex-direction: column;
    height: max-content;

    .content {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      padding: 1.5rem 2.5rem;
      height: max-content;
    }
    .activity {
      background-color: var(--theme-bg-accent-color);
      &.header {
        border-bottom: none;
      }
      &.content {
        flex-grow: 1;
        padding-bottom: 0;
        background-color: var(--theme-bg-accent-color);
      }
    }
  }
</style>