Board: Add open card inline menu (#1511)

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

plugins/board-assets/lang/en.json

@@ -2,6 +2,7 @@
   "string": {
     "Name": "Name",
     "CreateBoard": "Create board",
+    "OpenCard": "Open Card",
     "CreateCard": "Create card",
     "CardName": "Card name",
     "Cards": "Cards",

plugins/board-assets/lang/ru.json

@@ -2,6 +2,7 @@
   "string": {
     "Name": "Название",
     "CreateBoard": "Создать",
+    "OpenCard": "Открыть",
     "CreateCard": "Создать",
     "CardName": "Название",
     "Cards": "Cards",

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

@@ -21,13 +21,13 @@
   import type { Ref, WithLookup } from '@anticrm/core'
   import notification from '@anticrm/notification'
   import { getClient, UserBoxList } from '@anticrm/presentation'
-  import { Button, Component, EditBox, IconEdit, Label, showPanel, showPopup } from '@anticrm/ui'
+  import { Button, Component, EditBox, IconEdit, Label, showPopup } from '@anticrm/ui'
   import board from '../plugin'
-  import { hasDate, updateCard } from '../utils/CardUtils'
-  import { getElementPopupAlignment } from '../utils/PopupUtils'
   import CardInlineActions from './editor/CardInlineActions.svelte'
   import CardLabels from './editor/CardLabels.svelte'
   import DatePresenter from './presenters/DatePresenter.svelte'
+  import { hasDate, openCardPanel, updateCard } from '../utils/CardUtils'
+  import { getElementPopupAlignment } from '../utils/PopupUtils'
 
   export let object: WithLookup<Card>
 
@@ -53,7 +53,7 @@
   }
 
   function showCard () {
-    showPanel(board.component.EditCard, object._id, object._class, 'middle')
+    openCardPanel(object)
   }
 
   function canDropAttachment (e: DragEvent): boolean {

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

@@ -17,14 +17,23 @@
   import { getResource } from '@anticrm/platform'
   import { getClient } from '@anticrm/presentation'
   import { Button, Component } from '@anticrm/ui'
+  import { createEventDispatcher } from 'svelte'
 
+  import board from '../../plugin'
   import { cardActionSorter, getCardActions } from '../../utils/CardActionUtils'
+  import { openCardPanel } from '../../utils/CardUtils';
 
   export let value: Card
   const client = getClient()
+  const dispatch = createEventDispatcher()
 
   let actions: CardAction[] = []
 
+  function openCard () {
+    openCardPanel(value)
+    dispatch('close')
+  }
+
   async function fetch () {
     actions = []
     const result = await getCardActions(client, { isInline: true })
@@ -46,6 +55,7 @@
 
 {#if value && !value.isArchived}
   <div class="flex-col flex-gap-1">
+    <Button icon={board.icon.Card} label={board.string.OpenCard} kind="no-border" justify="left" on:click={openCard} />
     {#each actions as action}
       {#if action.component}
         <Component is={action.component} props={{ object: value, isInline: true }}>

plugins/board-resources/src/index.ts

@@ -13,32 +13,31 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 //
-
-import board from './plugin'
-import { UsersPopup } from '@anticrm/presentation'
-import { Ref } from '@anticrm/core'
+import type { Card } from '@anticrm/board'
 import contact, { Employee } from '@anticrm/contact'
-import { showPopup } from '@anticrm/ui'
-import { Card } from '@anticrm/board'
-import type { TxOperations as Client } from '@anticrm/core'
+import type { TxOperations as Client, Ref } from '@anticrm/core'
 import { Resources } from '@anticrm/platform'
-import CardPresenter from './components/CardPresenter.svelte'
+import { UsersPopup } from '@anticrm/presentation'
+import { showPopup } from '@anticrm/ui'
+
 import BoardPresenter from './components/BoardPresenter.svelte'
+import CardPresenter from './components/CardPresenter.svelte'
 import CreateBoard from './components/CreateBoard.svelte'
 import CreateCard from './components/CreateCard.svelte'
 import EditCard from './components/EditCard.svelte'
 import KanbanCard from './components/KanbanCard.svelte'
-import TemplatesIcon from './components/TemplatesIcon.svelte'
 import KanbanView from './components/KanbanView.svelte'
 import AttachmentPicker from './components/popups/AttachmentPicker.svelte'
 import CardLabelsPopup from './components/popups/CardLabelsPopup.svelte'
 import MoveCard from './components/popups/MoveCard.svelte'
 import DeleteCard from './components/popups/RemoveCard.svelte'
 import DateRangePicker from './components/popups/DateRangePicker.svelte'
-import CardLabelPresenter from './components/presenters/LabelPresenter.svelte'
 import CardDatePresenter from './components/presenters/DatePresenter.svelte'
+import CardLabelPresenter from './components/presenters/LabelPresenter.svelte'
+import TemplatesIcon from './components/TemplatesIcon.svelte'
 import WatchCard from './components/WatchCard.svelte'
 import BoardHeader from './components/BoardHeader.svelte'
+import board from './plugin'
 import {
   addCurrentUser,
   canAddCurrentUser,
@@ -76,7 +75,7 @@ async function showEditMembersPopup (object: Card, client: Client, e?: Event): P
       placeholder: board.string.SearchMembers
     },
     getPopupAlignment(e),
-    () => {},
+    undefined,
     (result: Array<Ref<Employee>>) => {
       client.update(object, { members: result })
     }

plugins/board-resources/src/plugin.ts

@@ -24,6 +24,7 @@ export default mergeIds(boardId, board, {
     MakePrivate: '' as IntlString,
     MakePrivateDescription: '' as IntlString,
     CreateBoard: '' as IntlString,
+    OpenCard: '' as IntlString,
     CardName: '' as IntlString,
     More: '' as IntlString,
     SelectBoard: '' as IntlString,

plugins/board-resources/src/utils/BoardUtils.ts

@@ -1,5 +1,5 @@
-import core, { Ref, TxOperations } from '@anticrm/core'
 import board, { Board, CardLabel } from '@anticrm/board'
+import core, { Ref, TxOperations } from '@anticrm/core'
 import type { KanbanTemplate } from '@anticrm/task'
 import { createKanban } from '@anticrm/task'
 import {

plugins/board-resources/src/utils/CardActionUtils.ts

@@ -1,9 +1,10 @@
 import { CardAction } from '@anticrm/board'
 import { Client, DocumentQuery } from '@anticrm/core'
+
 import board from '../plugin'
 
-export const cardActionSorter = (a1: CardAction, a2: CardAction) => a1.position - a2.position
+export const cardActionSorter = (a1: CardAction, a2: CardAction): number => a1.position - a2.position
 
-export const getCardActions = (client: Client, query?: DocumentQuery<CardAction>) => {
+export const getCardActions = (client: Client, query?: DocumentQuery<CardAction>): Promise<CardAction[]> => {
   return client.findAll(board.class.CardAction, query ?? {})
 }

plugins/board-resources/src/utils/CardUtils.ts

@@ -1,16 +1,28 @@
 import { Card } from '@anticrm/board'
 import { EmployeeAccount } from '@anticrm/contact'
-import { TxOperations as Client, getCurrentAccount } from '@anticrm/core'
+import { TxOperations as Client, TxResult, getCurrentAccount } from '@anticrm/core'
+import { showPanel } from '@anticrm/ui'
 
-export function updateCard (client: Client, card: Card, field: string, value: any): void {
+import board from '../plugin'
+
+export function updateCard (client: Client, card: Card, field: string, value: any): Promise<TxResult> | undefined {
   if (!card) {
     return
   }
-  client.update(card, { [field]: value })
+  return client.update(card, { [field]: value })
 }
 
-export function deleteCard (card: Card, client: Client): void {
-  client.remove(card)
+export function openCardPanel (card: Card): boolean {
+  if (!card) {
+    return false
+  }
+
+  showPanel(board.component.EditCard, card._id, card._class, 'middle')
+  return true
+}
+
+export function deleteCard (card: Card, client: Client): Promise<TxResult> {
+  return client.remove(card)
 }
 
 export function isArchived (card: Card): boolean {
@@ -38,20 +50,20 @@ export function hasDate (card: Card): boolean {
   return !!card.date && (!!card.date.dueDate || !!card.date.startDate)
 }
 
-export function addCurrentUser (card: Card, client: Client): void {
+export function addCurrentUser (card: Card, client: Client): Promise<TxResult> | undefined {
   const employee = (getCurrentAccount() as EmployeeAccount).employee
 
   if (card.members?.includes(employee)) {
     return
   }
 
-  client.update(card, { $push: { members: employee } })
+  return client.update(card, { $push: { members: employee } })
 }
 
-export function archiveCard (card: Card, client: Client): void {
-  updateCard(client, card, 'isArchived', true)
+export function archiveCard (card: Card, client: Client): Promise<TxResult> | undefined {
+  return updateCard(client, card, 'isArchived', true)
 }
 
-export function unarchiveCard (card: Card, client: Client): void {
-  updateCard(client, card, 'isArchived', false)
+export function unarchiveCard (card: Card, client: Client): Promise<TxResult> | undefined {
+  return updateCard(client, card, 'isArchived', false)
 }