Tracker Issue tracking system (#1243)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>
2026-09-29 21:15:06 +02:00 · 2022-03-31 15:32:42 +07:00
parent 944cfafcba
commit 8cd1797696
87 changed files with 2382 additions and 175 deletions
@@ -0,0 +1,112 @@
+<!--
+// Copyright © 2020 Anticrm Platform Contributors.
+// 
+// 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, { Employee, EmployeeAccount, formatName } from '@anticrm/contact'
+  import { getCurrentAccount } from '@anticrm/core'
+  import login from '@anticrm/login'
+  import { Avatar, createQuery } from '@anticrm/presentation'
+  import setting, { SettingsCategory } from '@anticrm/setting'
+  import { closePopup, getCurrentLocation, Icon, Label, navigate, setMetadataLocalStorage } from '@anticrm/ui'
+
+  // const client = getClient()
+  async function getItems (): Promise<SettingsCategory[]> {
+    return []
+  }
+
+  const account = getCurrentAccount() as EmployeeAccount
+  let employee: Employee | undefined
+  const employeeQ = createQuery()
+
+  employeeQ.query(contact.class.Employee, {
+    _id: account.employee
+  }, (res) => {
+    employee = res[0]
+  }, { limit: 1 })
+
+
+  function selectCategory (sp: SettingsCategory): void {
+    closePopup()
+    const loc = getCurrentLocation()
+    loc.path[1] = setting.ids.SettingApp
+    loc.path[2] = sp.name
+    loc.path.length = 3
+    navigate(loc)
+  }
+
+  function signOut (): void {
+    setMetadataLocalStorage(login.metadata.LoginToken, null)
+    setMetadataLocalStorage(login.metadata.LoginEndpoint, null)
+    setMetadataLocalStorage(login.metadata.LoginEmail, null)
+    setMetadataLocalStorage(login.metadata.CurrentWorkspace, null)
+    navigate({ path: [login.component.LoginApp] })
+  }
+
+  function selectWorkspace (): void {
+    navigate({ path: [login.component.LoginApp, 'selectWorkspace'] })
+  }
+
+  function filterItems (items: SettingsCategory[]): SettingsCategory[] {
+    return items?.filter((p) => p.name !== 'profile' && p.name !== 'password')
+  }
+
+  function editProfile (items: SettingsCategory[] | undefined): void {
+    const profile = items?.find((p) => p.name === 'profile')
+    if (profile === undefined) return
+    selectCategory(profile)
+  }
+</script>
+
+<div class="antiPopup">
+  <div class="ap-space" />
+  <div class="ap-scroll"><div class="ap-box">
+    {#await getItems() then items}
+      <div class="ap-menuItem flex-row-center" on:click={() => { editProfile(items) }}>
+        {#if employee}
+          <Avatar avatar={employee.avatar} size={'medium'} />
+        {/if}
+        <div class="ml-2 flex-col">
+          {#if account}
+            <div class="overflow-label fs-bold caption-color">{formatName(account.name)}</div>
+            <div class="overflow-label text-sm content-dark-color">{account.email}</div>
+          {/if}
+        </div>
+      </div>
+      {#if items}
+        {#each filterItems(items) as item }
+          <button class="ap-menuItem" on:click={() => selectCategory(item)}>
+            <div class='mr-2'>
+              <Icon icon={item.icon} size={'small'}/>
+            </div>
+            <Label label={item.label} />
+          </button>
+        {/each}
+      {/if}
+      <button class="ap-menuItem" on:click={selectWorkspace}>
+        <div class='mr-2'>
+          <Icon icon={setting.icon.SelectWorkspace} size={'small'}/>
+        </div>
+        <Label label={setting.string.SelectWorkspace} />
+      </button>
+      <button class="ap-menuItem" on:click={signOut}>
+        <div class='mr-2'>
+          <Icon icon={setting.icon.Signout} size={'small'}/>
+        </div>
+        <Label label={setting.string.Signout} />
+      </button>
+    {/await}
+  </div></div>
+  <div class="ap-space" />
+</div>
@@ -0,0 +1,80 @@
+<!--
+// Copyright © 2020 Anticrm Platform Contributors.
+// 
+// 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 type { IntlString, Asset } from '@anticrm/platform'
+  import type { AnySvelteComponent } from '@anticrm/ui'
+  import { Icon, Tooltip } from '@anticrm/ui'
+
+  export let label: IntlString
+  export let icon: Asset | AnySvelteComponent
+  export let action: () => Promise<void>
+  export let selected: boolean
+  export let notify: boolean
+</script>
+
+<Tooltip {label}>
+  <button class="app" id={'app-' + label} class:selected={selected} on:click|stopPropagation={action}>
+    <div class="flex-center icon-container" class:noty={notify}>
+      <Icon icon={icon} size={'large'}/>
+    </div>
+    {#if notify}<div class="marker"/>{/if}
+  </button>
+</Tooltip>
+
+<style lang="scss">
+  .app {
+    position: relative;
+    padding: 0;
+    width: 3.25rem;
+    height: 3.25rem;
+    background-color: transparent;
+    border: 1px solid transparent;
+    border-radius: .5rem;
+    cursor: pointer;
+    outline: none;
+
+    .icon-container {
+      width: 3.25rem;
+      height: 3.25rem;
+      color: var(--theme-content-trans-color);
+
+      .normal-font &.noty { clip-path: url(#notify-normal); }
+      .small-font &.noty { clip-path: url(#notify-small); }
+    }
+
+    &:hover .icon-container { color: var(--theme-caption-color); }
+    &:focus {
+      border: 1px solid var(--primary-button-focused-border);
+      box-shadow: 0 0 0 3px var(--primary-button-outline);
+      .icon-container { color: var(--theme-caption-color); }
+    }
+
+    &.selected {
+      background-color: var(--theme-menu-selection);
+      .icon-container { color: var(--theme-caption-color); }
+    }
+  }
+
+  .marker {
+    position: absolute;
+    top: .75rem;
+    right: .75rem;
+    width: .5rem;
+    height: .5rem;
+    border-radius: 50%;
+    background-color: var(--highlight-red);
+  }
+</style>
@@ -0,0 +1,63 @@
+<!--
+// Copyright © 2020, 2021 Anticrm Platform Contributors.
+// Copyright © 2021 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 type { IntlString } from '@anticrm/platform'
+
+  import { createEventDispatcher } from 'svelte'
+  import type { Ref, Class, Space, DocumentQuery } from '@anticrm/core'
+
+  import { Button, Label } from '@anticrm/ui'
+  import SpaceSelect from './SpaceSelect.svelte'
+  import presentation from '@anticrm/presentation'
+
+  export let spaceClass: Ref<Class<Space>> | undefined = undefined
+  export let space: Ref<Space> | undefined = undefined
+  export let spaceQuery: DocumentQuery<Space> | undefined = { archived: false }
+  export let spaceLabel: IntlString | undefined = undefined
+  export let spacePlaceholder: IntlString | undefined = undefined
+  export let label: IntlString
+  export let labelProps: any | undefined = undefined
+  export let okAction: () => void
+  export let canSave: boolean = false
+
+  export let okLabel: IntlString = presentation.string.Create
+  export let cancelLabel: IntlString = presentation.string.Cancel
+
+  const dispatch = createEventDispatcher()
+</script>
+
+<form class="antiCard w-165"  on:submit|preventDefault={ () => {} }>
+  <div class="antiCard-header">
+    <div class="antiCard-header__title"><Label {label} params={labelProps ?? {}} /></div>
+    {#if $$slots.error}
+      <div class="antiCard-header__error">
+        <slot name="error" />
+      </div>
+    {/if}
+  </div>
+  <div class="antiCard-content"><slot /></div>
+  {#if spaceClass && spaceLabel && spacePlaceholder}
+    <div class="antiCard-pool">
+      <div class="antiCard-pool__separator" />
+      <SpaceSelect _class={spaceClass} spaceQuery={spaceQuery} label={spaceLabel} placeholder={spacePlaceholder} bind:value={space} />
+    </div>
+  {/if}
+  <div class="antiCard-footer">
+    <Button disabled={!canSave} label={okLabel} size={'small'} transparent primary on:click={() => { okAction(); dispatch('close') }} />
+    <Button label={cancelLabel} size={'small'} transparent on:click={() => { dispatch('close') }} />
+  </div>
+</form>
@@ -0,0 +1,121 @@
+<!--
+// 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, { Employee } from '@anticrm/contact'
+  import core, { Data, generateId, Ref, SortingOrder } from '@anticrm/core'
+  import { OK, Status } from '@anticrm/platform'
+  import { getClient, UserBox } from '@anticrm/presentation'
+  import { Issue, IssuePriority, IssueStatus, Team } from '@anticrm/tracker'
+  import { StyledTextBox } from '@anticrm/text-editor'
+  import { EditBox, Grid, Status as StatusControl } from '@anticrm/ui'
+  import { createEventDispatcher } from 'svelte'
+  import tracker from '../plugin'
+  import { calcRank } from '../utils'
+import Card from './Card.svelte';
+
+  export let space: Ref<Team>
+  export let parent: Ref<Issue> | undefined
+  
+  $: _space = space
+  $: _parent = parent
+  const status: Status = OK
+
+  let assignee: Ref<Employee> | null = null
+
+  const object: Data<Issue> = {
+    title: '',
+    description: '',
+    assignee: null,
+    number: 0,
+    rank: '',
+    status: IssueStatus.Backlog,
+    priority: IssuePriority.NoPriority,
+    dueDate: null,
+    comments: 0
+  }
+
+  const dispatch = createEventDispatcher()
+  const client = getClient()
+  const taskId: Ref<Issue> = generateId()
+
+  export function canClose (): boolean {
+    return object.title !== ''
+  }
+
+  async function createIssue () {
+    const lastOne = await client.findOne<Issue>(
+      tracker.class.Issue,
+      { status: object.status },
+      { sort: { rank: SortingOrder.Descending } }
+    )
+    const incResult = await client.updateDoc(
+      tracker.class.Team,
+      core.space.Space,
+      _space,
+      {
+        $inc: { sequence: 1 }
+      },
+      true
+    )
+
+    const value: Data<Issue> = {
+      title: object.title,
+      description: object.description,
+      assignee,
+      number: (incResult as any).object.sequence,
+      status: object.status,
+      priority: object.priority,
+      rank: calcRank(lastOne, undefined),
+      parentIssue: _parent,
+      comments: 0,
+      dueDate: object.dueDate
+    }
+
+    await client.createDoc(tracker.class.Issue, _space, value, taskId)
+  }
+</script>
+
+<Card
+  label={tracker.string.NewIssue}
+  okAction={createIssue}
+  canSave={object.title.length > 0 && _space != null}
+  spaceClass={tracker.class.Team}
+  spaceLabel={tracker.string.Team}
+  spacePlaceholder={tracker.string.SelectTeam}
+  bind:space={_space}
+  on:close={() => {
+    dispatch('close')
+  }}
+>
+  <StatusControl slot="error" {status} />
+  <Grid column={1} rowGap={1.5}>
+    <EditBox
+      label={tracker.string.Title}
+      bind:value={object.title}
+      placeholder={tracker.string.IssueTitlePlaceholder}
+      maxWidth={'16rem'}
+      focus
+    />
+    <StyledTextBox alwaysEdit bind:content={object.description} placeholder={tracker.string.IssueDescriptionPlaceholder}/>
+    <UserBox
+      _class={contact.class.Employee}
+      title={tracker.string.Assignee}
+      caption={tracker.string.Assignee}
+      bind:value={assignee}
+      allowDeselect
+      titleDeselect={tracker.string.TaskUnAssign}
+    />
+  </Grid>
+</Card>
@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { Ref, Space } from '@anticrm/core'
+  import ui, { ActionIcon, Button, IconEdit, IconSearch, showPopup } from '@anticrm/ui'
+  import tracker from '../plugin'
+  import CreateIssue from './CreateIssue.svelte'
+  export let currentSpace: Ref<Space>
+
+  async function newIssue(target: EventTarget | null): Promise<void> {
+    showPopup(CreateIssue, { space: currentSpace }, target as HTMLElement)
+  }
+</script>
+
+<div class="flex-between mt-4 mb-4">
+  <div class="flex-grow">
+    <Button
+      icon={IconEdit}
+      label={tracker.string.NewIssue}
+      width={'100%'}
+      size={'small'}
+      on:click={(evt) => newIssue(evt.currentTarget)}
+    />
+  </div>
+  <div class="ml-2">
+    <ActionIcon icon={IconSearch} label={ui.string.Search} action={async () => {}} size={'large'} />
+  </div>
+</div>
@@ -0,0 +1,43 @@
+<!--
+// Copyright © 2020 Anticrm Platform Contributors.
+// 
+// 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 { IconFolder } from '@anticrm/ui'
+
+  import type { Space } from '@anticrm/core'
+
+  export let value: Space
+  export let subtitle: string | undefined = undefined
+  export let size: 'medium' | 'large'
+</script>
+
+<div class="flex-row-center">
+  <div class="flex-center {size} caption-color flex-no-shrink"><IconFolder size={'small'} /></div>
+  <div class="flex-col ml-2 min-w-0">
+    {#if subtitle}<div class="content-dark-color text-sm">{subtitle}</div>{/if}
+    <div class="content-accent-color overflow-label">{value.name}</div>
+  </div>
+</div>
+
+<style lang="scss">
+  .medium {
+    width: 1.75rem;
+    height: 1.75rem;
+  }
+  .large {
+    width: 2.25rem;
+    height: 2.25rem;
+  }
+</style>
@@ -0,0 +1,79 @@
+<!--
+// Copyright © 2020 Anticrm Platform Contributors.
+// 
+// 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 type { Class, DocumentQuery, Ref, Space } from '@anticrm/core'
+  import type { IntlString } from '@anticrm/platform'
+  import { getClient } from '@anticrm/presentation'
+  import { IconFolder, Label, showPopup } from '@anticrm/ui'
+  import { onMount } from 'svelte'
+  import SpacesPopup from './SpacesPopup.svelte'
+
+  export let _class: Ref<Class<Space>>
+  export let spaceQuery: DocumentQuery<Space> | undefined = { archived: false }
+  export let label: IntlString
+  export let placeholder: IntlString
+  export let value: Ref<Space> | undefined
+  export let show: boolean = false
+
+  let selected: Space | undefined
+  let btn: HTMLElement
+
+  const client = getClient()
+
+  async function updateSelected (value: Ref<Space> | undefined) {
+    selected = value !== undefined ? await client.findOne(_class, { ...(spaceQuery ?? {}), _id: value }) : undefined
+  }
+
+  $: updateSelected(value)
+
+  onMount(() => {
+    if (btn && show) {
+      btn.click()
+      show = false
+    }
+  })
+</script>
+
+<div class="flex-col cursor-pointer"
+  bind:this={btn}
+  on:click|preventDefault={() => {
+    showPopup(SpacesPopup, { _class, spaceQuery }, btn, (result) => {
+      if (result) {
+        value = result._id
+      }
+    })
+  }}
+>
+  <div class="overflow-label label"><Label {label} /></div>
+  <div class="flex-row-center space">
+    <span class="mr-1"><IconFolder size={'small'} /></span>
+    <span class="overflow-label" class:caption-color={selected} class:content-dark-color={!selected}>
+      {#if selected}
+        {selected.name}
+      {:else}
+        <Label label={placeholder} />
+      {/if}
+    </span>
+  </div>
+</div>
+
+<style lang="scss">
+  .label {
+    margin-bottom: .125rem;
+    font-weight: 500;
+    font-size: .75rem;
+    color: var(--theme-content-accent-color);
+  }
+</style>
@@ -0,0 +1,53 @@
+<!--
+// Copyright © 2020 Anticrm Platform Contributors.
+// 
+// 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 { afterUpdate, createEventDispatcher } from 'svelte'
+
+  import ui, { Label, EditWithIcon, IconSearch } from '@anticrm/ui'
+  import SpaceInfo from './SpaceInfo.svelte'
+
+  import type { Ref, Class, Space, DocumentQuery } from '@anticrm/core'
+  import { createQuery } from '@anticrm/presentation'
+
+  export let _class: Ref<Class<Space>>
+  export let spaceQuery: DocumentQuery<Space> | undefined
+
+  let search: string = ''
+  let objects: Space[] = []
+
+  const dispatch = createEventDispatcher()
+  const query = createQuery()
+  $: query.query(_class, { ...(spaceQuery ?? {}), name: { $like: '%' + search + '%' } }, result => { objects = result })
+  afterUpdate(() => { dispatch('update', Date.now()) })
+</script>
+
+<div class="antiPopup antiPopup-withHeader">
+  <div class="ap-space" />
+  <div class="ap-header">
+    <EditWithIcon icon={IconSearch} bind:value={search} placeholder={ui.string.SearchDots} focus />
+    <div class="ap-caption"><Label label={ui.string.Suggested} /></div>
+  </div>
+  <div class="ap-space" />
+  <div class="ap-scroll">
+    <div class="ap-box">
+      {#each objects as space}
+        <button class="ap-menuItem" on:click={() => { dispatch('close', space) }}>
+          <SpaceInfo size={'large'} value={space} />
+        </button>
+      {/each}
+    </div>
+  </div>
+  <div class="ap-space" />
+</div>
@@ -0,0 +1,8 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <polygon points="6.4,14.4 5.6,13.6 11.3,8 5.6,2.4 6.4,1.6 12.7,8 "/>
+</svg>
@@ -0,0 +1,8 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <polygon points="8,11.7 1.6,5.4 2.4,4.6 8,10.3 13.6,4.6 14.4,5.4 "/>
+</svg>
@@ -0,0 +1,8 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'var(--theme-caption-color)'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14.5,8c0-1.4-0.4-2.7-1.2-3.8c-0.8-1.1-1.9-1.9-3.2-2.4c-1.3-0.4-2.7-0.5-4-0.1C4.8,2.2,3.7,3,2.8,4C2,5.1,1.5,6.4,1.5,7.8 c0,1.4,0.3,2.7,1.1,3.8c0.8,1.1,1.8,2,3.1,2.5c0.7,0.3,1.5,0.4,2.3,0.4c0.6,0,1.1-0.1,1.7-0.2c0.3-0.1,0.4-0.3,0.4-0.6 c-0.1-0.3-0.3-0.4-0.6-0.4c-1.1,0.3-2.3,0.2-3.4-0.2c-1.1-0.4-2-1.1-2.6-2.1c-0.6-1-1-2.1-0.9-3.2c0-1.2,0.4-2.3,1.1-3.2 c0.7-0.9,1.7-1.6,2.8-1.9c1.1-0.3,2.3-0.3,3.4,0.1c1.1,0.4,2,1.1,2.7,2c0.7,0.9,1,2,1,3.2c0,0,0,0,0,0v1c0,0.6-0.5,1.2-1.2,1.2 c-0.6,0-1.2-0.5-1.2-1.2V8c0,0,0,0,0,0s0,0,0,0V6c0-0.3-0.2-0.5-0.5-0.5c-0.2,0-0.3,0.1-0.4,0.3C9.7,5.2,8.9,4.8,8,4.8 C6.3,4.8,4.8,6.3,4.8,8s1.4,3.2,3.2,3.2c1,0,1.8-0.5,2.4-1.2c0.4,0.7,1.1,1.2,1.9,1.2c1.2,0,2.2-1,2.2-2.2L14.5,8 C14.5,8,14.5,8,14.5,8z M8,10.2c-1.2,0-2.2-1-2.2-2.2c0-1.2,1-2.2,2.2-2.2c1.2,0,2.2,1,2.2,2.2v0C10.2,9.2,9.2,10.2,8,10.2z"/>
+</svg>
@@ -0,0 +1,9 @@
+<script lang="ts">
+  export let size: 'small' | 'medium' | 'large'
+  const fill: string = 'currentColor'
+</script>
+
+<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3,9.6h18c0.3,0,0.6-0.3,0.6-0.6S21.3,8.4,21,8.4H3C2.7,8.4,2.4,8.7,2.4,9S2.7,9.6,3,9.6z"/>
+  <path d="M21,14.4H3c-0.3,0-0.6,0.3-0.6,0.6s0.3,0.6,0.6,0.6h18c0.3,0,0.6-0.3,0.6-0.6S21.3,14.4,21,14.4z"/>
+</svg>
@@ -0,0 +1 @@
+Some inbox stuff here.
@@ -0,0 +1,12 @@
+<script lang='ts'>
+  import { Ref } from '@anticrm/core'
+  import { IssueStatus, Team } from '@anticrm/tracker'
+  import Issues from './Issues.svelte'
+  export let currentSpace: Ref<Team>
+
+  let todalIssues = 0
+</script>
+<div class='fs-title'>
+  Active issues {todalIssues}
+</div>
+<Issues currentSpace={currentSpace} categories={[IssueStatus.InProgress, IssueStatus.Todo]} on:content={(evt) => { todalIssues = evt.detail.length } }></Issues>
@@ -0,0 +1,7 @@
+<script lang='ts'>
+  import { Ref } from '@anticrm/core'
+  import { IssueStatus, Team } from '@anticrm/tracker'
+  import Issues from './Issues.svelte'
+  export let currentSpace: Ref<Team>
+</script>
+<Issues {currentSpace} categories={[IssueStatus.Backlog]}></Issues>
@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { DocumentQuery, FindOptions } from '@anticrm/core'
+  import { Issue, IssueStatus, Team } from '@anticrm/tracker'
+  import { Scroller } from '@anticrm/ui'
+  import { Table } from '@anticrm/view-resources'
+  import tracker from '../../plugin'
+  import contact from '@anticrm/contact'
+
+  export let query: DocumentQuery<Issue>
+  export let category: IssueStatus
+  export let currentTeam: Team
+
+  const options: FindOptions<Issue> = {
+    lookup: {
+      assignee: contact.class.Employee
+    }
+  }
+
+  let visible = false
+</script>
+
+<div class='category' class:visible={visible}>
+  <div class='fs-title'>
+    {IssueStatus[category]}
+  </div>
+<Scroller>
+  <Table
+    _class={tracker.class.Issue}
+    config={[
+      { key: '', presenter: tracker.component.IssuePresenter, props: { currentTeam }, label: tracker.string.Issue },
+      'title',
+      // 'status',
+      '$lookup.assignee',
+      'modifiedOn'
+    ]}
+    options={options}
+    query={{ ...query, status: category }}
+    showNotification
+    highlightRows
+    on:content={(evt) => { visible = evt.detail.length > 0 }}
+  />
+</Scroller>
+</div>
+
+<style lang="scss">
+  .category {
+    display: none;
+    &.visible { 
+      display: block; 
+    }
+  }
+</style>
@@ -0,0 +1,81 @@
+<!--
+// Copyright © 2020, 2021 Anticrm Platform Contributors.
+// Copyright © 2021 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 { getClient, UserBox } from '@anticrm/presentation'
+  import type { Issue } from '@anticrm/tracker'
+  import { StyledTextBox } from '@anticrm/text-editor'
+  import { EditBox, Grid } from '@anticrm/ui'
+  import { createEventDispatcher, onMount } from 'svelte'
+  import tracker from '../../plugin'
+  import Card from '../Card.svelte'
+
+  export let object: Issue
+
+  const dispatch = createEventDispatcher()
+  const client = getClient()
+
+  function change (field: string, value: any) {
+    client.update(object, { [field]: value })
+  }
+
+  onMount(() => {
+    dispatch('open', { ignoreKeys: ['comments', 'name', 'description', 'number'] })
+  })
+</script>
+
+<Card
+  label={tracker.string.NewIssue}
+  okAction={() => {}}
+  canSave={true}
+  on:close={() => {
+    dispatch('close')
+  }}
+>
+{#if object !== undefined}
+  <Grid column={1} rowGap={1.5}>
+    <EditBox
+      label={tracker.string.Title}
+      bind:value={object.title}
+      placeholder={tracker.string.IssueTitlePlaceholder}
+      maxWidth={'16rem'}
+      focus
+      on:change={() => change('title', object.title) }
+    />
+    <StyledTextBox alwaysEdit bind:content={object.description} placeholder={tracker.string.IssueDescriptionPlaceholder}
+    on:change={() => change('description', object.description) }/>
+    <UserBox
+      _class={contact.class.Employee}
+      title={tracker.string.Assignee}
+      caption={tracker.string.Assignee}
+      bind:value={object.assignee}
+      allowDeselect
+      titleDeselect={tracker.string.TaskUnAssign}
+      on:change={() => change('assignee', object.assignee) }
+    />
+  </Grid>
+{/if}
+</Card>
+<style lang="scss">
+  .description {
+    display: flex;
+    padding: 1rem;
+    height: 12rem;
+    border-radius: .25rem;
+    background-color: var(--theme-bg-accent-color);
+    border: 1px solid var(--theme-bg-accent-color);
+  }
+</style>
@@ -0,0 +1,45 @@
+<!--
+// Copyright © 2020, 2021 Anticrm Platform Contributors.
+// Copyright © 2021 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 { getClient } from '@anticrm/presentation'
+  import type { Issue, Team } from '@anticrm/tracker'
+  import { Icon, showPopup } from '@anticrm/ui'
+  import tracker from '../../plugin'
+
+  export let value: Issue
+  export let currentTeam: Team
+  export let inline: boolean = false
+
+  const client = getClient()
+  const shortLabel = client.getHierarchy().getClass(value._class).shortLabel
+
+  function show (evt: Event) {
+    showPopup(tracker.component.EditIssue, { object: value }, evt.currentTarget)
+  }
+</script>
+
+{#if value && shortLabel}
+  <div
+    class="flex-presenter"
+    class:inline-presenter={inline}
+    on:click={show}
+  >
+    <div class="icon">
+      <Icon icon={tracker.icon.Issue} size={'small'} />
+    </div>
+    <span class="label nowrap">{currentTeam.identifier}-{value.number}</span>
+  </div>
+{/if}
@@ -0,0 +1,55 @@
+<!--
+// 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 type { DocumentQuery, Ref } from '@anticrm/core'
+  import { createQuery } from '@anticrm/presentation'
+  import { Issue, IssueStatus, Team } from '@anticrm/tracker'
+  import { ScrollBox } from '@anticrm/ui'
+  import CategoryPresenter from './CategoryPresenter.svelte'
+  import tracker from '../../plugin'
+
+  export let currentSpace: Ref<Team>
+  export let categories = [
+    IssueStatus.InProgress,
+    IssueStatus.Todo,
+    IssueStatus.Backlog,
+    IssueStatus.Done,
+    IssueStatus.Canceled
+  ]
+
+  export let query: DocumentQuery<Issue> = {}
+  export let search: string = ''
+
+  $: resultQuery =
+    search === '' ? { space: currentSpace, ...query } : { $search: search, space: currentSpace, ...query }
+
+  const spaceQuery = createQuery()
+
+  let currentTeam: Team | undefined
+
+  $: spaceQuery.query(tracker.class.Team, { _id: currentSpace }, (res) => {
+    currentTeam = res.shift()
+  })
+</script>
+
+{#if currentTeam}
+  <ScrollBox vertical stretch>
+    <div class="ml-4 mt-4">
+      {#each categories as category}
+        <CategoryPresenter {category} query={resultQuery} {currentTeam} />
+      {/each}
+    </div>
+  </ScrollBox>
+{/if}