Chunter fixes (#419)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>

plugins/chunter-assets/lang/en.json

@@ -3,6 +3,13 @@
     "ApplicationLabelChunter": "Chat",
     "LeftComment": "left a comment",
     "AddAttachment": "uploaded an attachment",
+    "Channels": "Channels",
+    "CreateChannel": "New Channel",
+    "ChannelName": "Name",
+    "ChannelDescription": "Description",
+    "MakePrivate": "Make private",
+    "MakePrivateDescription": "Only members can see it",
+    "Channel": "Channel",
     "EditUpdate": "Save...",
     "EditCancel": "Cancel"
   }

plugins/chunter-resources/src/components/CommentPresenter.svelte

@@ -15,46 +15,21 @@
 -->
 
 <script lang="ts">
-  import { Avatar, getClient } from '@anticrm/presentation'
   import type { Comment } from '@anticrm/chunter'
-  import contact, { EmployeeAccount, formatName } from '@anticrm/contact'
-
-  import { MessageViewer } from '@anticrm/presentation'
-  import { Account, Ref } from '@anticrm/core'
+  import { formatName } from '@anticrm/contact'
+  import { Avatar, getClient, MessageViewer } from '@anticrm/presentation'
+  import { getTime, getUser } from '../utils'
 
   export let value: Comment
 
   const client = getClient()
-
-  async function getUser (user: Ref<EmployeeAccount> | Ref<Account>): Promise<EmployeeAccount | undefined>  {
-    return await client.findOne(contact.class.EmployeeAccount, { _id: user as Ref<EmployeeAccount> })
-  }
-
-  function getTime (time: number): string {
-    let options: Intl.DateTimeFormatOptions = { hour: 'numeric', minute: 'numeric'}
-    if (!isToday(time)) {
-      options = {
-        month: 'numeric',
-         day: 'numeric',
-        ...options
-      }
-    }
-
-    return new Date(value.modifiedOn).toLocaleString('default', options)
-  }
-
-  function isToday (time: number): boolean {
-    const current = new Date()
-    const target = new Date(time)
-    return current.getDate() === target.getDate() && current.getMonth() === target.getMonth() && current.getFullYear() === target.getFullYear()
-  }
 </script>
 
 <div class="container">
   <div class="avatar"><Avatar size={'medium'} /></div>
   <div class="message">
     <div class="header">
-      {#await getUser(value.modifiedBy) then user}
+      {#await getUser(client, value.modifiedBy) then user}
         {#if user}{formatName(user.name)}{/if}
       {/await}
       <span>{getTime(value.modifiedOn)}</span>

plugins/chunter-resources/src/components/CreateChannel.svelte

@@ -15,39 +15,40 @@
 
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
-  import { TextArea, EditBox, Dialog, ToggleWithLabel, Grid, Section, IconToDo } from '@anticrm/ui'
+  import { IconFolder, EditBox, ToggleWithLabel, Grid } from '@anticrm/ui'
 
-  import { getClient } from '@anticrm/presentation'
+  import { getClient, SpaceCreateCard } from '@anticrm/presentation'
 
   import chunter from '../plugin'
-  import core from '@anticrm/core'
+  import core, { getCurrentAccount } from '@anticrm/core'
 
   const dispatch = createEventDispatcher()
 
   let name: string = ''
   let description: string = ''
-
+  export function canClose(): boolean {
+    return name === ''
+  }
   const client = getClient()
 
   function createChannel() {
     client.createDoc(chunter.class.Channel, core.space.Model, {
       name,
       description,
-      private: false
+      private: false,
+      members: [getCurrentAccount()._id]
     })
   }
 </script>
 
-<Dialog label={chunter.string.CreateChannel} 
-        okLabel={chunter.string.CreateChannel} 
-        okAction={createChannel}
-        on:close={() => { dispatch('close') }}>
-  <Grid column={1}>
-    <EditBox label={chunter.string.ChannelName} bind:value={name} focus/>
-    <TextArea label={chunter.string.ChannelDescription} bind:value={description}/>
+<SpaceCreateCard
+  label={chunter.string.CreateChannel} 
+  okAction={createChannel}
+  canSave={name ? true : false}
+  on:close={() => { dispatch('close') }}
+>
+  <Grid column={1} rowGap={1.5}>
+    <EditBox label={chunter.string.ChannelName} icon={IconFolder} bind:value={name} placeholder={'Channel'} focus/>
     <ToggleWithLabel label={chunter.string.MakePrivate} description={chunter.string.MakePrivateDescription}/>
   </Grid>
-  <!-- <Section icon={IconToDo} label={`To Do's`}>
-    <CheckBoxList label={'Add a To Do'} editable />
-  </Section> -->
-</Dialog>
+</SpaceCreateCard>

plugins/chunter-resources/src/components/Message.svelte

@@ -14,30 +14,37 @@
 -->
 
 <script lang="ts">
-  import { Avatar } from '@anticrm/presentation'
+  import { Avatar, getClient } from '@anticrm/presentation'
   import type { Message } from '@anticrm/chunter'
-  import { ActionIcon, IconMoreH } from '@anticrm/ui'
-  import Emoji from './icons/Emoji.svelte'
-  import Share from './icons/Share.svelte'
-  import Bookmark from './icons/Bookmark.svelte'
+  // import { ActionIcon, IconMoreH } from '@anticrm/ui'
+  // import Emoji from './icons/Emoji.svelte'
+  // import Share from './icons/Share.svelte'
+  // import Bookmark from './icons/Bookmark.svelte'
   import Reactions from './Reactions.svelte'
   import Replies from './Replies.svelte'
 
   import { MessageViewer } from '@anticrm/presentation'
+  import { getTime, getUser } from '../utils'
+  import { formatName } from '@anticrm/contact'
 
   export let message: Message
 
-  let name: string
-  let time: string
   let reactions: boolean = false
   let replies: boolean = false
   let thread: boolean = false
+
+  const client = getClient()
 </script>
 
 <div class="container">
   <div class="avatar"><Avatar size={'medium'} /></div>
   <div class="message">
-    <div class="header">{name}<span>{time}</span></div>
+    <div class="header">
+      {#await getUser(client, message.modifiedBy) then user}
+        {#if user}{formatName(user.name)}{/if}
+      {/await}
+    <span>{getTime(message.modifiedOn)}</span>
+    </div>
     <div class="text"><MessageViewer message={message.content}/></div>
     {#if (reactions || replies) && !thread}
       <div class="footer">
@@ -46,14 +53,14 @@
       </div>
     {/if}
   </div>
-  {#if !thread}
+  <!-- {#if !thread}
     <div class="buttons">
       <div class="tool"><ActionIcon icon={IconMoreH} size={'medium'}/></div>
       <div class="tool"><ActionIcon icon={Bookmark} size={'medium'}/></div>
       <div class="tool"><ActionIcon icon={Share} size={'medium'}/></div>
       <div class="tool"><ActionIcon icon={Emoji} size={'medium'}/></div>
     </div>
-  {/if}
+  {/if} -->
 </div>
 
 <style lang="scss">

plugins/chunter-resources/src/utils.ts

@@ -0,0 +1,25 @@
+import contact, { EmployeeAccount } from '@anticrm/contact'
+import { Account, Client, Ref, Timestamp } from '@anticrm/core'
+
+export async function getUser (client: Client, user: Ref<EmployeeAccount> | Ref<Account>): Promise<EmployeeAccount | undefined>  {
+  return await client.findOne(contact.class.EmployeeAccount, { _id: user as Ref<EmployeeAccount> })
+}
+
+export function getTime (time: number): string {
+  let options: Intl.DateTimeFormatOptions = { hour: 'numeric', minute: 'numeric'}
+  if (!isToday(time)) {
+    options = {
+      month: 'numeric',
+       day: 'numeric',
+      ...options
+    }
+  }
+
+  return new Date(time).toLocaleString('default', options)
+}
+
+export function isToday (time: number): boolean {
+  const current = new Date()
+  const target = new Date(time)
+  return current.getDate() === target.getDate() && current.getMonth() === target.getMonth() && current.getFullYear() === target.getFullYear()
+}