Unify related issue creation and few fixes (#2289)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>

packages/ui/src/components/PopupInstance.svelte

@@ -120,7 +120,7 @@
     on:update={(ev) => {
       _update(ev.detail)
     }}
-    on:close={(ev) => _close(ev.detail)}
+    on:close={(ev) => _close(ev?.detail)}
     on:fullsize={() => {
       fullSize = !fullSize
     }}

plugins/contact-resources/src/components/ChannelsDropdown.svelte

@@ -194,7 +194,7 @@
             if (result === '') {
               displayItems = dropItem(n)
             } else {
-              if (result !== 'open') displayItems[n].value = result
+              if (result !== 'open') item.value = result
             }
             saveItems()
             focusManager?.setFocusPos(focusIndex + 1 + n)
@@ -208,7 +208,7 @@
             if (result === '') {
               displayItems = dropItem(n)
             } else {
-              displayItems[n].value = result
+              item.value = result
             }
             saveItems()
           }

plugins/recruit-resources/src/components/EditVacancy.svelte

@@ -59,7 +59,6 @@
       showPopup(ContextMenu, { object }, (ev as MouseEvent).target as HTMLElement)
     }
   }
-  let isCreateIssue = false
 </script>
 
 {#if object}
@@ -150,19 +149,13 @@
               kind={'transparent'}
               size={'small'}
               on:click={() => {
-                isCreateIssue = true
+                showPopup(tracker.component.CreateIssue, { relatedTo: object, space: object.space }, 'top')
               }}
             />
           </div>
         </div>
         <div class="flex-row">
-          <Component
+          <Component is={tracker.component.RelatedIssues} props={{ object: object }} />
-            is={tracker.component.RelatedIssues}
-            props={{ object: object, isCreating: isCreateIssue }}
-            on:close={() => {
-              isCreateIssue = false
-            }}
-          />
         </div>
       </div></Grid
     >

plugins/tracker-assets/lang/ru.json

@@ -222,6 +222,7 @@
     "IssueTemplate": "Процесс",
     "IssueTemplates": "Процессы",
     "NewProcess": "Новый процесс",
+    "SaveProcess": "Сохранить процесс",
     "NoIssueTemplate": "Без процесса",
     "TemplateReplace": "Вы хотите заменить выбранный процесс?",
     "TemplateReplaceConfirm": "Все внесенные изменения в задачу будут потеряны"

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

@@ -94,6 +94,8 @@
   }
 
   function resetObject (): void {
+    templateId = undefined
+    template = undefined
     object = {
       title: '',
       description: '',

plugins/tracker-resources/src/components/issues/edit/ControlPanel.svelte

@@ -18,6 +18,7 @@
   import tags from '@hcengineering/tags'
   import type { Issue, IssueStatus } from '@hcengineering/tracker'
   import { Component, Label } from '@hcengineering/ui'
+  import { ObjectBox } from '@hcengineering/view-resources'
   import { getFiltredKeys, isCollectionAttr } from '@hcengineering/view-resources/src/utils'
   import tracker from '../../../plugin'
   import ProjectEditor from '../../projects/ProjectEditor.svelte'
@@ -53,6 +54,26 @@
 </script>
 
 <div class="content">
+  {#if issue.template?.template}
+    <span class="label">
+      <Label label={tracker.string.IssueTemplate} />
+    </span>
+    <ObjectBox
+      _class={tracker.class.IssueTemplate}
+      value={issue.template?.template}
+      size={'small'}
+      kind={'link'}
+      width={'100%'}
+      label={tracker.string.NoIssueTemplate}
+      icon={tracker.icon.Issues}
+      searchField={'title'}
+      allowDeselect={true}
+      showNavigate={false}
+      readonly
+      docProps={{ disableClick: true }}
+    />
+  {/if}
+
   <span class="label">
     <Label label={tracker.string.Status} />
   </span>

plugins/tracker-resources/src/components/issues/edit/SubIssueList.svelte

@@ -75,12 +75,7 @@
     showPopup(ContextMenu, { object }, getEventPositionElement(ev))
   }
 
-  const listProvider = new ListSelectionProvider((offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection) => {
+  const listProvider = new ListSelectionProvider((offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection) => {})
-    // if (dir === 'vertical') {
-    //   // Select next
-    //   table.select(offset, of)
-    // }
-  })
 
   let varsStyle: string = ''
   const propsWidth: Record<string, number> = { issue: 0 }

plugins/tracker-resources/src/components/issues/related/CreateRelatedIssue.svelte

@@ -1,261 +0,0 @@
-<!-- 
-// 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 { createEventDispatcher } from 'svelte'
-  import core, { Account, AttachedData, Doc, generateId, Ref, SortingOrder, WithLookup } from '@hcengineering/core'
-  import presentation, { getClient, KeyedAttribute, SpaceSelector } from '@hcengineering/presentation'
-  import { StyledTextArea } from '@hcengineering/text-editor'
-  import { IssueStatus, IssuePriority, Issue, Team, calcRank } from '@hcengineering/tracker'
-  import { Button, Component, EditBox } from '@hcengineering/ui'
-  import tags, { TagElement, TagReference } from '@hcengineering/tags'
-  import tracker from '../../../plugin'
-  import AssigneeEditor from '../AssigneeEditor.svelte'
-  import StatusEditor from '../StatusEditor.svelte'
-  import PriorityEditor from '../PriorityEditor.svelte'
-  import EstimationEditor from '../timereport/EstimationEditor.svelte'
-
-  export let related: Doc
-  export let issueStatuses: Map<Ref<Team>, WithLookup<IssueStatus>[]>
-  export let teams: Map<Ref<Team>, Team> | undefined
-
-  const dispatch = createEventDispatcher()
-  const client = getClient()
-
-  let newIssue: AttachedData<Issue> = getIssueDefaults()
-  let thisRef: HTMLDivElement
-  let focusIssueTitle: () => void
-  let labels: TagReference[] = []
-
-  let currentTeam: Ref<Team>
-
-  $: if (currentTeam === undefined) {
-    currentTeam = teams?.values().next()?.value
-  }
-
-  const key: KeyedAttribute = {
-    key: 'labels',
-    attr: client.getHierarchy().getAttribute(tracker.class.Issue, 'labels')
-  }
-
-  function getIssueDefaults (): AttachedData<Issue> {
-    return {
-      title: '',
-      description: '',
-      assignee: null,
-      project: null,
-      number: 0,
-      rank: '',
-      status: '' as Ref<IssueStatus>,
-      priority: IssuePriority.NoPriority,
-      dueDate: null,
-      comments: 0,
-      subIssues: 0,
-      parents: [],
-      relations: [{ _id: related?._id, _class: related?._class }],
-      sprint: undefined,
-      estimation: 0,
-      reportedTime: 0,
-      reports: 0,
-      childInfo: []
-    }
-  }
-
-  function resetToDefaults () {
-    newIssue = getIssueDefaults()
-    focusIssueTitle?.()
-  }
-
-  function getTitle (value: string) {
-    return value.trim()
-  }
-
-  function close () {
-    dispatch('close')
-  }
-
-  async function createIssue () {
-    if (!canSave) {
-      return
-    }
-    loading = true
-
-    try {
-      const lastOne = await client.findOne<Issue>(
-        tracker.class.Issue,
-        { space: currentTeam },
-        { sort: { rank: SortingOrder.Descending } }
-      )
-      const incResult = await client.updateDoc(
-        tracker.class.Team,
-        core.space.Space,
-        currentTeam,
-        { $inc: { sequence: 1 } },
-        true
-      )
-
-      const value: AttachedData<Issue> = {
-        ...newIssue,
-        title: getTitle(newIssue.title),
-        number: (incResult as any).object.sequence,
-        rank: calcRank(lastOne, undefined),
-        parents: [{ parentId: tracker.ids.NoParent, parentTitle: '' }]
-      }
-
-      const objectId = await client.addCollection(
-        tracker.class.Issue,
-        currentTeam,
-        tracker.ids.NoParent,
-        tracker.class.Issue,
-        'subIssues',
-        value
-      )
-      for (const label of labels) {
-        await client.addCollection(label._class, label.space, objectId, tracker.class.Issue, 'labels', {
-          title: label.title,
-          color: label.color,
-          tag: label.tag
-        })
-      }
-    } finally {
-      resetToDefaults()
-      loading = false
-    }
-  }
-
-  function addTagRef (tag: TagElement): void {
-    labels = [
-      ...labels,
-      {
-        _class: tags.class.TagReference,
-        _id: generateId() as Ref<TagReference>,
-        attachedTo: '' as Ref<Doc>,
-        attachedToClass: tracker.class.Issue,
-        collection: 'labels',
-        space: tags.space.Tags,
-        modifiedOn: 0,
-        modifiedBy: '' as Ref<Account>,
-        title: tag.title,
-        tag: tag._id,
-        color: tag.color
-      }
-    ]
-  }
-
-  let loading = false
-  $: thisRef && thisRef.scrollIntoView({ behavior: 'smooth' })
-  $: canSave = getTitle(newIssue.title ?? '').length > 0
-  $: if (!newIssue.status) {
-    const t = teams?.get(currentTeam)
-    if (t?.defaultIssueStatus !== undefined) {
-      newIssue.status = t?.defaultIssueStatus
-    }
-  }
-</script>
-
-<div bind:this={thisRef} class="flex-col root">
-  <div class="flex-row-top">
-    <div id="status-editor" class="mr-1">
-      <StatusEditor
-        value={newIssue}
-        statuses={issueStatuses.get(currentTeam)}
-        kind="transparent"
-        size="medium"
-        justify="center"
-        tooltipAlignment="bottom"
-        on:change={({ detail }) => (newIssue.status = detail)}
-      />
-    </div>
-    <div class="w-full flex-col content">
-      <EditBox
-        bind:value={newIssue.title}
-        bind:focusInput={focusIssueTitle}
-        placeholder={tracker.string.IssueTitlePlaceholder}
-        focus
-      />
-      <div class="mt-4">
-        {#key newIssue.description}
-          <StyledTextArea
-            bind:content={newIssue.description}
-            placeholder={tracker.string.IssueDescriptionPlaceholder}
-            showButtons={false}
-          />
-        {/key}
-      </div>
-    </div>
-  </div>
-  <div class="mt-4 flex-between">
-    <div class="buttons-group xsmall-gap">
-      <SpaceSelector _class={tracker.class.Team} label={tracker.string.Team} bind:space={currentTeam} />
-      <PriorityEditor
-        value={newIssue}
-        shouldShowLabel
-        isEditable
-        kind="no-border"
-        size="small"
-        justify="center"
-        on:change={({ detail }) => (newIssue.priority = detail)}
-      />
-      {#key newIssue.assignee}
-        <AssigneeEditor
-          value={newIssue}
-          size="small"
-          kind="no-border"
-          on:change={({ detail }) => (newIssue.assignee = detail)}
-        />
-      {/key}
-      <Component
-        is={tags.component.TagsDropdownEditor}
-        props={{
-          items: labels,
-          key,
-          targetClass: tracker.class.Issue,
-          countLabel: tracker.string.NumberLabels
-        }}
-        on:open={(evt) => {
-          addTagRef(evt.detail)
-        }}
-        on:delete={(evt) => {
-          labels = labels.filter((it) => it._id !== evt.detail)
-        }}
-      />
-      <EstimationEditor kind={'no-border'} size={'small'} value={newIssue} />
-    </div>
-    <div class="buttons-group small-gap">
-      <Button label={presentation.string.Cancel} size="small" kind="transparent" on:click={close} />
-      <Button
-        {loading}
-        disabled={!canSave}
-        label={presentation.string.Save}
-        size="small"
-        kind="no-border"
-        on:click={createIssue}
-      />
-    </div>
-  </div>
-</div>
-
-<style lang="scss">
-  .root {
-    padding: 0.5rem 1.5rem;
-    background-color: var(--theme-bg-accent-color);
-    border: 1px solid var(--theme-button-border-enabled);
-    border-radius: 0.5rem;
-    overflow: hidden;
-
-    .content {
-      padding-top: 0.3rem;
-    }
-  }
-</style>

plugins/tracker-resources/src/components/issues/related/RelatedIssues.svelte

@@ -17,20 +17,16 @@
   import presentation, { createQuery, getClient } from '@hcengineering/presentation'
   import { calcRank, Issue, IssueStatus, Team } from '@hcengineering/tracker'
   import { Label, Spinner } from '@hcengineering/ui'
-  import { createEventDispatcher } from 'svelte'
   import tracker from '../../../plugin'
   import SubIssueList from '../edit/SubIssueList.svelte'
-  import CreateRelatedIssue from './CreateRelatedIssue.svelte'
 
   export let object: Doc
-  export let isCreating = false
 
   let query: DocumentQuery<Issue>
   $: query = { 'relations._id': object._id, 'relations._class': object._class }
 
   const subIssuesQuery = createQuery()
   const client = getClient()
-  const dispatch = createEventDispatcher()
 
   let subIssues: Issue[] = []
 
@@ -87,20 +83,6 @@
         <Label label={presentation.string.NoMatchesFound} />
       </div>
     {/if}
-
-    {#if isCreating}
-      <div class="pt-4">
-        <CreateRelatedIssue
-          related={object}
-          {issueStatuses}
-          {teams}
-          on:close={() => {
-            isCreating = false
-            dispatch('close')
-          }}
-        />
-      </div>
-    {/if}
   {:else}
     <div class="flex-center pt-3">
       <Spinner />

plugins/tracker-resources/src/components/myissues/MyIssues.svelte

@@ -36,7 +36,7 @@
   let created = { _id: { $in: [] as Ref<Issue>[] } }
   let subscribed = { _id: { $in: [] as Ref<Issue>[] } }
 
-  const viewOptionsConfig: ViewOptionModel[] = getDefaultViewOptionsConfig(false)
+  const viewOptionsConfig: ViewOptionModel[] = getDefaultViewOptionsConfig(true)
 
   const createdQuery = createQuery()
   $: createdQuery.query<TxCollectionCUD<Issue, Issue>>(

plugins/tracker-resources/src/plugin.ts

@@ -283,7 +283,6 @@ export default mergeIds(trackerId, tracker, {
     TeamProjects: '' as AnyComponent,
     IssuePreview: '' as AnyComponent,
     RelationsPopup: '' as AnyComponent,
-    CreateIssue: '' as AnyComponent,
 
     Sprints: '' as AnyComponent,
     SprintPresenter: '' as AnyComponent,

plugins/tracker-resources/src/utils.ts

@@ -510,7 +510,7 @@ export async function getPriorityStates (): Promise<TypeState[]> {
   )
 }
 
-export function getDefaultViewOptionsConfig (enableSubIssues = true): ViewOptionModel[] {
+export function getDefaultViewOptionsConfig (subIssuesValue = false): ViewOptionModel[] {
   const groupByCategory: ViewOptionModel = {
     key: 'groupBy',
     label: tracker.string.Grouping,
@@ -541,7 +541,7 @@ export function getDefaultViewOptionsConfig (enableSubIssues = true): ViewOption
   const showSubIssuesCategory: ViewOptionModel = {
     key: 'shouldShowSubIssues',
     label: tracker.string.SubIssues,
-    defaultValue: false,
+    defaultValue: subIssuesValue,
     type: 'toggle'
   }
   const showEmptyGroups: ViewOptionModel = {
@@ -552,9 +552,9 @@ export function getDefaultViewOptionsConfig (enableSubIssues = true): ViewOption
     hidden: ({ groupBy }) => !['status', 'priority'].includes(groupBy)
   }
   const result: ViewOptionModel[] = [groupByCategory, orderByCategory]
-  if (enableSubIssues) {
+
   result.push(showSubIssuesCategory)
-  }
+
   result.push(showEmptyGroups)
   return result
 }

plugins/tracker/src/index.ts

@@ -344,7 +344,8 @@ export default plugin(trackerId, {
     Tracker: '' as AnyComponent,
     TrackerApp: '' as AnyComponent,
     RelatedIssues: '' as AnyComponent,
-    EditIssue: '' as AnyComponent
+    EditIssue: '' as AnyComponent,
+    CreateIssue: '' as AnyComponent
   },
   issueStatusCategory: {
     Backlog: '' as Ref<IssueStatusCategory>,