EditStatuses

Signed-off-by: Andrey Platov <andrey@hardcoreeng.com>

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
 }

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
 }

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 {

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>

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()
           }}

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">

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>

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>

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}

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')}}/>
+<TreeElement {_id} {icon} {title} {notifications} {selected} {actions} collapsed on:click={() => {dispatch('click')}}/>

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'