Edit issue show mixin props (#2656)

Signed-off-by: Denis Bykhov <bykhov.denis@gmail.com>

packages/ui/src/index.ts

@@ -145,6 +145,7 @@ export { default as IconCheckCircle } from './components/icons/CheckCircle.svelt
 export { default as IconColStar } from './components/icons/ColStar.svelte'
 export { default as IconMinWidth } from './components/icons/MinWidth.svelte'
 export { default as IconMaxWidth } from './components/icons/MaxWidth.svelte'
+export { default as IconMixin } from './components/icons/Mixin.svelte'
 
 export { default as PanelInstance } from './components/PanelInstance.svelte'
 export { default as Panel } from './components/Panel.svelte'

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

@@ -13,7 +13,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Doc, WithLookup } from '@hcengineering/core'
+  import { ClassifierKind, Doc, Mixin, Ref, WithLookup } from '@hcengineering/core'
   import { AttributeBarEditor, createQuery, getClient, KeyedAttribute } from '@hcengineering/presentation'
   import tags from '@hcengineering/tags'
   import type { Issue, IssueStatus } from '@hcengineering/tracker'
@@ -31,6 +31,7 @@
 
   export let issue: Issue
   export let issueStatuses: WithLookup<IssueStatus>[]
+  export let showAllMixins: boolean = false
 
   const query = createQuery()
   let showIsBlocking = false
@@ -50,6 +51,27 @@
     keys = filtredKeys.filter((key) => !isCollectionAttr(hierarchy, key))
   }
 
+  let mixins: Mixin<Doc>[] = []
+
+  $: getMixins(issue, showAllMixins)
+
+  function getMixins (object: Issue, showAllMixins: boolean): void {
+    const descendants = hierarchy.getDescendants(tracker.class.Issue).map((p) => hierarchy.getClass(p))
+
+    mixins = descendants.filter(
+      (m) =>
+        m.kind === ClassifierKind.MIXIN &&
+        (hierarchy.hasMixin(object, m._id) ||
+          (showAllMixins && hierarchy.isDerived(tracker.class.Issue, hierarchy.getBaseClass(m._id))))
+    )
+  }
+
+  function getMixinKeys (mixin: Ref<Mixin<Doc>>): KeyedAttribute[] {
+    const filtredKeys = getFiltredKeys(hierarchy, mixin, [], issue._class)
+    const res = filtredKeys.filter((key) => !isCollectionAttr(hierarchy, key))
+    return res
+  }
+
   $: updateKeys(['title', 'description', 'priority', 'status', 'number', 'assignee', 'project', 'dueDate', 'sprint'])
 </script>
 
@@ -143,6 +165,13 @@
       <AttributeBarEditor {key} _class={issue._class} object={issue} showHeader={true} />
     {/each}
   {/if}
+
+  {#each mixins as mixin}
+    <div class="divider" />
+    {#each getMixinKeys(mixin._id) as key (typeof key === 'string' ? key : key.key)}
+      <AttributeBarEditor {key} _class={mixin._id} object={hierarchy.as(issue, mixin._id)} showHeader={true} />
+    {/each}
+  {/each}
 </div>
 
 <style lang="scss">

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

@@ -26,6 +26,7 @@
     EditBox,
     getCurrentLocation,
     IconEdit,
+    IconMixin,
     IconMoreH,
     Label,
     navigate,
@@ -61,6 +62,7 @@
   let innerWidth: number
   let isEditing = false
   let descriptionBox: AttachmentStyledBox
+  let showAllMixins: boolean
 
   const notificationClient = getResource(notification.function.GetNotificationClient).then((res) => res())
 
@@ -289,11 +291,23 @@
           navigate(loc)
         }}
       />
+      <Button
+        kind={'transparent'}
+        shape={'round'}
+        selected={showAllMixins}
+        on:click={() => {
+          showAllMixins = !showAllMixins
+        }}
+      >
+        <svelte:fragment slot="content">
+          <IconMixin size={'small'} />
+        </svelte:fragment>
+      </Button>
     </svelte:fragment>
 
     <svelte:fragment slot="custom-attributes">
       {#if issue && currentTeam && issueStatuses}
-        <ControlPanel {issue} {issueStatuses} />
+        <ControlPanel {issue} {issueStatuses} {showAllMixins} />
       {/if}
 
       <div class="divider" />

plugins/view-resources/src/components/EditDoc.svelte

@@ -28,14 +28,13 @@
     getClient,
     KeyedAttribute
   } from '@hcengineering/presentation'
-  import { AnyComponent, Button, Component, IconMoreH, showPopup } from '@hcengineering/ui'
+  import { AnyComponent, Button, Component, IconMixin, IconMoreH, showPopup } from '@hcengineering/ui'
   import view from '@hcengineering/view'
   import { createEventDispatcher, onDestroy } from 'svelte'
   import { ContextMenu } from '..'
   import { categorizeFields, getCollectionCounter, getFiltredKeys } from '../utils'
   import ActionContext from './ActionContext.svelte'
   import DocAttributeBar from './DocAttributeBar.svelte'
-  import IconMixin from './icons/Mixin.svelte'
   import UpDownNavigator from './UpDownNavigator.svelte'
 
   export let _id: Ref<Doc>