Adapt condition builder changes

axonivy · Jan 24, 2025 · 7d01254 · 7d01254
1 parent 8c1126a
commit 7d01254
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 46 deletions.
diff --git a/integration/inscription/package.json b/integration/inscription/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "@axonivy/process-editor-inscription-core": "~12.0.4-next",
     "@axonivy/process-editor-inscription-view": "~12.0.4-next",
-    "@axonivy/ui-icons": "~12.0.4-next.439",
+    "@axonivy/ui-icons": "~12.0.4-next.442",
     "path-browserify": "^1.0.1"
   },
   "devDependencies": {

diff --git a/integration/standalone/package.json b/integration/standalone/package.json
@@ -13,7 +13,7 @@
     "@axonivy/process-editor": "~12.0.4-next",
     "@axonivy/process-editor-inscription": "~12.0.4-next",
     "@axonivy/process-editor-inscription-view": "~12.0.4-next",
-    "@axonivy/ui-components": "~12.0.4-next.439",
+    "@axonivy/ui-components": "~12.0.4-next.442",
     "@eclipse-glsp/client": "2.3.0"
   },
   "devDependencies": {

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/inscription-core/package.json b/packages/inscription-core/package.json
@@ -14,7 +14,7 @@
     "src"
   ],
   "dependencies": {
-    "@axonivy/jsonrpc": "~12.0.4-next.439",
+    "@axonivy/jsonrpc": "~12.0.4-next.442",
     "@axonivy/process-editor-inscription-protocol": "~12.0.4-next",
     "monaco-editor": "^0.44.0",
     "monaco-editor-workers": "^0.44.0",

diff --git a/packages/inscription-view/package.json b/packages/inscription-view/package.json
@@ -16,8 +16,8 @@
   "dependencies": {
     "@axonivy/process-editor-inscription-core": "~12.0.4-next",
     "@axonivy/process-editor-inscription-protocol": "~12.0.4-next",
-    "@axonivy/ui-components": "~12.0.4-next.439",
-    "@axonivy/ui-icons": "~12.0.4-next.439",
+    "@axonivy/ui-components": "~12.0.4-next.442",
+    "@axonivy/ui-icons": "~12.0.4-next.442",
     "@monaco-editor/react": "^4.6.0",
     "@radix-ui/react-dialog": "1.1.2",
     "@radix-ui/react-radio-group": "1.2.1",

diff --git a/packages/inscription-view/src/components/browser/conditionBuilder/conditionBuilderData.ts b/packages/inscription-view/src/components/browser/conditionBuilder/conditionBuilderData.ts
@@ -1,6 +1,6 @@
 import type { ConditionData, ConditionGroupData, ConditionMode, LogicOperator, LogicOperators, Operators } from '@axonivy/ui-components';
 
-export const typeOptions: Operators = {
+export const operators: Operators = {
   'equal to': '==',
   'not equal to': '!=',
   'is true': 'isTrue',
@@ -13,7 +13,7 @@ export const typeOptions: Operators = {
   'greater or equal to': '>='
 };
 
-export const logicalOperatorOptions: LogicOperators = {
+export const logicOperators: LogicOperators = {
   and: '&&',
   or: '||'
 };
@@ -41,7 +41,7 @@ export const generateConditionString = (conditionMode: ConditionMode, conditionG
       })
       .join('');
 
-    const logicGroupOp = index < conditionGroups.length - 1 ? logicalOperatorOptions[group.logicalOperator].toLowerCase() : '';
+    const logicGroupOp = index < conditionGroups.length - 1 ? logicOperators[group.logicalOperator].toLowerCase() : '';
     return conditionGroups.length === 1 || conditionMode === 'basic-condition'
       ? conditions
       : `(${conditions})${logicGroupOp ? ` ${logicGroupOp} ` : ''}`;
@@ -51,7 +51,7 @@ export const generateConditionString = (conditionMode: ConditionMode, conditionG
 };
 
 const getLogicalOperator = (index: number, totalConditions: number, logicalOperator: LogicOperator) => {
-  return index < totalConditions - 1 ? ` ${logicalOperatorOptions[logicalOperator].toLowerCase()} ` : '';
+  return index < totalConditions - 1 ? ` ${logicOperators[logicalOperator].toLowerCase()} ` : '';
 };
 
 const formatCondition = (condition: ConditionData, formattedArg1: string, formattedArg2: string, logicalOp: string) => {
@@ -65,6 +65,6 @@ const formatCondition = (condition: ConditionData, formattedArg1: string, format
     case 'is not empty':
       return `!${formattedArg1}.isEmpty()${logicalOp}`;
     default:
-      return `${formattedArg1} ${typeOptions[condition.operator]} ${formattedArg2}${logicalOp}`;
+      return `${formattedArg1} ${operators[condition.operator]} ${formattedArg2}${logicalOp}`;
   }
 };
diff --git a/packages/inscription-view/src/components/browser/conditionBuilder/useConditionBuilder.tsx b/packages/inscription-view/src/components/browser/conditionBuilder/useConditionBuilder.tsx
@@ -2,37 +2,43 @@ import { IvyIcons } from '@axonivy/ui-icons';
 import type { UseBrowserImplReturnValue } from '../useBrowser';
 import type { BrowserValue } from '../Browser';
 import { useState } from 'react';
-import { generateConditionString, logicalOperatorOptions, typeOptions } from './conditionBuilderData';
-import { ConditionBuilder, ConditionBuilderProvider } from '@axonivy/ui-components';
+import { generateConditionString, logicOperators, operators } from './conditionBuilderData';
+import { ConditionBuilder } from '@axonivy/ui-components';
 import InputWithBrowser from '../../widgets/input/InputWithBrowser';
 
 export const CONDITION_BUILDER_ID = 'condition' as const;
 
 export const useConditionBuilder = (): UseBrowserImplReturnValue => {
-  const [condition, setCondition] = useState<BrowserValue>({ cursorValue: '' });
+  const [value, setValue] = useState<BrowserValue>({ cursorValue: '' });
 
   return {
     id: CONDITION_BUILDER_ID,
     name: 'Condition',
-    content: (
-      <>
-        <ConditionBuilderProvider
-          generateConditionString={generateConditionString}
-          logicalOperatorOptions={logicalOperatorOptions}
-          typeOptions={typeOptions}
-          argumentInput={(value, onChange) => (
-            <InputWithBrowser value={value} onChange={onChange} browsers={['attr']} style={{ flex: 1 }} />
-          )}
-        >
-          <ConditionBuilder onChange={e => setCondition({ cursorValue: e })} />
-        </ConditionBuilderProvider>
-        <pre className='browser-helptext'>
-          <b>Generated Condition</b>
-          <code>{condition.cursorValue}</code>
-        </pre>
-      </>
-    ),
-    accept: () => condition,
+    content: <ConditionBrowser value={value.cursorValue} onChange={setValue} />,
+    accept: () => value,
     icon: IvyIcons.Process
   };
 };
+
+type ConditionBrowserProps = {
+  value: string;
+  onChange: (value: BrowserValue) => void;
+};
+
+const ConditionBrowser = ({ value, onChange }: ConditionBrowserProps) => {
+  return (
+    <>
+      <ConditionBuilder
+        onChange={change => onChange({ cursorValue: change })}
+        generateConditionString={generateConditionString}
+        logicOperators={logicOperators}
+        operators={operators}
+        argumentInput={(value, onChange) => <InputWithBrowser value={value} onChange={onChange} browsers={['attr']} style={{ flex: 1 }} />}
+      />
+      <pre className='browser-helptext'>
+        <b>Generated Condition</b>
+        <code>{value}</code>
+      </pre>
+    </>
+  );
+};