Tracker: Add project issue list view (#2012)

Signed-off-by: Dvinyanin Alexandr <dvinyanin.alexandr@gmail.com>

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

@@ -65,6 +65,7 @@
   export let completedIssuesPeriod: IssuesDateModificationPeriod | null = IssuesDateModificationPeriod.All
   export let shouldShowEmptyGroups: boolean | undefined = false
   export let includedGroups: Partial<Record<IssuesGroupByKeys, Array<any>>> = {}
+  export let label: string | undefined = undefined
 
   const dispatch = createEventDispatcher()
   const ENTRIES_LIMIT = 200
@@ -439,18 +440,16 @@
       filterElement
     )
   }
+  $: value = totalIssuesCount === resultIssuesCount ? totalIssuesCount : `${resultIssuesCount}/${totalIssuesCount}`
 </script>
 
 {#if currentTeam}
   <div class="fs-title flex-between header">
     <div class="titleContainer">
-      {#if totalIssuesCount === resultIssuesCount}
-        <Label label={title} params={{ value: totalIssuesCount }} />
+      {#if label}
+        {label}
       {:else}
-        <div class="labelsContainer">
-          <Label label={title} params={{ value: resultIssuesCount }} />
-          <div class="totalIssuesLabel">/{totalIssuesCount}</div>
-        </div>
+        <Label label={title} params={{ value }} />
       {/if}
       <div class="ml-4">
         <Button
@@ -486,36 +485,46 @@
       onChangeMode={handleFilterModeChanged}
     />
   {/if}
-  <ScrollBox vertical stretch>
-    <IssuesListBrowser
-      _class={tracker.class.Issue}
-      {currentSpace}
-      {groupByKey}
-      orderBy={issuesOrderKeyMap[orderingKey]}
-      {statuses}
-      {employees}
-      categories={displayedCategories}
-      itemsConfig={[
-        { key: '', presenter: tracker.component.PriorityEditor },
-        { key: '', presenter: tracker.component.IssuePresenter, props: { currentTeam } },
-        { key: '', presenter: tracker.component.StatusEditor, props: { statuses } },
-        { key: '', presenter: tracker.component.TitlePresenter, props: { shouldUseMargin: true } },
-        { key: '', presenter: tracker.component.DueDatePresenter },
-        {
-          key: '',
-          presenter: tracker.component.ProjectEditor,
-          props: { kind: 'secondary', size: 'small', shape: 'round', shouldShowPlaceholder: false }
-        },
-        { key: 'modifiedOn', presenter: tracker.component.ModificationDatePresenter },
-        {
-          key: '$lookup.assignee',
-          presenter: tracker.component.AssigneePresenter,
-          props: { currentSpace, defaultClass: contact.class.Employee, shouldShowLabel: false }
-        }
-      ]}
-      {groupedIssues}
-    />
-  </ScrollBox>
+
+  <div class="flex h-full">
+    <div class="antiPanel-component">
+      <ScrollBox vertical stretch>
+        <IssuesListBrowser
+          _class={tracker.class.Issue}
+          {currentSpace}
+          {groupByKey}
+          orderBy={issuesOrderKeyMap[orderingKey]}
+          {statuses}
+          {employees}
+          categories={displayedCategories}
+          itemsConfig={[
+            { key: '', presenter: tracker.component.PriorityEditor },
+            { key: '', presenter: tracker.component.IssuePresenter, props: { currentTeam } },
+            { key: '', presenter: tracker.component.StatusEditor, props: { statuses } },
+            { key: '', presenter: tracker.component.TitlePresenter, props: { shouldUseMargin: true } },
+            { key: '', presenter: tracker.component.DueDatePresenter },
+            {
+              key: '',
+              presenter: tracker.component.ProjectEditor,
+              props: { kind: 'secondary', size: 'small', shape: 'round', shouldShowPlaceholder: false }
+            },
+            { key: 'modifiedOn', presenter: tracker.component.ModificationDatePresenter },
+            {
+              key: '$lookup.assignee',
+              presenter: tracker.component.AssigneePresenter,
+              props: { currentSpace, defaultClass: contact.class.Employee, shouldShowLabel: false }
+            }
+          ]}
+          {groupedIssues}
+        />
+      </ScrollBox>
+    </div>
+    {#if $$slots.aside !== undefined}
+      <div class="antiPanel-component aside border-left">
+        <slot name="aside" />
+      </div>
+    {/if}
+  </div>
 {/if}
 
 <style lang="scss">
@@ -530,13 +539,4 @@
     align-items: center;
     justify-content: flex-start;
   }
-
-  .labelsContainer {
-    display: flex;
-    align-items: center;
-  }
-
-  .totalIssuesLabel {
-    color: var(--content-color);
-  }
 </style>

plugins/tracker-resources/src/components/projects/EditProject.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { Ref } from '@anticrm/core'
+  import { createQuery, getClient } from '@anticrm/presentation'
+  import { StyledTextBox } from '@anticrm/text-editor'
+  import { Project } from '@anticrm/tracker'
+  import { EditBox, getCurrentLocation } from '@anticrm/ui'
+  import { DocAttributeBar } from '@anticrm/view-resources'
+  import Issues from '../issues/Issues.svelte'
+
+  import tracker from '../../plugin'
+
+  let object: Project | undefined
+  $: project = getCurrentLocation().path[3] as Ref<Project>
+
+  const client = getClient()
+  const projectQuery = createQuery()
+  $: projectQuery.query(tracker.class.Project, { _id: project }, (result) => {
+    ;[object] = result
+  })
+
+  async function change (field: string, value: any) {
+    if (object) {
+      await client.update(object, { [field]: value })
+    }
+  }
+</script>
+
+{#if object}
+  <Issues currentSpace={object.space} query={{ project }} label={object.label}>
+    <svelte:fragment slot="aside">
+      <div class="flex-row p-4">
+        <div class="fs-title text-xl">
+          <EditBox bind:value={object.label} maxWidth="39rem" on:change={() => change('label', object?.label)} />
+        </div>
+        <div class="mt-2">
+          <StyledTextBox
+            alwaysEdit={true}
+            showButtons={false}
+            placeholder={tracker.string.Description}
+            content={object.description ?? ''}
+            on:value={(evt) => change('description', evt.detail)}
+          />
+        </div>
+        <DocAttributeBar {object} mixins={[]} ignoreKeys={['icon', 'label', 'description']} />
+      </div>
+    </svelte:fragment>
+  </Issues>
+{/if}

plugins/tracker-resources/src/components/projects/ProjectPresenter.svelte

@@ -15,12 +15,20 @@
 <script lang="ts">
   import { WithLookup } from '@anticrm/core'
   import { Project } from '@anticrm/tracker'
+  import { getCurrentLocation, navigate } from '@anticrm/ui'
 
   export let value: WithLookup<Project>
+  function navigateToProject () {
+    const loc = getCurrentLocation()
+    loc.path[2] = 'project'
+    loc.path[3] = value._id
+    loc.path.length = 4
+    navigate(loc)
+  }
 </script>
 
 {#if value}
-  <div class="flex-presenter projectPresenterRoot">
+  <div class="flex-presenter projectPresenterRoot" on:click={navigateToProject}>
     <span title={value.label} class="projectLabel">{value.label}</span>
   </div>
 {/if}