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 '@hcengineering/contact'
  import { employeeByIdStore } from '@hcengineering/contact-resources'
  import {
    CategoryType,
    Class,
    Doc,
    DocumentQuery,
    DocumentUpdate,
    generateId,
    Lookup,
    Ref,
    WithLookup
  } from '@hcengineering/core'
  import { Item, Kanban } from '@hcengineering/kanban'
  import notification from '@hcengineering/notification'
  import { getResource } from '@hcengineering/platform'
  import { createQuery, getClient, statusStore } from '@hcengineering/presentation'
  import tags from '@hcengineering/tags'
  import { Issue, IssuesGrouping, IssuesOrdering, Project } from '@hcengineering/tracker'
  import {
    Button,
    Component,
    getEventPositionElement,
    IconAdd,
    Label,
    Loading,
    showPanel,
    showPopup,
    tooltip,
    deviceOptionsStore as deviceInfo,
    hslToRgb,
    rgbToHsl,
    AccentColor
  } from '@hcengineering/ui'
  import {
    AttributeModel,
    CategoryOption,
    Viewlet,
    ViewOptionModel,
    ViewOptions,
    ViewQueryOption
  } from '@hcengineering/view'
  import {
    ActionContext,
    focusStore,
    getCategories,
    getCategorySpaces,
    getGroupByValues,
    getPresenter,
    groupBy,
    ListSelectionProvider,
    Menu,
    noCategory,
    SelectDirection,
    selectionStore,
    setGroupByValues
  } from '@hcengineering/view-resources'
  import view from '@hcengineering/view-resources/src/plugin'
  import { AttachmentsPresenter } from '@hcengineering/attachment-resources'
  import { CommentsPresenter } from '@hcengineering/chunter-resources'
  import { onMount } from 'svelte'
  import tracker from '../../plugin'
  import ComponentEditor from '../components/ComponentEditor.svelte'
  import CreateIssue from '../CreateIssue.svelte'
  import AssigneePresenter from './AssigneePresenter.svelte'
  import SubIssuesSelector from './edit/SubIssuesSelector.svelte'
  import IssuePresenter from './IssuePresenter.svelte'
  import ParentNamesPresenter from './ParentNamesPresenter.svelte'
  import PriorityEditor from './PriorityEditor.svelte'
  import StatusEditor from './StatusEditor.svelte'
  import EstimationEditor from './timereport/EstimationEditor.svelte'
  import DueDatePresenter from './DueDatePresenter.svelte'

  export let space: Ref<Project> | undefined = undefined
  export let baseMenuClass: Ref<Class<Doc>> | undefined = undefined
  export let query: DocumentQuery<Issue> = {}
  export let viewOptionsConfig: ViewOptionModel[] | undefined
  export let viewOptions: ViewOptions
  export let viewlet: Viewlet

  $: currentSpace = space || tracker.project.DefaultProject
  $: groupByKey = (viewOptions.groupBy[0] ?? noCategory) as IssuesGrouping
  $: orderBy = viewOptions.orderBy
  $: sort = { [orderBy[0]]: orderBy[1] }

  $: lth = $deviceInfo.theme === 'theme-light'
  const accentColors: AccentColor[] = []

  // issuesGroupBySorting[groupByKey]

  $: dontUpdateRank = orderBy[0] !== IssuesOrdering.Manual

  const spaceQuery = createQuery()

  let currentProject: Project | undefined
  $: spaceQuery.query(tracker.class.Project, { _id: currentSpace }, (res) => {
    currentProject = res.shift()
  })

  let resultQuery: DocumentQuery<any> = query
  $: getResultQuery(query, viewOptionsConfig, viewOptions).then((p) => (resultQuery = p))

  const client = getClient()
  const hierarchy = client.getHierarchy()

  async function getResultQuery (
    query: DocumentQuery<Issue>,
    viewOptions: ViewOptionModel[] | undefined,
    viewOptionsStore: ViewOptions
  ): Promise<DocumentQuery<Issue>> {
    if (viewOptions === undefined) return query
    let result = hierarchy.clone(query)
    for (const viewOption of viewOptions) {
      if (viewOption.actionTarget !== 'query') continue
      const queryOption = viewOption as ViewQueryOption
      const f = await getResource(queryOption.action)
      result = f(viewOptionsStore[queryOption.key] ?? queryOption.defaultValue, query)
    }
    return result
  }

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

  const lookup: Lookup<Issue> = {
    space: tracker.class.Project,
    status: tracker.class.IssueStatus,
    component: tracker.class.Component,
    sprint: tracker.class.Sprint,
    _id: {
      subIssues: tracker.class.Issue,
      labels: tags.class.TagReference
    }
  }

  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 }, getEventPositionElement(ev))
  }
  const issuesQuery = createQuery()
  let issues: Issue[] = []

  $: groupByDocs = groupBy(issues, groupByKey, categories)

  $: issuesQuery.query(
    tracker.class.Issue,
    resultQuery,
    (result) => {
      issues = result
    },
    {
      lookup,
      sort
    }
  )

  $: listProvider.update(issues)

  let categories: CategoryType[] = []

  const queryId = generateId()

  $: updateCategories(tracker.class.Issue, issues, groupByKey, viewOptions, viewOptionsConfig)

  function update () {
    updateCategories(tracker.class.Issue, issues, groupByKey, viewOptions, viewOptionsConfig)
  }

  async function updateCategories (
    _class: Ref<Class<Doc>>,
    docs: Doc[],
    groupByKey: string,
    viewOptions: ViewOptions,
    viewOptionsModel: ViewOptionModel[] | undefined
  ) {
    categories = await getCategories(client, _class, docs, groupByKey, $statusStore, viewlet.descriptor)
    categories.forEach((_, i) => {
      if (accentColors[i] === undefined) {
        accentColors[i] = {
          textColor: 'var(--theme-caption-color)',
          backgroundColor: lth ? '230, 230, 230' : '100, 100, 108'
        }
      }
    })
    for (const viewOption of viewOptionsModel ?? []) {
      if (viewOption.actionTarget !== 'category') continue
      const categoryFunc = viewOption as CategoryOption
      if (viewOptions[viewOption.key] ?? viewOption.defaultValue) {
        const categoryAction = await getResource(categoryFunc.action)

        const spaces = getCategorySpaces(categories)
        if (space !== undefined) {
          spaces.push(space)
        }
        const res = await categoryAction(
          _class,
          spaces.length > 0 ? { space: { $in: Array.from(spaces.values()) } } : {},
          groupByKey,
          update,
          queryId,
          $statusStore,
          viewlet.descriptor
        )
        if (res !== undefined) {
          categories = res
          break
        }
      }
    }
  }

  const fullFilled: { [key: string]: boolean } = {}

  function getHeader (_class: Ref<Class<Doc>>, groupByKey: string): void {
    if (groupByKey === noCategory) {
      headerComponent = undefined
    } else {
      getPresenter(client, _class, { key: groupByKey }, { key: groupByKey }).then((p) => (headerComponent = p))
    }
  }

  let headerComponent: AttributeModel | undefined
  $: getHeader(tracker.class.Issue, groupByKey)

  const getUpdateProps = (doc: Doc, category: CategoryType): DocumentUpdate<Item> | undefined => {
    const groupValue =
      typeof category === 'object' ? category.values.find((it) => it.space === doc.space)?._id : category
    if (groupValue === undefined) {
      return undefined
    }
    if ((doc as any)[groupByKey] === groupValue) {
      return
    }
    return {
      [groupByKey]: groupValue,
      space: doc.space
    }
  }

  const setAccentColor = (n: number, ev: CustomEvent) => {
    const accColor = rgbToHsl(ev.detail.r, ev.detail.g, ev.detail.b)
    const textColor = !lth ? { r: 255, g: 255, b: 255 } : hslToRgb(accColor.h, accColor.s, 0.3)
    const bgColor = !lth ? hslToRgb(accColor.h, accColor.s, 0.55) : hslToRgb(accColor.h, accColor.s, 0.9)
    accentColors[n] = {
      textColor: !lth ? 'var(--theme-caption-color)' : `rgb(${textColor.r}, ${textColor.g}, ${textColor.b})`,
      backgroundColor: `${bgColor.r}, ${bgColor.g}, ${bgColor.b}`
    }
  }
</script>

{#if categories.length === 0}
  <Loading />
{:else}
  <ActionContext
    context={{
      mode: 'browser'
    }}
  />
  <!-- svelte-ignore a11y-click-events-have-key-events -->
  <Kanban
    bind:this={kanbanUI}
    {categories}
    {dontUpdateRank}
    objects={issues}
    getGroupByValues={(groupByDocs, category) =>
      groupByKey === noCategory ? issues : getGroupByValues(groupByDocs, category)}
    {setGroupByValues}
    {getUpdateProps}
    {groupByDocs}
    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 let:index>
      <!-- {@const status = $statusStore.get(state._id)} -->
      {#key lth}
        <div
          style:--kanban-header-rgb-color={accentColors[index]?.backgroundColor}
          class="header flex-between"
          class:gradient={!lth}
        >
          <div class="flex-row-center gap-1">
            <span
              class="clear-mins fs-bold overflow-label pointer-events-none"
              style:color={accentColors[index]?.textColor}
            >
              {#if groupByKey === noCategory}
                <Label label={view.string.NoGrouping} />
              {:else if headerComponent}
                <svelte:component
                  this={headerComponent.presenter}
                  value={state}
                  {space}
                  size={'small'}
                  kind={'list-header'}
                  colorInherit={lth}
                  accent
                  on:accent-color={(ev) => setAccentColor(index, ev)}
                />
              {/if}
            </span>
            <span class="counter">
              {count}
            </span>
          </div>
          <div class="tools gap-1">
            <Button
              icon={IconAdd}
              kind={'transparent'}
              showTooltip={{ label: tracker.string.AddIssueTooltip, direction: 'left' }}
              on:click={() => {
                showPopup(CreateIssue, { space: currentSpace, [groupByKey]: state._id }, 'top')
              }}
            />
          </div>
        </div>
      {/key}
    </svelte:fragment>
    <svelte:fragment slot="card" let:object>
      {@const issue = toIssue(object)}
      {@const issueId = object._id}
      {@const reports =
        issue.reportedTime + (issue.childInfo ?? []).map((it) => it.reportedTime).reduce((a, b) => a + b, 0)}
      {@const estimations = (issue.childInfo ?? []).map((it) => it.estimation).reduce((a, b) => a + b, 0)}
      {#key issueId}
        <div
          class="tracker-card"
          on:click={() => {
            showPanel(tracker.component.EditIssue, object._id, object._class, 'content')
          }}
        >
          <div class="card-header flex-between">
            <div class="flex-row-center text-sm">
              <!-- {#if groupByKey !== 'status'} -->
              <div class="mr-1">
                <StatusEditor value={issue} kind="list" isEditable={false} />
              </div>
              <!-- {/if} -->
              <IssuePresenter value={issue} />
              <ParentNamesPresenter value={issue} />
            </div>
            <div class="flex-row-center gap-2 reverse flex-no-shrink">
              <Component is={notification.component.NotificationPresenter} props={{ value: object }} />
              <AssigneePresenter
                value={issue.assignee ? $employeeByIdStore.get(issue.assignee) : null}
                defaultClass={contact.class.Employee}
                object={issue}
                isEditable={true}
                avatarSize={'card'}
              />
            </div>
          </div>
          <div class="card-content text-md caption-color lines-limit-2">
            {object.title}
          </div>
          <div class="card-labels">
            {#if issue && issue.subIssues > 0}
              <SubIssuesSelector value={issue} {currentProject} size={'small'} />
            {/if}
            <PriorityEditor value={issue} isEditable={true} kind={'link-bordered'} size={'small'} justify={'center'} />
            <ComponentEditor
              value={issue}
              isEditable={true}
              kind={'link-bordered'}
              size={'small'}
              justify={'center'}
              width={''}
              bind:onlyIcon={fullFilled[issueId]}
            />
            <DueDatePresenter value={issue} size={'small'} kind={'link-bordered'} />
          </div>
          <div
            class="card-labels labels"
            use:tooltip={{
              component: fullFilled[issueId] ? tags.component.LabelsPresenter : undefined,
              props: { object: issue, kind: 'full' }
            }}
          >
            <Component
              is={tags.component.LabelsPresenter}
              props={{ object: issue, ckeckFilled: fullFilled[issueId], lookupField: 'labels', kind: 'kanban' }}
              on:change={(res) => {
                if (res.detail.full) fullFilled[issueId] = true
              }}
            />
          </div>
          {#if reports > 0 || estimations > 0 || (object.comments ?? 0) > 0 || (object.$lookup?.attachedTo !== undefined && (object.$lookup.attachedTo.comments ?? 0) > 0)}
            <div class="card-footer flex-between">
              <EstimationEditor kind={'list'} size={'small'} value={issue} />
              <!-- {@debug issue} -->
              <div class="flex-row-center gap-3 reverse">
                {#if (object.attachments ?? 0) > 0}
                  <AttachmentsPresenter value={object.attachments} {object} />
                {/if}
                {#if (object.comments ?? 0) > 0}
                  <CommentsPresenter value={object.comments} {object} />
                {/if}
                {#if object.$lookup?.attachedTo !== undefined && (object.$lookup.attachedTo.comments ?? 0) > 0}
                  <CommentsPresenter value={object.$lookup?.attachedTo?.comments} object={object.$lookup?.attachedTo} />
                {/if}
              </div>
            </div>
          {:else}
            <div class="min-h-4 max-h-4 h-4" />
          {/if}
        </div>
      {/key}
    </svelte:fragment>
  </Kanban>
{/if}

<style lang="scss">
  .header {
    margin: 0 0.75rem 0.5rem;
    padding: 0 0.5rem 0 1.25rem;
    height: 2.5rem;
    min-height: 2.5rem;
    border: 1px solid var(--theme-divider-color);
    border-radius: 0.25rem;

    &:not(.gradient) {
      background: rgba(var(--kanban-header-rgb-color), 1);
    }
    &.gradient {
      background: linear-gradient(
        90deg,
        rgba(var(--kanban-header-rgb-color), 0.15),
        rgba(var(--kanban-header-rgb-color), 0.05)
      );
    }

    .counter {
      color: var(--theme-dark-color);
    }
    .tools {
      opacity: 0;
    }
    &:hover .tools {
      opacity: 1;
    }
  }
  .tracker-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 6.5rem;
    border-radius: 0.25rem;

    .card-header {
      padding: 0.75rem 1rem 0;
    }
    .card-content {
      margin: 0.5rem 1rem;
    }
    /* Global styles in components.scss */
    .card-labels {
      display: flex;
      flex-wrap: nowrap;
      margin: 0 0.75rem 0 1rem;
      min-width: 0;

      &.labels {
        overflow: hidden;
        margin: 0 1rem;
        width: calc(100% - 2rem);
        border-radius: 0 0.24rem 0.24rem 0;
      }
    }
    .card-footer {
      margin-top: 1rem;
      padding: 0.75rem 1rem;
      background-color: var(--theme-kanban-card-footer);
      border-radius: 0 0 0.25rem 0.25rem;
    }
  }
</style>