platform/plugins/tracker-resources/src/components/issues/KanbanView.svelte

<!--
// Copyright © 2022 Hardcore Engineering Inc.
// 
// Licensed under the Eclipse Public License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License. You may
// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
// 
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// 
// See the License for the specific language governing permissions and
// limitations under the License.
-->
<script lang="ts">
  import contact from '@anticrm/contact'
  import { Class, Doc, FindOptions, Ref, WithLookup } from '@anticrm/core'
  import { Kanban } from '@anticrm/kanban'
  import { getClient } from '@anticrm/presentation'
  import { Issue, IssuesGrouping, Team, ViewOptions } from '@anticrm/tracker'
  import { Button, Icon, IconAdd, showPopup, Tooltip } from '@anticrm/ui'
  import { focusStore, ListSelectionProvider, SelectDirection, selectionStore } from '@anticrm/view-resources'
  import ActionContext from '@anticrm/view-resources/src/components/ActionContext.svelte'
  import Menu from '@anticrm/view-resources/src/components/Menu.svelte'
  import { onMount } from 'svelte'
  import tracker from '../../plugin'
  import { getKanbanStatuses } from '../../utils'
  import CreateIssue from '../CreateIssue.svelte'
  import AssigneePresenter from './AssigneePresenter.svelte'
  import IssuePresenter from './IssuePresenter.svelte'
  import PriorityEditor from './PriorityEditor.svelte'

  export let currentSpace: Ref<Team>
  export let baseMenuClass: Ref<Class<Doc>> | undefined = undefined
  export let viewOptions: ViewOptions
  export let query = {}

  $: ({ groupBy, shouldShowEmptyGroups, shouldShowSubIssues } = viewOptions)
  $: resultQuery = {
    ...(shouldShowSubIssues ? {} : { attachedTo: tracker.ids.NoParent }),
    space: currentSpace,
    ...query
  }

  const client = getClient()

  function toIssue (object: any): WithLookup<Issue> {
    return object as WithLookup<Issue>
  }

  const options: FindOptions<Issue> = {
    lookup: {
      assignee: contact.class.Employee,
      space: tracker.class.Team
    }
  }

  let kanbanUI: Kanban
  const listProvider = new ListSelectionProvider((offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection) => {
    kanbanUI.select(offset, of, dir)
  })
  onMount(() => {
    ;(document.activeElement as HTMLElement)?.blur()
  })

  const showMenu = async (ev: MouseEvent, items: Doc[]): Promise<void> => {
    ev.preventDefault()
    showPopup(
      Menu,
      { object: items, baseMenuClass },
      {
        getBoundingClientRect: () => DOMRect.fromRect({ width: 1, height: 1, x: ev.clientX, y: ev.clientY })
      },
      () => {
        // selection = undefined
      }
    )
  }
</script>

{#await getKanbanStatuses(client, groupBy, resultQuery, shouldShowEmptyGroups) then states}
  <ActionContext
    context={{
      mode: 'browser'
    }}
  />
  <Kanban
    bind:this={kanbanUI}
    _class={tracker.class.Issue}
    space={currentSpace}
    search=""
    {states}
    {options}
    query={resultQuery}
    fieldName={groupBy}
    rankFieldName={'rank'}
    on:content={(evt) => {
      listProvider.update(evt.detail)
    }}
    on:obj-focus={(evt) => {
      listProvider.updateFocus(evt.detail)
    }}
    selection={listProvider.current($focusStore)}
    checked={$selectionStore ?? []}
    on:check={(evt) => {
      listProvider.updateSelection(evt.detail.docs, evt.detail.value)
    }}
    on:contextmenu={(evt) => showMenu(evt.detail.evt, evt.detail.objects)}
  >
    <svelte:fragment slot="header" let:state let:count>
      <div class="header flex-col">
        <div class="flex-between label font-medium w-full h-full">
          <div class="flex-row-center gap-2">
            <Icon icon={state.icon} size={'small'} />
            <span class="lines-limit-2 ml-2">{state.title}</span>
            <span class="counter ml-2 text-md">{count}</span>
          </div>
          {#if groupBy === IssuesGrouping.Status}
            <div class="flex gap-1">
              <Tooltip label={tracker.string.AddIssueTooltip} direction={'left'}>
                <Button
                  icon={IconAdd}
                  kind={'transparent'}
                  on:click={() => {
                    showPopup(CreateIssue, { space: currentSpace, status: state._id }, 'top')
                  }}
                />
              </Tooltip>
            </div>
          {/if}
        </div>
      </div>
    </svelte:fragment>
    <svelte:fragment slot="card" let:object>
      {@const issue = toIssue(object)}
      <div class="tracker-card">
        <div class="flex-col mr-6">
          <IssuePresenter value={issue} />
          <span class="fs-bold caption-color mt-1 lines-limit-2">
            {object.title}
          </span>
        </div>
        <div class="abs-rt-content">
          <AssigneePresenter
            value={issue?.$lookup?.assignee}
            issueId={issue._id}
            {currentSpace}
            isEditable={true}
            defaultClass={contact.class.Employee}
          />
        </div>
        <div class="buttons-group xsmall-gap mt-10px">
          <PriorityEditor
            value={issue}
            isEditable={true}
            kind={'link-bordered'}
            size={'inline'}
            justify={'center'}
            width={''}
          />
        </div>
      </div>
    </svelte:fragment>
  </Kanban>
{/await}

<style lang="scss">
  .header {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--divider-color);

    .label {
      color: var(--caption-color);
      .counter {
        color: rgba(var(--caption-color), 0.8);
      }
    }
  }
  .tracker-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.5rem 1rem;
    min-height: 6.5rem;
  }
</style>