Add labels mode preference (#1730)

Signed-off-by: Dvinyanin Alexandr <dvinyanin.alexandr@gmail.com>

models/board/package.json

@@ -41,6 +41,7 @@
     "@anticrm/view": "~0.6.0",
     "@anticrm/task": "~0.6.0",
     "@anticrm/model-task": "~0.6.0",
-    "@anticrm/workbench": "~0.6.1"
+    "@anticrm/workbench": "~0.6.1",
+    "@anticrm/model-preference": "~0.6.0"
   }
 }

models/board/src/index.ts

@@ -14,7 +14,7 @@
 //
 
 // To help typescript locate view plugin properly
-import type { Board, Card, CardAction, CardDate, CardLabel, MenuPage } from '@anticrm/board'
+import type { Board, Card, CardAction, CardDate, CardLabel, MenuPage, LabelsCompactMode } from '@anticrm/board'
 import type { Employee } from '@anticrm/contact'
 import {
   TxOperations as Client,
@@ -49,6 +49,7 @@ import view from '@anticrm/model-view'
 import workbench from '@anticrm/model-workbench'
 import { Asset, IntlString, Resource } from '@anticrm/platform'
 import type { AnyComponent } from '@anticrm/ui'
+import preference, { TPreference } from '@anticrm/model-preference'
 import board from './plugin'
 
 /**
@@ -81,6 +82,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.Card, task.class.Task)
 @UX(board.string.Card, board.icon.Card, undefined, 'title')
 export class TCard extends TTask implements Card {
@@ -140,7 +147,7 @@ export class TMenuPage extends TDoc implements MenuPage {
 }
 
 export function createModel (builder: Builder): void {
-  builder.createModel(TBoard, TCard, TCardLabel, TCardDate, TCardAction, TMenuPage)
+  builder.createModel(TBoard, TCard, TCardLabel, TCardDate, TCardAction, TMenuPage, TLabelsCompactMode)
 
   builder.createDoc(board.class.MenuPage, core.space.Model, {
     component: board.component.Archive,

models/board/src/plugin.ts

@@ -17,7 +17,7 @@
 import { boardId } from '@anticrm/board'
 import board from '@anticrm/board-resources/src/plugin'
 import type { Ref, Space } from '@anticrm/core'
-import { mergeIds } from '@anticrm/platform'
+import { IntlString, mergeIds } from '@anticrm/platform'
 import { KanbanTemplate, Sequence } from '@anticrm/task'
 import type { AnyComponent } from '@anticrm/ui'
 import { ViewletDescriptor } from '@anticrm/view'
@@ -46,5 +46,8 @@ export default mergeIds(boardId, board, {
   },
   viewlet: {
     Kanban: '' as Ref<ViewletDescriptor>
+  },
+  string: {
+    LabelsCompactMode: '' as IntlString
   }
 })

plugins/board-resources/package.json

@@ -53,6 +53,7 @@
     "@anticrm/view-resources": "~0.6.0",
     "@anticrm/workbench": "~0.6.1",
     "svelte": "^3.47",
-    "@anticrm/kanban": "~0.6.0"
+    "@anticrm/kanban": "~0.6.0",
+    "@anticrm/preference": "~0.6.0"
   }
 }

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

@@ -13,10 +13,11 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import type { Card, CardLabel } from '@anticrm/board'
+  import type { Card, CardLabel, LabelsCompactMode } from '@anticrm/board'
 
   import { getResource } from '@anticrm/platform'
-  import { getClient } from '@anticrm/presentation'
+  import preference from '@anticrm/preference'
+  import { createQuery, getClient } from '@anticrm/presentation'
   import { Button, IconAdd } from '@anticrm/ui'
 
   import board from '../../plugin'
@@ -27,10 +28,14 @@
   export let isInline: boolean = false
 
   const client = getClient()
+  const query = createQuery()
+
   let labels: CardLabel[]
   let labelsHandler: (e: Event) => void
-  let isCompact: boolean = false
   let isHovered: boolean = false
+  let modePreference: LabelsCompactMode | undefined
+
+  $: isCompact = isInline ? !!modePreference : false
 
   $: if (value.labels && value.labels.length > 0) {
     client.findAll(board.class.CardLabel, { _id: { $in: value.labels } }).then((result) => {
@@ -39,6 +44,9 @@
   } else {
     labels = []
   }
+  $: query.query(board.class.LabelsCompactMode, { attachedTo: value.space }, (result) => {
+    ;[modePreference] = result
+  })
 
   if (!isInline) {
     getCardActions(client, {
@@ -52,9 +60,9 @@
   }
 
   function toggleCompact () {
-    if (isInline) {
-      isCompact = !isCompact
-    }
+    if (!isInline) return
+    if (modePreference) client.remove(modePreference)
+    else client.createDoc(board.class.LabelsCompactMode, preference.space.Preference, { attachedTo: value.space })
   }
 
   function hoverIn () {

plugins/board/package.json

@@ -31,6 +31,7 @@
     "@anticrm/platform": "~0.6.6",
     "@anticrm/view": "~0.6.0",
     "@anticrm/task": "~0.6.0",
-    "@anticrm/ui": "~0.6.0"
+    "@anticrm/ui": "~0.6.0",
+    "@anticrm/preference": "~0.6.0"
   }
 }

plugins/board/src/index.ts

@@ -20,6 +20,7 @@ import type { Asset, IntlString, Plugin, Resource } from '@anticrm/platform'
 import { plugin } from '@anticrm/platform'
 import type { KanbanTemplateSpace, SpaceWithStates, Task } from '@anticrm/task'
 import type { AnyComponent } from '@anticrm/ui'
+import type { Preference } from '@anticrm/preference'
 
 /**
  * @public
@@ -111,6 +112,12 @@ export interface MenuPage extends Doc {
   label: IntlString
 }
 
+/**
+ * @public
+ */
+export interface LabelsCompactMode extends Preference {
+  attachedTo: Ref<Board>
+}
 /**
  * @public
  */
@@ -129,7 +136,8 @@ const boards = plugin(boardId, {
     CardAction: '' as Ref<Class<CardAction>>,
     CardDate: '' as Ref<Class<CardDate>>,
     CardLabel: '' as Ref<Class<CardLabel>>,
-    MenuPage: '' as Ref<Class<MenuPage>>
+    MenuPage: '' as Ref<Class<MenuPage>>,
+    LabelsCompactMode: '' as Ref<Class<LabelsCompactMode>>
   },
   icon: {
     Board: '' as Asset,