Tracker: split "edit issue" dialog to preview / edit

models/tracker/src/index.ts

@@ -327,6 +327,10 @@ export function createModel (builder: Builder): void {
     presenter: tracker.component.StatusPresenter
   })
 
+  builder.mixin(tracker.class.Project, core.class.Class, view.mixin.AttributePresenter, {
+    presenter: tracker.component.ProjectTitlePresenter
+  })
+
   builder.createDoc(
     workbench.class.Application,
     core.space.Model,

packages/text-editor/src/components/StyledTextArea.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+  import { IntlString } from '@anticrm/platform'
+  import { Label } from '@anticrm/ui'
+  import { createEventDispatcher } from 'svelte'
+  import textEditorPlugin from '../plugin'
+  import StyledTextEditor from './StyledTextEditor.svelte'
+
+  export let label: IntlString | undefined = undefined
+  export let content: string
+  export let placeholder: IntlString = textEditorPlugin.string.EditorPlaceholder
+
+  export let showButtons = true
+  export let focus = false
+
+  let rawValue: string
+  let oldContent = ''
+
+  $: if (oldContent !== content) {
+    oldContent = content
+    rawValue = content
+  }
+
+  let textEditor: StyledTextEditor
+
+  export function submit (): void {
+    textEditor.submit()
+  }
+  const dispatch = createEventDispatcher()
+  let focused = false
+
+  let needFocus = focus
+
+  $: if (textEditor && needFocus) {
+    textEditor.focus()
+    needFocus = false
+  }
+</script>
+
+<div
+  class="antiComponent styled-box"
+  on:click={() => {
+    if (focused) {
+      textEditor?.focus()
+    }
+  }}
+>
+  {#if label}
+    <div class="label"><Label {label} /></div>
+  {/if}
+  <StyledTextEditor
+    {placeholder}
+    {showButtons}
+    isScrollable={false}
+    bind:content={rawValue}
+    bind:this={textEditor}
+    on:focus={() => {
+      focused = true
+    }}
+    on:blur={() => {
+      focused = false
+      dispatch('value', rawValue)
+      content = rawValue
+    }}
+    on:value={(evt) => {
+      rawValue = evt.detail
+    }}
+  />
+</div>
+
+<style lang="scss">
+  .styled-box {
+    flex-grow: 1;
+
+    .label {
+      padding-bottom: 0.25rem;
+      font-size: 0.75rem;
+      color: var(--theme-caption-color);
+      opacity: 0.3;
+      transition: top 200ms;
+      pointer-events: none;
+      user-select: none;
+    }
+  }
+</style>

packages/text-editor/src/components/StyledTextEditor.svelte

@@ -28,6 +28,7 @@
   export let content: string = ''
   export let placeholder: IntlString = textEditorPlugin.string.EditorPlaceholder
   export let showButtons = true
+  export let isScrollable = true
 
   let textEditor: TextEditor
 
@@ -42,7 +43,24 @@
 <div class="ref-container">
   <div class="textInput">
     <div class="inputMsg">
-      <ScrollBox bothScroll stretch>
+      {#if isScrollable}
+        <ScrollBox bothScroll stretch>
+          <TextEditor
+            bind:content
+            {placeholder}
+            bind:this={textEditor}
+            on:value
+            on:content={(ev) => {
+              dispatch('message', ev.detail)
+              content = ''
+              textEditor.clear()
+            }}
+            on:blur
+            on:focus
+            supportSubmit={false}
+          />
+        </ScrollBox>
+      {:else}
         <TextEditor
           bind:content
           {placeholder}
@@ -57,7 +75,7 @@
           on:focus
           supportSubmit={false}
         />
-      </ScrollBox>
+      {/if}
     </div>
   </div>
   {#if showButtons}

packages/text-editor/src/index.ts

@@ -20,6 +20,7 @@ import { textEditorId } from './plugin'
 export * from '@anticrm/presentation/src/types'
 export { default as ReferenceInput } from './components/ReferenceInput.svelte'
 export { default as StyledTextBox } from './components/StyledTextBox.svelte'
+export { default as StyledTextArea } from './components/StyledTextArea.svelte'
 export { default as StyledTextEditor } from './components/StyledTextEditor.svelte'
 export { default as TextEditor } from './components/TextEditor.svelte'
 export { default } from './plugin'

plugins/tracker-assets/lang/en.json

@@ -96,6 +96,7 @@
     "PastMonth": "Past month",
     "CopyIssueUrl": "Copy Issue URL to clipboard",
     "CopyIssueId": "Copy Issue ID to clipboard",
+    "CopyIssueBranch": "Copy Git branch name to clipboard",
     "AssetLabel": "Asset",
     "AddToProject": "Add to project\u2026",
     "MoveToProject": "Move to project\u2026",
@@ -113,7 +114,9 @@
     "FilterIs": "is",
     "FilterIsNot": "is not",
     "FilterIsEither": "is either of",
-    "FilterStatesCount": "{value, plural, =1 {1 state} other {# states}}"
+    "FilterStatesCount": "{value, plural, =1 {1 state} other {# states}}",
+
+    "EditIssue": "Edit {title}"
   },
   "status": {}
 }

plugins/tracker-assets/lang/ru.json

@@ -73,7 +73,9 @@
     "GotoBacklog": "Перейти к пулу задач",
     "GotoBoard": "Перейти к канбану",
     "GotoProjects": "Перейти к проекту",
-    "GotoTrackerApplication": "Перейти к приложению Трекер"
+    "GotoTrackerApplication": "Перейти к приложению Трекер",
+
+    "EditIssue": "Редактирование {title}"
   },
   "status": {}
 }

plugins/tracker-resources/package.json

@@ -49,6 +49,7 @@
     "@anticrm/view-resources": "~0.6.0",
     "@anticrm/text-editor": "~0.6.0",
     "@anticrm/panel": "~0.6.0",
-    "@anticrm/kanban": "~0.6.0"
+    "@anticrm/kanban": "~0.6.0",
+    "@anticrm/attachment-resources": "~0.6.0"
   }
 }

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

@@ -0,0 +1,53 @@
+<!--
+// 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 { Employee } from '@anticrm/contact'
+  import { Ref } from '@anticrm/core'
+  import { getClient, UserBox } from '@anticrm/presentation'
+  import { Issue } from '@anticrm/tracker'
+  import { Tooltip } from '@anticrm/ui'
+  import contact from '@anticrm/contact'
+  import tracker from '../../plugin'
+
+  export let value: Issue
+
+  const client = getClient()
+
+  const handleAssigneeChanged = async (newAssignee: Ref<Employee> | undefined) => {
+    if (newAssignee === undefined || value.assignee === newAssignee) {
+      return
+    }
+
+    await client.update(value, { assignee: newAssignee })
+  }
+</script>
+
+{#if value}
+  <Tooltip label={tracker.string.AssignTo} fill>
+    <UserBox
+      _class={contact.class.Employee}
+      label={tracker.string.Assignee}
+      placeholder={tracker.string.Assignee}
+      value={value.assignee}
+      allowDeselect
+      titleDeselect={tracker.string.Unassigned}
+      size="large"
+      kind="link"
+      width="100%"
+      justify="left"
+      on:change={({ detail }) => handleAssigneeChanged(detail)}
+    />
+  </Tooltip>
+{/if}

plugins/tracker-resources/src/components/issues/DueDateEditor.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 { getClient } from '@anticrm/presentation'
+  import { Issue } from '@anticrm/tracker'
+  import { DatePresenter, getDaysDifference } from '@anticrm/ui'
+  import { getDueDateIconModifier } from '../../utils'
+
+  export let value: Issue
+
+  const client = getClient()
+
+  const handleDueDateChanged = async (newDueDate: number | undefined) => {
+    if (newDueDate === undefined || value.dueDate === newDueDate) {
+      return
+    }
+
+    await client.update(value, { dueDate: newDueDate })
+  }
+
+  $: today = new Date(new Date(Date.now()).setHours(0, 0, 0, 0))
+  $: isOverdue = value.dueDate !== null && value.dueDate < today.getTime()
+  $: dueDate = value.dueDate === null ? null : new Date(value.dueDate)
+  $: daysDifference = dueDate === null ? null : getDaysDifference(today, dueDate)
+  $: iconModifier = getDueDateIconModifier(isOverdue, daysDifference)
+</script>
+
+{#if value}
+  <!-- TODO: fix button style and alignment -->
+  <DatePresenter
+    kind="transparent"
+    value={value.dueDate}
+    icon={iconModifier}
+    editable
+    on:change={({ detail }) => handleDueDateChanged(detail)}
+  />
+{/if}

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

@@ -19,18 +19,18 @@
   import { getClient } from '@anticrm/presentation'
   import DueDatePopup from './DueDatePopup.svelte'
   import tracker from '../../plugin'
+  import { getDueDateIconModifier } from '../../utils'
 
   export let value: WithLookup<Issue>
 
-  const WARNING_DAYS = 7
   const client = getClient()
 
   $: today = new Date(new Date(Date.now()).setHours(0, 0, 0, 0))
   $: dueDateMs = value.dueDate
   $: isOverdue = dueDateMs !== null && dueDateMs < today.getTime()
   $: dueDate = dueDateMs === null ? null : new Date(dueDateMs)
   $: daysDifference = dueDate === null ? null : getDaysDifference(today, dueDate)
-  $: iconModifier = getIconModifier(isOverdue, daysDifference)
+  $: iconModifier = getDueDateIconModifier(isOverdue, daysDifference)
   $: formattedDate = !dueDateMs ? '' : new Date(dueDateMs).toLocaleString('default', { month: 'short', day: 'numeric' })
 
   const handleDueDateChanged = async (event: CustomEvent<Timestamp>) => {
@@ -43,20 +43,6 @@
     await client.update(value, { dueDate: newDate })
   }
 
-  const getIconModifier = (isOverdue: boolean, daysDifference: number | null) => {
-    if (isOverdue) {
-      return 'overdue' as 'overdue' // Fixes `DatePresenter` icon type issue
-    }
-
-    if (daysDifference === 0) {
-      return 'critical' as 'critical'
-    }
-
-    if (daysDifference !== null && daysDifference <= WARNING_DAYS) {
-      return 'warning' as 'warning'
-    }
-  }
-
   $: shouldRenderPresenter =
     dueDateMs &&
     value.$lookup?.status?.category !== tracker.issueStatusCategory.Completed &&