From 444db6a5ca147ad5e1fd442af4e44dae819c4ab1 Mon Sep 17 00:00:00 2001
From: Andrey Platov <andrey@hardcoreeng.com>
Date: Fri, 17 Sep 2021 10:28:15 +0200
Subject: [PATCH] EditStatuses

Signed-off-by: Andrey Platov <andrey@hardcoreeng.com>
---
 models/core/src/security.ts                   |  6 ++-
 packages/core/src/classes.ts                  |  4 +-
 packages/ui/src/types.ts                      |  2 +-
 .../src/components/CreateVacancy.svelte       | 17 ++++++--
 .../src/components/KanbanView.svelte          | 10 +----
 .../src/components/StatePresenter.svelte      |  5 +--
 .../src/components/EditStatuses.svelte        | 41 +++++++++++++++++++
 .../src/components/navigator/SpacesNav.svelte | 19 ++++++---
 .../components/navigator/TreeElement.svelte   |  6 ++-
 .../src/components/navigator/TreeItem.svelte  |  8 +++-
 .../src/components/navigator/TreeNode.svelte  |  2 +-
 11 files changed, 91 insertions(+), 29 deletions(-)
 create mode 100644 plugins/workbench-resources/src/components/EditStatuses.svelte

diff --git a/models/core/src/security.ts b/models/core/src/security.ts
index 98be63b0b9..7b9e6f848a 100644
--- a/models/core/src/security.ts
+++ b/models/core/src/security.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 //
 
-import type { Account, Arr, Ref, Space, Domain, UXObject } from '@anticrm/core'
+import type { Account, Arr, Ref, Space, Domain, State } from '@anticrm/core'
 import { DOMAIN_MODEL } from '@anticrm/core'
 import { Model } from '@anticrm/model'
 import core from './component'
@@ -37,6 +37,8 @@ export class TAccount extends TDoc implements Account {
 }
 
 @Model(core.class.State, core.class.Doc, DOMAIN_STATE)
-export class TState extends TDoc implements UXObject {
+export class TState extends TDoc implements State {
   machine!: Ref<Space>
+  title!: string
+  color!: string
 }
diff --git a/packages/core/src/classes.ts b/packages/core/src/classes.ts
index 26ad0d9ac2..e7870023b6 100644
--- a/packages/core/src/classes.ts
+++ b/packages/core/src/classes.ts
@@ -199,6 +199,8 @@ export interface Account extends Doc {
 /**
  * @public
  */
-export interface State extends Doc, UXObject {
+export interface State extends Doc {
   machine: Ref<Space>
+  title: string
+  color: string
 }
diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts
index 767f00a728..ebdf3dae33 100644
--- a/packages/ui/src/types.ts
+++ b/packages/ui/src/types.ts
@@ -33,7 +33,7 @@ export type AnyComponent = Resource<AnySvelteComponent>
 export interface Action {
   label: IntlString
   icon: Asset | AnySvelteComponent
-  action: () => Promise<void>
+  action: (props: any) => Promise<void>
 }
 
 export interface IPopupItem {
diff --git a/plugins/recruit-resources/src/components/CreateVacancy.svelte b/plugins/recruit-resources/src/components/CreateVacancy.svelte
index 6dced5d429..9fc5d245f3 100644
--- a/plugins/recruit-resources/src/components/CreateVacancy.svelte
+++ b/plugins/recruit-resources/src/components/CreateVacancy.svelte
@@ -30,6 +30,14 @@
 
   const client = getClient()
 
+  const colors = [
+    '#7C6FCD',
+    '#6F7BC5',
+    '#A5D179',
+    '#77C07B',
+    '#F28469'
+  ]
+
   async function createVacancy() {
     const id = await client.createDoc(recruit.class.Vacancy, core.space.Model, {
       name,
@@ -39,15 +47,18 @@
     })
     await client.createDoc(core.class.State, id, {
       machine: id,
-      label: 'Initial'
+      title: 'Initial',
+      color: colors[0]
     })
     await client.createDoc(core.class.State, id, {
       machine: id,
-      label: 'Interview'
+      title: 'Interview',
+      color: colors[1]
     })
     await client.createDoc(core.class.State, id, {
       machine: id,
-      label: 'Final'
+      title: 'Final',
+      color: colors[2]
     })
   }
 </script>
diff --git a/plugins/view-resources/src/components/KanbanView.svelte b/plugins/view-resources/src/components/KanbanView.svelte
index a3ef6e1c95..4ff1edbc57 100644
--- a/plugins/view-resources/src/components/KanbanView.svelte
+++ b/plugins/view-resources/src/components/KanbanView.svelte
@@ -65,14 +65,6 @@
     showPopup(open, { object, space }, 'float')
   }
 
-  const colors = [
-    '#7C6FCD',
-    '#6F7BC5',
-    '#A5D179',
-    '#77C07B',
-    '#F28469'
-  ]
-
   let dragCard: (Doc & { state: Ref<State>}) | undefined
 
   async function cardPresenter(_class: Ref<Class<Doc>>): Promise<AnySvelteComponent> {
@@ -90,7 +82,7 @@
   <ScrollBox>
     <div class="kanban-content">
       {#each states as state, i}
-        <KanbanPanel label={state.label} color={colors[i]} counter={4}
+        <KanbanPanel label={state.title} color={state.color} counter={4}
           on:dragover={(event) => {
             event.preventDefault()
           }}
diff --git a/plugins/view-resources/src/components/StatePresenter.svelte b/plugins/view-resources/src/components/StatePresenter.svelte
index fdf0d7fa0e..aefd8201f1 100644
--- a/plugins/view-resources/src/components/StatePresenter.svelte
+++ b/plugins/view-resources/src/components/StatePresenter.svelte
@@ -19,11 +19,10 @@
 
   export let value: State
 
-  const bgColor: string = '#7C6FCD'
 </script>
 
-<div class="state-container" style="background-color: {bgColor}">
-  {value.label}
+<div class="state-container" style="background-color: {value.color}">
+  {value.title}
 </div>
 
 <style lang="scss">
diff --git a/plugins/workbench-resources/src/components/EditStatuses.svelte b/plugins/workbench-resources/src/components/EditStatuses.svelte
new file mode 100644
index 0000000000..81482202ae
--- /dev/null
+++ b/plugins/workbench-resources/src/components/EditStatuses.svelte
@@ -0,0 +1,41 @@
+<!--
+// 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 type { Ref, Space, State } from '@anticrm/core'
+import { Dialog } from '@anticrm/ui'
+import { createQuery } from '@anticrm/presentation'
+
+import core from '@anticrm/core'
+
+export let _id: Ref<Space>
+
+let states: State[] = []
+
+const query = createQuery()
+$: query.query(core.class.State, { machine: _id }, result => { states = result })
+
+
+</script>
+
+
+<Dialog label="Edit Statuses">
+
+  {#each states as state}
+    <div>{state.title}</div>
+  {/each}
+</Dialog>
diff --git a/plugins/workbench-resources/src/components/navigator/SpacesNav.svelte b/plugins/workbench-resources/src/components/navigator/SpacesNav.svelte
index 1ccf9ba61b..c0aaf73afb 100644
--- a/plugins/workbench-resources/src/components/navigator/SpacesNav.svelte
+++ b/plugins/workbench-resources/src/components/navigator/SpacesNav.svelte
@@ -16,12 +16,11 @@
 <script lang="ts">
   import { onDestroy } from 'svelte'
 
-  import type { Asset } from '@anticrm/platform'
-  import type { Ref, Space } from '@anticrm/core'
+  import type { Asset, IntlString } from '@anticrm/platform'
+  import type { Ref, Space, Doc } from '@anticrm/core'
   import type { SpacesNavModel } from '@anticrm/workbench'
-  import { Action, navigate, getCurrentLocation, location } from '@anticrm/ui'
+  import { Action, navigate, getCurrentLocation, location, IconAdd } from '@anticrm/ui'
 
-  import { IconAdd } from '@anticrm/ui'
   import { getClient, createQuery } from '@anticrm/presentation'
   import { showPopup } from '@anticrm/ui'
 
@@ -30,6 +29,8 @@
   import TreeNode from './TreeNode.svelte'
   import TreeItem from './TreeItem.svelte'
 
+  import EditStatuses from '../EditStatuses.svelte'
+
   export let model: SpacesNavModel
   
   const client = getClient()
@@ -47,6 +48,14 @@
     }
   }
 
+  const editStatuses: Action = {
+    label: 'Edit Statuses' as IntlString,
+    icon: IconAdd,
+    action: async (_id: Ref<Doc>): Promise<void> => {
+      showPopup(EditStatuses, { _id }, 'right')
+    }
+  }
+
   function selectSpace(id: Ref<Space>) {
     const loc = getCurrentLocation()
     loc.path[2] = id
@@ -62,7 +71,7 @@
 <div>
   <TreeNode label={model.label} actions={[addSpace]}>
     {#each spaces as space}
-      <TreeItem title={space.name} icon={classIcon(client, space._class)} selected={selected === space._id} on:click={() => { selectSpace(space._id) }}/>
+      <TreeItem _id={space._id} title={space.name} icon={classIcon(client, space._class)} selected={selected === space._id} actions={[editStatuses]} on:click={() => { selectSpace(space._id) }}/>
     {/each}
   </TreeNode>
 </div>
diff --git a/plugins/workbench-resources/src/components/navigator/TreeElement.svelte b/plugins/workbench-resources/src/components/navigator/TreeElement.svelte
index cee9147b8f..31c1c6174f 100644
--- a/plugins/workbench-resources/src/components/navigator/TreeElement.svelte
+++ b/plugins/workbench-resources/src/components/navigator/TreeElement.svelte
@@ -17,11 +17,13 @@
   import Collapsed from '../icons/Collapsed.svelte'
   import Expanded from '../icons/Expanded.svelte'
 
-  import type { Asset, IntlString } from '@anticrm/status'
+  import type { Asset, IntlString } from '@anticrm/platform'
   import type { Action } from '@anticrm/ui'
+  import type { Ref, Space } from '@anticrm/core'
   import { Icon, Label, ActionIcon } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
 
+  export let _id: Ref<Space> | undefined = undefined
   export let icon: Asset | undefined = undefined
   export let label: IntlString | undefined = undefined
   export let title: string | undefined = undefined
@@ -52,7 +54,7 @@
   </span>
   {#each actions as action}
     <div class="tool">
-      <ActionIcon label={action.label} icon={action.icon} size={'small'} action={action.action} />
+      <ActionIcon label={action.label} icon={action.icon} size={'small'} action={() => { action.action(_id) }} />
     </div>
   {/each}
   {#if notifications > 0 && collapsed}
diff --git a/plugins/workbench-resources/src/components/navigator/TreeItem.svelte b/plugins/workbench-resources/src/components/navigator/TreeItem.svelte
index 253bb1b574..6257d89a80 100644
--- a/plugins/workbench-resources/src/components/navigator/TreeItem.svelte
+++ b/plugins/workbench-resources/src/components/navigator/TreeItem.svelte
@@ -15,16 +15,20 @@
 
 <script lang="ts">
   import TreeElement from './TreeElement.svelte'
-  import type { Asset } from '@anticrm/status'
+  import type { Asset } from '@anticrm/platform'
+  import type { Ref, Space } from '@anticrm/core'
+  import type { Action } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
 
+  export let _id: Ref<Space>
   export let icon: Asset
   export let title: string
   export let notifications = 0
+  export let actions: Action[] = []
   export let selected: boolean = false
 
   const dispatch = createEventDispatcher()
 
 </script>
 
-<TreeElement {icon} {title} {notifications} {selected} collapsed on:click={() => {dispatch('click')}}/>
\ No newline at end of file
+<TreeElement {_id} {icon} {title} {notifications} {selected} {actions} collapsed on:click={() => {dispatch('click')}}/>
diff --git a/plugins/workbench-resources/src/components/navigator/TreeNode.svelte b/plugins/workbench-resources/src/components/navigator/TreeNode.svelte
index 776ad6a100..08cad71cb5 100644
--- a/plugins/workbench-resources/src/components/navigator/TreeNode.svelte
+++ b/plugins/workbench-resources/src/components/navigator/TreeNode.svelte
@@ -14,7 +14,7 @@
 -->
 
 <script lang="ts">
-  import type { IntlString } from '@anticrm/status'
+  import type { IntlString } from '@anticrm/platform'
   import type { Action } from '@anticrm/ui'
   import TreeElement from './TreeElement.svelte'