huly-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 { CommentInput } from '@anticrm/chunter-resources'
  import { Doc, 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, DisplayTx, newActivity } from '../activity'
  import TxView from './TxView.svelte'

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

  let txes: DisplayTx[] = []

  const client = getClient()
  const attrs = client.getHierarchy().getAllAttributes(object._class)

  const activityQuery = newActivity(client, attrs)

  $: activityQuery.update(
    object,
    (result) => {
      txes = result
    },
    SortingOrder.Descending
  )

  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 || transparent}
  {#if !transparent}
    <div class="flex-row-center header">
      <div class="flex-center icon"><IconActivity size={'small'} /></div>
      <div class="fs-title">Activity</div>
    </div>
  {/if}
  <div class="h-full right-content" class:transparent>
    <ScrollBox vertical stretch>
      {#if txes}
        <Grid column={1} rowGap={1.5}>
          {#each txes as tx (tx.tx._id)}
            <TxView {tx} {viewlets} />
          {/each}
        </Grid>
      {/if}
    </ScrollBox>
  </div>
  <div class="ref-input" class:transparent>
    <CommentInput bind:object/>
  </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="flex-center icon"><IconActivity size={'small'} /></div>
        <div class="fs-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">
      <CommentInput bind:object/>
    </div>
  </div>
{/if}

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

    .icon {
      margin-right: 1rem;
      width: 2.25rem;
      height: 2.25rem;
      color: var(--primary-button-color);
      background-color: var(--primary-button-enabled);
      border-radius: 50%;
    }
  }
  .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;
    &.transparent {
      padding: 1.5rem 0 0;
      background-color: transparent;
    }
  }

  .right-content {
    flex-grow: 1;
    padding: 1.5rem 2.5rem 0;
    background-color: var(--theme-dialog-accent);
    &.transparent {
      min-height: 0;
      height: 100%;
      max-height: 100%;
      padding: 0;
      background-color: transparent;
    }
  }

  .unionSection {
    flex-grow: 1;

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

    .content {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      padding: 3rem 2.5rem;
      height: max-content;
    }
  }
  :global(.grid .msgactivity-container:last-child::after) { content: none; } // Remove the line in the last Activity message
</style>