Between criteria (#9901)

models/process/src/index.ts

@@ -248,6 +248,8 @@ export class TUpdateCriteriaComponent extends TDoc implements UpdateCriteriaComp
   editor!: AnyComponent
 
   of!: Ref<Class<Doc<Space>>>
+
+  props!: Record<string, any>
 }
 
 export * from './migration'
@@ -1180,50 +1182,83 @@ export function createModel (builder: Builder): void {
 
   builder.createDoc(process.class.UpdateCriteriaComponent, core.space.Model, {
     category: 'attribute',
-    editor: process.criteriaEditor.StringCriteria,
-    of: core.class.TypeString
+    editor: process.criteriaEditor.BaseCriteria,
+    of: core.class.TypeString,
+    props: {
+      modes: ['Equal', 'StringContains', 'Exists']
+    }
   })
 
   builder.createDoc(process.class.UpdateCriteriaComponent, core.space.Model, {
     category: 'attribute',
-    editor: process.criteriaEditor.StringCriteria,
-    of: core.class.TypeHyperlink
+    editor: process.criteriaEditor.BaseCriteria,
+    of: core.class.TypeHyperlink,
+    props: {
+      modes: ['Equal', 'StringContains', 'Exists']
+    }
   })
 
   builder.createDoc(process.class.UpdateCriteriaComponent, core.space.Model, {
     category: 'attribute',
-    editor: process.criteriaEditor.NumberCriteria,
-    of: core.class.TypeNumber
+    editor: process.criteriaEditor.BaseCriteria,
+    of: core.class.TypeNumber,
+    props: {
+      modes: ['Equal', 'GT', 'LT', 'Between', 'Exists']
+    }
   })
 
   builder.createDoc(process.class.UpdateCriteriaComponent, core.space.Model, {
     category: 'attribute',
-    editor: process.criteriaEditor.DateCriteria,
-    of: core.class.TypeDate
+    editor: process.criteriaEditor.BaseCriteria,
+    of: core.class.TypeDate,
+    props: {
+      modes: ['Equal', 'GT', 'LT', 'Between', 'Exists']
+    }
   })
 
   builder.createDoc(process.class.UpdateCriteriaComponent, core.space.Model, {
     category: 'attribute',
-    editor: process.criteriaEditor.BooleanCriteria,
-    of: core.class.TypeBoolean
+    editor: process.criteriaEditor.BaseCriteria,
+    of: core.class.TypeBoolean,
+    props: {
+      modes: ['Equal', 'NotEqual', 'Exists']
+    }
   })
 
   builder.createDoc(process.class.UpdateCriteriaComponent, core.space.Model, {
     category: 'array',
-    editor: process.criteriaEditor.ArrayCriteria,
-    of: core.class.ArrOf
+    editor: process.criteriaEditor.BaseCriteria,
+    of: core.class.ArrOf,
+    props: {
+      modes: [
+        'ArrayAll',
+        'ArrayAny',
+        'ArrayNotIncludes',
+        'ArraySizeEquals',
+        'ArraySizeGt',
+        'ArraySizeGte',
+        'ArraySizeLt',
+        'ArraySizeLte'
+      ]
+    }
   })
 
   builder.createDoc(process.class.UpdateCriteriaComponent, core.space.Model, {
     category: 'attribute',
-    editor: process.criteriaEditor.EnumCriteria,
-    of: core.class.EnumOf
+    editor: process.criteriaEditor.BaseCriteria,
+    of: core.class.EnumOf,
+    props: {
+      modes: ['Equal', 'NotEqual', 'Exists']
+    }
   })
 
   builder.createDoc(process.class.UpdateCriteriaComponent, core.space.Model, {
     category: 'object',
-    editor: process.criteriaEditor.RefCriteria,
-    of: core.class.RefTo
+    editor: process.criteriaEditor.BaseCriteria,
+    of: core.class.RefTo,
+    props: {
+      modes: ['Equal', 'NotEqual', 'Exists']
+    }
   })
 }
 

plugins/process-resources/src/components/criterias/ArrayCriteria.svelte

@@ -1,231 +0,0 @@
-<!--
-// Copyright © 2025 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, { AnyAttribute } from '@hcengineering/core'
-  import { getClient } from '@hcengineering/presentation'
-  import { Context, parseContext, Process, SelectedContext } from '@hcengineering/process'
-  import {
-    AnyComponent,
-    Button,
-    Component,
-    DropdownLabelsIntl,
-    eventToHTMLElement,
-    IconAdd,
-    IconClose,
-    showPopup
-  } from '@hcengineering/ui'
-  import view from '@hcengineering/view-resources/src/plugin'
-  import { createEventDispatcher } from 'svelte'
-  import { buildResult, Mode, Modes, parseValue } from '../../query'
-  import { getContext } from '../../utils'
-  import ContextSelectorPopup from '../attributeEditors/ContextSelectorPopup.svelte'
-  import ContextValue from '../attributeEditors/ContextValue.svelte'
-  import is from 'date-fns/locale/is'
-
-  export let readonly: boolean
-  export let value: any
-  export let process: Process
-  export let context: Context
-  export let attribute: AnyAttribute
-  export let baseEditor: AnyComponent | undefined
-
-  const modes: Mode[] = [
-    Modes.ArrayAll,
-    Modes.ArrayAny,
-    Modes.ArrayNotIncludes,
-    Modes.ArraySizeEquals,
-    Modes.ArraySizeGt,
-    Modes.ArraySizeGte,
-    Modes.ArraySizeLt,
-    Modes.ArraySizeLte
-  ]
-
-  const client = getClient()
-
-  $: numberContext = getContext(client, process, core.class.TypeNumber, 'attribute')
-
-  let [val, selectedMode] = parseValue(modes, value)
-
-  $: mode = selectedMode.id
-
-  const dispatch = createEventDispatcher()
-
-  let contextValue: SelectedContext | undefined = undefined
-  $: [val, selectedMode] = parseValue(modes, value)
-  $: contextValue = parseContext(val)
-
-  function selectContext (e: MouseEvent): void {
-    showPopup(
-      ContextSelectorPopup,
-      {
-        process,
-        masterTag: process.masterTag,
-        context: isSize(mode) ? numberContext : context,
-        attribute,
-        onSelect
-      },
-      eventToHTMLElement(e)
-    )
-  }
-
-  function onSelect (res: SelectedContext | null): void {
-    changeResult(res === null ? undefined : '$' + JSON.stringify(res))
-  }
-
-  function onChange (value: any | undefined): void {
-    changeResult(value)
-  }
-
-  function changeResult (val: any | undefined, allowEmpty: boolean = false): void {
-    if ((!allowEmpty && val === undefined) || val === '') {
-      dispatch('change', null)
-      return
-    }
-
-    const result = buildResult(selectedMode, val)
-
-    value = result
-    dispatch('change', result)
-  }
-
-  function isSize (mode: string): boolean {
-    return mode.startsWith('size')
-  }
-</script>
-
-<div class="flex-row-center flex-gap-4">
-  <DropdownLabelsIntl
-    items={modes}
-    selected={mode}
-    disabled={readonly}
-    minW0={false}
-    kind={'no-border'}
-    width={'100%'}
-    on:selected={(e) => {
-      mode = e.detail
-      if ((isSize(mode) && !isSize(selectedMode.id)) || (!isSize(mode) && isSize(selectedMode.id))) {
-        val = undefined
-        contextValue = undefined
-      }
-      selectedMode = modes.find((m) => m.id === mode) ?? modes[0]
-      changeResult(val, true)
-    }}
-  />
-
-  <div class="text-input" class:context={contextValue}>
-    {#if !isSize(mode)}
-      {#if contextValue}
-        <ContextValue
-          {process}
-          masterTag={process.masterTag}
-          {contextValue}
-          {context}
-          {attribute}
-          category={'attribute'}
-          attrClass={core.class.ArrOf}
-          on:update={(e) => {
-            onSelect(e.detail)
-          }}
-        />
-      {:else}
-        <div class="w-full">
-          {#if baseEditor}
-            <Component
-              is={baseEditor}
-              props={{
-                label: attribute?.label,
-                placeholder: attribute?.label,
-                kind: 'ghost',
-                size: 'large',
-                width: '100%',
-                justify: 'left',
-                readonly,
-                type: attribute?.type,
-                value: val,
-                onChange,
-                focus
-              }}
-            />
-          {/if}
-        </div>
-      {/if}
-    {:else if contextValue}
-      <ContextValue
-        {process}
-        masterTag={process.masterTag}
-        {contextValue}
-        context={numberContext}
-        {attribute}
-        category={'attribute'}
-        attrClass={core.class.TypeNumber}
-        on:update={(e) => {
-          onSelect(e.detail)
-        }}
-      />
-    {:else if !Number.isNaN(val)}
-      <div class="w-full">
-        <Component
-          is={view.component.NumberEditor}
-          props={{
-            label: attribute?.label,
-            placeholder: attribute?.label,
-            kind: 'ghost',
-            size: 'large',
-            width: '100%',
-            justify: 'left',
-            readonly,
-            type: core.class.TypeNumber,
-            value: val,
-            onChange,
-            focus
-          }}
-        />
-      </div>
-    {/if}
-    <div class="button flex-row-center">
-      <Button icon={IconAdd} kind="ghost" on:click={selectContext} />
-      <Button
-        icon={IconClose}
-        kind="ghost"
-        on:click={() => {
-          dispatch('delete')
-        }}
-      />
-    </div>
-  </div>
-</div>
-
-<style lang="scss">
-  .text-input {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    border: 1px solid var(--theme-refinput-border);
-    border-radius: 0.375rem;
-    max-width: 100%;
-    width: 100%;
-
-    .button {
-      flex-shrink: 0;
-    }
-
-    &.context {
-      background: #3575de33;
-      border-color: var(--primary-button-default);
-    }
-  }
-</style>

plugins/process-resources/src/components/criterias/ArraySizeCriteria.svelte

@@ -0,0 +1,137 @@
+<!--
+// Copyright © 2025 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, { AnyAttribute } from '@hcengineering/core'
+  import { getClient } from '@hcengineering/presentation'
+  import { Context, parseContext, Process, SelectedContext } from '@hcengineering/process'
+  import { Button, Component, eventToHTMLElement, IconAdd, IconClose, showPopup } from '@hcengineering/ui'
+  import view from '@hcengineering/view-resources/src/plugin'
+  import { createEventDispatcher } from 'svelte'
+  import { getContext } from '../../utils'
+  import ContextSelectorPopup from '../attributeEditors/ContextSelectorPopup.svelte'
+  import ContextValue from '../attributeEditors/ContextValue.svelte'
+
+  export let readonly: boolean
+  export let val: any
+  export let process: Process
+  export let attribute: AnyAttribute
+
+  const dispatch = createEventDispatcher()
+
+  $: context = getContext(client, process, core.class.TypeNumber, 'attribute')
+
+  $: contextValue = parseContext(val)
+
+  function selectContext (e: MouseEvent): void {
+    showPopup(
+      ContextSelectorPopup,
+      {
+        process,
+        masterTag: process.masterTag,
+        context,
+        attribute,
+        onSelect
+      },
+      eventToHTMLElement(e)
+    )
+  }
+
+  function onSelect (res: SelectedContext | null): void {
+    val = res === null ? undefined : '$' + JSON.stringify(res)
+    dispatch('change', val)
+  }
+
+  function onChange (value: any | undefined): void {
+    val = value
+    dispatch('change', val)
+  }
+
+  const client = getClient()
+</script>
+
+<div class="text-input" class:context={contextValue}>
+  {#if contextValue}
+    <ContextValue
+      {process}
+      masterTag={process.masterTag}
+      {contextValue}
+      {context}
+      {attribute}
+      category={'attribute'}
+      attrClass={core.class.TypeNumber}
+      on:update={(e) => {
+        onSelect(e.detail)
+      }}
+    />
+  {:else}
+    <div class="w-full">
+      <Component
+        is={view.component.NumberEditor}
+        props={{
+          label: attribute?.label,
+          placeholder: attribute?.label,
+          kind: 'ghost',
+          size: 'large',
+          width: '100%',
+          justify: 'left',
+          readonly,
+          type: core.class.TypeNumber,
+          value: val,
+          onChange,
+          focus
+        }}
+      />
+    </div>
+  {/if}
+  <div class="button flex-row-center">
+    <Button
+      icon={IconAdd}
+      kind="ghost"
+      on:click={(e) => {
+        selectContext(e)
+      }}
+    />
+    <Button
+      icon={IconClose}
+      kind="ghost"
+      on:click={() => {
+        dispatch('delete')
+      }}
+    />
+  </div>
+</div>
+
+<style lang="scss">
+  .text-input {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    border: 1px solid var(--theme-refinput-border);
+    border-radius: 0.375rem;
+    max-width: 100%;
+    width: 100%;
+
+    .button {
+      flex-shrink: 0;
+    }
+
+    &.context {
+      background: #3575de33;
+      border-color: var(--primary-button-default);
+    }
+  }
+</style>

plugins/process-resources/src/components/criterias/AttributeCriteria.svelte

@@ -15,7 +15,7 @@
 
 <script lang="ts">
   import { Doc, DocumentQuery } from '@hcengineering/core'
-  import { findAttributeEditor, getAttributePresenterClass, getClient } from '@hcengineering/presentation'
+  import { getAttributePresenterClass, getClient } from '@hcengineering/presentation'
   import { Process } from '@hcengineering/process'
   import { Component, Label, tooltip } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
@@ -33,9 +33,8 @@
   $: attribute = hierarchy.getAttribute(process.masterTag, key)
   $: presenterClass = getAttributePresenterClass(hierarchy, attribute.type)
 
-  $: editor = getCirteriaEditor(presenterClass.attrClass, presenterClass.category)
-
-  $: baseEditor = findAttributeEditor(client, process.masterTag, key)
+  $: updateCriteria = getCirteriaEditor(presenterClass.attrClass, presenterClass.category)
+  $: editor = updateCriteria?.editor
 
   $: value = params[key]
 
@@ -59,7 +58,7 @@
   </div>
   <Component
     is={editor}
-    props={{ value, readonly, context, process, attribute, baseEditor }}
+    props={{ value, readonly, context, process, attribute, ...updateCriteria?.props }}
     on:change={onChange}
     on:delete
   />

plugins/process-resources/src/components/criterias/BaseCriteria.svelte

@@ -15,67 +15,27 @@
 
 <script lang="ts">
   import { AnyAttribute } from '@hcengineering/core'
-  import { getAttributePresenterClass, getClient } from '@hcengineering/presentation'
-  import { Context, parseContext, Process, SelectedContext } from '@hcengineering/process'
-  import {
-    AnyComponent,
-    Button,
-    Component,
-    DropdownLabelsIntl,
-    eventToHTMLElement,
-    IconAdd,
-    IconClose,
-    showPopup
-  } from '@hcengineering/ui'
+  import { Context, Process } from '@hcengineering/process'
+  import { Component, DropdownLabelsIntl } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
-  import { buildResult, Mode, parseValue } from '../../query'
-  import ContextSelectorPopup from '../attributeEditors/ContextSelectorPopup.svelte'
-  import ContextValue from '../attributeEditors/ContextValue.svelte'
+  import { buildResult, Mode, ModeId, Modes, parseValue } from '../../query'
+  import BaseCriteriaEditor from './BaseCriteriaEditor.svelte'
 
   export let readonly: boolean
   export let value: any
   export let process: Process
   export let context: Context
   export let attribute: AnyAttribute
-  export let baseEditor: AnyComponent | undefined
-  export let modes: Mode[] = []
+  export let modes: ModeId[] = []
 
-  let [val, selectedMode] = parseValue(modes, value)
+  const modesValues: Mode[] = modes.map((m) => Modes[m])
+
+  let [val, selectedMode] = parseValue(modesValues, value)
 
   $: mode = selectedMode.id
   const dispatch = createEventDispatcher()
 
-  $: [val, selectedMode] = parseValue(modes, value)
-  $: contextValue = parseContext(val)
-
-  function selectContext (e: MouseEvent): void {
-    showPopup(
-      ContextSelectorPopup,
-      {
-        process,
-        masterTag: process.masterTag,
-        context,
-        attribute,
-        onSelect
-      },
-      eventToHTMLElement(e)
-    )
-  }
-
-  function onSelect (res: SelectedContext | null): void {
-    val = res === null ? undefined : '$' + JSON.stringify(res)
-    changeResult()
-  }
-
-  function onChange (value: any | undefined): void {
-    val = value
-    changeResult()
-  }
-
-  const client = getClient()
-  const hierarchy = client.getHierarchy()
-
-  $: presenterClass = getAttributePresenterClass(hierarchy, attribute.type)
+  $: [val, selectedMode] = parseValue(modesValues, value)
 
   function changeResult () {
     if (!selectedMode.withoutEditor && (val === undefined || val === '')) {
@@ -91,7 +51,7 @@
 
 <div class="flex-row-center flex-gap-4">
   <DropdownLabelsIntl
-    items={modes}
+    items={modesValues}
     selected={mode}
     disabled={readonly}
     minW0={false}
@@ -99,85 +59,31 @@
     width={'100%'}
     on:selected={(e) => {
       mode = e.detail
-      selectedMode = modes.find((m) => m.id === mode) ?? modes[0]
+      const prevEditor = selectedMode.editor
+      selectedMode = modesValues.find((m) => m.id === mode) ?? modesValues[0]
+      const newEditor = selectedMode.editor
+      if (prevEditor !== newEditor) {
+        val = undefined
+      }
       changeResult()
     }}
   />
-  {#if !selectedMode.withoutEditor}
-    <div class="text-input" class:context={contextValue}>
-      {#if contextValue}
-        <ContextValue
-          {process}
-          masterTag={process.masterTag}
-          {contextValue}
-          {context}
-          {attribute}
-          category={presenterClass.category}
-          attrClass={presenterClass.attrClass}
-          on:update={(e) => {
-            onSelect(e.detail)
-          }}
-        />
-      {:else}
-        <div class="w-full">
-          {#if baseEditor}
-            <Component
-              is={baseEditor}
-              props={{
-                label: attribute?.label,
-                placeholder: attribute?.label,
-                kind: 'ghost',
-                size: 'large',
-                width: '100%',
-                justify: 'left',
-                readonly,
-                type: attribute?.type,
-                value: val,
-                onChange,
-                focus
-              }}
-            />
-          {/if}
-        </div>
-      {/if}
-      <div class="button flex-row-center">
-        <Button
-          icon={IconAdd}
-          kind="ghost"
-          on:click={(e) => {
-            selectContext(e)
-          }}
-        />
-        <Button
-          icon={IconClose}
-          kind="ghost"
-          on:click={() => {
-            dispatch('delete')
-          }}
-        />
-      </div>
+  {#if selectedMode.editor}
+    <div class="w-full">
+      <Component
+        is={selectedMode.editor}
+        props={{
+          process,
+          attribute,
+          context,
+          readonly,
+          val
+        }}
+        on:change={changeResult}
+        on:delete
+      />
     </div>
+  {:else if !selectedMode.withoutEditor}
+    <BaseCriteriaEditor {val} {attribute} {readonly} {process} {context} on:change={changeResult} on:delete />
   {/if}
 </div>
-
-<style lang="scss">
-  .text-input {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    border: 1px solid var(--theme-refinput-border);
-    border-radius: 0.375rem;
-    max-width: 100%;
-    width: 100%;
-
-    .button {
-      flex-shrink: 0;
-    }
-
-    &.context {
-      background: #3575de33;
-      border-color: var(--primary-button-default);
-    }
-  }
-</style>

plugins/process-resources/src/components/criterias/BaseCriteriaEditor.svelte

@@ -0,0 +1,141 @@
+<!--
+// Copyright © 2025 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 { AnyAttribute } from '@hcengineering/core'
+  import { findAttributeEditor, getAttributePresenterClass, getClient } from '@hcengineering/presentation'
+  import { Context, parseContext, Process, SelectedContext } from '@hcengineering/process'
+  import { Button, Component, eventToHTMLElement, IconAdd, IconClose, showPopup } from '@hcengineering/ui'
+  import { createEventDispatcher } from 'svelte'
+  import ContextSelectorPopup from '../attributeEditors/ContextSelectorPopup.svelte'
+  import ContextValue from '../attributeEditors/ContextValue.svelte'
+
+  export let readonly: boolean
+  export let val: any
+  export let process: Process
+  export let context: Context
+  export let attribute: AnyAttribute
+
+  const dispatch = createEventDispatcher()
+
+  $: contextValue = parseContext(val)
+
+  function selectContext (e: MouseEvent): void {
+    showPopup(
+      ContextSelectorPopup,
+      {
+        process,
+        masterTag: process.masterTag,
+        context,
+        attribute,
+        onSelect
+      },
+      eventToHTMLElement(e)
+    )
+  }
+
+  function onSelect (res: SelectedContext | null): void {
+    val = res === null ? undefined : '$' + JSON.stringify(res)
+    dispatch('change', val)
+  }
+
+  function onChange (value: any | undefined): void {
+    val = value
+    dispatch('change', val)
+  }
+
+  const client = getClient()
+  const hierarchy = client.getHierarchy()
+
+  $: presenterClass = getAttributePresenterClass(hierarchy, attribute.type)
+
+  $: baseEditor = findAttributeEditor(client, process.masterTag, attribute.name)
+</script>
+
+<div class="text-input" class:context={contextValue}>
+  {#if contextValue}
+    <ContextValue
+      {process}
+      masterTag={process.masterTag}
+      {contextValue}
+      {context}
+      {attribute}
+      category={presenterClass.category}
+      attrClass={presenterClass.attrClass}
+      on:update={(e) => {
+        onSelect(e.detail)
+      }}
+    />
+  {:else}
+    <div class="w-full">
+      {#if baseEditor}
+        <Component
+          is={baseEditor}
+          props={{
+            label: attribute?.label,
+            placeholder: attribute?.label,
+            kind: 'ghost',
+            size: 'large',
+            width: '100%',
+            justify: 'left',
+            readonly,
+            type: attribute?.type,
+            value: val,
+            onChange,
+            focus
+          }}
+        />
+      {/if}
+    </div>
+  {/if}
+  <div class="button flex-row-center">
+    <Button
+      icon={IconAdd}
+      kind="ghost"
+      on:click={(e) => {
+        selectContext(e)
+      }}
+    />
+    <Button
+      icon={IconClose}
+      kind="ghost"
+      on:click={() => {
+        dispatch('delete')
+      }}
+    />
+  </div>
+</div>
+
+<style lang="scss">
+  .text-input {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    border: 1px solid var(--theme-refinput-border);
+    border-radius: 0.375rem;
+    max-width: 100%;
+    width: 100%;
+
+    .button {
+      flex-shrink: 0;
+    }
+
+    &.context {
+      background: #3575de33;
+      border-color: var(--primary-button-default);
+    }
+  }
+</style>

plugins/process-resources/src/components/criterias/BooleanCriteria.svelte

@@ -1,33 +0,0 @@
-<!--
-// Copyright © 2025 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 { AnyAttribute } from '@hcengineering/core'
-  import { Context, Process } from '@hcengineering/process'
-  import { AnyComponent } from '@hcengineering/ui'
-  import { Mode, Modes } from '../../query'
-  import BaseCriteria from './BaseCriteria.svelte'
-
-  export let readonly: boolean
-  export let value: any
-  export let process: Process
-  export let context: Context
-  export let attribute: AnyAttribute
-  export let baseEditor: AnyComponent | undefined
-
-  const modes: Mode[] = [Modes.Equal, Modes.NotEqual, Modes.Exists]
-</script>
-
-<BaseCriteria {readonly} {value} {process} {context} {attribute} {baseEditor} {modes} on:change on:delete />

plugins/process-resources/src/components/criterias/DateCriteria.svelte

@@ -1,33 +0,0 @@
-<!--
-// Copyright © 2025 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 { AnyAttribute } from '@hcengineering/core'
-  import { Context, Process } from '@hcengineering/process'
-  import { AnyComponent } from '@hcengineering/ui'
-  import { Mode, Modes } from '../../query'
-  import BaseCriteria from './BaseCriteria.svelte'
-
-  export let readonly: boolean
-  export let value: any
-  export let process: Process
-  export let context: Context
-  export let attribute: AnyAttribute
-  export let baseEditor: AnyComponent | undefined
-
-  const modes: Mode[] = [Modes.Equal, Modes.GT, Modes.LT, Modes.Exists]
-</script>
-
-<BaseCriteria {readonly} {value} {process} {context} {attribute} {baseEditor} {modes} on:change on:delete />

plugins/process-resources/src/components/criterias/EnumCriteria.svelte

@@ -1,33 +0,0 @@
-<!--
-// Copyright © 2025 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 { AnyAttribute } from '@hcengineering/core'
-  import { Context, Process } from '@hcengineering/process'
-  import { AnyComponent } from '@hcengineering/ui'
-  import { Mode, Modes } from '../../query'
-  import BaseCriteria from './BaseCriteria.svelte'
-
-  export let readonly: boolean
-  export let value: any
-  export let process: Process
-  export let context: Context
-  export let attribute: AnyAttribute
-  export let baseEditor: AnyComponent | undefined
-
-  const modes: Mode[] = [Modes.Equal, Modes.NotEqual, Modes.Exists]
-</script>
-
-<BaseCriteria {readonly} {value} {process} {context} {attribute} {baseEditor} {modes} on:change on:delete />

plugins/process-resources/src/components/criterias/NumberCriteria.svelte

@@ -1,33 +0,0 @@
-<!--
-// Copyright © 2025 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 { AnyAttribute } from '@hcengineering/core'
-  import { Context, Process } from '@hcengineering/process'
-  import { AnyComponent } from '@hcengineering/ui'
-  import { Mode, Modes } from '../../query'
-  import BaseCriteria from './BaseCriteria.svelte'
-
-  export let readonly: boolean
-  export let value: any
-  export let process: Process
-  export let context: Context
-  export let attribute: AnyAttribute
-  export let baseEditor: AnyComponent | undefined
-
-  const modes: Mode[] = [Modes.Equal, Modes.GT, Modes.LT, Modes.Exists]
-</script>
-
-<BaseCriteria {readonly} {value} {process} {context} {attribute} {baseEditor} {modes} on:change on:delete />

plugins/process-resources/src/components/criterias/RangeCriteria.svelte

@@ -0,0 +1,211 @@
+<!--
+// Copyright © 2025 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 { AnyAttribute } from '@hcengineering/core'
+  import { findAttributeEditor, getAttributePresenterClass, getClient } from '@hcengineering/presentation'
+  import { Context, parseContext, Process, SelectedContext } from '@hcengineering/process'
+  import { Button, Component, eventToHTMLElement, IconAdd, IconClose, showPopup } from '@hcengineering/ui'
+  import { createEventDispatcher } from 'svelte'
+  import ContextSelectorPopup from '../attributeEditors/ContextSelectorPopup.svelte'
+  import ContextValue from '../attributeEditors/ContextValue.svelte'
+
+  export let readonly: boolean
+  export let val: any[]
+  export let process: Process
+  export let context: Context
+  export let attribute: AnyAttribute
+
+  const dispatch = createEventDispatcher()
+
+  setDefaults(val)
+
+  $: firstContextValue = parseContext(val?.[0])
+  $: secondContextValue = parseContext(val?.[1])
+
+  function selectContext (e: MouseEvent, index: number): void {
+    showPopup(
+      ContextSelectorPopup,
+      {
+        process,
+        masterTag: process.masterTag,
+        context,
+        attribute,
+        onSelect: (e: SelectedContext | null) => {
+          onSelect(e, index)
+        }
+      },
+      eventToHTMLElement(e)
+    )
+  }
+
+  function onSelect (res: SelectedContext | null, index: number): void {
+    val[index] = res === null ? undefined : '$' + JSON.stringify(res)
+    dispatch('change', val)
+  }
+
+  function onChange (value: any | undefined, index: number): void {
+    val[index] = value
+    dispatch('change', val)
+  }
+
+  function setDefaults (value: any) {
+    if (!value || !Array.isArray(value)) {
+      val = [undefined, undefined]
+    }
+  }
+  $: setDefaults(val)
+
+  function changeFirst (value: any | undefined): void {
+    onChange(value, 0)
+  }
+
+  function changeSecond (value: any | undefined): void {
+    onChange(value, 1)
+  }
+
+  const client = getClient()
+  const hierarchy = client.getHierarchy()
+
+  $: presenterClass = getAttributePresenterClass(hierarchy, attribute.type)
+
+  $: baseEditor = findAttributeEditor(client, process.masterTag, attribute.name)
+</script>
+
+<div class="flex-row-center flex-gap-2">
+  <div class="flex-col flex-gap-2 w-full">
+    <div class="text-input" class:context={firstContextValue}>
+      {#if firstContextValue}
+        <ContextValue
+          {process}
+          masterTag={process.masterTag}
+          contextValue={firstContextValue}
+          {context}
+          {attribute}
+          category={presenterClass.category}
+          attrClass={presenterClass.attrClass}
+          on:update={(e) => {
+            onSelect(e.detail, 0)
+          }}
+        />
+      {:else}
+        <div class="w-full">
+          {#if baseEditor}
+            <Component
+              is={baseEditor}
+              props={{
+                label: attribute?.label,
+                placeholder: attribute?.label,
+                kind: 'ghost',
+                size: 'large',
+                width: '100%',
+                justify: 'left',
+                readonly,
+                type: attribute?.type,
+                value: val[0],
+                onChange: changeFirst,
+                focus
+              }}
+            />
+          {/if}
+        </div>
+      {/if}
+      <div class="button flex-row-center">
+        <Button
+          icon={IconAdd}
+          kind="ghost"
+          on:click={(e) => {
+            selectContext(e, 0)
+          }}
+        />
+      </div>
+    </div>
+    <div class="text-input" class:context={secondContextValue}>
+      {#if secondContextValue}
+        <ContextValue
+          {process}
+          masterTag={process.masterTag}
+          contextValue={secondContextValue}
+          {context}
+          {attribute}
+          category={presenterClass.category}
+          attrClass={presenterClass.attrClass}
+          on:update={(e) => {
+            onSelect(e.detail, 1)
+          }}
+        />
+      {:else}
+        <div class="w-full">
+          {#if baseEditor}
+            <Component
+              is={baseEditor}
+              props={{
+                label: attribute?.label,
+                placeholder: attribute?.label,
+                kind: 'ghost',
+                size: 'large',
+                width: '100%',
+                justify: 'left',
+                readonly,
+                type: attribute?.type,
+                value: val[1],
+                onChange: changeSecond,
+                focus
+              }}
+            />
+          {/if}
+        </div>
+      {/if}
+      <div class="button flex-row-center">
+        <Button
+          icon={IconAdd}
+          kind="ghost"
+          on:click={(e) => {
+            selectContext(e, 1)
+          }}
+        />
+      </div>
+    </div>
+  </div>
+  <Button
+    icon={IconClose}
+    kind="ghost"
+    on:click={() => {
+      dispatch('delete')
+    }}
+  />
+</div>
+
+<style lang="scss">
+  .text-input {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    border: 1px solid var(--theme-refinput-border);
+    border-radius: 0.375rem;
+    max-width: 100%;
+    width: 100%;
+
+    .button {
+      flex-shrink: 0;
+    }
+
+    &.context {
+      background: #3575de33;
+      border-color: var(--primary-button-default);
+    }
+  }
+</style>

plugins/process-resources/src/components/criterias/RefCriteria.svelte

@@ -1,33 +0,0 @@
-<!--
-// Copyright © 2025 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 { AnyAttribute } from '@hcengineering/core'
-  import { Context, Process } from '@hcengineering/process'
-  import { AnyComponent } from '@hcengineering/ui'
-  import { Mode, Modes } from '../../query'
-  import BaseCriteria from './BaseCriteria.svelte'
-
-  export let readonly: boolean
-  export let value: any
-  export let process: Process
-  export let context: Context
-  export let attribute: AnyAttribute
-  export let baseEditor: AnyComponent | undefined
-
-  const modes: Mode[] = [Modes.Equal, Modes.NotEqual, Modes.Exists]
-</script>
-
-<BaseCriteria {readonly} {value} {process} {context} {attribute} {baseEditor} {modes} on:change on:delete />

plugins/process-resources/src/components/criterias/StringCriteria.svelte

@@ -1,33 +0,0 @@
-<!--
-// Copyright © 2025 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 { AnyAttribute } from '@hcengineering/core'
-  import { Context, Process } from '@hcengineering/process'
-  import { AnyComponent } from '@hcengineering/ui'
-  import { Mode, Modes } from '../../query'
-  import BaseCriteria from './BaseCriteria.svelte'
-
-  export let readonly: boolean
-  export let value: any
-  export let process: Process
-  export let context: Context
-  export let attribute: AnyAttribute
-  export let baseEditor: AnyComponent | undefined
-
-  const modes: Mode[] = [Modes.Equal, Modes.StringContains, Modes.Exists]
-</script>
-
-<BaseCriteria {readonly} {value} {process} {context} {attribute} {baseEditor} {modes} on:change on:delete />

plugins/process-resources/src/components/settings/CardUpdateEditor.svelte

@@ -46,7 +46,8 @@
       if (attr.hidden === true) continue
       if (ignoreKeys.includes(key)) continue
       const presenterClass = getAttributePresenterClass(hierarchy, attr.type)
-      const editor = getCirteriaEditor(presenterClass.attrClass, presenterClass.category)
+      const updateCriteria = getCirteriaEditor(presenterClass.attrClass, presenterClass.category)
+      const editor = updateCriteria?.editor
       if (editor == null) continue
       res.push(attr)
     }

plugins/process-resources/src/index.ts

@@ -48,13 +48,9 @@ import MultiArrayElementEditor from './components/transformEditors/MultiArrayEle
 import DateOffsetEditor from './components/transformEditors/DateOffsetEditor.svelte'
 import NumberEditor from './components/transformEditors/NumberEditor.svelte'
 
-import ArrayCriteria from './components/criterias/ArrayCriteria.svelte'
-import BooleanCriteria from './components/criterias/BooleanCriteria.svelte'
-import DateCriteria from './components/criterias/DateCriteria.svelte'
-import EnumCriteria from './components/criterias/EnumCriteria.svelte'
-import NumberCriteria from './components/criterias/NumberCriteria.svelte'
-import RefCriteria from './components/criterias/RefCriteria.svelte'
-import StringCriteria from './components/criterias/StringCriteria.svelte'
+import ArraySizeCriteria from './components/criterias/ArraySizeCriteria.svelte'
+import BaseCriteria from './components/criterias/BaseCriteria.svelte'
+import RangeCriteria from './components/criterias/RangeCriteria.svelte'
 import LogActionPresenter from './components/LogActionPresenter.svelte'
 import NotifierExtension from './components/NotifierExtension.svelte'
 import AddRelationPresenter from './components/presenters/AddRelationPresenter.svelte'
@@ -139,13 +135,9 @@ export default async (): Promise<Resources> => ({
     ExecutionMyToDos
   },
   criteriaEditor: {
-    DateCriteria,
-    StringCriteria,
-    BooleanCriteria,
-    NumberCriteria,
-    RefCriteria,
-    EnumCriteria,
-    ArrayCriteria
+    BaseCriteria,
+    ArraySizeCriteria,
+    RangeCriteria
   },
   transformPresenter: {
     NumberPresenter,

plugins/process-resources/src/plugin.ts

@@ -72,13 +72,9 @@ export default mergeIds(processId, process, {
     AddTagPresenter: '' as AnyComponent
   },
   criteriaEditor: {
-    StringCriteria: '' as AnyComponent,
-    NumberCriteria: '' as AnyComponent,
-    DateCriteria: '' as AnyComponent,
-    BooleanCriteria: '' as AnyComponent,
-    ArrayCriteria: '' as AnyComponent,
-    EnumCriteria: '' as AnyComponent,
-    RefCriteria: '' as AnyComponent
+    BaseCriteria: '' as AnyComponent,
+    RangeCriteria: '' as AnyComponent,
+    ArraySizeCriteria: '' as AnyComponent
   },
   transformEditor: {
     MultiArrayElementEditor: '' as AnyComponent,

plugins/process-resources/src/query.ts

@@ -13,7 +13,9 @@
 
 import { type QuerySelector } from '@hcengineering/core'
 import { getEmbeddedLabel, type IntlString } from '@hcengineering/platform'
+import { type AnyComponent } from '@hcengineering/ui'
 import view from '@hcengineering/view-resources/src/plugin'
+import plugin from './plugin'
 
 export interface Mode {
   id: string
@@ -21,6 +23,7 @@ export interface Mode {
   query: QuerySelector<any> | string
   parse?: (value: any) => any
   withoutEditor?: boolean
+  editor?: AnyComponent
 }
 
 const Equal: Mode = {
@@ -47,6 +50,17 @@ const LT: Mode = {
   query: { $lt: '$val' as any }
 }
 
+const Between: Mode = {
+  id: 'between',
+  label: view.string.Between,
+  query: { $gte: '$val[0]' as any, $lte: '$val[1]' as any },
+  parse: (value: any): any => {
+    if (!Array.isArray(value) || value.length !== 2) return value
+    return value
+  },
+  editor: plugin.criteriaEditor.RangeCriteria
+}
+
 const Exists: Mode = {
   id: 'exists',
   label: view.string.ValueIsSet,
@@ -85,40 +99,46 @@ const ArrayNotIncludes: Mode = {
 const ArraySizeEquals: Mode = {
   id: 'sizeEquals',
   label: getEmbeddedLabel('='),
-  query: { $size: '$val' as any }
+  query: { $size: '$val' as any },
+  editor: plugin.criteriaEditor.ArraySizeCriteria
 }
 
 const ArraySizeGt: Mode = {
   id: 'sizeGt',
   label: getEmbeddedLabel('>'),
-  query: { $size: { $gt: '$val' as any } }
+  query: { $size: { $gt: '$val' as any } },
+  editor: plugin.criteriaEditor.ArraySizeCriteria
 }
 
 const ArraySizeGte: Mode = {
   id: 'sizeGte',
   label: getEmbeddedLabel('≥'),
-  query: { $size: { $gte: '$val' as any } }
+  query: { $size: { $gte: '$val' as any } },
+  editor: plugin.criteriaEditor.ArraySizeCriteria
 }
 
 const ArraySizeLt: Mode = {
   id: 'sizeLt',
   label: getEmbeddedLabel('<'),
-  query: { $size: { $lt: '$val' as any } }
+  query: { $size: { $lt: '$val' as any } },
+  editor: plugin.criteriaEditor.ArraySizeCriteria
 }
 
 const ArraySizeLte: Mode = {
   id: 'sizeLte',
   label: getEmbeddedLabel('≤'),
-  query: { $size: { $lte: '$val' as any } }
+  query: { $size: { $lte: '$val' as any } },
+  editor: plugin.criteriaEditor.ArraySizeCriteria
 }
 
-export const Modes: Record<string, Mode> = {
+export const Modes = {
   Exists,
   Equal,
   NotEqual,
   StringContains,
   GT,
   LT,
+  Between,
   ArrayAll,
   ArrayAny,
   ArrayNotIncludes,
@@ -129,6 +149,8 @@ export const Modes: Record<string, Mode> = {
   ArraySizeLte
 } as const
 
+export type ModeId = keyof typeof Modes
+
 export function parseValue (modes: Mode[], value: any): [any, Mode] {
   if (value == null) {
     return [value, modes[0]]
@@ -163,24 +185,20 @@ export function buildResult (mode: Mode, value: any): any {
   if (typeof q !== 'object') return value
   const result: any = {}
   let res = result
-  while (true) {
-    if (typeof q === 'object') {
-      const key = Object.keys(q)[0]
-      const v: any = (q as any)[key]
-      if (typeof v !== 'object') {
-        if (typeof value === 'string' && typeof v === 'string') {
-          res[key] = v.replace('$val', value)
-        } else {
-          res[key] = mode.withoutEditor === true ? v : value ?? v
-        }
-        return result
+  while (typeof q === 'object') {
+    const key = Object.keys(q)[0]
+    const v: any = (q as any)[key]
+    if (typeof v !== 'object') {
+      if (typeof value === 'string' && typeof v === 'string') {
+        res[key] = v.replace('$val', value)
+      } else {
+        res[key] = mode.withoutEditor === true ? v : value ?? v
       }
-      q = v
-      res[key] = {}
-      res = res[key]
-    } else {
-      break
+      return result
     }
+    q = v
+    res[key] = {}
+    res = res[key]
   }
   return result
 }

plugins/process-resources/src/utils.ts

@@ -50,9 +50,10 @@ import {
   type Step,
   type StepId,
   type Transition,
+  type UpdateCriteriaComponent,
   type UserResult
 } from '@hcengineering/process'
-import { type AnyComponent, showPopup } from '@hcengineering/ui'
+import { showPopup } from '@hcengineering/ui'
 import { type AttributeCategory } from '@hcengineering/view'
 import process from './plugin'
 
@@ -638,17 +639,20 @@ export async function subProcessesDoneCheck (
   return res === undefined
 }
 
-export function getCirteriaEditor (of: Ref<Class<Doc>>, category: AttributeCategory): AnyComponent | undefined {
+export function getCirteriaEditor (
+  of: Ref<Class<Doc>>,
+  category: AttributeCategory
+): UpdateCriteriaComponent | undefined {
   const client = getClient()
   if (category !== 'attribute') {
     const res = client.getModel().findAllSync(process.class.UpdateCriteriaComponent, {
       category
     })[0]
-    return res?.editor
+    return res
   }
   const res = client.getModel().findAllSync(process.class.UpdateCriteriaComponent, {
     category,
     of
   })[0]
-  return res?.editor
+  return res
 }

plugins/process/src/index.ts

@@ -188,6 +188,7 @@ export interface UpdateCriteriaComponent extends Doc {
   category: AttributeCategory
   editor: AnyComponent
   of: Ref<Class<Doc>>
+  props: Record<string, any>
 }
 
 export * from './errors'