Board: Use / for card labels update

Signed-off-by: Anna No <anna.no@xored.com>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Card, CardLabel } from '@anticrm/board'
-  import { Ref } from '@anticrm/core'
+  import type { Ref, WithLookup } from '@anticrm/core'
   import { getClient } from '@anticrm/presentation'
   import {
     Button,
@@ -17,16 +17,14 @@
 
   import board from '../../plugin'
   import { getBoardLabels } from '../../utils/BoardUtils'
-  import { updateCard } from '../../utils/CardUtils'
 
-  export let object: Card
+  export let object: WithLookup<Card>
   export let search: string | undefined = undefined
   export let onEdit: (label: CardLabel) => void
   export let onCreate: () => void
 
   const client = getClient()
 
-  let labels = object.labels ?? []
   let boardCardLabels: CardLabel[] = []
   let filteredLabels: CardLabel[] = []
   let hovered: Ref<CardLabel> | undefined = undefined
@@ -49,18 +47,31 @@
     }
   }
 
-  function toggle (label: CardLabel) {
+  async function fetch () {
     if (!object) {
       return
     }
 
-    if (labels.includes(label._id)) {
-      labels = labels.filter((l) => l !== label._id)
-    } else {
-      labels = [...labels, label._id]
+    object = await client.findOne(object._class, { _id: object._id }) ?? object
+  }
+
+  async function toggle (label: CardLabel) {
+    if (!object) {
+      return
     }
 
-    updateCard(client, object, 'labels', labels)
+    const data = { labels: label._id }
+    if (object?.labels?.includes(label._id)) {
+      await client.update(object, {
+        $pull: data
+      })
+    } else {
+      await client.update(object, {
+        $push: data
+      })
+    }
+
+    fetch()
   }
 
   $: object.space && fetchBoardLabels()
@@ -113,7 +124,7 @@
           style:box-shadow={hovered === label._id ? `-0.4rem 0 ${numberToRGB(label.color, 0.6)}` : ''}
           on:click={() => toggle(label)}>
           {label.title ?? ''}
-          {#if labels.includes(label._id)}
+          {#if object?.labels?.includes(label._id)}
             <div class="absolute flex-center h-full mr-2" style:top="0" style:right="0">
               <Icon icon={IconCheck} size="small" />
             </div>

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

@@ -21,7 +21,6 @@
   function close () {
     dispatch('close')
   }
-
 </script>
 
 {#if editMode.isEdit}
@@ -29,12 +28,14 @@
     on:close
     boardRef={object.space}
     object={editMode.object}
-    onBack={() => setEditMode(false, undefined)} />
+    onBack={() => setEditMode(false, undefined)}
+  />
 {:else}
   <CardLabelsPicker
     bind:search
     on:close
     {object}
     onCreate={() => setEditMode(true, undefined)}
-    onEdit={(o) => setEditMode(true, o)} />
+    onEdit={(o) => setEditMode(true, o)}
+  />
 {/if}

plugins/board-resources/src/components/presenters/ColorPresenter.svelte

@@ -8,6 +8,19 @@
   const color = numberToHexColor(value)
 </script>
 
+{#if value}
+  <div
+    class="color-presenter border-radius-1 min-w-9"
+    class:h-8={size === 'large'}
+    class:h-7={size === 'medium'}
+    class:h-6={size === 'small'}
+    style="--color-presenter-color: {color}; --color-presenter-hoverColor: {hoverColor}"
+    on:click
+  >
+    <slot />
+  </div>
+{/if}
+
 <style lang="scss">
   .color-presenter {
     background-color: var(--color-presenter-color);
@@ -16,15 +29,3 @@
     }
   }
 </style>
-
-{#if value}
-  <div
-    class="color-presenter border-radius-1 min-w-9"
-    class:h-8={size === 'large'}
-    class:h-7={size === 'medium'}
-    class:h-6={size === 'small'}
-    style="--color-presenter-color: {color}; --color-presenter-hoverColor: {hoverColor}"
-    on:click>
-    <slot />
-  </div>
-{/if}

plugins/board-resources/src/components/presenters/DatePresenter.svelte

@@ -13,7 +13,6 @@
     if (isInline || isChecked === undefined || !value) return
     dispatch('update', { ...value, isChecked })
   }
-
 </script>
 
 {#if value}

plugins/board-resources/src/index.ts

@@ -30,7 +30,15 @@ import MoveView from './components/popups/MoveCard.svelte'
 import DateRangePicker from './components/popups/DateRangePicker.svelte'
 import CardLabelPresenter from './components/presenters/LabelPresenter.svelte'
 import CardDatePresenter from './components/presenters/DatePresenter.svelte'
-import { addCurrentUser, canAddCurrentUser, isArchived, isUnarchived, archiveCard, unarchiveCard, deleteCard } from './utils/CardUtils'
+import {
+  addCurrentUser,
+  canAddCurrentUser,
+  isArchived,
+  isUnarchived,
+  archiveCard,
+  unarchiveCard,
+  deleteCard
+} from './utils/CardUtils'
 
 async function showMoveCardPopup (object: Card): Promise<void> {
   showPopup(MoveView, { object })