Ability to change done state (#888)

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

plugins/task-resources/src/components/TaskHeader.svelte

@@ -67,6 +67,7 @@
     </div>
   </div>
   <AttributeBarEditor key={'state'} {object} showHeader={false} />
+  <AttributeBarEditor key={'doneState'} {object} showHeader={false} />
 </div>
 
 <style lang="scss">

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

@@ -0,0 +1,70 @@
+<!--
+// Copyright © 2020, 2021 Anticrm Platform Contributors.
+// Copyright © 2021 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 { Ref } from '@anticrm/core'
+  import { createQuery } from '@anticrm/presentation'
+  import { DoneState, SpaceWithStates } from '@anticrm/task'
+  import { Label, showPopup } from '@anticrm/ui'
+  import DoneStatePresenter from './DoneStatePresenter.svelte'
+  import DoneStatesPopup from './DoneStatesPopup.svelte'
+  import task from '../../plugin'
+
+  export let value: Ref<DoneState> | null | undefined
+  export let onChange: (value: any) => void
+  export let space: Ref<SpaceWithStates>
+  let state: DoneState | undefined
+  let container: HTMLElement
+  let opened: boolean = false
+
+  const query = createQuery()
+  $: if (value != null) {
+    query.query(
+      task.class.DoneState,
+      { _id: value },
+      (res) => {
+        state = res[0]
+      },
+      { limit: 1 }
+    )
+  }
+</script>
+
+<div
+  class="flex-row-center cursor-pointer"
+  bind:this={container}
+  on:click|preventDefault={() => {
+    if (!opened) {
+      opened = true
+      showPopup(DoneStatesPopup, { space }, container, (result) => {
+        if (result) {
+          value = result._id
+          onChange(value)
+        } else if (result == null) {
+          value = null
+          onChange(value)
+        }
+
+        opened = false
+      })
+    }
+  }}
+>
+  {#if state}
+    <DoneStatePresenter value={state} showTitle />
+  {:else}
+    <Label label={task.string.NoDoneState} />
+  {/if}
+</div>

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

@@ -17,16 +17,21 @@
 <script lang="ts">
   import type { DoneState } from '@anticrm/task'
   import task from '@anticrm/task'
+  import { getPlatformColor } from '@anticrm/ui'
 
   export let value: DoneState
+  export let showTitle: boolean = false
 
-  $: color = value._class === task.class.WonState ? '#a5d179' : '#f28469'
+  $: color = value._class === task.class.WonState ? getPlatformColor(0) : getPlatformColor(11)
 
 </script>
 
 {#if value }
   <div class="flex-center">
-    <div class="state-container" style="background-color: {color};" />    
+    <div class="state-container" class:state-container-title={showTitle} style="background-color: {color};" />
+    {#if showTitle}
+      {value.title}
+    {/if}
   </div>
 {/if}
 
@@ -36,4 +41,7 @@
     height: .5rem;
     border-radius: .5rem;
   }
+  .state-container-title {
+    margin-right: 0.75rem;
+  }
 </style>

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

@@ -0,0 +1,100 @@
+<!--
+// Copyright © 2020, 2021 Anticrm Platform Contributors.
+// Copyright © 2021 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 { Class, Doc, Ref, SortingOrder } from '@anticrm/core'
+  import { createQuery } from '@anticrm/presentation'
+  import { DoneState, SpaceWithStates } from '@anticrm/task'
+  import { getPlatformColor, Label } from '@anticrm/ui'
+  import { createEventDispatcher } from 'svelte'
+  import task from '../../plugin'
+
+  export let space: Ref<SpaceWithStates>
+  let states: DoneState[] = []
+  const dispatch = createEventDispatcher()
+  const statesQuery = createQuery()
+  statesQuery.query(
+    task.class.DoneState,
+    { space },
+    (res) => {
+      states = res
+    },
+    {
+      sort: {
+        rank: SortingOrder.Ascending
+      }
+    }
+  )
+  function getColor (_class: Ref<Class<Doc>>): string {
+    return _class === task.class.WonState ? getPlatformColor(0) : getPlatformColor(11)
+  }
+</script>
+
+<div class="flex-col statuses-container">
+  {#each states as state}
+    <div
+      class="flex-row-center state"
+      on:click={() => {
+        dispatch('close', state)
+      }}
+    >
+      <div class="color" style="background-color: {getColor(state._class)}" />
+      {state.title}
+    </div>
+  {/each}
+  <div
+      class="flex-row-center state"
+      on:click={() => {
+        dispatch('close', null)
+      }}
+    >
+      <div class='not-done'>
+        <Label label={task.string.NoDoneState}/>
+      </div>
+    </div>
+</div>
+
+<style lang="scss">
+  .statuses-container {
+    padding: 0.5rem;
+    max-height: 100%;
+    min-width: 10rem;
+    color: var(--theme-caption-color);
+    background-color: var(--theme-button-bg-focused);
+    border: 1px solid var(--theme-button-border-enabled);
+    border-radius: 0.75rem;
+    user-select: none;
+    filter: drop-shadow(0 1.5rem 4rem rgba(0, 0, 0, 0.35));
+
+    .state {
+      padding: 0.5rem;
+      border-radius: 0.5rem;
+      cursor: pointer;
+
+      &:hover {
+        background-color: var(--theme-button-bg-hovered);
+      }
+      .color {
+        margin-right: 0.75rem;
+        width: .5rem;
+        height: .5rem;
+        border-radius: .5rem;
+      }
+    }
+  }
+  .not-done {
+    margin-left: 1.25rem;
+  }
+</style>