Tracker: Issue List – Priority presenter (#1382)

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

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}