From 4ae5e95280c5bcfa5125e649bc678e7bf1a5a119 Mon Sep 17 00:00:00 2001
From: Alex <41288429+Dvinyanin@users.noreply.github.com>
Date: Fri, 20 May 2022 14:19:45 +0700
Subject: [PATCH] Fix board preference (#1807)

Signed-off-by: Dvinyanin Alexandr <dvinyanin.alexandr@gmail.com>
---
 models/board/src/index.ts                     | 16 +++++++++-------
 models/board/src/plugin.ts                    |  2 +-
 .../src/components/editor/CardLabels.svelte   | 19 ++++++-------------
 .../board-resources/src/utils/BoardUtils.ts   | 15 ++++++++++++++-
 plugins/board/src/index.ts                    |  6 +++---
 5 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/models/board/src/index.ts b/models/board/src/index.ts
index 4fdb018e3f..79bd24fcd2 100644
--- a/models/board/src/index.ts
+++ b/models/board/src/index.ts
@@ -14,7 +14,7 @@
 //
 
 // To help typescript locate view plugin properly
-import type { Board, Card, CardDate, CardLabel, MenuPage, LabelsCompactMode } from '@anticrm/board'
+import type { Board, Card, CardDate, CardLabel, MenuPage, CommonBoardPreference } from '@anticrm/board'
 import type { Employee } from '@anticrm/contact'
 import { DOMAIN_MODEL, IndexKind, Markup, Ref, Timestamp, Type } from '@anticrm/core'
 import {
@@ -36,7 +36,7 @@ import contact from '@anticrm/model-contact'
 import core, { TAttachedDoc, TDoc, TObj } from '@anticrm/model-core'
 import task, { TSpaceWithStates, TTask } from '@anticrm/model-task'
 import view, { actionTemplates, createAction } from '@anticrm/model-view'
-import workbench from '@anticrm/model-workbench'
+import workbench, { Application } from '@anticrm/model-workbench'
 import { IntlString } from '@anticrm/platform'
 import type { AnyComponent } from '@anticrm/ui'
 import preference, { TPreference } from '@anticrm/model-preference'
@@ -72,10 +72,12 @@ export class TCardLabel extends TAttachedDoc implements CardLabel {
   isHidden?: boolean
 }
 
-@Model(board.class.LabelsCompactMode, preference.class.Preference)
-export class TLabelsCompactMode extends TPreference implements LabelsCompactMode {
-  @Prop(TypeRef(board.class.Board), board.string.LabelsCompactMode)
-  attachedTo!: Ref<Board>
+@Model(board.class.CommonBoardPreference, preference.class.Preference)
+export class TCommonBoardPreference extends TPreference implements CommonBoardPreference {
+  @Prop(TypeRef(workbench.class.Application), board.string.CommonBoardPreference)
+  attachedTo!: Ref<Application>
+
+  cardLabelsCompactMode!: boolean
 }
 
 @Model(board.class.Card, task.class.Task)
@@ -123,7 +125,7 @@ export class TMenuPage extends TDoc implements MenuPage {
 }
 
 export function createModel (builder: Builder): void {
-  builder.createModel(TBoard, TCard, TCardLabel, TCardDate, TMenuPage, TLabelsCompactMode)
+  builder.createModel(TBoard, TCard, TCardLabel, TCardDate, TMenuPage, TCommonBoardPreference)
 
   builder.createDoc(board.class.MenuPage, core.space.Model, {
     component: board.component.Archive,
diff --git a/models/board/src/plugin.ts b/models/board/src/plugin.ts
index 68a1fc5ef3..b2e1d43d8b 100644
--- a/models/board/src/plugin.ts
+++ b/models/board/src/plugin.ts
@@ -55,6 +55,6 @@ export default mergeIds(boardId, board, {
     Table: '' as Ref<ViewletDescriptor>
   },
   string: {
-    LabelsCompactMode: '' as IntlString
+    CommonBoardPreference: '' as IntlString
   }
 })
diff --git a/plugins/board-resources/src/components/editor/CardLabels.svelte b/plugins/board-resources/src/components/editor/CardLabels.svelte
index 7b8bc3cec8..4b1edb8bc2 100644
--- a/plugins/board-resources/src/components/editor/CardLabels.svelte
+++ b/plugins/board-resources/src/components/editor/CardLabels.svelte
@@ -13,14 +13,13 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import type { Card, CardLabel, LabelsCompactMode } from '@anticrm/board'
-
-  import preference from '@anticrm/preference'
-  import { createQuery, getClient } from '@anticrm/presentation'
+  import type { Card, CardLabel } from '@anticrm/board'
+  import { getClient } from '@anticrm/presentation'
   import { Button, IconAdd } from '@anticrm/ui'
   import { invokeAction } from '@anticrm/view-resources'
 
   import board from '../../plugin'
+  import { commonBoardPreference } from '../../utils/BoardUtils'
   import { getCardActions } from '../../utils/CardActionUtils'
   import LabelPresenter from '../presenters/LabelPresenter.svelte'
 
@@ -28,14 +27,12 @@
   export let isInline: boolean = false
 
   const client = getClient()
-  const query = createQuery()
 
   let labels: CardLabel[]
   let labelsHandler: (e: Event) => void
   let isHovered: boolean = false
-  let modePreference: LabelsCompactMode | undefined
 
-  $: isCompact = isInline ? !!modePreference : false
+  $: isCompact = $commonBoardPreference?.cardLabelsCompactMode
 
   $: if (value.labels && value.labels.length > 0) {
     client.findAll(board.class.CardLabel, { _id: { $in: value.labels } }).then((result) => {
@@ -44,9 +41,6 @@
   } else {
     labels = []
   }
-  $: query.query(board.class.LabelsCompactMode, { attachedTo: value.space }, (result) => {
-    ;[modePreference] = result
-  })
 
   if (!isInline) {
     getCardActions(client, {
@@ -60,8 +54,7 @@
 
   function toggleCompact () {
     if (!isInline) return
-    if (modePreference) client.remove(modePreference)
-    else client.createDoc(board.class.LabelsCompactMode, preference.space.Preference, { attachedTo: value.space })
+    client.update($commonBoardPreference, { cardLabelsCompactMode: !isCompact })
   }
 
   function hoverIn () {
@@ -88,7 +81,7 @@
     {#each labels as label}
       <LabelPresenter
         value={label}
-        size={isCompact ? 'tiny' : isInline ? 'x-small' : undefined}
+        size={isInline ? (isCompact ? 'tiny' : 'x-small') : undefined}
         {isHovered}
         on:click={labelsHandler}
       />
diff --git a/plugins/board-resources/src/utils/BoardUtils.ts b/plugins/board-resources/src/utils/BoardUtils.ts
index e36231ec50..689d6e9b52 100644
--- a/plugins/board-resources/src/utils/BoardUtils.ts
+++ b/plugins/board-resources/src/utils/BoardUtils.ts
@@ -1,7 +1,10 @@
-import board, { Board, CardLabel, Card } from '@anticrm/board'
+import { readable } from 'svelte/store'
+import board, { Board, CardLabel, Card, CommonBoardPreference } from '@anticrm/board'
 import core, { Ref, TxOperations, Space } from '@anticrm/core'
 import type { KanbanTemplate, TodoItem } from '@anticrm/task'
+import preference from '@anticrm/preference'
 import { createKanban } from '@anticrm/task'
+import { createQuery, getClient } from '@anticrm/presentation'
 import {
   hexColorToNumber,
   FernColor,
@@ -127,3 +130,13 @@ export function getDateIcon (item: TodoItem): 'normal' | 'warning' | 'overdue' {
   const dueDate = new Date(item.dueTo)
   return areDatesEqual(date, dueDate) ? 'warning' : dueDate < date ? 'overdue' : 'normal'
 }
+
+export const commonBoardPreference = readable<CommonBoardPreference>(undefined, (set) => {
+  createQuery().query(board.class.CommonBoardPreference, { attachedTo: board.app.Board }, (result) => {
+    if (result.total > 0) return set(result[0])
+    void getClient().createDoc(board.class.CommonBoardPreference, preference.space.Preference, {
+      attachedTo: board.app.Board,
+      cardLabelsCompactMode: false
+    })
+  })
+})
diff --git a/plugins/board/src/index.ts b/plugins/board/src/index.ts
index 59b1da676e..d250277946 100644
--- a/plugins/board/src/index.ts
+++ b/plugins/board/src/index.ts
@@ -102,8 +102,8 @@ export interface MenuPage extends Doc {
 /**
  * @public
  */
-export interface LabelsCompactMode extends Preference {
-  attachedTo: Ref<Board>
+export interface CommonBoardPreference extends Preference {
+  cardLabelsCompactMode: boolean
 }
 /**
  * @public
@@ -123,7 +123,7 @@ const boards = plugin(boardId, {
     CardDate: '' as Ref<Class<CardDate>>,
     CardLabel: '' as Ref<Class<CardLabel>>,
     MenuPage: '' as Ref<Class<MenuPage>>,
-    LabelsCompactMode: '' as Ref<Class<LabelsCompactMode>>
+    CommonBoardPreference: '' as Ref<Class<CommonBoardPreference>>
   },
   category: {
     Card: '' as Ref<ActionCategory>