add/delete/edit attachments at issue (#2184)

Signed-off-by: budaeva <irina.budaeva@xored.com>

plugins/attachment-resources/src/components/AttachmentActions.svelte

@@ -47,6 +47,13 @@
               const impl = await getResource(saveAttachmentAction.action)
               await impl(attachment, evt)
             }
+          },
+          {
+            label: attachmentPlugin.string.DeleteFile,
+            action: async (evt: MouseEvent) => {
+              const impl = await getResource(attachmentPlugin.actionImpl.DeleteAttachment)
+              await impl(attachment, evt)
+            }
           }
         ]
       },

plugins/attachment-resources/src/components/AttachmentStyledBox.svelte

@@ -193,7 +193,7 @@
 >
   <StyledTextBox bind:this={refInput} bind:content {placeholder} {alwaysEdit} {showButtons} {maxHeight} />
   {#if attachments.size}
-    <div class="flex-row-center list scroll-divider-color">
+    <div class="flex-row-center list scroll-divider-color mt-1">
       {#each Array.from(attachments.values()) as attachment}
         <div class="item flex">
           <AttachmentPresenter

plugins/attachment-resources/src/index.ts

@@ -208,6 +208,19 @@ export async function DeleteAttachmentFromSaved (attach: Attachment): Promise<vo
   }
 }
 
+export async function DeleteAttachment (attach: Attachment): Promise<void> {
+  const client = getClient()
+
+  await client.removeCollection(
+    attach._class,
+    attach.space,
+    attach._id,
+    attach.attachedTo,
+    attach.attachedToClass,
+    'attachments'
+  )
+}
+
 export default async (): Promise<Resources> => ({
   component: {
     AttachmentsPresenter,
@@ -226,6 +239,7 @@ export default async (): Promise<Resources> => ({
   },
   actionImpl: {
     AddAttachmentToSaved,
-    DeleteAttachmentFromSaved
+    DeleteAttachmentFromSaved,
+    DeleteAttachment
   }
 })

plugins/attachment-resources/src/plugin.ts

@@ -46,6 +46,7 @@ export default mergeIds(attachmentId, attachment, {
   },
   actionImpl: {
     AddAttachmentToSaved: '' as ViewAction,
-    DeleteAttachmentFromSaved: '' as ViewAction
+    DeleteAttachmentFromSaved: '' as ViewAction,
+    DeleteAttachment: '' as ViewAction
   }
 })

plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte

@@ -13,17 +13,17 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { AttachmentDocList } from '@anticrm/attachment-resources'
+  import { AttachmentDocList, AttachmentStyledBox } from '@anticrm/attachment-resources'
   import { Class, Data, Doc, Ref, SortingOrder, WithLookup } from '@anticrm/core'
   import notification from '@anticrm/notification'
   import { Panel } from '@anticrm/panel'
   import { getResource } from '@anticrm/platform'
   import presentation, { createQuery, getClient, MessageViewer } from '@anticrm/presentation'
-  import { StyledTextArea } from '@anticrm/text-editor'
   import type { Issue, IssueStatus, Team } from '@anticrm/tracker'
   import {
     Button,
     EditBox,
+    IconAttachment,
     IconDownOutline,
     IconEdit,
     IconMoreH,
@@ -60,6 +60,7 @@
   let description = ''
   let innerWidth: number
   let isEditing = false
+  let descriptionBox: AttachmentStyledBox
 
   const notificationClient = getResource(notification.function.GetNotificationClient).then((res) => res())
 
@@ -153,7 +154,7 @@
         updates
       )
     }
-
+    await descriptionBox.createAttachments()
     isEditing = false
   }
 
@@ -226,14 +227,30 @@
             placeholder={tracker.string.IssueTitlePlaceholder}
             kind="large-style"
           />
-          <div class="mt-6">
+          <div class="flex-between mt-6">
             {#key description}
-              <StyledTextArea
-                bind:content={description}
-                placeholder={tracker.string.IssueDescriptionPlaceholder}
-                focus
-              />
+              <div class="flex-grow">
+                <AttachmentStyledBox
+                  bind:this={descriptionBox}
+                  objectId={_id}
+                  _class={tracker.class.Issue}
+                  space={issue.space}
+                  alwaysEdit
+                  showButtons
+                  maxHeight={'card'}
+                  bind:content={description}
+                  placeholder={tracker.string.IssueDescriptionPlaceholder}
+                />
+              </div>
             {/key}
+            <div
+              class="tool"
+              on:click={() => {
+                descriptionBox.attach()
+              }}
+            >
+              <IconAttachment size={'large'} />
+            </div>
           </div>
         </div>
       </Scroller>
@@ -262,8 +279,8 @@
           <SubIssues {issue} {issueStatuses} {currentTeam} />
         {/key}
       </div>
+      <AttachmentDocList value={issue} />
     {/if}
-    <AttachmentDocList value={issue} />
 
     <span slot="actions-label">
       {#if issueId}{issueId}{/if}
@@ -309,4 +326,15 @@
     height: 1px;
     background-color: var(--divider-color);
   }
+
+  .tool {
+    align-self: start;
+    width: 20px;
+    height: 20px;
+    opacity: 0.3;
+    cursor: pointer;
+    &:hover {
+      opacity: 1;
+    }
+  }
 </style>