add activity to panel

Signed-off-by: Andrey Platov <andrey@hardcoreeng.com>

packages/panel/package.json

@@ -16,12 +16,15 @@
     "svelte-loader":"^3.1.2",
     "sass":"^1.37.5",
     "svelte-preprocess":"^4.7.4",
-    "svelte-check": "~2.2.6"
+    "svelte-check": "^2.2.6"
   },
   "dependencies": {
     "@anticrm/ui": "~0.6.0",
     "@anticrm/text-editor": "~0.6.0",
     "svelte": "^3.37.0",
-    "@anticrm/platform": "~0.6.5"
+    "@anticrm/platform": "~0.6.5",
+    "@anticrm/core": "~0.6.11",
+    "@anticrm/chunter": "~0.6.0",
+    "@anticrm/presentation": "~0.6.1"
   }
 }

packages/panel/src/components/Panel.svelte

@@ -16,18 +16,38 @@
 
 <script lang="ts">
   import type { IntlString, Asset } from '@anticrm/platform'
+  import type { Doc } from '@anticrm/core'
+  import { getClient, createQuery, Backlink } from '@anticrm/presentation'
   import type { AnySvelteComponent } from '@anticrm/ui'
   import { ReferenceInput } from '@anticrm/text-editor'
-  import { IconClose, IconExpand, IconActivity, ScrollBox, Button, Label, Icon } from '@anticrm/ui'
+  import { IconClose, IconExpand, IconActivity, ScrollBox, Grid, Label, Icon } from '@anticrm/ui'
+  import type { Comment } from '@anticrm/chunter'
 
   import { createEventDispatcher } from 'svelte'
 
+  import chunter from '@anticrm/chunter'
+
   export let label: IntlString
   export let icon: Asset | AnySvelteComponent
   export let okAction: () => void
   export let fullSize: boolean = false
+  export let object: Doc
 
   const dispatch = createEventDispatcher()
+
+  let comments: Comment[]
+
+  const client = getClient()
+  const query = createQuery()
+  $: query.query(chunter.class.Comment, { objectId: object._id }, result => { comments = result })
+
+  function onMessage(event: CustomEvent) {
+    client.createDoc(chunter.class.Comment, object.space, {
+      objectId: object._id,
+      message: event.detail
+    })
+    console.log(event.detail)
+  }  
 </script>
 
 <div class="overlay"/>
@@ -55,17 +75,16 @@
     </div>
     <div class="content">
       <ScrollBox vertical stretch>
-        <div class="content-bar" />
-        <div class="content-bar" />
-        <div class="content-bar" />
-        <div class="content-bar" />
-        <div class="content-bar" />
-        <div class="content-bar" />
-        <div class="content-bar" />
-        <div class="content-bar" />
+        {#if comments}
+        <Grid column={1} rowGap={1.5}>
+          {#each comments as comment}
+            <Backlink {comment} />
+          {/each}
+        </Grid>
+        {/if}
       </ScrollBox>
     </div>
-    <div class="ref-input"><ReferenceInput /></div>
+    <div class="ref-input"><ReferenceInput on:message={onMessage}/></div>
   </div>
 {:else}
   <div class="unionSection">
@@ -87,17 +106,16 @@
         <div class="title">Activity</div>
       </div>
       <div class="activity content">
-        <div class="content-bar" />
-        <div class="content-bar" />
-        <div class="content-bar" />
-        <div class="content-bar" />
-        <div class="content-bar" />
-        <div class="content-bar" />
-        <div class="content-bar" />
-        <div class="content-bar" />
+        {#if comments}
+        <Grid column={1} rowGap={1.5}>
+          {#each comments as comment}
+            <Backlink {comment} />
+          {/each}
+        </Grid>
+        {/if}
       </div>
     </ScrollBox>
-    <div class="ref-input"><ReferenceInput /></div>
+    <div class="ref-input"><ReferenceInput on:message={onMessage}/></div>
   </div>
 {/if}
 

packages/presentation/package.json

@@ -23,6 +23,7 @@
     "@anticrm/ui": "~0.6.0",
     "@anticrm/view": "~0.6.0",
     "svelte": "^3.37.0",
-    "@anticrm/contact": "~0.6.0"
+    "@anticrm/contact": "~0.6.0",
+    "@anticrm/chunter": "~0.6.0"
   }
 }

packages/presentation/src/components/Backlink.svelte

@@ -0,0 +1,73 @@
+<!--
+// Copyright © 2020, 2021 Anticrm Platform Contributors.
+// 
+// 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 type { Comment } from '@anticrm/chunter'
+  import { getClient } from '../utils'
+  import type { Ref } from '@anticrm/core'
+
+  import MessageViewer from './MessageViewer.svelte'
+  import Avatar from './Avatar.svelte'
+  import { TimeSince } from '@anticrm/ui'
+
+  import contact, { Employee, EmployeeAccount } from '@anticrm/contact'
+
+  export let comment: Comment
+
+  let employee: EmployeeAccount | undefined
+
+  console.log('comment modified by', comment.modifiedBy)
+
+  const client = getClient()
+  client.findOne(contact.class.EmployeeAccount, { _id: comment.modifiedBy as Ref<EmployeeAccount> }).then(account => {employee = account})
+
+</script>
+
+<div class="flex-nowrap">
+  <div class="avatar"><Avatar size={'medium'} /></div>
+  <div class="flex-col-stretch message">
+    <div class="header">{#if employee}{employee.firstName} {employee.lastName}{/if}<span><TimeSince value={comment.modifiedOn}/></span></div>
+    <div class="text"><MessageViewer message={comment.message} /></div>
+  </div>
+</div>
+
+<style lang="scss">
+  .avatar {
+    margin-right: 1rem;
+  }
+  .message {
+    margin-right: 1.25rem;
+
+    .header {
+      margin-bottom: .25rem;
+      font-weight: 500;
+      font-size: 1rem;
+      line-height: 150%;
+      color: var(--theme-caption-color);
+
+      span {
+        margin-left: .5rem;
+        font-weight: 400;
+        font-size: .875rem;
+        color: var(--theme-content-dark-color);
+      }
+    }
+
+    .text {
+      line-height: 150%;
+      color: var(--theme-content-color);
+    }
+  }
+</style>

packages/presentation/src/index.ts

@@ -23,3 +23,4 @@ export { default as MessageViewer } from './components/MessageViewer.svelte'
 export { default as AttributeEditor } from './components/AttributeEditor.svelte'
 export { default as Card } from './components/Card.svelte'
 export { default as Channels } from './components/Channels.svelte'
+export { default as Backlink } from './components/Backlink.svelte'

plugins/recruit-resources/src/components/EditCandidate.svelte

@@ -40,7 +40,7 @@
 
 </script>
 
-<Panel icon={Contact} label={object.firstName + ' ' + object.lastName} on:close={() => { dispatch('close') }}>
+<Panel icon={Contact} label={object.firstName + ' ' + object.lastName} {object} on:close={() => { dispatch('close') }}>
   <svelte:fragment slot="subtitle">
     <div class="flex-row-reverse" style="width: 100%">
       <Channels value={object.channels} reverse />