Automation (#4052)

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

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

@@ -15,7 +15,7 @@
 -->
 <script lang="ts">
   import core, { Attribute, IdMap, Ref, Status, StatusCategory, toIdMap } from '@hcengineering/core'
-  import { createQuery, getClient } from '@hcengineering/presentation'
+  import { ComponentExtensions, createQuery, getClient } from '@hcengineering/presentation'
   import { ProjectType, ProjectTypeCategory } from '@hcengineering/task'
   import {
     CircleButton,
@@ -158,6 +158,7 @@
 {#if categoryEditor}
   <Component is={categoryEditor} props={{ type }} />
 {/if}
+<ComponentExtensions extension={task.extensions.ProjectEditorExtension} props={{ type }} />
 {#each categories as cat, i}
   {@const states = groups.get(cat._id) ?? []}
   {@const prevIndex = getPrevIndex(groups, cat._id)}

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

@@ -0,0 +1,86 @@
+<!--
+// Copyright © 2023 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 core, { IdMap, Ref, Status, StatusCategory, toIdMap } from '@hcengineering/core'
+  import { createQuery } from '@hcengineering/presentation'
+  import { ProjectType } from '@hcengineering/task'
+  import {
+    ColorDefinition,
+    getColorNumberByText,
+    getPlatformColorDef,
+    resizeObserver,
+    themeStore
+  } from '@hcengineering/ui'
+  import { statusStore } from '@hcengineering/view-resources'
+  import { createEventDispatcher } from 'svelte'
+  import { typeStore } from '../..'
+
+  export let space: Ref<ProjectType>
+
+  $: states = type
+    ? ($typeStore
+        .get(type._id)
+        ?.statuses?.map((p) => $statusStore.byId.get(p._id))
+        .filter((p) => p !== undefined) as Status[]) ?? []
+    : []
+  const dispatch = createEventDispatcher()
+
+  function getColor (state: Status, type: ProjectType | undefined, categories: IdMap<StatusCategory>): ColorDefinition {
+    const category = state.category ? categories.get(state.category) : undefined
+    const targetColor = type?.statuses?.find((p) => p._id === state._id)?.color ?? state.color ?? category?.color
+    return getPlatformColorDef(targetColor ?? getColorNumberByText(state.name), $themeStore.dark)
+  }
+
+  let categories: IdMap<StatusCategory> = new Map()
+
+  const q = createQuery()
+  q.query(core.class.StatusCategory, {}, (res) => {
+    categories = toIdMap(res)
+  })
+
+  let type: ProjectType | undefined = undefined
+  type = $typeStore.get(space)
+</script>
+
+<div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')}>
+  <div class="menu-space" />
+  <div class="scroll">
+    <div class="box">
+      {#each states as state}
+        {@const color = getColor(state, type, categories)}
+        <button
+          class="menu-item"
+          on:click={() => {
+            dispatch('close', state)
+          }}
+        >
+          <div class="color" style:background-color={color.color} />
+          <span class="label">{state.name}</span>
+        </button>
+      {/each}
+    </div>
+  </div>
+  <div class="menu-space" />
+</div>
+
+<style lang="scss">
+  .color {
+    flex-shrink: 0;
+    margin-right: 0.75rem;
+    width: 1rem;
+    height: 1rem;
+    border-radius: 0.25rem;
+  }
+</style>