Tracker: Issue List – Priority presenter (#1382)

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

packages/presentation/src/index.ts

@@ -32,6 +32,7 @@ export { default as SpaceSelect } from './components/SpaceSelect.svelte'
 export { default as UserBox } from './components/UserBox.svelte'
 export { default as UserBoxList } from './components/UserBoxList.svelte'
 export { default as UserInfo } from './components/UserInfo.svelte'
+export { default as UsersPopup } from './components/UsersPopup.svelte'
 export { connect, versionError } from './connect'
 export { default } from './plugin'
 export * from './types'

plugins/tracker-assets/lang/en.json

@@ -26,6 +26,7 @@
     "InProgress": "In Progress",
     "Done": "Done",
     "Canceled": "Canceled",
+    "SetPriority": "Set priority\u2026",
     "SetStatus": "Set status\u2026",
     "Priority": "Priority",
     "NoPriority": "No priority",

plugins/tracker-assets/lang/ru.json

@@ -22,6 +22,7 @@
     "InProgress": "В работе",
     "Done": "Выполнено",
     "Canceled": "Отменено",
+    "SetPriority": "Установить приоритет\u2026",
     "SetStatus": "Установить статус\u2026",
     "Priority": "Установить приоритет",
     "NoPriority": "Нет приоритета",

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

@@ -91,7 +91,16 @@
     { icon: tracker.icon.DueDate, label: tracker.string.DueDate },
     { icon: tracker.icon.Parent, label: tracker.string.Parent }
   ]
+
   let issueDate: number | null = null
+
+  const handlePriorityChanged = (newPriority: IssuePriority | undefined) => {
+    if (newPriority === undefined) {
+      return
+    }
+
+    object.priority = newPriority
+  }
 </script>
 
 <!-- canSave: object.title.length > 0 && _space != null -->
@@ -127,7 +136,7 @@
   </div>
   <div slot="pool" class="flex-row-center text-sm gap-1-5">
     <StatusSelector bind:status={object.status} />
-    <PrioritySelector bind:priority={object.priority} />
+    <PrioritySelector priority={object.priority} onPriorityChange={handlePriorityChanged} />
     <UserBox
       _class={contact.class.Employee}
       label={tracker.string.Assignee}

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

@@ -14,11 +14,14 @@
 -->
 <script lang="ts">
   import { IssuePriority } from '@anticrm/tracker'
-  import { Button, showPopup, SelectPopup } from '@anticrm/ui'
+  import { Button, showPopup, SelectPopup, Icon, Label } from '@anticrm/ui'
   import { issuePriorities } from '../utils'
   import tracker from '../plugin'
 
   export let priority: IssuePriority
+  export let kind: 'button' | 'icon' = 'button'
+  export let shouldShowLabel: boolean = true
+  export let onPriorityChange: ((newPriority: IssuePriority | undefined) => void) | undefined = undefined
 
   const prioritiesInfo = [
     IssuePriority.NoPriority,
@@ -26,27 +29,36 @@
     IssuePriority.High,
     IssuePriority.Medium,
     IssuePriority.Low
-  ].map((s) => ({ id: s, ...issuePriorities[s] }))
+  ].map((p) => ({ id: p, ...issuePriorities[p] }))
 
-  function handlePriorityChange (id: any) {
-    if (id !== undefined) {
-      priority = id
-    }
+  const handlePriorityEditorOpened = (event: Event) => {
+    showPopup(
+      SelectPopup,
+      { value: prioritiesInfo, placeholder: tracker.string.SetPriority, searchable: true },
+      event.currentTarget,
+      onPriorityChange
+    )
   }
 </script>
 
-<Button
-  label={issuePriorities[priority].label}
-  icon={issuePriorities[priority].icon}
-  width="min-content"
-  size="small"
-  kind="no-border"
-  on:click={(ev) => {
-    showPopup(
-      SelectPopup,
-      { value: prioritiesInfo, placeholder: tracker.string.SetStatus },
-      ev.currentTarget,
-      handlePriorityChange
-    )
-  }}
-/>
+{#if kind === 'button'}
+  <Button
+    label={shouldShowLabel ? issuePriorities[priority].label : undefined}
+    icon={issuePriorities[priority].icon}
+    width="min-content"
+    size="small"
+    kind="no-border"
+    on:click={handlePriorityEditorOpened}
+  />
+{:else if kind === 'icon'}
+  <div class="flex-presenter" on:click={handlePriorityEditorOpened}>
+    <div class="icon">
+      <Icon icon={issuePriorities[priority].icon} size={'small'} />
+    </div>
+    {#if shouldShowLabel}
+      <div class="label nowrap">
+        <Label label={issuePriorities[priority].label} />
+      </div>
+    {/if}
+  </div>
+{/if}

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

@@ -50,6 +50,7 @@
     <IssuesList
       _class={tracker.class.Issue}
       config={[
+        { key: '', presenter: tracker.component.PriorityPresenter, props: { currentSpace } },
         { key: '', presenter: tracker.component.IssuePresenter, props: { currentTeam } },
         { key: '', presenter: tracker.component.TitlePresenter },
         { key: 'modifiedOn', presenter: tracker.component.ModificationDatePresenter },

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

@@ -1,6 +1,5 @@
 <!--
-// Copyright © 2020, 2021 Anticrm Platform Contributors.
-// Copyright © 2021 Hardcore Engineering Inc.
+// 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
@@ -18,7 +17,6 @@
   import type { Issue, Team } from '@anticrm/tracker'
   import { Icon, showPanel } from '@anticrm/ui'
   import tracker from '../../plugin'
-  import { issuePriorities } from '../../utils'
 
   export let value: Issue
   export let currentTeam: Team
@@ -27,20 +25,13 @@
   const client = getClient()
   const shortLabel = client.getHierarchy().getClass(value._class).shortLabel
 
-  function show () {
+  const handleIssueEditorOpened = () => {
     showPanel(tracker.component.EditIssue, value._id, value._class, 'content')
   }
 </script>
 
 {#if value && shortLabel}
-  <div
-    class="flex-presenter"
-    class:inline-presenter={inline}
-    on:click={show}
-  >
-    <div class="icon">
-      <Icon icon={issuePriorities[value.priority].icon} size={'small'} />
-    </div>
+  <div class="flex-presenter" class:inline-presenter={inline} on:click={handleIssueEditorOpened}>
     <div class="icon">
       <Icon icon={tracker.icon.Issue} size={'small'} />
     </div>

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

@@ -62,7 +62,7 @@
       <Label label={title} params={{ value: getTotalIssues() }} />
     </div>
 
-    <div class="ml-4 mt-4">
+    <div class="mt-4">
       {#each categories as category}
         <CategoryPresenter
           {category}

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

@@ -113,7 +113,7 @@
           {#each attributeModels as attributeModel, attributeModelIndex}
             {#if attributeModelIndex === 0}
               <div class="gridElement">
-                <div class="antiTable-cells__checkCell">
+                <div class="eListGridCheckBox ml-2">
                   <CheckBox
                     checked={selectedIssueIds.has(docObject._id)}
                     on:change={(event) => {
@@ -121,19 +121,27 @@
                     }}
                   />
                 </div>
-                <div class="issuePresenter">
+                <div class="priorityPresenter">
                   <svelte:component
                     this={attributeModel.presenter}
                     value={getObjectValue(attributeModel.key, docObject) ?? ''}
                     {...attributeModel.props}
                   />
-                  <div
-                    id="context-menu"
-                    class="eIssuePresenterContextMenu"
-                    on:click={(event) => showMenu(event, docObject, rowIndex)}
-                  >
-                    <IconMoreV size={'small'} />
-                  </div>
+                </div>
+              </div>
+            {:else if attributeModelIndex === 1}
+              <div class="issuePresenter">
+                <svelte:component
+                  this={attributeModel.presenter}
+                  value={getObjectValue(attributeModel.key, docObject) ?? ''}
+                  {...attributeModel.props}
+                />
+                <div
+                  id="context-menu"
+                  class="eIssuePresenterContextMenu"
+                  on:click={(event) => showMenu(event, docObject, rowIndex)}
+                >
+                  <IconMoreV size={'small'} />
                 </div>
               </div>
             {:else}
@@ -178,13 +186,17 @@
 
   .listGrid {
     display: grid;
-    grid-template-columns: 9rem auto 4rem 2rem;
+    grid-template-columns: 4rem 6rem auto 4rem 2rem;
     height: 3.25rem;
     color: var(--theme-caption-color);
     border-bottom: 1px solid var(--theme-button-border-hovered);
 
     &.mListGridChecked {
       background-color: var(--theme-table-bg-hover);
+
+      .eListGridCheckBox {
+        opacity: 1;
+      }
     }
 
     &.mListGridFixed {
@@ -200,6 +212,20 @@
     &:hover {
       background-color: var(--theme-table-bg-hover);
     }
+
+    .eListGridCheckBox {
+      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 {
@@ -208,10 +234,14 @@
     justify-content: start;
   }
 
+  .priorityPresenter {
+    padding-left: 0.5rem;
+  }
+
   .issuePresenter {
     display: flex;
     align-items: center;
-    padding: 0 1rem;
+    padding-right: 1rem;
 
     .eIssuePresenterContextMenu {
       visibility: hidden;

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

@@ -0,0 +1,49 @@
+<!--
+// 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, IssuePriority, Team } from '@anticrm/tracker'
+  import { getClient } from '@anticrm/presentation'
+  import tracker from '../../plugin'
+  import PrioritySelector from '../PrioritySelector.svelte'
+
+  export let value: Issue
+  export let currentSpace: Ref<Team> | undefined = undefined
+
+  const client = getClient()
+
+  const handlePriorityChanged = async (newPriority: IssuePriority | undefined) => {
+    if (newPriority === undefined) {
+      return
+    }
+
+    const currentIssue = await client.findOne(tracker.class.Issue, { space: currentSpace, _id: value._id })
+
+    if (currentIssue === undefined) {
+      return
+    }
+
+    await client.update(currentIssue, { priority: newPriority })
+  }
+</script>
+
+{#if value}
+  <PrioritySelector
+    kind={'icon'}
+    shouldShowLabel={false}
+    priority={value.priority}
+    onPriorityChange={handlePriorityChanged}
+  />
+{/if}

plugins/tracker-resources/src/index.ts

@@ -27,6 +27,7 @@ import Projects from './components/projects/Projects.svelte'
 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 ModificationDatePresenter from './components/issues/ModificationDatePresenter.svelte'
 import EditIssue from './components/issues/EditIssue.svelte'
 import NewIssueHeader from './components/NewIssueHeader.svelte'
@@ -45,6 +46,7 @@ export default async (): Promise<Resources> => ({
     IssuePresenter,
     TitlePresenter,
     ModificationDatePresenter,
+    PriorityPresenter,
     EditIssue,
     NewIssueHeader
   }

plugins/tracker-resources/src/plugin.ts

@@ -47,6 +47,7 @@ export default mergeIds(trackerId, tracker, {
     InProgress: '' as IntlString,
     Done: '' as IntlString,
     Canceled: '' as IntlString,
+    SetPriority: '' as IntlString,
     SetStatus: '' as IntlString,
     Priority: '' as IntlString,
     NoPriority: '' as IntlString,
@@ -95,6 +96,7 @@ export default mergeIds(trackerId, tracker, {
     IssuePresenter: '' as AnyComponent,
     TitlePresenter: '' as AnyComponent,
     ModificationDatePresenter: '' as AnyComponent,
+    PriorityPresenter: '' as AnyComponent,
     EditIssue: '' as AnyComponent,
     CreateTeam: '' as AnyComponent,
     NewIssueHeader: '' as AnyComponent