Update context menu in the "CreateIssue" dialog (#1799)

Signed-off-by: Sergei Ogorelkov <sergei.ogorelkov@xored.com>

models/tracker/src/index.ts

@@ -439,4 +439,34 @@ export function createModel (builder: Builder): void {
       mode: ['workbench', 'browser', 'editor', 'panel', 'popup']
     }
   })
+
+  builder.createDoc(
+    view.class.ActionCategory,
+    core.space.Model,
+    { label: tracker.string.TrackerApplication, visible: true },
+    tracker.category.Tracker
+  )
+
+  createAction(
+    builder,
+    {
+      action: view.actionImpl.ShowPopup,
+      actionProps: {
+        component: tracker.component.SetDueDateActionPopup,
+        props: { mondayStart: true, withTime: false },
+        element: 'top'
+      },
+      label: tracker.string.SetDueDate,
+      icon: tracker.icon.DueDate,
+      keyBinding: [],
+      input: 'none',
+      category: tracker.category.Tracker,
+      target: tracker.class.Issue,
+      context: {
+        mode: ['context', 'browser'],
+        application: tracker.app.Tracker
+      }
+    },
+    tracker.action.SetDueDate
+  )
 }

plugins/tracker-assets/lang/en.json

@@ -73,6 +73,7 @@
     "Project": "Project",
     "Space": "",
     "SetDueDate": "Set due date\u2026",
+    "ChangeDueDate": "Change due date\u2026",
     "ModificationDate": "Updated {value}",
     "Team": "",
     "Issue": "",

plugins/tracker-assets/src/index.ts

@@ -32,7 +32,6 @@ loadMetadata(tracker.icon, {
   Magnifier: `${icons}#magnifier`,
   Home: `${icons}#home`,
   Labels: `${icons}#priority-nopriority`, // TODO: add icon
-  MoreActions: `${icons}#priority-nopriority`, // TODO: add icon
   DueDate: `${icons}#inbox`, // TODO: add icon
   Parent: `${icons}#myissues`, // TODO: add icon
 

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

@@ -15,7 +15,6 @@
 <script lang="ts">
   import contact, { Employee } from '@anticrm/contact'
   import core, { Data, generateId, Ref, SortingOrder, WithLookup } from '@anticrm/core'
-  import { Asset, IntlString } from '@anticrm/platform'
   import presentation, { Card, createQuery, getClient, SpaceSelector, UserBox } from '@anticrm/presentation'
   import { StyledTextBox } from '@anticrm/text-editor'
   import { calcRank, Issue, IssuePriority, IssueStatus, Project, Team } from '@anticrm/tracker'
@@ -23,10 +22,13 @@
     Button,
     DatePresenter,
     EditBox,
-    eventToHTMLElement,
     IconAttachment,
-    SelectPopup,
+    showPopup,
-    showPopup
+    Spinner,
+    IconMoreH,
+    ActionIcon,
+    DatePopup,
+    Menu
   } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
   import tracker from '../plugin'
@@ -42,7 +44,7 @@
   export let project: Ref<Project> | null = null
 
   let currentAssignee: Ref<Employee> | null = assignee
-  let issueStatuses: WithLookup<IssueStatus>[] = []
+  let issueStatuses: WithLookup<IssueStatus>[] | undefined
 
   let object: Data<Issue> = {
     title: '',
@@ -65,21 +67,13 @@
   $: _space = space
   $: _parent = parent
   $: updateIssueStatusId(space, status)
-
-  $: statusesQuery.query(
-    tracker.class.IssueStatus,
-    { attachedTo: space },
-    (statuses) => {
-      issueStatuses = statuses
-    },
-    {
-      lookup: { category: tracker.class.IssueStatusCategory },
-      sort: { rank: SortingOrder.Ascending }
-    }
-  )
-
   $: canSave = getTitle(object.title ?? '').length > 0
 
+  $: statusesQuery.query(tracker.class.IssueStatus, { attachedTo: space }, (statuses) => (issueStatuses = statuses), {
+    lookup: { category: tracker.class.IssueStatusCategory },
+    sort: { rank: SortingOrder.Ascending }
+  })
+
   async function updateIssueStatusId (teamId: Ref<Team>, issueStatusId?: Ref<IssueStatus>) {
     if (issueStatusId !== undefined) {
       object.status = issueStatusId
@@ -143,10 +137,31 @@
     await client.createDoc(tracker.class.Issue, _space, value, taskId)
   }
 
-  const moreActions: Array<{ icon: Asset; label: IntlString }> = [
+  async function showMoreActions (ev: Event) {
-    { icon: tracker.icon.DueDate, label: tracker.string.SetDueDate },
+    ev.preventDefault()
-    { icon: tracker.icon.Parent, label: tracker.string.Parent }
+
-  ]
+    const selectDueDate = {
+      label: object.dueDate === null ? tracker.string.SetDueDate : tracker.string.ChangeDueDate,
+      icon: tracker.icon.DueDate,
+      action: async () => {
+        showPopup(
+          DatePopup,
+          { mondayStart: true, withTime: false, currentDate: object.dueDate },
+          undefined,
+          undefined,
+          (newDueDate) => newDueDate !== undefined && (object.dueDate = newDueDate)
+        )
+      }
+    }
+
+    showPopup(
+      Menu,
+      {
+        actions: [selectDueDate]
+      },
+      ev.target as HTMLElement
+    )
+  }
 
   const handlePriorityChanged = (newPriority: IssuePriority | undefined) => {
     if (newPriority === undefined) {
@@ -210,34 +225,32 @@
     placeholder={tracker.string.IssueDescriptionPlaceholder}
   />
   <svelte:fragment slot="pool">
-    <StatusSelector selectedStatusId={object.status} statuses={issueStatuses} onStatusChange={handleStatusChanged} />
+    {#if issueStatuses}
-    <PrioritySelector priority={object.priority} onPriorityChange={handlePriorityChanged} />
+      <StatusSelector selectedStatusId={object.status} statuses={issueStatuses} onStatusChange={handleStatusChanged} />
-    <UserBox
+      <PrioritySelector priority={object.priority} onPriorityChange={handlePriorityChanged} />
-      _class={contact.class.Employee}
+      <UserBox
-      label={tracker.string.Assignee}
+        _class={contact.class.Employee}
-      placeholder={tracker.string.AssignTo}
+        label={tracker.string.Assignee}
-      bind:value={currentAssignee}
+        placeholder={tracker.string.AssignTo}
-      allowDeselect
+        bind:value={currentAssignee}
-      titleDeselect={tracker.string.Unassigned}
+        allowDeselect
-    />
+        titleDeselect={tracker.string.Unassigned}
-    <Button
+      />
-      label={tracker.string.Labels}
+      <Button
-      icon={tracker.icon.Labels}
+        label={tracker.string.Labels}
-      width="min-content"
+        icon={tracker.icon.Labels}
-      size="small"
+        width="min-content"
-      kind="no-border"
+        size="small"
-    />
+        kind="no-border"
-    <ProjectSelector value={object.project} onProjectIdChange={handleProjectIdChanged} />
+      />
-    <DatePresenter bind:value={object.dueDate} editable />
+      <ProjectSelector value={object.project} onProjectIdChange={handleProjectIdChanged} />
-    <Button
+      {#if object.dueDate !== null}
-      icon={tracker.icon.MoreActions}
+        <DatePresenter bind:value={object.dueDate} editable />
-      width="min-content"
+      {/if}
-      size="small"
+      <ActionIcon icon={IconMoreH} size={'medium'} action={showMoreActions} />
-      kind="transparent"
+    {:else}
-      on:click={(ev) => {
+      <Spinner size="small" />
-        showPopup(SelectPopup, { value: moreActions }, eventToHTMLElement(ev))
+    {/if}
-      }}
-    />
   </svelte:fragment>
   <svelte:fragment slot="footer">
     <Button icon={IconAttachment} kind={'transparent'} on:click={() => {}} />

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

@@ -0,0 +1,36 @@
+<!--
+// 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 { Timestamp } from '@anticrm/core'
+  import { DatePopup } from '@anticrm/ui'
+  import { getClient } from '@anticrm/presentation'
+  import { Issue } from '@anticrm/tracker'
+
+  export let value: Issue
+  export let mondayStart = true
+  export let withTime = false
+
+  const client = getClient()
+
+  async function onUpdate ({ detail: newDate }: CustomEvent<Timestamp | undefined>) {
+    if (newDate !== undefined && newDate !== value.dueDate) {
+      await client.update(value, { dueDate: newDate })
+    }
+  }
+
+  $: currentDate = value.dueDate !== null ? new Date(value.dueDate) : null
+</script>
+
+<DatePopup {currentDate} {mondayStart} {withTime} on:close on:update={onUpdate} />

plugins/tracker-resources/src/index.ts

@@ -34,6 +34,7 @@ import PriorityEditor from './components/issues/PriorityEditor.svelte'
 import ProjectEditor from './components/projects/ProjectEditor.svelte'
 import StatusPresenter from './components/issues/StatusPresenter.svelte'
 import StatusEditor from './components/issues/StatusEditor.svelte'
+import SetDueDateActionPopup from './components/SetDueDateActionPopup.svelte'
 import DueDatePresenter from './components/issues/DueDatePresenter.svelte'
 import AssigneePresenter from './components/issues/AssigneePresenter.svelte'
 import ViewOptionsPopup from './components/issues/ViewOptionsPopup.svelte'
@@ -77,6 +78,7 @@ export default async (): Promise<Resources> => ({
     LeadPresenter,
     TargetDatePresenter,
     ProjectMembersPresenter,
-    ProjectStatusPresenter
+    ProjectStatusPresenter,
+    SetDueDateActionPopup
   }
 })

plugins/tracker-resources/src/plugin.ts

@@ -12,7 +12,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 //
-
 import type { IntlString } from '@anticrm/platform'
 import { mergeIds } from '@anticrm/platform'
 import tracker, { trackerId } from '../../tracker/lib'
@@ -95,6 +94,7 @@ export default mergeIds(trackerId, tracker, {
     Labels: '' as IntlString,
     Space: '' as IntlString,
     SetDueDate: '' as IntlString,
+    ChangeDueDate: '' as IntlString,
     ModificationDate: '' as IntlString,
     Issue: '' as IntlString,
     Document: '' as IntlString,
@@ -173,6 +173,7 @@ export default mergeIds(trackerId, tracker, {
     LeadPresenter: '' as AnyComponent,
     TargetDatePresenter: '' as AnyComponent,
     ProjectMembersPresenter: '' as AnyComponent,
-    ProjectStatusPresenter: '' as AnyComponent
+    ProjectStatusPresenter: '' as AnyComponent,
+    SetDueDateActionPopup: '' as AnyComponent
   }
 })

plugins/tracker/package.json

@@ -29,6 +29,7 @@
     "@anticrm/core": "~0.6.16",
     "@anticrm/platform": "~0.6.6",
     "@anticrm/ui": "~0.6.0",
+    "@anticrm/view": "~0.6.0",
     "@anticrm/contact": "~0.6.5",
     "@anticrm/chunter": "~0.6.1",
     "@anticrm/attachment": "~0.6.1",

plugins/tracker/src/index.ts

@@ -15,6 +15,7 @@
 
 import { Employee } from '@anticrm/contact'
 import type { AttachedDoc, Class, Doc, Markup, Ref, Space, Timestamp, Type } from '@anticrm/core'
+import { Action, ActionCategory } from '@anticrm/view'
 import type { Asset, IntlString, Plugin } from '@anticrm/platform'
 import { plugin } from '@anticrm/platform'
 import { AnyComponent } from '@anticrm/ui'
@@ -213,7 +214,6 @@ export default plugin(trackerId, {
     Magnifier: '' as Asset,
     Home: '' as Asset,
     Labels: '' as Asset,
-    MoreActions: '' as Asset,
     DueDate: '' as Asset,
     Parent: '' as Asset,
 
@@ -239,5 +239,11 @@ export default plugin(trackerId, {
     ProjectStatusPaused: '' as Asset,
     ProjectStatusCompleted: '' as Asset,
     ProjectStatusCanceled: '' as Asset
+  },
+  category: {
+    Tracker: '' as Ref<ActionCategory>
+  },
+  action: {
+    SetDueDate: '' as Ref<Action>
   }
 })