Chunter: attachments and format updates (#1410)

Signed-off-by: Ruslan Izhitsky <ruslan.izhitskiy@xored.com>

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

@@ -37,10 +37,7 @@
 </script>
 
 {#if value}
-  <a
-    class="flex-presenter"
-    href="{link}"
-  >
+  <a class="flex-presenter" href={link}>
     <div class="icon">
       {#if icon}
         <Icon {icon} size={'small'} />

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

@@ -17,7 +17,7 @@
   import attachment, { Attachment } from '@anticrm/attachment'
   import { AttachmentPresenter } from '@anticrm/attachment-resources'
   import { Channel } from '@anticrm/chunter'
-  import type { Doc } from '@anticrm/core'
+  import { Doc, SortingOrder } from '@anticrm/core'
   import { createQuery } from '@anticrm/presentation'
   import { Menu } from '@anticrm/view-resources'
   import { showPopup, IconMoreV, Label } from '@anticrm/ui'
@@ -25,9 +25,11 @@
   export let channel: Channel | undefined
 
   const query = createQuery()
-  let attachments: Attachment[] | undefined
-  let selectedRowNumber: number | undefined
+  let visibleAttachments: Attachment[] | undefined
+  let totalAttachments = 0
   let attachmentsLimit: number | undefined = 5
+  let selectedRowNumber: number | undefined
+  const sort = { modifiedOn: SortingOrder.Descending }
 
   const showMenu = async (ev: MouseEvent, object: Doc, rowNumber: number): Promise<void> => {
     selectedRowNumber = rowNumber
@@ -43,17 +45,25 @@
         space: channel._id
       },
       (res) => {
-        attachments = res
+        visibleAttachments = res
+        totalAttachments = res.total
       },
-      attachmentsLimit ? { limit: attachmentsLimit } : undefined
+      attachmentsLimit
+        ? {
+            limit: attachmentsLimit,
+            sort: sort
+          }
+        : {
+            sort: sort
+          }
     )
 </script>
 
 <div class="group">
   <div class="eGroupTitle"><Label label={attachment.string.Files} /></div>
-  {#if attachments?.length}
+  {#if visibleAttachments?.length}
     <div class="flex-col">
-      {#each attachments as attachment, i}
+      {#each visibleAttachments as attachment, i}
         <div class="flex-between attachmentRow" class:fixed={i === selectedRowNumber}>
           <div class="item flex">
             <AttachmentPresenter value={attachment} />
@@ -65,7 +75,7 @@
           </div>
         </div>
       {/each}
-      {#if attachmentsLimit && attachments.length === attachmentsLimit}
+      {#if attachmentsLimit && visibleAttachments.length < totalAttachments}
         <div
           class="showMoreAttachmentsButton"
           on:click={() => {

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

@@ -82,6 +82,6 @@
       focus
       on:change={onDescriptionChange}
     />
-    <EditChannelDescriptionAttachments channel={channel} />
+    <EditChannelDescriptionAttachments {channel} />
   </div>
 {/if}

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

@@ -25,7 +25,7 @@
   import { Action } from '@anticrm/view'
   import { getActions } from '@anticrm/view-resources'
   import { createEventDispatcher } from 'svelte'
-  import { UnpinMessage } from '../index';
+  import { UnpinMessage } from '../index'
   import chunter from '../plugin'
   import { getTime } from '../utils'
   // import Share from './icons/Share.svelte'
@@ -71,17 +71,17 @@
         action: chunter.actionImpl.PinMessage
       } as Action)
 
-  $: isEditing = false;
+  $: isEditing = false
 
   const editAction = {
     label: chunter.string.EditMessage,
-    action: () => isEditing = true
+    action: () => (isEditing = true)
   }
 
   const deleteAction = {
     label: chunter.string.DeleteMessage,
     action: async () => {
-      (await client.findAll(chunter.class.ThreadMessage, { attachedTo: message._id as Ref<Message> })).forEach(c => {
+      ;(await client.findAll(chunter.class.ThreadMessage, { attachedTo: message._id as Ref<Message> })).forEach((c) => {
         UnpinMessage(c)
       })
       UnpinMessage(message)
@@ -123,13 +123,10 @@
     const { message: newContent, attachments: newAttachments } = event.detail
 
     if (newContent !== message.content || newAttachments !== attachments) {
-      await client.update(
-      message,
-        {
+      await client.update(message, {
         content: newContent,
         attachments: newAttachments
-        }
-     )
+      })
     }
     isEditing = false
   }

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

@@ -63,8 +63,7 @@
         <div
           class="cross"
           on:click={async () => {
-            if (pinnedIds.length === 1)
-              dispatch('close')
+            if (pinnedIds.length === 1) dispatch('close')
             UnpinMessage(message)
           }}
         >

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

@@ -105,13 +105,19 @@
       ))
   )
 
-  async function getParticipants (comments: ThreadMessage[], parent: Message | undefined, employees: Map<Ref<Employee>, Employee>): Promise<string[]> {
+  async function getParticipants (
+    comments: ThreadMessage[],
+    parent: Message | undefined,
+    employees: Map<Ref<Employee>, Employee>
+  ): Promise<string[]> {
     const refs = new Set(comments.map((p) => p.createBy))
     if (parent !== undefined) {
       refs.add(parent.createBy)
     }
     refs.delete(getCurrentAccount()._id)
-    const accounts = await client.findAll(contact.class.EmployeeAccount, { _id: { $in: Array.from(refs) as Ref<EmployeeAccount>[] } })
+    const accounts = await client.findAll(contact.class.EmployeeAccount, {
+      _id: { $in: Array.from(refs) as Ref<EmployeeAccount>[] }
+    })
     const res: string[] = []
     for (const account of accounts) {
       const employee = employees.get(account.employee)
@@ -174,13 +180,25 @@
   {#if parent}
     <MsgView message={parent} {employees} thread />
     {#if total > comments.length}
-      <div class="label pb-2 pt-2 pl-8 over-underline" on:click={() => { showAll = true }}><Label label={chunter.string.ShowMoreReplies} params={{ count: total - comments.length }} /></div>
+      <div
+        class="label pb-2 pt-2 pl-8 over-underline"
+        on:click={() => {
+          showAll = true
+        }}
+      >
+        <Label label={chunter.string.ShowMoreReplies} params={{ count: total - comments.length }} />
+      </div>
     {/if}
     {#each comments as comment (comment._id)}
       <MsgView message={comment} {employees} thread />
     {/each}
     <div class="mr-4 ml-4 mb-4 mt-2">
-      <AttachmentRefInput space={parent.space} _class={chunter.class.Comment} objectId={commentId} on:message={onMessage} />
+      <AttachmentRefInput
+        space={parent.space}
+        _class={chunter.class.Comment}
+        objectId={commentId}
+        on:message={onMessage}
+      />
     </div>
   {/if}
 </div>

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

@@ -15,7 +15,7 @@
 <script lang="ts">
   import attachment from '@anticrm/attachment'
   import { AttachmentRefInput } from '@anticrm/attachment-resources'
-  import type { ThreadMessage, Message, ChunterMessage, Channel } from '@anticrm/chunter'
+  import type { ThreadMessage, Message, ChunterMessage } from '@anticrm/chunter'
   import contact, { Employee } from '@anticrm/contact'
   import core, { Doc, generateId, getCurrentAccount, Ref, Space, TxFactory } from '@anticrm/core'
   import { NotificationClientImpl } from '@anticrm/notification-resources'

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

@@ -25,16 +25,21 @@
 
   let threads: Ref<Message>[] = []
 
-  query.query(chunter.class.ThreadMessage, {
+  query.query(
+    chunter.class.ThreadMessage,
+    {
       createBy: me
-  }, (res) => {
+    },
+    (res) => {
       const ids = new Set(res.map((c) => c.attachedTo))
       threads = Array.from(ids)
-  }, {
+    },
+    {
       sort: {
         createOn: SortingOrder.Descending
       }
-  })
+    }
+  )
 </script>
 
 <div class="ac-header full divide">
@@ -44,7 +49,7 @@
 </div>
 <Scroller>
   {#each threads as thread (thread)}
-    <div class="item"><Thread _id={thread}/></div>
+    <div class="item"><Thread _id={thread} /></div>
   {/each}
 </Scroller>