Add issue status presenter (#1272)

Also move the issue editor to the separate component Signed-off-by: Sergei Ogorelkov <sergei.ogorelkov@xored.com>
hcengineering · May 4, 2022 · 8f392aa · 8f392aa
1 parent 8d7e307
commit 8f392aa
Show file tree

Hide file tree

Showing 9 changed files with 87 additions and 55 deletions.
diff --git a/models/tracker/src/index.ts b/models/tracker/src/index.ts
@@ -300,6 +300,10 @@ export function createModel (builder: Builder): void {
   const boardId = 'board'
   const projectsId = 'projects'
 
+  builder.mixin(tracker.class.IssueStatus, core.class.Class, view.mixin.AttributePresenter, {
+    presenter: tracker.component.StatusPresenter
+  })
+
   builder.createDoc(
     workbench.class.Application,
     core.space.Model,

diff --git a/plugins/tracker-resources/src/components/issues/EditIssue.svelte b/plugins/tracker-resources/src/components/issues/EditIssue.svelte
@@ -25,7 +25,7 @@
   import tracker from '../../plugin'
   import IssuePresenter from './IssuePresenter.svelte'
   import PriorityPresenter from './PriorityPresenter.svelte'
-  import StatusPresenter from './StatusPresenter.svelte'
+  import StatusEditor from './StatusEditor.svelte'
 
   export let _id: Ref<Issue>
   export let _class: Ref<Class<Issue>>
@@ -167,7 +167,7 @@
             <span class="label w-24">
               <Label label={tracker.string.Status} />
             </span>
-            <StatusPresenter value={issue} statuses={issueStatuses} currentSpace={currentTeam._id} shouldShowLabel />
+            <StatusEditor value={issue} statuses={issueStatuses} currentSpace={currentTeam._id} shouldShowLabel />
           </div>
 
           <div class="flex-row-center mb-4">

diff --git a/plugins/tracker-resources/src/components/issues/Issues.svelte b/plugins/tracker-resources/src/components/issues/Issues.svelte
@@ -351,7 +351,7 @@
         itemsConfig={[
           { key: '', presenter: tracker.component.PriorityPresenter, props: { currentSpace } },
           { key: '', presenter: tracker.component.IssuePresenter, props: { currentTeam } },
-          { key: '', presenter: tracker.component.StatusPresenter, props: { currentSpace, statuses } },
+          { key: '', presenter: tracker.component.StatusEditor, props: { currentSpace, statuses } },
           { key: '', presenter: tracker.component.TitlePresenter, props: { shouldUseMargin: true } },
           { key: '', presenter: tracker.component.DueDatePresenter, props: { currentSpace } },
           { key: 'modifiedOn', presenter: tracker.component.ModificationDatePresenter },

diff --git a/plugins/tracker-resources/src/components/issues/IssuesList.svelte b/plugins/tracker-resources/src/components/issues/IssuesList.svelte
@@ -32,7 +32,7 @@
   import { buildModel, getObjectPresenter, LoadingProps, Menu } from '@anticrm/view-resources'
   import { createEventDispatcher } from 'svelte'
   import tracker from '../../plugin'
-  import { IssuesGroupByKeys, issuesGroupPresenterMap, IssuesOrderByKeys, issuesSortOrderMap } from '../../utils'
+  import { IssuesGroupByKeys, issuesGroupEditorMap, IssuesOrderByKeys, issuesSortOrderMap } from '../../utils'
   import CreateIssue from '../CreateIssue.svelte'
 
   export let _class: Ref<Class<Doc>>
@@ -65,7 +65,7 @@
   $: combinedGroupedIssues = Object.values(groupedIssues).flat(1)
   $: options = { ...baseOptions, sort: { [orderBy]: issuesSortOrderMap[orderBy] } } as FindOptions<Issue>
   $: headerComponent =
-    groupByKey === undefined || groupByKey === 'assignee' ? null : issuesGroupPresenterMap[groupByKey]
+    groupByKey === undefined || groupByKey === 'assignee' ? null : issuesGroupEditorMap[groupByKey]
   $: selectedObjectIdsSet = new Set<Ref<Doc>>(selectedObjectIds.map((it) => it._id))
   $: objectRefs.length = combinedGroupedIssues.length
 

diff --git a/plugins/tracker-resources/src/components/issues/StatusEditor.svelte b/plugins/tracker-resources/src/components/issues/StatusEditor.svelte
@@ -0,0 +1,68 @@
+<!--
+// 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 { Ref, WithLookup } from '@anticrm/core'
+  import { Issue, IssueStatus, Team } from '@anticrm/tracker'
+  import { getClient } from '@anticrm/presentation'
+  import { Tooltip } from '@anticrm/ui'
+  import tracker from '../../plugin'
+  import StatusSelector from '../StatusSelector.svelte'
+
+  export let value: Issue
+  export let statuses: WithLookup<IssueStatus>[]
+  export let currentSpace: Ref<Team> | undefined = undefined
+  export let isEditable: boolean = true
+  export let shouldShowLabel: boolean = false
+
+  const client = getClient()
+
+  const handleStatusChanged = async (newStatus: Ref<IssueStatus> | undefined) => {
+    if (!isEditable || newStatus === undefined) {
+      return
+    }
+
+    const currentIssue = await client.findOne(tracker.class.Issue, { space: currentSpace, _id: value._id })
+
+    if (currentIssue === undefined) {
+      return
+    }
+
+    await client.update(currentIssue, { status: newStatus })
+  }
+</script>
+
+{#if value}
+  {#if isEditable}
+    <Tooltip direction={'bottom'} label={tracker.string.SetStatus}>
+      <StatusSelector
+        kind={'icon'}
+        {isEditable}
+        {shouldShowLabel}
+        {statuses}
+        selectedStatusId={value.status}
+        onStatusChange={handleStatusChanged}
+      />
+    </Tooltip>
+  {:else}
+    <StatusSelector
+      kind={'icon'}
+      {isEditable}
+      {shouldShowLabel}
+      {statuses}
+      selectedStatusId={value.status}
+      onStatusChange={handleStatusChanged}
+    />
+  {/if}
+{/if}
diff --git a/plugins/tracker-resources/src/components/issues/StatusPresenter.svelte b/plugins/tracker-resources/src/components/issues/StatusPresenter.svelte
@@ -13,56 +13,13 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Ref, WithLookup } from '@anticrm/core'
-  import { Issue, IssueStatus, Team } from '@anticrm/tracker'
-  import { getClient } from '@anticrm/presentation'
-  import { Tooltip } from '@anticrm/ui'
-  import tracker from '../../plugin'
-  import StatusSelector from '../StatusSelector.svelte'
+  import { IssueStatus } from '@anticrm/tracker'
 
-  export let value: Issue
-  export let statuses: WithLookup<IssueStatus>[]
-  export let currentSpace: Ref<Team> | undefined = undefined
-  export let isEditable: boolean = true
-  export let shouldShowLabel: boolean = false
-
-  const client = getClient()
-
-  const handleStatusChanged = async (newStatus: Ref<IssueStatus> | undefined) => {
-    if (!isEditable || newStatus === undefined) {
-      return
-    }
-
-    const currentIssue = await client.findOne(tracker.class.Issue, { space: currentSpace, _id: value._id })
-
-    if (currentIssue === undefined) {
-      return
-    }
-
-    await client.update(currentIssue, { status: newStatus })
-  }
+  export let value: IssueStatus | undefined
 </script>
 
 {#if value}
-  {#if isEditable}
-    <Tooltip direction={'bottom'} label={tracker.string.SetStatus}>
-      <StatusSelector
-        kind={'icon'}
-        {isEditable}
-        {shouldShowLabel}
-        {statuses}
-        selectedStatusId={value.status}
-        onStatusChange={handleStatusChanged}
-      />
-    </Tooltip>
-  {:else}
-    <StatusSelector
-      kind={'icon'}
-      {isEditable}
-      {shouldShowLabel}
-      {statuses}
-      selectedStatusId={value.status}
-      onStatusChange={handleStatusChanged}
-    />
-  {/if}
+  <span class="overflow-label">
+    {value.name}
+  </span>
 {/if}
diff --git a/plugins/tracker-resources/src/index.ts b/plugins/tracker-resources/src/index.ts
@@ -30,6 +30,7 @@ import IssuePresenter from './components/issues/IssuePresenter.svelte'
 import TitlePresenter from './components/issues/TitlePresenter.svelte'
 import PriorityPresenter from './components/issues/PriorityPresenter.svelte'
 import StatusPresenter from './components/issues/StatusPresenter.svelte'
+import StatusEditor from './components/issues/StatusEditor.svelte'
 import DueDatePresenter from './components/issues/DueDatePresenter.svelte'
 import AssigneePresenter from './components/issues/AssigneePresenter.svelte'
 import ViewOptionsPopup from './components/issues/ViewOptionsPopup.svelte'
@@ -55,6 +56,7 @@ export default async (): Promise<Resources> => ({
     ModificationDatePresenter,
     PriorityPresenter,
     StatusPresenter,
+    StatusEditor,
     AssigneePresenter,
     DueDatePresenter,
     EditIssue,

diff --git a/plugins/tracker-resources/src/plugin.ts b/plugins/tracker-resources/src/plugin.ts
@@ -137,6 +137,7 @@ export default mergeIds(trackerId, tracker, {
     ModificationDatePresenter: '' as AnyComponent,
     PriorityPresenter: '' as AnyComponent,
     StatusPresenter: '' as AnyComponent,
+    StatusEditor: '' as AnyComponent,
     AssigneePresenter: '' as AnyComponent,
     DueDatePresenter: '' as AnyComponent,
     EditIssue: '' as AnyComponent,

diff --git a/plugins/tracker-resources/src/utils.ts b/plugins/tracker-resources/src/utils.ts
@@ -93,8 +93,8 @@ export const issuesSortOrderMap: Record<IssuesOrderByKeys, SortingOrder> = {
   dueDate: SortingOrder.Descending
 }
 
-export const issuesGroupPresenterMap: Record<'status' | 'priority', AnyComponent | undefined> = {
-  status: tracker.component.StatusPresenter,
+export const issuesGroupEditorMap: Record<'status' | 'priority', AnyComponent | undefined> = {
+  status: tracker.component.StatusEditor,
   priority: tracker.component.PriorityPresenter
 }