From b462a9d680de45b97c23664413c8b509e593954d Mon Sep 17 00:00:00 2001
From: Anna No <anna.no@xored.com>
Date: Mon, 18 Apr 2022 14:56:21 +0700
Subject: [PATCH] Board: Create board labels (#1426)

Signed-off-by: Anna No <anna.no@xored.com>
---
 packages/ui/src/colors.ts                     | 52 ++++++++++++++-----
 .../src/components/CreateBoard.svelte         | 19 +++----
 .../src/components/editor/CardActions.svelte  |  6 +--
 .../presenters/LabelPresenter.svelte          |  4 +-
 .../board-resources/src/utils/BoardUtils.ts   | 47 +++++++++++++++++
 5 files changed, 98 insertions(+), 30 deletions(-)
 create mode 100644 plugins/board-resources/src/utils/BoardUtils.ts

diff --git a/packages/ui/src/colors.ts b/packages/ui/src/colors.ts
index 13b6904d22..d8f719288b 100644
--- a/packages/ui/src/colors.ts
+++ b/packages/ui/src/colors.ts
@@ -1,17 +1,31 @@
+export const FeijoaColor = '#A5D179'
+export const DeYorkColor = '#77C07B'
+export const FernColor = '#60B96E' // green
+export const PuertoRicoColor = '#45AEA3'
+export const MediumTurquoiseColor = '#46CBDE'
+export const SummerSkyColor = '#47BDF6'
+export const MalibuColor = '#5AADF6'
+export const SeagullColor = '#73A6CD'
+export const EastSideColor = '#B977CB' // purple
+export const MoodyBlueColor = '#7C6FCD' // violet
+export const ChetwodeBlueColor = '#6F7BC5' // dark blue
+export const SalmonColor = '#F28469' // salmon
+export const SeaBuckthornColor = '#F2994A' // orange (warning)
+export const FlamingoColor = '#EB5757' // red (error)
 
 const blackColors = Object.freeze([
-  '#A5D179',
-  '#77C07B',
-  '#60B96E',
-  '#45AEA3',
-  '#46CBDE',
-  '#47BDF6',
-  '#5AADF6',
-  '#73A6CD',
-  '#B977CB',
-  '#7C6FCD',
-  '#6F7BC5',
-  '#F28469'
+  FeijoaColor,
+  DeYorkColor,
+  FernColor,
+  PuertoRicoColor,
+  MediumTurquoiseColor,
+  SummerSkyColor,
+  MalibuColor,
+  SeagullColor,
+  EastSideColor,
+  MoodyBlueColor,
+  ChetwodeBlueColor,
+  SalmonColor
 ])
 
 /**
@@ -46,3 +60,17 @@ function hashCode (str: string): number {
 export function getColorNumberByText (str: string): number {
   return hashCode(str)
 }
+
+/**
+ * @public
+ */
+export function hexColorToNumber (hexColor: string): number {
+  return parseInt(hexColor.replace('#', ''), 16)
+}
+
+/**
+ * @public
+ */
+export function numberToHexColor (color: number): string {
+  return `#${color.toString(16)}`
+}
diff --git a/plugins/board-resources/src/components/CreateBoard.svelte b/plugins/board-resources/src/components/CreateBoard.svelte
index 56510f3eac..5a575fcdb0 100644
--- a/plugins/board-resources/src/components/CreateBoard.svelte
+++ b/plugins/board-resources/src/components/CreateBoard.svelte
@@ -14,12 +14,13 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import core, { Ref } from '@anticrm/core'
+  import { Ref } from '@anticrm/core'
   import { getClient, SpaceCreateCard } from '@anticrm/presentation'
-  import task, { createKanban, KanbanTemplate } from '@anticrm/task'
+  import task, { KanbanTemplate } from '@anticrm/task'
   import { Component, EditBox, Grid, IconFolder } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
   import board from '../plugin'
+  import { createBoard } from '../utils/BoardUtils'
 
   const dispatch = createEventDispatcher()
 
@@ -33,7 +34,7 @@
 
   const client = getClient()
 
-  async function createBoard (): Promise<void> {
+  async function onCreateBoard (): Promise<void> {
     if (
       templateId !== undefined &&
       (await client.findOne(task.class.KanbanTemplate, { _id: templateId })) === undefined
@@ -41,21 +42,13 @@
       throw Error(`Failed to find target kanban template: ${templateId}`)
     }
 
-    const id = await client.createDoc(board.class.Board, core.space.Space, {
-      name,
-      description,
-      private: false,
-      archived: false,
-      members: []
-    })
-
-    await createKanban(client, id, templateId)
+    await createBoard(client, name, description, templateId)
   }
 </script>
 
 <SpaceCreateCard
   label={board.string.CreateBoard}
-  okAction={createBoard}
+  okAction={onCreateBoard}
   canSave={name.length > 0}
   on:close={() => {
     dispatch('close')
diff --git a/plugins/board-resources/src/components/editor/CardActions.svelte b/plugins/board-resources/src/components/editor/CardActions.svelte
index c507794029..21af1e103a 100644
--- a/plugins/board-resources/src/components/editor/CardActions.svelte
+++ b/plugins/board-resources/src/components/editor/CardActions.svelte
@@ -29,7 +29,7 @@
 
   let actionGroups: { label: IntlString; actions: CardAction[] }[] = []
 
-  async function fetch() {
+  async function fetch () {
     const suggestedActions: CardAction[] = []
     const addToCardActions: CardAction[] = []
     const automationActions: CardAction[] = []
@@ -80,7 +80,6 @@
   $: value.members && fetch()
   $: value.isArchived && fetch()
   $: !value.isArchived && fetch()
-
 </script>
 
 {#if value}
@@ -105,7 +104,8 @@
                     const handler = await getResource(action.handler)
                     handler(value, client)
                   }
-                }} />
+                }}
+              />
             {/if}
           {/each}
         </div>
diff --git a/plugins/board-resources/src/components/presenters/LabelPresenter.svelte b/plugins/board-resources/src/components/presenters/LabelPresenter.svelte
index 68004f3095..cffe0cf669 100644
--- a/plugins/board-resources/src/components/presenters/LabelPresenter.svelte
+++ b/plugins/board-resources/src/components/presenters/LabelPresenter.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-  import { Button, getPlatformColor } from '@anticrm/ui'
+  import { Button, numberToHexColor } from '@anticrm/ui'
   import type { CardLabel } from '@anticrm/board'
 
   export let value: CardLabel
   export let size: 'large' | 'medium'
 
-  const background = getPlatformColor(value.color)
+  const background = numberToHexColor(value.color)
 
 </script>
 
diff --git a/plugins/board-resources/src/utils/BoardUtils.ts b/plugins/board-resources/src/utils/BoardUtils.ts
new file mode 100644
index 0000000000..3f59c19626
--- /dev/null
+++ b/plugins/board-resources/src/utils/BoardUtils.ts
@@ -0,0 +1,47 @@
+import core, { Ref, TxOperations } from '@anticrm/core'
+import board, { Board, CardLabel } from '@anticrm/board'
+import type { KanbanTemplate } from '@anticrm/task'
+import { createKanban } from '@anticrm/task'
+import { hexColorToNumber, FernColor, FlamingoColor, MalibuColor, MoodyBlueColor, SeaBuckthornColor } from '@anticrm/ui'
+
+export async function createBoard (
+  client: TxOperations,
+  name: string,
+  description: string,
+  templateId?: Ref<KanbanTemplate>
+): Promise<Ref<Board>> {
+  const boardRef = await client.createDoc(board.class.Board, core.space.Space, {
+    name,
+    description,
+    private: false,
+    archived: false,
+    members: []
+  })
+
+  await Promise.all([createBoardLabels(client, boardRef), createKanban(client, boardRef, templateId)])
+  return boardRef
+}
+
+export async function getBoardLabels (client: TxOperations, boardRef: Ref<Board>): Promise<CardLabel[]> {
+  return await client.findAll(board.class.CardLabel, { attachedTo: boardRef })
+}
+
+export async function createBoardLabels (client: TxOperations, boardRef: Ref<Board>): Promise<void> {
+  await Promise.all([
+    createCardLabel(client, boardRef, FernColor),
+    createCardLabel(client, boardRef, SeaBuckthornColor),
+    createCardLabel(client, boardRef, FlamingoColor),
+    createCardLabel(client, boardRef, MalibuColor),
+    createCardLabel(client, boardRef, MoodyBlueColor)
+  ])
+}
+
+export async function createCardLabel (client: TxOperations, boardRef: Ref<Board>, color: string, title?: string): Promise<void> {
+  await client.createDoc(board.class.CardLabel, core.space.Model, {
+    attachedTo: boardRef,
+    attachedToClass: board.class.Board,
+    collection: '',
+    color: hexColorToNumber(color),
+    title: title ?? ''
+  })
+}