Board: Add card labels picker popup (#1434)

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

plugins/board-resources/src/components/EditCard.svelte

@@ -78,7 +78,7 @@
     <Scroller>
       <div class="flex-col-stretch h-full w-165 p-6">
         <!-- TODO cover -->
-        <div class="flex-row-streach">
+        <div class="flex-row-stretch">
           <div class="w-9">
             <Icon icon={board.icon.Card} size="large" />
           </div>
@@ -91,20 +91,20 @@
             />
           </div>
         </div>
-        <div class="flex-row-streach">
+        <div class="flex-row-stretch">
           <div class="w-9" />
           <div>
             <Label label={board.string.InList} />
             <span class="state-name ml-1" on:click={handleMove}>{state?.title}</span>
           </div>
         </div>
-        <div class="flex-row-streach">
+        <div class="flex-row-stretch">
           <div class="flex-grow mr-4">
-            <div class="flex-row-streach">
+            <div class="flex-row-stretch">
               <div class="w-9" />
               <CardDetails bind:value={object} />
             </div>
-            <div class="flex-row-streach mt-4 mb-2">
+            <div class="flex-row-stretch mt-4 mb-2">
               <div class="w-9">
                 <Icon icon={board.icon.Card} size="large" />
               </div>
@@ -112,7 +112,7 @@
                 <Label label={board.string.Description} />
               </div>
             </div>
-            <div class="flex-row-streach">
+            <div class="flex-row-stretch">
               <div class="w-9" />
               <div class="background-bg-accent border-bg-accent border-radius-3 p-2 w-full">
                 <StyledTextBox

plugins/board-resources/src/components/editor/CardActivity.svelte

@@ -26,7 +26,7 @@
 
 {#if value !== undefined}
   <div class="flex-col-stretch h-full w-full">
-    <div class="flex-row-streach mt-4 mb-2">
+    <div class="flex-row-stretch mt-4 mb-2">
       <div class="w-9">
         <Icon icon={IconActivity} size="large" />
       </div>
@@ -42,7 +42,7 @@
         }}
       />
     </div>
-    <div class="flex-row-streach">
+    <div class="flex-row-stretch">
       <div class="w-9" />
       <div class="w-full">
         <Component is={chunter.component.CommentInput} props={{ object: value }} />

plugins/board-resources/src/components/editor/CardAttachments.svelte

@@ -38,7 +38,7 @@
 
 {#if value !== undefined && value.attachments !== undefined && value.attachments > 0}
   <div class="flex-col w-full">
-    <div class="flex-row-streach mt-4 mb-2">
+    <div class="flex-row-stretch mt-4 mb-2">
       <div class="w-9">
         <Icon icon={IconAttachment} size="large" />
       </div>
@@ -46,7 +46,7 @@
         <Label label={board.string.Attachments} />
       </div>
     </div>
-    <div class="flex-row-streach">
+    <div class="flex-row-stretch">
       <div class="w-9" />
       <div class="flex-col flex-gap-1 w-full">
         {#each attachments as attach}

plugins/board-resources/src/components/editor/CardDetails.svelte

@@ -37,17 +37,21 @@
   let labelsHandler: () => void
   let dateHandler: () => void
 
-  $: value.members &&
-    value.members.length > 0 &&
+  $: if (value.members && value.members.length > 0) {
     query.query(contact.class.Employee, { _id: { $in: value.members } }, (result) => {
       members = result
     })
+  } else {
+    members = []
+  }
 
-  $: value.labels &&
-    value.labels.length > 0 &&
+  $: if (value.labels && value.labels.length > 0) {
     query.query(board.class.CardLabel, { _id: { $in: value.labels } }, (result) => {
       labels = result
     })
+  } else {
+    labels = []
+  }
 
   getCardActions(client, {
     _id: { $in: [board.cardAction.Dates, board.cardAction.Labels, board.cardAction.Members] }
@@ -65,6 +69,7 @@
       }
     }
   })
+
 </script>
 
 {#if value}
@@ -82,7 +87,7 @@
     </div>
   {/if}
   {#if labels && labels.length > 0}
-    <div class="flex-col mt-4 mr6">
+    <div class="flex-col mt-4 mr-6">
       <div class="text-md font-medium">
         <Label label={board.string.Labels} />
       </div>

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

@@ -0,0 +1,105 @@
+<script lang="ts">
+  import { Card, CardLabel } from '@anticrm/board'
+  import { Ref } from '@anticrm/core'
+  import { getClient } from '@anticrm/presentation'
+  import { Button, EditBox, Icon, IconEdit, IconCheck, Label, numberToHexColor, numberToRGB } from '@anticrm/ui'
+
+  import board from '../../plugin'
+  import { getBoardLabels } from '../../utils/BoardUtils'
+  import { updateCard } from '../../utils/CardUtils'
+
+  export let object: Card
+
+  const client = getClient()
+  let search: string | undefined = undefined
+  let labels = object.labels ?? []
+  let boardCardLabels: CardLabel[] = []
+  let filteredLabels: CardLabel[] = []
+  let hovered: Ref<CardLabel> | undefined = undefined
+
+  function applySearch() {
+    if (!search || search.trim().length <= 0) {
+      filteredLabels = boardCardLabels
+      return
+    }
+
+    const text = search!.toUpperCase()
+    filteredLabels = boardCardLabels.filter((l) => l.title?.toUpperCase().includes(text) ?? false)
+  }
+
+  async function fetchBoardLabels() {
+    if (object.space) {
+      boardCardLabels = await getBoardLabels(client, object.space)
+      applySearch()
+    }
+  }
+
+  function toggle(label: CardLabel) {
+    if (!object) {
+      return
+    }
+
+    if (labels.includes(label._id)) {
+      labels = labels.filter((l) => l !== label._id)
+    } else {
+      labels = [...labels, label._id]
+    }
+
+    updateCard(client, object, 'labels', labels)
+  }
+
+  $: object.space && fetchBoardLabels()
+
+</script>
+
+<div class="antiPopup antiPopup-withHeader antiPopup-withTitle w-85 pb-2">
+  <div class="ap-space" />
+  <div class="fs-title ap-header flex-row-center">
+    <Label label={board.string.Labels} />
+  </div>
+  <div class="ap-space bottom-divider" />
+  <div class="flex-col ml-4 mt-1 mb-1 mr-2 flex-gap-1">
+    <div class="p-2 mt-1 mb-1 border-bg-accent border-radius-1">
+      <EditBox
+        bind:value={search}
+        maxWidth="100%"
+        placeholder={board.string.SearchLabels}
+        on:change={() => applySearch()} />
+    </div>
+    <div class="text-md font-medium">
+      <Label label={board.string.Labels} />
+    </div>
+    {#each filteredLabels as label}
+      <div
+        class="flex-row-stretch"
+        on:mouseover={() => {
+          hovered = label._id
+        }}
+        on:focus={() => {
+          hovered = label._id
+        }}
+        on:mouseout={() => {
+          hovered = undefined
+        }}
+        on:blur={() => {
+          hovered = undefined
+        }}>
+        <div
+          class="relative flex-row-center justify-center border-radius-1 fs-title w-full h-8 mr-2"
+          style:background-color={numberToHexColor(label.color)}
+          style:box-shadow={hovered === label._id ? `-0.5rem 0 ${numberToRGB(label.color, 0.6)}` : ''}
+          on:click={() => toggle(label)}>
+          {label.title ?? ''}
+          {#if 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>
+          {/if}
+        </div>
+        <Button icon={IconEdit} kind="transparent" />
+      </div>
+    {/each}
+    <div class="mt-3" />
+    <Button label={board.string.CreateLabel} kind="no-border" />
+  </div>
+</div>