From 89b1a570a59483053ce44821670be3a9be4068fe Mon Sep 17 00:00:00 2001
From: Andrey Sobolev <haiodo@users.noreply.github.com>
Date: Tue, 14 Jun 2022 13:40:35 +0700
Subject: [PATCH] Fix TSK-9 (#2066)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>
---
 changelog.md                                  |   8 +
 .../presentation/src/components/Card.svelte   |  10 +-
 .../src/components/AttachmentRefInput.svelte  |  15 ++
 .../src/components/AttachmentStyledBox.svelte | 227 ++++++++++++++++++
 plugins/attachment-resources/src/index.ts     |   4 +-
 plugins/tracker-assets/lang/ru.json           |  11 +-
 .../src/components/CreateIssue.svelte         |  40 ++-
 7 files changed, 298 insertions(+), 17 deletions(-)
 create mode 100644 plugins/attachment-resources/src/components/AttachmentStyledBox.svelte

diff --git a/changelog.md b/changelog.md
index b8aa3307ee..7c0fa00225 100644
--- a/changelog.md
+++ b/changelog.md
@@ -2,6 +2,14 @@
 
 ## 0.6.27 (upcoming)
 
+Platform:
+
+- Allow to attach from clipboard
+
+Tracker:
+
+- Attachments support
+
 ## 0.6.26
 
 Platform:
diff --git a/packages/presentation/src/components/Card.svelte b/packages/presentation/src/components/Card.svelte
index f965e8707a..e0f81505fb 100644
--- a/packages/presentation/src/components/Card.svelte
+++ b/packages/presentation/src/components/Card.svelte
@@ -21,7 +21,7 @@
 
   export let label: IntlString
   export let labelProps: any | undefined = undefined
-  export let okAction: () => void
+  export let okAction: () => Promise<void> | void
   export let canSave: boolean = false
   export let createMore: boolean | undefined = undefined
   export let okLabel: IntlString = presentation.string.Create
@@ -76,8 +76,12 @@
         label={okLabel}
         kind={'primary'}
         on:click={() => {
-          okAction()
-          if (!createMore) {
+          const r = okAction()
+          if (r instanceof Promise && !createMore) {
+            r.then(() => {
+              dispatch('close')
+            })
+          } else if (!createMore) {
             dispatch('close')
           }
         }}
diff --git a/plugins/attachment-resources/src/components/AttachmentRefInput.svelte b/plugins/attachment-resources/src/components/AttachmentRefInput.svelte
index cc4b15c736..ce4f54ab0b 100644
--- a/plugins/attachment-resources/src/components/AttachmentRefInput.svelte
+++ b/plugins/attachment-resources/src/components/AttachmentRefInput.svelte
@@ -152,8 +152,23 @@
     await Promise.all(promises)
     dispatch('message', { message: event.detail, attachments: attachments.size })
   }
+
+  function pasteAction (evt: ClipboardEvent): void {
+    const items = evt.clipboardData?.items ?? []
+    for (const index in items) {
+      const item = items[index]
+      if (item.kind === 'file') {
+        const blob = item.getAsFile()
+        if (blob !== null) {
+          createAttachment(blob)
+        }
+      }
+    }
+  }
 </script>
 
+<svelte:window on:paste={pasteAction} />
+
 <input
   bind:this={inputFile}
   multiple
diff --git a/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte b/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte
new file mode 100644
index 0000000000..484977ce95
--- /dev/null
+++ b/plugins/attachment-resources/src/components/AttachmentStyledBox.svelte
@@ -0,0 +1,227 @@
+<!--
+// 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 } from '@anticrm/attachment'
+  import { Account, Class, Doc, generateId, Ref, Space } from '@anticrm/core'
+  import { IntlString, setPlatformStatus, unknownError } from '@anticrm/platform'
+  import { createQuery, getClient } from '@anticrm/presentation'
+  import { StyledTextBox } from '@anticrm/text-editor'
+  import { onDestroy } from 'svelte'
+  import attachment from '../plugin'
+  import { deleteFile, uploadFile } from '../utils'
+  import AttachmentPresenter from './AttachmentPresenter.svelte'
+
+  export let objectId: Ref<Doc>
+  export let space: Ref<Space>
+  export let _class: Ref<Class<Doc>>
+  export let content: string = ''
+  export let placeholder: IntlString | undefined = undefined
+  export let alwaysEdit = false
+  export let showButtons = false
+
+  export function attach (): void {
+    inputFile.click()
+  }
+
+  export function submit (): void {
+    refInput.submit()
+  }
+  let refInput: StyledTextBox
+
+  let inputFile: HTMLInputElement
+  let saved = false
+
+  const client = getClient()
+  const query = createQuery()
+  let attachments: Map<Ref<Attachment>, Attachment> = new Map<Ref<Attachment>, Attachment>()
+  let originalAttachments: Set<Ref<Attachment>> = new Set<Ref<Attachment>>()
+  const newAttachments: Set<Ref<Attachment>> = new Set<Ref<Attachment>>()
+  const removedAttachments: Set<Attachment> = new Set<Attachment>()
+
+  $: objectId &&
+    query.query(
+      attachment.class.Attachment,
+      {
+        attachedTo: objectId
+      },
+      (res) => {
+        originalAttachments = new Set(res.map((p) => p._id))
+        attachments = new Map(res.map((p) => [p._id, p]))
+      }
+    )
+
+  async function createAttachment (file: File) {
+    try {
+      const uuid = await uploadFile(file, { space, attachedTo: objectId })
+      const _id: Ref<Attachment> = generateId()
+      attachments.set(_id, {
+        _id,
+        _class: attachment.class.Attachment,
+        collection: 'attachments',
+        modifiedOn: 0,
+        modifiedBy: '' as Ref<Account>,
+        space,
+        attachedTo: objectId,
+        attachedToClass: _class,
+        name: file.name,
+        file: uuid,
+        type: file.type,
+        size: file.size,
+        lastModified: file.lastModified
+      })
+      newAttachments.add(_id)
+      attachments = attachments
+    } catch (err: any) {
+      setPlatformStatus(unknownError(err))
+    }
+  }
+
+  async function saveAttachment (doc: Attachment): Promise<void> {
+    await client.addCollection(attachment.class.Attachment, space, objectId, _class, 'attachments', doc, doc._id)
+  }
+
+  function fileSelected () {
+    const list = inputFile.files
+    if (list === null || list.length === 0) return
+    for (let index = 0; index < list.length; index++) {
+      const file = list.item(index)
+      if (file !== null) createAttachment(file)
+    }
+    inputFile.value = ''
+  }
+
+  function fileDrop (e: DragEvent) {
+    const list = e.dataTransfer?.files
+    if (list === undefined || list.length === 0) return
+    for (let index = 0; index < list.length; index++) {
+      const file = list.item(index)
+      if (file !== null) createAttachment(file)
+    }
+  }
+
+  async function removeAttachment (attachment: Attachment): Promise<void> {
+    removedAttachments.add(attachment)
+    attachments.delete(attachment._id)
+    attachments = attachments
+  }
+
+  async function deleteAttachment (attachment: Attachment): Promise<void> {
+    if (originalAttachments.has(attachment._id)) {
+      await client.removeCollection(
+        attachment._class,
+        attachment.space,
+        attachment._id,
+        attachment.attachedTo,
+        attachment.attachedToClass,
+        'attachments'
+      )
+    } else {
+      await deleteFile(attachment.file)
+    }
+  }
+
+  onDestroy(() => {
+    if (!saved) {
+      newAttachments.forEach(async (p) => {
+        const attachment = attachments.get(p)
+        if (attachment !== undefined) {
+          await deleteAttachment(attachment)
+        }
+      })
+    }
+  })
+
+  export function createAttachments (): Promise<void> {
+    saved = true
+    const promises: Promise<any>[] = []
+    newAttachments.forEach((p) => {
+      const attachment = attachments.get(p)
+      if (attachment !== undefined) {
+        promises.push(saveAttachment(attachment))
+      }
+    })
+    removedAttachments.forEach((p) => {
+      promises.push(deleteAttachment(p))
+    })
+    return Promise.all(promises).then()
+  }
+
+  function pasteAction (evt: ClipboardEvent): void {
+    const items = evt.clipboardData?.items ?? []
+    for (const index in items) {
+      const item = items[index]
+      if (item.kind === 'file') {
+        const blob = item.getAsFile()
+        if (blob !== null) {
+          createAttachment(blob)
+        }
+      }
+    }
+  }
+</script>
+
+<svelte:window on:paste={pasteAction} />
+
+<input
+  bind:this={inputFile}
+  multiple
+  type="file"
+  name="file"
+  id="file"
+  style="display: none"
+  on:change={fileSelected}
+/>
+
+<div
+  class="container"
+  on:dragover|preventDefault={() => {}}
+  on:dragleave={() => {}}
+  on:drop|preventDefault|stopPropagation={fileDrop}
+>
+  <StyledTextBox bind:this={refInput} bind:content {placeholder} {alwaysEdit} {showButtons} />
+  {#if attachments.size}
+    <div class="flex-row-center list scroll-divider-color">
+      {#each Array.from(attachments.values()) as attachment}
+        <div class="item flex">
+          <AttachmentPresenter
+            value={attachment}
+            removable
+            on:remove={(result) => {
+              if (result !== undefined) removeAttachment(attachment)
+            }}
+          />
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  .list {
+    padding: 0.5rem;
+    color: var(--theme-caption-color);
+    overflow-x: auto;
+    overflow-y: hidden;
+    background-color: var(--accent-bg-color);
+    border: 1px solid var(--divider-color);
+    border-radius: 0.5rem 0.5rem 0 0;
+    border-bottom: none;
+
+    .item + .item {
+      padding-left: 1rem;
+      border-left: 1px solid var(--divider-color);
+    }
+  }
+</style>
diff --git a/plugins/attachment-resources/src/index.ts b/plugins/attachment-resources/src/index.ts
index 757753e0ee..b46287681c 100644
--- a/plugins/attachment-resources/src/index.ts
+++ b/plugins/attachment-resources/src/index.ts
@@ -31,6 +31,7 @@ import AttachmentsPresenter from './components/AttachmentsPresenter.svelte'
 import FileBrowser from './components/FileBrowser.svelte'
 import FileDownload from './components/icons/FileDownload.svelte'
 import Photos from './components/Photos.svelte'
+import AttachmentStyledBox from './components/AttachmentStyledBox.svelte'
 import { deleteFile, uploadFile } from './utils'
 
 export {
@@ -44,7 +45,8 @@ export {
   AttachmentList,
   AttachmentDocList,
   FileDownload,
-  FileBrowser
+  FileBrowser,
+  AttachmentStyledBox
 }
 
 export enum FileBrowserSortMode {
diff --git a/plugins/tracker-assets/lang/ru.json b/plugins/tracker-assets/lang/ru.json
index d5dc11653f..4d2764dd5d 100644
--- a/plugins/tracker-assets/lang/ru.json
+++ b/plugins/tracker-assets/lang/ru.json
@@ -11,6 +11,8 @@
     "Issues": "Задачи",
     "Views": "Отображения",
     "Active": "Активные",
+    "ActiveIssues": "Активные задачи {value}",
+    "BacklogIssues": "Пул задач {value}",
     "Backlog": "Пул задач",
     "Board": "Канбан",
     "Projects": "Проекты",
@@ -66,7 +68,7 @@
     "Labels": "Метки",
     "Project": "Проект",
     "Space": "",
-    "DueDate": "Указать срок выполнения\u2026",
+    "SetDueDate": "Указать срок выполнения\u2026",
     "Team": "",
     "Issue": "Задача",
     "Document": "",
@@ -86,6 +88,13 @@
     "GotoProjects": "Перейти к проекту",
     "GotoTrackerApplication": "Перейти к приложению Трекер",
 
+    "Filter": "Фильтр",
+    "ClearFilters": "Очистить фильтр",
+    "FilterIs": "is",
+    "FilterIsNot": "is not",
+    "FilterIsEither": "is either of",
+    "FilterStatesCount": "{value, plural, =1 {1 state} other {# states}}",
+
     "EditIssue": "Редактирование {title}",
 
     "Save": "Сохранить",
diff --git a/plugins/tracker-resources/src/components/CreateIssue.svelte b/plugins/tracker-resources/src/components/CreateIssue.svelte
index cb903774e6..fe90ee0333 100644
--- a/plugins/tracker-resources/src/components/CreateIssue.svelte
+++ b/plugins/tracker-resources/src/components/CreateIssue.svelte
@@ -13,31 +13,31 @@
 // limitations under the License.
 -->
 <script lang="ts">
+  import { AttachmentStyledBox } from '@anticrm/attachment-resources'
   import { Employee } from '@anticrm/contact'
-  import core, { AttachedData, Ref, SortingOrder, WithLookup } from '@anticrm/core'
+  import core, { AttachedData, generateId, Ref, SortingOrder, WithLookup } from '@anticrm/core'
   import presentation, { Card, createQuery, getClient, SpaceSelector } from '@anticrm/presentation'
-  import { StyledTextBox } from '@anticrm/text-editor'
   import { calcRank, Issue, IssuePriority, IssueStatus, Project, Team } from '@anticrm/tracker'
   import {
+    ActionIcon,
     Button,
     DatePresenter,
     EditBox,
     IconAttachment,
-    showPopup,
-    Spinner,
     IconMoreH,
-    ActionIcon,
-    Menu
+    Menu,
+    showPopup,
+    Spinner
   } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
   import tracker from '../plugin'
+  import AssigneeEditor from './issues/AssigneeEditor.svelte'
   import ParentIssue from './issues/ParentIssue.svelte'
-  import SetParentIssueActionPopup from './SetParentIssueActionPopup.svelte'
+  import StatusEditor from './issues/StatusEditor.svelte'
   import PrioritySelector from './PrioritySelector.svelte'
   import ProjectSelector from './ProjectSelector.svelte'
   import SetDueDateActionPopup from './SetDueDateActionPopup.svelte'
-  import AssigneeEditor from './issues/AssigneeEditor.svelte'
-  import StatusEditor from './issues/StatusEditor.svelte'
+  import SetParentIssueActionPopup from './SetParentIssueActionPopup.svelte'
 
   export let space: Ref<Team>
   export let status: Ref<IssueStatus> | undefined = undefined
@@ -49,6 +49,7 @@
   let issueStatuses: WithLookup<IssueStatus>[] | undefined
   let parentIssue: Issue | undefined
 
+  let objectId: Ref<Issue> = generateId()
   let object: AttachedData<Issue> = {
     title: '',
     description: '',
@@ -67,6 +68,8 @@
   const client = getClient()
   const statusesQuery = createQuery()
 
+  let descriptionBox: AttachmentStyledBox
+
   $: _space = space
   $: updateIssueStatusId(space, status)
   $: canSave = getTitle(object.title ?? '').length > 0
@@ -141,8 +144,11 @@
       parentIssue?._id ?? tracker.ids.NoParent,
       parentIssue?._class ?? tracker.class.Issue,
       'subIssues',
-      value
+      value,
+      objectId
     )
+    await descriptionBox.createAttachments()
+    objectId = generateId()
   }
 
   async function showMoreActions (ev: Event) {
@@ -238,7 +244,11 @@
     kind={'large-style'}
     focus
   />
-  <StyledTextBox
+  <AttachmentStyledBox
+    bind:this={descriptionBox}
+    {objectId}
+    _class={tracker.class.Issue}
+    space={_space}
     alwaysEdit
     showButtons={false}
     bind:content={object.description}
@@ -280,6 +290,12 @@
     {/if}
   </svelte:fragment>
   <svelte:fragment slot="footer">
-    <Button icon={IconAttachment} kind={'transparent'} on:click={() => {}} />
+    <Button
+      icon={IconAttachment}
+      kind={'transparent'}
+      on:click={() => {
+        descriptionBox.attach()
+      }}
+    />
   </svelte:fragment>
 </Card>