UBERF-5603 (#4754)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>

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

@@ -16,7 +16,7 @@
   import type { Attachment } from '@hcengineering/attachment'
   import { getResource } from '@hcengineering/platform'
   import { PDFViewer, getFileUrl } from '@hcengineering/presentation'
-  import { ActionIcon, IconMoreH, IconOpen, Menu, closeTooltip, showPopup } from '@hcengineering/ui'
+  import { Action as UIAction, ActionIcon, IconMoreH, IconOpen, Menu, closeTooltip, showPopup } from '@hcengineering/ui'
   import view, { Action } from '@hcengineering/view'
 
   import attachmentPlugin from '../plugin'
@@ -24,6 +24,7 @@
 
   export let attachment: Attachment
   export let isSaved = false
+  export let removable = false
 
   let download: HTMLAnchorElement
 
@@ -56,38 +57,40 @@
         action: attachmentPlugin.actionImpl.AddAttachmentToSaved
       } as unknown as Action)
 
+  const openAction: UIAction = {
+    label: view.string.Open,
+    icon: IconOpen,
+    action: async (props: any, evt: Event) => {
+      showPreview(evt as MouseEvent)
+    }
+  }
+
   const showMenu = (ev: Event) => {
+    const actions: UIAction[] = []
+    if (openable) {
+      actions.push(openAction)
+    }
+    actions.push({
+      label: saveAttachmentAction.label,
+      icon: saveAttachmentAction.icon,
+      action: async (props: any, evt: Event) => {
+        const impl = await getResource(saveAttachmentAction.action)
+        await impl(attachment, evt)
+      }
+    })
+    if (removable) {
+      actions.push({
+        label: attachmentPlugin.string.DeleteFile,
+        action: async (props: any, evt: Event) => {
+          const impl = await getResource(attachmentPlugin.actionImpl.DeleteAttachment)
+          await impl(attachment, evt)
+        }
+      })
+    }
     showPopup(
       Menu,
       {
-        actions: [
-          ...(openable
-            ? [
-                {
-                  label: view.string.Open,
-                  icon: IconOpen,
-                  action: async (props: any, evt: MouseEvent) => {
-                    showPreview(evt)
-                  }
-                }
-              ]
-            : []),
-          {
-            label: saveAttachmentAction.label,
-            icon: saveAttachmentAction.icon,
-            action: async (props: any, evt: MouseEvent) => {
-              const impl = await getResource(saveAttachmentAction.action)
-              await impl(attachment, evt)
-            }
-          },
-          {
-            label: attachmentPlugin.string.DeleteFile,
-            action: async (props: any, evt: MouseEvent) => {
-              const impl = await getResource(attachmentPlugin.actionImpl.DeleteAttachment)
-              await impl(attachment, evt)
-            }
-          }
-        ]
+        actions
       },
       ev.target as HTMLElement
     )

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

@@ -27,6 +27,7 @@
   export let value: Attachment
   export let isSaved: boolean = false
   export let listProvider: ListSelectionProvider | undefined = undefined
+  export let removable: boolean = false
   const dispatch = createEventDispatcher()
 
   $: type = getType(value.type)
@@ -58,14 +59,14 @@
       alt={value.name}
     />
     <div class="actions conner">
-      <AttachmentActions attachment={value} {isSaved} />
+      <AttachmentActions attachment={value} {isSaved} {removable} />
     </div>
   </div>
 {:else if type === 'audio'}
   <div class="buttonContainer">
     <AudioPlayer {value} />
     <div class="actions conner" style:padding={'0.125rem 0.25rem'}>
-      <AttachmentActions attachment={value} {isSaved} />
+      <AttachmentActions attachment={value} {isSaved} {removable} />
     </div>
   </div>
 {:else if type === 'video'}
@@ -78,14 +79,14 @@
       </div>
     </video>
     <div class="actions conner">
-      <AttachmentActions attachment={value} {isSaved} />
+      <AttachmentActions attachment={value} {isSaved} {removable} />
     </div>
   </div>
 {:else}
   <div class="flex buttonContainer extraWidth">
     <AttachmentPresenter {value} />
     <div class="actions conner">
-      <AttachmentActions attachment={value} {isSaved} />
+      <AttachmentActions attachment={value} {isSaved} {removable} />
     </div>
   </div>
 {/if}

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

@@ -34,6 +34,7 @@
 
   export let enableAttachments: boolean = true
   export let useAttachmentPreview: boolean = false
+  export let readonly: boolean = false
 
   const client = getClient()
 
@@ -43,7 +44,7 @@
   let extraActions: RefAction[] = []
   let modelRefActions: RefAction[] = []
 
-  $: if (enableAttachments) {
+  $: if (enableAttachments && !readonly) {
     extraActions = [
       {
         label: textEditor.string.Attach,
@@ -59,10 +60,12 @@
   void getModelRefActions().then((actions) => {
     modelRefActions = actions
   })
-  $: refActions = defaultRefActions
-    .concat(extraActions)
-    .concat(modelRefActions)
-    .sort((a, b) => a.order - b.order)
+  $: refActions = readonly
+    ? []
+    : defaultRefActions
+      .concat(extraActions)
+      .concat(modelRefActions)
+      .sort((a, b) => a.order - b.order)
 
   let progress = false
   let attachments: Attachment[] = []
@@ -89,6 +92,7 @@
   }
 
   async function fileSelected (): Promise<void> {
+    if (readonly) return
     progress = true
     const list = inputFile.files
     if (list === null || list.length === 0) return
@@ -155,6 +159,7 @@
   }
 
   export async function pasteAction (evt: ClipboardEvent): Promise<void> {
+    if (readonly) return
     if (!isAllowedPaste(evt)) {
       return
     }
@@ -172,6 +177,7 @@
   }
 
   export async function fileDrop (e: DragEvent): Promise<void> {
+    if (readonly) return
     progress = true
     const list = e.dataTransfer?.files
     if (list !== undefined && list.length !== 0) {
@@ -231,6 +237,7 @@
       {placeholder}
       {boundary}
       {refActions}
+      {readonly}
       attachFile={async (file) => {
         return await createAttachment(file)
       }}
@@ -248,6 +255,7 @@
     {#if (attachments.length > 0 && enableAttachments) || progress}
       <AttachmentsGrid
         {attachments}
+        {readonly}
         {progress}
         {progressItems}
         {useAttachmentPreview}

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

@@ -24,6 +24,7 @@
   export let useAttachmentPreview = false
   export let progress = false
   export let progressItems: Ref<Doc>[] = []
+  export let readonly: boolean = false
 
   let element: HTMLElement
   let attachmentPopupId: string = ''
@@ -46,11 +47,16 @@
     <div class="attachment-grid">
       {#each attachments as attachment (attachment._id)}
         {#if useAttachmentPreview}
-          <AttachmentPreview value={attachment} {listProvider} on:open={(res) => (attachmentPopupId = res.detail)} />
+          <AttachmentPreview
+            value={attachment}
+            removable={!readonly}
+            {listProvider}
+            on:open={(res) => (attachmentPopupId = res.detail)}
+          />
         {:else}
           <AttachmentPresenter
             value={attachment}
-            removable
+            removable={!readonly}
             showPreview
             progress={progressItems.includes(attachment._id)}
             on:remove