Board: Create board labels (#1426)

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

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)}`
+}

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')

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>

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>
 

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 ?? ''
+  })
+}