Improve UpdateCard editor (#8479)

Author: BykhovDenis

plugins/process-resources/src/components/ParamsEditor.svelte

@@ -22,6 +22,7 @@
   export let state: State
   export let _class: Ref<Class<Doc>>
   export let params: MethodParams<Doc>
+  export let allowRemove: boolean = false
   export let keys: string[] = []
 
   const dispatch = createEventDispatcher()
@@ -45,10 +46,12 @@
       {state}
       {_class}
       {key}
+      {allowRemove}
       object={params}
       on:update={(e) => {
         change(e, key)
       }}
+      on:remove
     />
   {/each}
 </div>

plugins/process-resources/src/components/ProcessAttribute.svelte

@@ -15,7 +15,16 @@
 <script lang="ts">
   import { AnyAttribute, Class, Doc, Ref } from '@hcengineering/core'
   import { Context, parseContext, SelectedContext } from '@hcengineering/process'
-  import { AnySvelteComponent, Button, eventToHTMLElement, IconAdd, Label, showPopup, tooltip } from '@hcengineering/ui'
+  import {
+    AnySvelteComponent,
+    Button,
+    eventToHTMLElement,
+    IconAdd,
+    IconClose,
+    Label,
+    showPopup,
+    tooltip
+  } from '@hcengineering/ui'
   import { AttributeCategory } from '@hcengineering/view'
   import { createEventDispatcher } from 'svelte'
   import ContextSelectorPopup from './attributeEditors/ContextSelectorPopup.svelte'
@@ -29,6 +38,7 @@
   }
   export let attribute: AnyAttribute
   export let editor: AnySvelteComponent | undefined
+  export let allowRemove: boolean = false
 
   const dispatch = createEventDispatcher()
 
@@ -94,14 +104,23 @@
         />
       </div>
     {/if}
-    <div class="button">
+    <div class="button flex-row-center">
       <Button
         icon={IconAdd}
         kind="ghost"
         on:click={(e) => {
           selectContext(e)
         }}
       />
+      {#if allowRemove}
+        <Button
+          icon={IconClose}
+          kind="ghost"
+          on:click={() => {
+            dispatch('remove', { key: attribute.name })
+          }}
+        />
+      {/if}
     </div>
   </div>
 {/if}

plugins/process-resources/src/components/ProcessAttributeEditor.svelte

@@ -25,6 +25,7 @@
   export let _class: Ref<Class<Doc>>
   export let key: string
   export let object: Record<string, any>
+  export let allowRemove: boolean = false
 
   const client = getClient()
   const hierarchy = client.getHierarchy()
@@ -61,6 +62,8 @@
   {attribute}
   {presenterClass}
   {value}
+  {allowRemove}
+  on:remove
   on:change={(e) => {
     onChange(e.detail)
   }}

plugins/process-resources/src/components/UpdateCardEditor.svelte

@@ -14,11 +14,12 @@
 -->
 <script lang="ts">
   import { Card, MasterTag } from '@hcengineering/card'
-  import core, { Class, Ref } from '@hcengineering/core'
-  import { getClient } from '@hcengineering/presentation'
+  import core, { AnyAttribute, Class, Ref } from '@hcengineering/core'
+  import presentation, { getClient } from '@hcengineering/presentation'
   import { Process, State, Step } from '@hcengineering/process'
   import { createEventDispatcher } from 'svelte'
   import ParamsEditor from './ParamsEditor.svelte'
+  import { Button, eventToHTMLElement, SelectPopup, showPopup } from '@hcengineering/ui'
 
   export let process: Process
   export let state: State
@@ -39,20 +40,68 @@
     }
   }
 
-  function getKeys (_class: Ref<Class<MasterTag>>): string[] {
+  function getKeys (_class: Ref<Class<MasterTag>>): AnyAttribute[] {
     const ignoreKeys = ['_class', 'content', 'parent', 'attachments', 'todos']
     const attributes = hierarchy.getAllAttributes(_class, core.class.Doc)
-    const res: string[] = []
+    const res: AnyAttribute[] = []
     for (const [key, attr] of attributes) {
       if (attr.hidden === true) continue
-      if (attr.readonly === true) continue
       if (ignoreKeys.includes(key)) continue
-      res.push(key)
+      res.push(attr)
     }
     return res
   }
 
-  $: keys = getKeys(process.masterTag)
+  let keys = Object.keys(params)
+
+  $: allAttrs = getKeys(process.masterTag)
+  $: possibleAttrs = allAttrs.filter((attr) => !keys.includes(attr.name))
+
+  function addKey (key: string): void {
+    keys = [...keys, key]
+  }
+
+  function onAdd (e: MouseEvent): void {
+    showPopup(
+      SelectPopup,
+      {
+        value: possibleAttrs.map((p) => {
+          return { id: p.name, label: p.label }
+        })
+      },
+      eventToHTMLElement(e),
+      (res) => {
+        if (res != null) {
+          addKey(res)
+        }
+      }
+    )
+  }
+
+  function remove (e: CustomEvent<any>): void {
+    if (e.detail !== undefined) {
+      const key = e.detail.key
+      keys = keys.filter((k) => k !== key)
+      // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+      delete (params as any)[key]
+      ;(step.params as any) = params
+      dispatch('change', step)
+    }
+  }
 </script>
 
-<ParamsEditor _class={process.masterTag} {process} {state} {keys} {params} on:change={change} />
+<ParamsEditor
+  _class={process.masterTag}
+  {process}
+  {state}
+  {keys}
+  {params}
+  allowRemove
+  on:remove={remove}
+  on:change={change}
+/>
+{#if possibleAttrs.length > 0}
+  <div class="flex-center mt-4">
+    <Button label={presentation.string.Add} width={'100%'} kind={'link-bordered'} size={'large'} on:click={onAdd} />
+  </div>
+{/if}