EZQMS-527: Introduced ActionButton component (#4412)

EZQMS-527: Introduced `ActionButton` component

---------

Signed-off-by: Petr Vyazovetskiy <develop.pit@gmail.com>

plugins/view-resources/src/actions.ts

@@ -64,42 +64,13 @@ export async function getActions (
   derived: Ref<Class<Doc>> = core.class.Doc,
   mode: ViewContextType = 'context'
 ): Promise<Action[]> {
-  let actions: Action[] = await client.findAll(view.class.Action, {
+  const actions: Action[] = await client.findAll(view.class.Action, {
     'context.mode': mode
   })
 
+  const filteredActions = await filterAvailableActions(actions, client, doc, derived)
+
   const categories: Partial<Record<ActionGroup | 'top', number>> = { top: 1, tools: 50, other: 100, remove: 200 }
-
-  if (Array.isArray(doc)) {
-    for (const d of doc) {
-      actions = filterActions(client, d, actions, derived)
-    }
-  } else {
-    actions = filterActions(client, doc, actions, derived)
-  }
-  const inputVal: ViewActionInput[] = ['none']
-  if (!Array.isArray(doc) || doc.length === 1) {
-    inputVal.push('focus')
-    inputVal.push('any')
-  }
-  if (Array.isArray(doc) && doc.length > 0) {
-    inputVal.push('selection')
-    inputVal.push('any')
-  }
-  actions = actions.filter((it) => inputVal.includes(it.input))
-
-  const filteredActions: Action[] = []
-  for (const action of actions) {
-    if (action.visibilityTester == null) {
-      filteredActions.push(action)
-    } else {
-      const visibilityTester = await getResource(action.visibilityTester)
-
-      if (await visibilityTester(doc)) {
-        filteredActions.push(action)
-      }
-    }
-  }
   filteredActions.sort((a, b) => {
     const aTarget = categories[a.context.group ?? 'top'] ?? 0
     const bTarget = categories[b.context.group ?? 'top'] ?? 0
@@ -108,6 +79,39 @@ export async function getActions (
   return filteredActions
 }
 
+export async function filterAvailableActions (
+  actions: Action[],
+  client: Client,
+  doc: Doc | Doc[],
+  derived: Ref<Class<Doc>> = core.class.Doc
+): Promise<Action[]> {
+  actions = (Array.isArray(doc) ? doc : [doc]).reduce(
+    (actions, doc) => filterActions(client, doc, actions, derived),
+    actions
+  )
+
+  const input = (['none'] as ViewActionInput[])
+    .concat(Array.isArray(doc) && doc.length > 0 ? ['selection', 'any'] : [])
+    .concat(!Array.isArray(doc) || doc.length === 1 ? ['focus', 'any'] : [])
+  actions = actions.filter((it) => input.includes(it.input))
+
+  const result: Action[] = []
+  for (const action of actions) {
+    if (action.visibilityTester == null) {
+      result.push(action)
+    } else {
+      const visibilityTester = await getResource(action.visibilityTester)
+
+      if (await visibilityTester(doc)) {
+        result.push(action)
+      }
+    }
+  }
+
+  return result
+}
+
+/** @public */
 export async function invokeAction (
   object: Doc | Doc[],
   evt: Event,

plugins/view-resources/src/components/ActionButton.svelte

@@ -0,0 +1,71 @@
+<!--
+// Copyright © 2022 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 { ComponentProps } from 'svelte'
+  import { Button } from '@hcengineering/ui'
+  import { Doc, Ref } from '@hcengineering/core'
+  import { Action, ViewContextType } from '@hcengineering/view'
+  import { getClient } from '@hcengineering/presentation'
+  import { filterAvailableActions, invokeAction } from '../actions'
+  import view from '../plugin'
+
+  type $$Props = Omit<ComponentProps<Button>, 'icon' | 'label'> & {
+    id: Ref<Action>
+    object: Doc | Doc[]
+    mode?: ViewContextType
+  }
+  export let disabled: boolean = false
+  export let id: Ref<Action>
+  export let object: Doc | Doc[]
+  export let mode: ViewContextType | undefined = undefined
+
+  const client = getClient()
+
+  let action: Action | null = null
+  $: void client
+    .findOne(view.class.Action, {
+      'context.mode': mode,
+      _id: id
+    })
+    .then((result) => {
+      action = result ?? null
+    })
+
+  let isAvailable = false
+  $: if (action !== null) {
+    void filterAvailableActions([action], client, object).then((result) => {
+      isAvailable = result[0] === action
+    })
+  }
+
+  let isBeingInvoked = false
+</script>
+
+{#if action !== null && isAvailable}
+  <Button
+    {...$$props}
+    icon={action.icon}
+    label={action.label}
+    disabled={disabled || isBeingInvoked}
+    on:click={async (event) => {
+      if (action !== null) {
+        isBeingInvoked = true
+        await invokeAction(object, event, action.action, action.actionProps)
+        isBeingInvoked = false
+      }
+    }}
+  />
+{/if}

plugins/view-resources/src/index.ts

@@ -114,6 +114,7 @@ import { IndexedDocumentPreview } from '@hcengineering/presentation'
 import { showEmptyGroups } from './viewOptions'
 import { AggregationMiddleware } from './middleware'
 export { getActions, invokeAction, getContextActions } from './actions'
+export { default as ActionButton } from './components/ActionButton.svelte'
 export { default as ActionHandler } from './components/ActionHandler.svelte'
 export { default as FilterButton } from './components/filter/FilterButton.svelte'
 export { default as FixedColumn } from './components/FixedColumn.svelte'