Editable presenters (#2594)

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

plugins/task-resources/src/components/state/DoneStatePresenter.svelte

@@ -20,10 +20,10 @@
   import Won from '../icons/Won.svelte'
   import Lost from '../icons/Lost.svelte'
 
-  export let value: DoneState
+  export let value: DoneState | null | undefined
   export let showTitle: boolean = true
 
-  $: color = value._class === task.class.WonState ? getPlatformColor(0) : getPlatformColor(11)
+  $: color = value?._class === task.class.WonState ? getPlatformColor(0) : getPlatformColor(11)
 </script>
 
 {#if value}

plugins/task-resources/src/components/state/DoneStateRefPresenter.svelte

@@ -20,12 +20,12 @@
   import task from '@hcengineering/task'
   import DoneStatePresenter from './DoneStatePresenter.svelte'
 
-  export let value: Ref<DoneState>
+  export let value: Ref<DoneState> | null | undefined
   export let showTitle: boolean = true
 
   let state: DoneState | undefined
   const query = createQuery()
-  $: query.query(task.class.DoneState, { _id: value }, (res) => ([state] = res), { limit: 1 })
+  $: value && query.query(task.class.DoneState, { _id: value }, (res) => ([state] = res), { limit: 1 })
 </script>
 
 {#if state}

plugins/task-resources/src/components/state/StateRefPresenter.svelte

@@ -17,9 +17,11 @@
   import { Ref } from '@hcengineering/core'
   import { createQuery } from '@hcengineering/presentation'
   import task, { State } from '@hcengineering/task'
+  import StateEditor from './StateEditor.svelte'
   import StatePresenter from './StatePresenter.svelte'
 
   export let value: Ref<State>
+  export let onChange: ((value: Ref<State>) => void) | undefined = undefined
 
   let state: State | undefined
   const query = createQuery()
@@ -27,5 +29,9 @@
 </script>
 
 {#if state}
-  <StatePresenter value={state} />
+  {#if onChange !== undefined}
+    <StateEditor {value} space={state.space} {onChange} kind="link" size="medium" />
+  {:else}
+    <StatePresenter value={state} />
+  {/if}
 {/if}