support json_contains

client/src/components/advancedSearch/Condition.tsx

@@ -33,7 +33,7 @@ const Condition: FC<ConditionProps> = props => {
   const [conditionValue, setConditionValue] = useState(
     initData?.originValue || ''
   );
-  const [isValuelegal, setIsValueLegal] = useState(
+  const [isValueLegal, setIsValueLegal] = useState(
     initData?.isCorrect || false
   );
 
@@ -147,7 +147,7 @@ const Condition: FC<ConditionProps> = props => {
         variant="filled"
         value={conditionValue}
         onChange={handleValueChange}
-        error={!isValuelegal}
+        error={!isValueLegal}
       />
       <IconButton
         aria-label="close"
@@ -181,7 +181,7 @@ const useStyles = makeStyles((theme: Theme) =>
       minWidth: '130px',
     },
     logic: { minHeight: '38px', minWidth: '100px', margin: '0 24px' },
-    key: { minHeight: '38px', width: '100px', margin: '0 0' },
+    key: { minHeight: '38px', width: '150px', margin: '0 0' },
     value: { minHeight: '38px', minWidth: '130px' },
   })
 );

client/src/components/advancedSearch/Filter.tsx

@@ -7,9 +7,9 @@ import {
   Tooltip,
 } from '@material-ui/core';
 import FilterListIcon from '@material-ui/icons/FilterList';
+import { generateIdByHash } from '@/utils/Common';
 import AdvancedDialog from './Dialog';
 import { FilterProps, ConditionData } from './Types';
-import { generateIdByHash } from '../../utils/Common';
 import CustomButton from '../customButton/CustomButton';
 
 const Filter = forwardRef((props: FilterProps, ref) => {
@@ -88,17 +88,18 @@ const Filter = forwardRef((props: FilterProps, ref) => {
       let n = name;
 
       // if type is json, format json expression
-      switch (data.field.type) {
-        case 'JSON':
-          n = `${name}["${jsonKey}"]`;
-          break;
-        default:
-          break;
+      if (data.field.type === 'JSON') {
+        n = `${name}["${jsonKey}"]`;
       }
 
-      return `${prev}${
-        prev && !prev.endsWith('|| ') ? ' && ' : ''
-      }${n} ${op} ${value}`;
+      let newExpr = `${n} ${op} ${value}`;
+
+      // rewrite expression if the op is JSON_CONTAINS
+      if (op === 'JSON_CONTAINS') {
+        newExpr = `${op}(${n}, ${value})`;
+      }
+
+      return `${prev}${prev && !prev.endsWith('|| ') ? ' && ' : ''}${newExpr}`;
     }, '');
     func(expression);
   };
@@ -122,8 +123,8 @@ const Filter = forwardRef((props: FilterProps, ref) => {
       ]);
       return;
     }
-    const formerConditons = [...flatConditions];
-    const newConditions = formerConditons.reduce((prev, item) => {
+    const formerConditions = [...flatConditions];
+    const newConditions = formerConditions.reduce((prev, item) => {
       if (item.id === targetId) {
         return [
           ...prev,
@@ -149,7 +150,7 @@ const Filter = forwardRef((props: FilterProps, ref) => {
    * @param beforeTarget Will be inserted before the target item.
    */
   const addCondition = (targetId?: string, beforeTarget?: boolean) => {
-    const formerConditons = [...flatConditions];
+    const formerConditions = [...flatConditions];
     const newItem = {
       id: generateIdByHash('condition'),
       type: 'condition',
@@ -158,11 +159,11 @@ const Filter = forwardRef((props: FilterProps, ref) => {
       value: '',
     };
     if (!targetId) {
-      formerConditons.push(newItem);
-      setFilteredFlatConditions(formerConditons);
+      formerConditions.push(newItem);
+      setFilteredFlatConditions(formerConditions);
       return;
     }
-    const newConditions = formerConditons.reduce((prev, item) => {
+    const newConditions = formerConditions.reduce((prev, item) => {
       if (item.id === targetId) {
         const newItems = [
           item,

client/src/components/advancedSearch/utils.ts

@@ -19,6 +19,9 @@ export const formatValue = (value: string, type: string, operator: string) => {
         case 'not in':
           conditionValue = `[${value}]`;
           break;
+        case 'JSON_CONTAINS':
+          conditionValue = `${value}`;
+          break;
         default:
           conditionValue = `"${value}"`;
           break;

client/src/consts/Util.ts

@@ -42,4 +42,8 @@ export const LOGICAL_OPERATORS = [
     value: 'like',
     label: 'like',
   },
+  {
+    value: 'JSON_CONTAINS',
+    label: 'JSON_CONTAINS',
+  },
 ];

server/src/utils/Helper.ts

@@ -71,5 +71,13 @@ export const makeRandomJSON = () => {
       Math.random() < 0.5 ? Math.floor(Math.random() * 100) : `value${i}`; // randomly choose between a number or a string value
     obj[key] = value;
   }
+
+  const arrayKey = 'containsKey';
+  const arrayLength = Math.floor(Math.random() * 10) + 1; // generate a random length for the array between 1 and 10
+  const randomArray = Array.from({ length: arrayLength }, () =>
+    Math.floor(Math.random() * 100)
+  );
+  obj[arrayKey] = randomArray;
+
   return obj;
 };