Tracker: Issue List – Status presenter (#1383)

Signed-off-by: Artyom Grigorovich <grigorovichartyom@gmail.com>

plugins/tracker-resources/src/components/CreateIssue.svelte

@@ -101,6 +101,14 @@
 
     object.priority = newPriority
   }
+
+  const handleStatusChanged = (newStatus: IssueStatus | undefined) => {
+    if (newStatus === undefined) {
+      return
+    }
+
+    object.status = newStatus
+  }
 </script>
 
 <!-- canSave: object.title.length > 0 && _space != null -->
@@ -135,7 +143,7 @@
     />
   </div>
   <div slot="pool" class="flex-row-center text-sm gap-1-5">
-    <StatusSelector bind:status={object.status} />
+    <StatusSelector status={object.status} onStatusChange={handleStatusChanged} />
     <PrioritySelector priority={object.priority} onPriorityChange={handlePriorityChanged} />
     <UserBox
       _class={contact.class.Employee}

plugins/tracker-resources/src/components/StatusSelector.svelte

@@ -14,11 +14,14 @@
 -->
 <script lang="ts">
   import { IssueStatus } from '@anticrm/tracker'
-  import { Button, showPopup, SelectPopup } from '@anticrm/ui'
+  import { Button, Icon, Label, showPopup, SelectPopup } from '@anticrm/ui'
   import { issueStatuses } from '../utils'
   import tracker from '../plugin'
 
   export let status: IssueStatus
+  export let kind: 'button' | 'icon' = 'button'
+  export let shouldShowLabel: boolean = true
+  export let onStatusChange: ((newStatus: IssueStatus | undefined) => void) | undefined = undefined
 
   const statusesInfo = [
     IssueStatus.Backlog,
@@ -28,25 +31,34 @@
     IssueStatus.Canceled
   ].map((s) => ({ id: s, ...issueStatuses[s] }))
 
-  function handleStatusChange (id: any) {
-    if (id !== undefined) {
-      status = id
-    }
-  }
-</script>
-
-<Button
-  label={issueStatuses[status].label}
-  icon={issueStatuses[status].icon}
-  width="min-content"
-  size="small"
-  kind="no-border"
-  on:click={(ev) => {
+  const handleStatusEditorOpened = (event: Event) => {
     showPopup(
       SelectPopup,
       { value: statusesInfo, placeholder: tracker.string.SetStatus, searchable: true },
-      ev.currentTarget,
-      handleStatusChange
+      event.currentTarget,
+      onStatusChange
     )
-  }}
-/>
+  }
+</script>
+
+{#if kind === 'button'}
+  <Button
+    label={shouldShowLabel ? issueStatuses[status].label : undefined}
+    icon={issueStatuses[status].icon}
+    width="min-content"
+    size="small"
+    kind="no-border"
+    on:click={handleStatusEditorOpened}
+  />
+{:else if kind === 'icon'}
+  <div class="flex-presenter" on:click={handleStatusEditorOpened}>
+    <div class="icon">
+      <Icon icon={issueStatuses[status].icon} size={'small'} />
+    </div>
+    {#if shouldShowLabel}
+      <div class="label nowrap">
+        <Label label={issueStatuses[status].label} />
+      </div>
+    {/if}
+  </div>
+{/if}

plugins/tracker-resources/src/components/issues/CategoryPresenter.svelte

@@ -52,6 +52,7 @@
       config={[
         { key: '', presenter: tracker.component.PriorityPresenter, props: { currentSpace } },
         { key: '', presenter: tracker.component.IssuePresenter, props: { currentTeam } },
+        { key: '', presenter: tracker.component.StatusPresenter, props: { currentSpace } },
         { key: '', presenter: tracker.component.TitlePresenter },
         { key: 'modifiedOn', presenter: tracker.component.ModificationDatePresenter },
         {

plugins/tracker-resources/src/components/issues/IssuesList.svelte

@@ -183,7 +183,7 @@
 
   .listGrid {
     display: grid;
-    grid-template-columns: 4rem 6rem auto 4rem 2rem;
+    grid-template-columns: 4rem 5rem 2rem auto 4rem 2rem;
     height: 3.25rem;
     color: var(--theme-caption-color);
     border-bottom: 1px solid var(--theme-button-border-hovered);
@@ -225,6 +225,20 @@
     }
   }
 
+  .checkBox {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.03rem;
+    border-radius: 0.25rem;
+    background-color: rgba(247, 248, 248, 0.5);
+    opacity: 0;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
   .gridElement {
     display: flex;
     align-items: center;
@@ -232,7 +246,7 @@
   }
 
   .priorityPresenter {
-    padding-left: 0.5rem;
+    padding-left: 0.75rem;
   }
 
   .issuePresenter {

plugins/tracker-resources/src/components/issues/StatusPresenter.svelte

@@ -0,0 +1,44 @@
+<!--
+// 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 } from '@anticrm/core'
+  import { Issue, IssueStatus, Team } from '@anticrm/tracker'
+  import { getClient } from '@anticrm/presentation'
+  import tracker from '../../plugin'
+  import StatusSelector from '../StatusSelector.svelte'
+
+  export let value: Issue
+  export let currentSpace: Ref<Team> | undefined = undefined
+
+  const client = getClient()
+
+  const handleStatusChanged = async (newStatus: IssueStatus | undefined) => {
+    if (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}
+  <StatusSelector kind={'icon'} shouldShowLabel={false} status={value.status} onStatusChange={handleStatusChanged} />
+{/if}

plugins/tracker-resources/src/components/issues/TitlePresenter.svelte

@@ -14,28 +14,10 @@
 -->
 <script lang="ts">
   import type { Issue } from '@anticrm/tracker'
-  import { Icon } from '@anticrm/ui'
-  import { issueStatuses } from '../../utils'
 
   export let value: Issue
 </script>
 
 {#if value}
-  <div class="titlePresenter">
-    <div class="icon">
-      <Icon icon={issueStatuses[value.status].icon} size={'small'} />
-    </div>
-    <span class="label nowrap" title={value.title}>{value.title}</span>
-  </div>
+  <span class="label nowrap" title={value.title}>{value.title}</span>
 {/if}
-
-<style lang="scss">
-  .titlePresenter {
-    display: flex;
-    align-items: center;
-
-    .icon {
-      margin-right: 0.5rem;
-    }
-  }
-</style>

plugins/tracker-resources/src/index.ts

@@ -28,6 +28,8 @@ import Views from './components/views/Views.svelte'
 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 ModificationDatePresenter from './components/issues/ModificationDatePresenter.svelte'
 import EditIssue from './components/issues/EditIssue.svelte'
 import NewIssueHeader from './components/NewIssueHeader.svelte'
@@ -47,6 +49,7 @@ export default async (): Promise<Resources> => ({
     TitlePresenter,
     ModificationDatePresenter,
     PriorityPresenter,
+    StatusPresenter,
     EditIssue,
     NewIssueHeader
   }

plugins/tracker-resources/src/plugin.ts

@@ -97,6 +97,7 @@ export default mergeIds(trackerId, tracker, {
     TitlePresenter: '' as AnyComponent,
     ModificationDatePresenter: '' as AnyComponent,
     PriorityPresenter: '' as AnyComponent,
+    StatusPresenter: '' as AnyComponent,
     EditIssue: '' as AnyComponent,
     CreateTeam: '' as AnyComponent,
     NewIssueHeader: '' as AnyComponent