Customize board header (#1492)

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

models/board/src/index.ts

@@ -131,6 +131,9 @@ export function createModel (builder: Builder): void {
       // createItemLabel: board.string.CardCreateLabel
     }
   })
+  builder.mixin(board.class.Board, core.class.Class, view.mixin.SpaceHeader, {
+    header: board.component.BoardHeader
+  })
 
   builder.createDoc(
     workbench.class.Application,
@@ -435,7 +438,7 @@ export function createModel (builder: Builder): void {
     {
       icon: board.icon.Card,
       isInline: true,
-      label: board.string.Archive,
+      label: board.string.ToArchive,
       position: 140,
       type: board.cardActionType.Action,
       handler: board.cardActionHandler.Archive,

plugins/board-assets/lang/en.json

@@ -87,6 +87,9 @@
     "Edit": "Edit",
     "Update": "Update",
     "DeleteAttachment": "Deleting an attachment is permanent. There is no undo.",
-    "SearchMembers": "Search members"
+    "DeleteCard": "All actions will be removed from the activity feed and you won’t be able to re-open the card. There is no undo.",
+    "SearchMembers": "Search members",
+    "Menu": "Menu",
+    "ToArchive": "Archive"
   }
 }

plugins/board-assets/lang/ru.json

@@ -55,7 +55,7 @@
     "MakeTemplate": "Шаблон",
     "Watch": "Отслеживать",
     "Unwatch": "Не отслеживать",
-    "Archive": "Архивировать",
+    "Archive": "Архив",
     "SendToBoard": "Вернуть",
     "Delete": "Удалить",
     "HideDetails": "Спрятать",
@@ -87,6 +87,9 @@
     "Edit": "Изменить",
     "Update": "Обновить",
     "DeleteAttachment": "Удаление вложения необратимо. Отмена невозможна.",
-    "SearchMembers": "Поиск участников"
+    "DeleteCard": "Все действия будут удалены из ленты, и вы не сможете повторно открыть карточку. Отмена невозможна.",
+    "SearchMembers": "Поиск участников",
+    "Menu": "Меню",
+    "ToArchive": "Архивировать"
   }
 }

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

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import core, { Ref, Space } from "@anticrm/core";
+    import { Button, showPopup } from "@anticrm/ui";
+    import { createQuery, getClient } from "@anticrm/presentation";
+    import { Header, classIcon } from '@anticrm/chunter-resources'
+    import Menu from './popups/Menu.svelte'
+    import { getPopupAlignment } from "../utils/PopupUtils";
+    import border from '../plugin'
+
+    export let spaceId: Ref<Space> | undefined
+
+    let space: Space
+    const query = createQuery()
+    $: query.query(core.class.Space, { _id: spaceId }, result => { space = result[0] })
+
+    const client = getClient()
+</script>
+
+<div class="ac-header divide full">
+    {#if space}
+        <Header icon={classIcon(client, space._class)} label={space.name} description={space.description}/>
+        <Button label={border.string.Menu} on:click={(e) => { showPopup(Menu, {}, getPopupAlignment(e))}}/>
+    {/if}
+</div>

plugins/board-resources/src/components/popups/Menu.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte'
+    import { Label, Button, ActionIcon, IconClose, Icon } from '@anticrm/ui'
+    import { createQuery, getClient } from '@anticrm/presentation'
+    import { Card } from '@anticrm/board'
+    import board from '../../plugin'
+    import KanbanCard from '../KanbanCard.svelte'
+    import { SortingOrder } from '@anticrm/core'
+    import { getResource } from '@anticrm/platform'
+
+    let archivedCards: Card[]
+    const client = getClient()
+    const dispatch = createEventDispatcher()
+    const cardQuery = createQuery()
+    $: cardQuery.query(board.class.Card, {isArchived: true},
+        result => { archivedCards = result },
+        { sort: { rank: SortingOrder.Descending } }
+    )
+</script>
+
+<div class="antiPopup antiPopup-withHeader antiPopup-withCategory w-60">
+    <div class="ap-space"/>
+    <div class="flex-row-center header">
+        <div class="flex-center flex-grow">
+            <Label label={board.string.Archive}/>
+        </div>
+        <div class="close-icon mr-1">
+            <ActionIcon icon={IconClose} size={'small'} action={() => { dispatch('close') }} />
+        </div>
+    </div>
+    <div class="ap-space bottom-divider"/>
+    {#if archivedCards}
+        {#each archivedCards as card}
+            <KanbanCard object={card} dragged={false}/>
+            <div class="flex-center flex-gap-2 w-full">
+                <Button label={board.string.SendToBoard}
+                    on:click={async (e) => {
+                        const deleteAction = await getResource(board.cardActionHandler.SendToBoard)
+                        deleteAction(card, client, e)
+                    }}/>
+                <Button label={board.string.Delete}
+                    on:click={async (e) => {
+                        const deleteAction = await getResource(board.cardActionHandler.Delete)
+                        deleteAction(card, client, e)
+                    }}/>
+            </div>
+        {/each}
+    {/if}
+    <div class="ap-space"/>
+</div>

plugins/board-resources/src/components/popups/RemoveCard.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte'
+  import { Label, Button, ActionIcon, IconClose } from '@anticrm/ui'
+  import board from '../../plugin'
+  import { getClient } from '@anticrm/presentation'
+  import { Card } from '@anticrm/board';
+
+  export let object: Card
+
+  const client = getClient()
+  const dispatch = createEventDispatcher()
+</script>
+
+<div class="antiPopup antiPopup-withHeader antiPopup-withTitle antiPopup-withCategory w-85">
+  <div class="ap-space"/>
+  <div class="flex-row-center header">
+    <div class="flex-center flex-grow">
+      <Label label={board.string.Delete} />
+    </div>
+    <div class="close-icon mr-1">
+      <ActionIcon icon={IconClose} size={'small'} action={() => { dispatch('close') }} />
+    </div>
+  </div>
+  <div class="ap-space bottom-divider"/>
+  <div class="ap-box ml-4 mr-4 mt-4">
+    <Label label={board.string.DeleteCard}/>
+  </div>
+  <div class="ap-footer">
+    <Button
+      size={'small'}
+      width="100%"
+      label={board.string.Delete}
+      kind={'dangerous'}
+      on:click={() => {
+        client.remove(object)
+        dispatch('close')
+      }}
+    />
+  </div>
+</div>

plugins/board-resources/src/index.ts

@@ -32,24 +32,29 @@ 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 MoveView from './components/popups/MoveCard.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 WatchCard from './components/WatchCard.svelte'
+import BoardHeader from './components/BoardHeader.svelte'
 import {
   addCurrentUser,
   canAddCurrentUser,
   isArchived,
   isUnarchived,
   archiveCard,
-  unarchiveCard,
+  unarchiveCard
-  deleteCard
 } from './utils/CardUtils'
 import { getPopupAlignment } from './utils/PopupUtils'
 
 async function showMoveCardPopup (object: Card, client: Client, e?: Event): Promise<void> {
-  showPopup(MoveView, { object }, getPopupAlignment(e))
+  showPopup(MoveCard, { object }, getPopupAlignment(e))
+}
+
+async function showDeleteCardPopup (object: Card, client: Client, e?: Event): Promise<void> {
+  showPopup(DeleteCard, { object }, getPopupAlignment(e))
 }
 
 async function showDatePickerPopup (object: Card, client: Client, e?: Event): Promise<void> {
@@ -94,7 +99,8 @@ export default async (): Promise<Resources> => ({
     TemplatesIcon,
     KanbanView,
     BoardPresenter,
-    WatchCard
+    WatchCard,
+    BoardHeader
   },
   cardActionHandler: {
     Join: addCurrentUser,
@@ -104,7 +110,7 @@ export default async (): Promise<Resources> => ({
     Attachments: showAttachmentsPopup,
     Archive: archiveCard,
     SendToBoard: unarchiveCard,
-    Delete: deleteCard,
+    Delete: showDeleteCardPopup,
     Members: showEditMembersPopup
   },
   cardActionSupportedHandler: {

plugins/board-resources/src/plugin.ts

@@ -108,12 +108,16 @@ export default mergeIds(boardId, board, {
     Edit: '' as IntlString,
     Update: '' as IntlString,
     DeleteAttachment: '' as IntlString,
-    SearchMembers: '' as IntlString
+    SearchMembers: '' as IntlString,
+    DeleteCard: '' as IntlString,
+    Menu: '' as IntlString,
+    ToArchive: '' as IntlString
   },
   component: {
     Boards: '' as AnyComponent,
     EditCard: '' as AnyComponent,
     Members: '' as AnyComponent,
-    Settings: '' as AnyComponent
+    Settings: '' as AnyComponent,
+    BoardHeader: '' as AnyComponent
   }
 })

plugins/chunter-resources/src/index.ts

@@ -40,6 +40,8 @@ import preference from '@anticrm/preference'
 
 import { getDmName } from './utils'
 
+export { default as Header } from './components/Header.svelte'
+export { classIcon } from './utils'
 export { CommentsPresenter }
 
 async function MarkUnread (object: Message): Promise<void> {