Chunter: attachments table in channel description (#1402)

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

plugins/attachment-assets/lang/en.json

@@ -7,6 +7,8 @@
     "Photos": "Photos",
     "File": "File",
     "Files": "Files",
+    "NoFiles": "There are no files",
+    "ShowMoreAttachments": "Show more",
     "Type": "Type",
     "Size": "Size",
     "Photo": "Photo",

plugins/attachment-assets/lang/ru.json

@@ -7,6 +7,8 @@
     "Photos": "Фотографии",
     "File": "Файл",
     "Files": "Файлы",
+    "NoFiles": "Файлы отсутствуют",
+    "ShowMoreAttachments": "Показать больше файлов",
     "Type": "Тип",
     "Size": "Размер",
     "Photo": "Фотография",

plugins/attachment/src/index.ts

@@ -58,6 +58,8 @@ export default plugin(attachmentId, {
     DeleteFile: '' as Resource<(id: string) => Promise<void>>
   },
   string: {
-    Files: '' as IntlString
+    Files: '' as IntlString,
+    NoFiles: '' as IntlString,
+    ShowMoreAttachments: '' as IntlString
   }
 })

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

@@ -0,0 +1,154 @@
+<!--
+//
+// Copyright © 2022 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 attachment, { Attachment } from '@anticrm/attachment'
+  import { AttachmentPresenter } from '@anticrm/attachment-resources'
+  import { Channel } from '@anticrm/chunter'
+  import type { Doc } from '@anticrm/core'
+  import { createQuery } from '@anticrm/presentation'
+  import { Menu } from '@anticrm/view-resources'
+  import { showPopup, IconMoreV, Label } from '@anticrm/ui'
+
+  export let channel: Channel | undefined
+
+  const query = createQuery()
+  let attachments: Attachment[] | undefined
+  let selectedRowNumber: number | undefined
+  let attachmentsLimit: number | undefined = 5
+
+  const showMenu = async (ev: MouseEvent, object: Doc, rowNumber: number): Promise<void> => {
+    selectedRowNumber = rowNumber
+    showPopup(Menu, { object }, ev.target as HTMLElement, () => {
+      selectedRowNumber = undefined
+    })
+  }
+
+  $: channel &&
+    query.query(
+      attachment.class.Attachment,
+      {
+        space: channel._id
+      },
+      (res) => {
+        attachments = res
+      },
+      attachmentsLimit ? { limit: attachmentsLimit } : undefined
+    )
+</script>
+
+<div class="group">
+  <div class="eGroupTitle"><Label label={attachment.string.Files} /></div>
+  {#if attachments?.length}
+    <div class="flex-col">
+      {#each attachments as attachment, i}
+        <div class="flex-between attachmentRow" class:fixed={i === selectedRowNumber}>
+          <div class="item flex">
+            <AttachmentPresenter value={attachment} />
+          </div>
+          <div class="eAttachmentRowActions" class:fixed={i === selectedRowNumber}>
+            <div id="context-menu" class="eAttachmentRowMenu" on:click={(event) => showMenu(event, attachment, i)}>
+              <IconMoreV size={'small'} />
+            </div>
+          </div>
+        </div>
+      {/each}
+      {#if attachmentsLimit && attachments.length === attachmentsLimit}
+        <div
+          class="showMoreAttachmentsButton"
+          on:click={() => {
+            // TODO: replace this with an external attachments page
+            attachmentsLimit = undefined
+          }}
+        >
+          <Label label={attachment.string.ShowMoreAttachments} />
+        </div>
+      {/if}
+    </div>
+  {:else}
+    <div class="flex-between attachmentRow">
+      <Label label={attachment.string.NoFiles} />
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  .group {
+    border: 1px solid var(--theme-bg-focused-border);
+    border-radius: 12px;
+    padding: 16px 0;
+  }
+
+  .eGroupTitle {
+    margin: 0 20px 8px 20px;
+    display: flex;
+    font-weight: 500;
+    font-size: 1rem;
+    color: var(--theme-caption-color);
+    justify-content: space-between;
+  }
+
+  .showMoreAttachmentsButton {
+    margin-left: 20px;
+    margin-top: 8px;
+    color: var(--theme-caption-color);
+    cursor: pointer;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .attachmentRow {
+    display: flex;
+    align-items: center;
+    padding-right: 1rem;
+    margin: 0 20px;
+    padding: 5px 0;
+
+    .eAttachmentRowActions {
+      visibility: hidden;
+      border: 1px solid var(--theme-bg-focused-border);
+      padding: 0.2rem;
+      border-radius: 0.375em;
+    }
+
+    .eAttachmentRowMenu {
+      visibility: hidden;
+      opacity: 0.6;
+      cursor: pointer;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+
+    &:hover {
+      .eAttachmentRowActions {
+        visibility: visible;
+      }
+      .eAttachmentRowMenu {
+        visibility: visible;
+      }
+    }
+    &.fixed {
+      .eAttachmentRowActions {
+        visibility: visible;
+      }
+      .eAttachmentRowMenu {
+        visibility: visible;
+      }
+    }
+  }
+</style>

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

@@ -20,11 +20,12 @@
   import { EditBox } from '@anticrm/ui'
 
   import chunter from '../plugin'
+  import EditChannelDescriptionAttachments from './EditChannelDescriptionAttachments.svelte'
 
   export let _id: Ref<Channel>
   export let _class: Ref<Class<Channel>>
 
-  export let channel: Channel
+  export let channel: Channel | undefined
 
   const client = getClient()
   const clazz = client.getHierarchy().getClass(_class)
@@ -34,7 +35,7 @@
   function onNameChange (ev: Event) {
     const value = (ev.target as HTMLInputElement).value
     if (value.trim().length > 0) {
-      client.updateDoc(_class, channel.space, channel._id, { name: value })
+      client.updateDoc(_class, channel!.space, channel!._id, { name: value })
     } else {
       // Just refresh value
       query.query(chunter.class.Channel, { _id }, (result) => {
@@ -45,12 +46,12 @@
 
   function onTopicChange (ev: Event) {
     const newTopic = (ev.target as HTMLInputElement).value
-    client.update(channel, { topic: newTopic })
+    client.update(channel!, { topic: newTopic })
   }
 
   function onDescriptionChange (ev: Event) {
     const newDescription = (ev.target as HTMLInputElement).value
-    client.update(channel, { description: newDescription })
+    client.update(channel!, { description: newDescription })
   }
 </script>
 
@@ -81,6 +82,6 @@
       focus
       on:change={onDescriptionChange}
     />
-    <!-- TODO: implement Attachments here -->
+    <EditChannelDescriptionAttachments channel={channel} />
   </div>
 {/if}