From 034986627ee2893aa78b1fecb3f3dd5e45044c8d Mon Sep 17 00:00:00 2001
From: Sergei Ogorelkov <sergei.ogorelkov@xored.com>
Date: Tue, 26 Apr 2022 18:19:26 +0700
Subject: [PATCH] Add right panel to the EditIssue dialog (#1272) (#1546)

Signed-off-by: Sergei Ogorelkov <sergei.ogorelkov@xored.com>
---
 packages/theme/styles/_layouts.scss           |   5 +-
 plugins/tracker-assets/lang/en.json           |   4 +-
 .../src/components/issues/EditIssue.svelte    | 272 ++++++++++++++----
 plugins/tracker-resources/src/plugin.ts       |   5 +-
 4 files changed, 226 insertions(+), 60 deletions(-)

diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index e770439ec9..00e9215050 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -342,6 +342,7 @@ p:last-child { margin-block-end: 0; }
 .mx-1 { margin: 0 .25rem; }
 .mx-2 { margin: 0 .5rem; }
 .mx-3 { margin: 0 .75rem; }
+.mx-auto { margin: 0 auto; }
 .my-4 { margin: 1rem 0; }
 
 .pl-1 { padding-left: .25rem; }
@@ -421,14 +422,16 @@ p:last-child { margin-block-end: 0; }
 .w-9 { width: 2.25rem; }
 .w-14 { width: 3.5rem; }
 .w-16 { width: 4rem; }
+.w-24 { width: 6rem; }
 .w-60 { width: 15rem; }
 .w-85 { width: 21.25rem; }
 .w-165 { width: 41.25rem; }
 .min-w-0 { min-width: 0; }
 .min-w-4 { min-width: 1rem; }
 .min-w-9 { min-width: 2.25rem; }
-.min-h-0 { min-height: 0; }
+.min-w-80 { min-width: 20rem; }
 .min-w-min { min-width: min-content; }
+.min-h-0 { min-height: 0; }
 .max-h-125 { max-height: 31.25rem; }
 .clear-mins {
   min-width: 0;
diff --git a/plugins/tracker-assets/lang/en.json b/plugins/tracker-assets/lang/en.json
index de73afb696..0971ea1610 100644
--- a/plugins/tracker-assets/lang/en.json
+++ b/plugins/tracker-assets/lang/en.json
@@ -78,7 +78,9 @@
     "DueDate": "Due date",
     "All": "All",
     "PastWeek": "Past week",
-    "PastMonth": "Past month"
+    "PastMonth": "Past month",
+    "CopyIssueUrl": "Copy Issue URL to clipboard",
+    "CopyIssueId": "Copy Issue ID to clipboard"
   },
   "status": {}
 }
\ No newline at end of file
diff --git a/plugins/tracker-resources/src/components/issues/EditIssue.svelte b/plugins/tracker-resources/src/components/issues/EditIssue.svelte
index 6cecece17b..c225ec23c5 100644
--- a/plugins/tracker-resources/src/components/issues/EditIssue.svelte
+++ b/plugins/tracker-resources/src/components/issues/EditIssue.svelte
@@ -1,66 +1,88 @@
 <!--
-// 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
 // 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 contact from '@anticrm/contact'
-  import { Class, Ref } from '@anticrm/core'
+  import { Class, Ref, SortingOrder, WithLookup } from '@anticrm/core'
   import { createQuery, getClient, UserBox } from '@anticrm/presentation'
   import { StyledTextBox } from '@anticrm/text-editor'
-  import type { Issue, Team } from '@anticrm/tracker'
-  import { AnyComponent, Button, EditBox, Grid, IconDownOutline, IconUpOutline } from '@anticrm/ui'
+  import type { Issue, IssueStatus, Team } from '@anticrm/tracker'
+  import { AnyComponent, Button, EditBox, IconDownOutline, IconUpOutline, Label, Scroller } from '@anticrm/ui'
   import { createEventDispatcher, onMount } from 'svelte'
   import tracker from '../../plugin'
   // import Card from '../Card.svelte'
   import { Panel } from '@anticrm/ui'
   import IssuePresenter from './IssuePresenter.svelte'
+  import StatusPresenter from './StatusPresenter.svelte'
+  import PriorityPresenter from './PriorityPresenter.svelte'
 
   export let _id: Ref<Issue>
   export let _class: Ref<Class<Issue>>
   export let rightSection: AnyComponent | undefined = undefined
 
-  let object: Issue | undefined
-
-  let currentTeam: Team | undefined
-
   const query = createQuery()
-  $: _id &&
-    _class &&
-    query.query(_class, { _id }, async (result) => {
-      object = result[0]
-    })
-  
-  $: if (object !== undefined) {
-    client.findOne(tracker.class.Team, { _id: object.space }).then((r) => {
-      currentTeam = r
-    })
-  }
+  const statusesQuery = createQuery()
   const dispatch = createEventDispatcher()
   const client = getClient()
 
+  let issue: Issue | undefined
+  let currentTeam: Team | undefined
+  let issueStatuses: WithLookup<IssueStatus>[] | undefined
+
+  $: _id &&
+    _class &&
+    query.query(_class, { _id }, async (result) => {
+      issue = result[0]
+    })
+
+  $: if (issue !== undefined) {
+    client.findOne(tracker.class.Team, { _id: issue.space }).then((r) => {
+      currentTeam = r
+    })
+  }
+
+  $: currentTeam &&
+    statusesQuery.query(
+      tracker.class.IssueStatus,
+      { attachedTo: currentTeam._id },
+      (statuses) => {
+        issueStatuses = statuses
+      },
+      {
+        lookup: { category: tracker.class.IssueStatusCategory },
+        sort: { rank: SortingOrder.Ascending }
+      }
+    )
+
+  $: issueLabel = currentTeam && issue && `${currentTeam.identifier}-${issue.number}`
+
   function change (field: string, value: any) {
-    if (object !== undefined) {
-      client.update(object, { [field]: value })
+    if (issue !== undefined) {
+      client.update(issue, { [field]: value })
     }
   }
 
+  function copy (text: string): void {
+    navigator.clipboard.writeText(text)
+  }
+
   onMount(() => {
     dispatch('open', { ignoreKeys: ['comments', 'name', 'description', 'number'] })
   })
 </script>
 
-{#if object !== undefined}
+{#if issue !== undefined}
   <Panel
     reverseCommands={true}
     rightSection={rightSection !== undefined}
@@ -68,41 +90,177 @@
       dispatch('close')
     }}
   >
-    <svelte:fragment slot="subtitle">
-      {#if currentTeam}
-        <IssuePresenter value={object} {currentTeam} />
-      {/if}
-    </svelte:fragment>
     <svelte:fragment slot="navigate-actions">
       <Button icon={IconDownOutline} kind={'secondary'} size={'medium'} />
       <Button icon={IconUpOutline} kind={'secondary'} size={'medium'} />
     </svelte:fragment>
-    <div class="p-10">
-      <Grid column={1} rowGap={1.5}>
-        <EditBox
-          label={tracker.string.Title}
-          bind:value={object.title}
-          placeholder={tracker.string.IssueTitlePlaceholder}
-          maxWidth={'16rem'}
-          focus
-          on:change={() => change('title', object?.title)}
-        />
-        <StyledTextBox
-          alwaysEdit
-          bind:content={object.description}
-          placeholder={tracker.string.IssueDescriptionPlaceholder}
-          on:value={(evt) => change('description', evt.detail)}
-        />
-        <UserBox
-          _class={contact.class.Employee}
-          label={tracker.string.Assignee}
-          placeholder={tracker.string.Assignee}
-          bind:value={object.assignee}
-          allowDeselect
-          titleDeselect={tracker.string.Unassigned}
-          on:change={() => change('assignee', object?.assignee)}
-        />
-      </Grid>
+
+    <div class="flex w-full h-full">
+      <div class="flex-col main-panel">
+        <div class="ac-header short divide mx-auto header">
+          {#if currentTeam}
+            <IssuePresenter value={issue} {currentTeam} />
+          {/if}
+        </div>
+        <Scroller>
+          <div class="flex-col flex-grow flex-no-shrink h-full mx-auto content">
+            <div class="mt-6">
+              <EditBox
+                label={tracker.string.Title}
+                bind:value={issue.title}
+                placeholder={tracker.string.IssueTitlePlaceholder}
+                maxWidth={'16rem'}
+                focus
+                on:change={() => change('title', issue?.title)}
+              />
+            </div>
+            <div class="mt-6">
+              <StyledTextBox
+                alwaysEdit
+                bind:content={issue.description}
+                placeholder={tracker.string.IssueDescriptionPlaceholder}
+                on:value={(evt) => change('description', evt.detail)}
+              />
+            </div>
+          </div>
+        </Scroller>
+      </div>
+
+      {#if issue && currentTeam && issueStatuses}
+        <div class="flex-grow relative min-w-80 right-panel">
+          <div class="ac-header short divide header">
+            <span class="w-24 overflow-label">{issueLabel}</span>
+            <div class="buttons-group">
+              <Button
+                icon={tracker.icon.Issue}
+                title={tracker.string.CopyIssueUrl}
+                width="min-content"
+                size="small"
+                kind="transparent"
+                on:click={() => copy(window.location.href)}
+              />
+              <Button
+                icon={tracker.icon.Views}
+                title={tracker.string.CopyIssueId}
+                width="min-content"
+                size="small"
+                kind="transparent"
+                on:click={() => issueLabel && copy(issueLabel)}
+              />
+            </div>
+          </div>
+
+          <div class="content">
+            <div class="flex-row-center mb-4">
+              <span class="label w-24">
+                <Label label={tracker.string.Status} />
+              </span>
+              <StatusPresenter value={issue} statuses={issueStatuses} currentSpace={currentTeam._id} shouldShowLabel />
+            </div>
+
+            <div class="flex-row-center mb-4">
+              <span class="label w-24">
+                <Label label={tracker.string.Priority} />
+              </span>
+              <PriorityPresenter value={issue} currentSpace={currentTeam._id} shouldShowLabel />
+            </div>
+
+            <div class="flex-row-center mb-4">
+              <span class="label w-24">
+                <Label label={tracker.string.Assignee} />
+              </span>
+              <UserBox
+                _class={contact.class.Employee}
+                label={tracker.string.Assignee}
+                placeholder={tracker.string.Assignee}
+                bind:value={issue.assignee}
+                allowDeselect
+                titleDeselect={tracker.string.Unassigned}
+                on:change={() => change('assignee', issue?.assignee)}
+              />
+            </div>
+
+            <div class="flex-row-center mb-4">
+              <span class="label w-24">
+                <Label label={tracker.string.Labels} />
+              </span>
+              <Button
+                label={tracker.string.Labels}
+                icon={tracker.icon.Labels}
+                width="min-content"
+                size="small"
+                kind="no-border"
+              />
+            </div>
+
+            <div class="devider" />
+
+            <div class="flex-row-center mb-4">
+              <span class="label w-24">
+                <Label label={tracker.string.Project} />
+              </span>
+              <Button
+                label={tracker.string.Project}
+                icon={tracker.icon.Projects}
+                width="min-content"
+                size="small"
+                kind="no-border"
+              />
+            </div>
+          </div>
+        </div>
+      {/if}
     </div>
   </Panel>
 {/if}
+
+<style lang="scss">
+  .main-panel {
+    flex-grow: 2;
+    flex-basis: 47.5rem;
+
+    .header {
+      max-width: 56.25rem;
+      width: calc(100% - 5rem);
+      justify-content: space-between;
+      padding: 0 1.25rem;
+    }
+
+    .content {
+      max-width: 53.75rem;
+      width: calc(100% - 7.5rem);
+    }
+  }
+
+  .right-panel {
+    .header {
+      padding: 1rem 0;
+      margin: 0 1.5rem;
+    }
+
+    .content {
+      position: absolute;
+      inset: 2.5rem 0 0;
+      padding: 1.5rem 0.5rem 1.5rem 1.5rem;
+
+      .label {
+        margin: 0.625rem 0;
+      }
+    }
+
+    .devider {
+      height: 1px;
+      border-bottom: 1px solid var(--divider-color);
+      margin: 0.75rem 1.5rem 1.25rem 0;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      border-left: 1px solid var(--divider-color);
+      top: 1.125rem;
+      bottom: 1.125rem;
+      width: 0px;
+    }
+  }
+</style>
diff --git a/plugins/tracker-resources/src/plugin.ts b/plugins/tracker-resources/src/plugin.ts
index 8927cd5c2b..0c931d60f7 100644
--- a/plugins/tracker-resources/src/plugin.ts
+++ b/plugins/tracker-resources/src/plugin.ts
@@ -104,7 +104,10 @@ export default mergeIds(trackerId, tracker, {
     IssueTitlePlaceholder: '' as IntlString,
     IssueDescriptionPlaceholder: '' as IntlString,
     Unassigned: '' as IntlString,
-    AddIssueTooltip: '' as IntlString
+    AddIssueTooltip: '' as IntlString,
+
+    CopyIssueUrl: '' as IntlString,
+    CopyIssueId: '' as IntlString
   },
   component: {
     NopeComponent: '' as AnyComponent,