Fix Cover context menu action (#1860)

Signed-off-by: Dvinyanin Alexandr <dvinyanin.alexandr@gmail.com>

models/board/src/index.ts

@@ -320,7 +320,8 @@ export function createModel (builder: Builder): void {
       action: view.actionImpl.ShowPopup,
       actionProps: {
         component: board.component.CoverActionPopup,
-        element: 'top'
+        element: 'top',
+        value: 'object'
       },
       label: board.string.Cover,
       icon: board.icon.Card,

plugins/board-resources/src/components/popups/CardCoverPicker.svelte

@@ -1,13 +1,18 @@
 <script lang="ts">
-  import { CardCover } from '@anticrm/board'
+  import { CardCover, Card } from '@anticrm/board'
+  import { getClient } from '@anticrm/presentation'
   import { Button, hexColorToNumber, Icon, Label, IconCheck, IconClose } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
   import board from '../../plugin'
   import { getBoardAvailableColors } from '../../utils/BoardUtils'
   import ColorPresenter from '../presenters/ColorPresenter.svelte'
   export let value: CardCover | undefined | null
-  export let onChange: (e: any) => void
+  export let object: Card | undefined
+  export let onChange: (e: any) => void | undefined
 
+  $: cover = object ? object.cover : value
+
+  const client = getClient()
   const dispatch = createEventDispatcher()
 
   const colorGroups = (function chunk (colors: number[]): number[][] {
@@ -15,8 +20,9 @@
   })(getBoardAvailableColors().map(hexColorToNumber))
 
   function updateCover (newCover?: Partial<CardCover>) {
-    value = newCover ? { size: 'small', color: colorGroups[0][0], ...value, ...newCover } : null
-    onChange(value)
+    cover = newCover ? { size: 'small', color: colorGroups[0][0], ...cover, ...newCover } : null
+    if (onChange) onChange(cover)
+    else if (object) client.update(object, { cover })
   }
 </script>
 
@@ -46,7 +52,7 @@
       <Button
         icon={board.icon.Card}
         width="40%"
-        disabled={!value || value.size === 'small'}
+        disabled={!cover || cover.size === 'small'}
         on:click={() => {
           updateCover({ size: 'small' })
         }}
@@ -54,7 +60,7 @@
       <Button
         icon={board.icon.Board}
         width="40%"
-        disabled={!value || value.size === 'large'}
+        disabled={!cover || cover.size === 'large'}
         on:click={() => {
           updateCover({ size: 'large' })
         }}
@@ -86,7 +92,7 @@
                   updateCover({ color })
                 }}
               >
-                {#if value && value.color === color}
+                {#if cover && cover.color === color}
                   <div class="flex-center flex-grow fs-title h-full">
                     <Icon icon={IconCheck} size="small" />
                   </div>

plugins/board-resources/src/index.ts

@@ -39,6 +39,7 @@ import UserBoxList from './components/UserBoxList.svelte'
 import CardLabels from './components/editor/CardLabels.svelte'
 import CardCoverEditor from './components/editor/CardCoverEditor.svelte'
 import CardCoverPresenter from './components/presenters/CardCoverPresenter.svelte'
+import CardCoverPicker from './components/popups/CardCoverPicker.svelte'
 import { createCard, getCardFromTodoItem } from './utils/CardUtils'
 
 async function ConvertToCard (object: TodoItem): Promise<void> {
@@ -77,7 +78,7 @@ export default async (): Promise<Resources> => ({
     // action popups
     LabelsActionPopup: CardLabelsPopup,
     DatesActionPopup: DateRangePicker,
-    CoverActionPopup: CardCoverEditor,
+    CoverActionPopup: CardCoverPicker,
     MoveActionPopup: MoveCard,
     CopyActionPopup: CopyCard
   },