@solidstarters/solid-core-ui 1.0.1 → 1.1.0

package/src/components/core/common/SolidCreateButton.tsx

@@ -13,7 +13,7 @@ export const SolidCreateButton = ({ url }: any) => {
     return (
         <div>
             <Link href={createPath}>
-              <Button type="button" icon="pi pi-plus" label="Add" size='small'  className='small-button' ></Button>
+              <Button type="button" icon="pi pi-plus" label="Add" size='small'></Button>
             </Link>
         </div>
     )

package/src/components/core/common/SolidGlobalSearchElement.tsx

@@ -1,17 +1,18 @@
-'use client';
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Dialog } from "primereact/dialog";
 import { TabPanel, TabView } from "primereact/tabview";
 import { SolidSearchBox } from "./SolidSearchBox";
 import FilterComponent from "@/components/core/common/FilterComponent";
 import { Button } from "primereact/button";
+import { InputText } from "primereact/inputtext";
+import { OverlayPanel } from "primereact/overlaypanel";
+import { Divider } from "primereact/divider";
 
 
-export const SolidGlobalSearchElement = ({ viewData, applyFilter, filterValues, setFilterValues }: any) => {
+export const SolidGlobalSearchElement = ({ viewData, applyFilter, showGlobalSearchElement, setShowGlobalSearchElement,customFilter, setCustomFilter,handleApplyCustomFilter }: any) => {
 
-    const [visible, setVisible] = useState<boolean>(false);
     const handleApplyFilter = (filters: any) => {
-        setVisible(false);
+        setShowGlobalSearchElement(false);
         applyFilter(filters)
     }
 
@@ -26,20 +27,39 @@ export const SolidGlobalSearchElement = ({ viewData, applyFilter, filterValues,
         }
     }, [])
 
+    const op = useRef(null);
 
     return (
-
-
-        <div className="card flex justify-content-center">
-            <i className="pi pi-search" onClick={() => setVisible(true)}></i>
-            <Dialog header={false} className="search-filter-popup" showHeader={false} visible={visible} style={{ width: '50vw' }} onHide={() => { if (!visible) return; setVisible(false); }}>
+        <div className="flex justify-content-center solid-custom-filter-wrapper">
+            <div className="p-inputgroup flex-1"
+                onClick={(e) =>
+                    // @ts-ignore
+                    op.current.toggle(e)}
+            >
+                <InputText placeholder="Search Here" className="p-inputtext-sm" />
+                <Button
+                    icon="pi pi-search"
+                    severity="secondary"
+                    outlined size="small"
+                />
+            </div>
+            <OverlayPanel ref={op} className="solid-custom-overlay" style={{ minWidth: 378 }}>
+            <div className="px-4 py-3">
+                    <p className="m-0">Searching...</p>
+                </div>
+                <Divider className="m-0" />
+                <div className="px-2 py-1">
+                    <Button text size="small" label="Custom Filter" iconPos="left" icon='pi pi-plus'  onClick={() => setShowGlobalSearchElement(true)}/>
+                </div>
+            </OverlayPanel>
+            <Dialog header={false} className="search-filter-popup" showHeader={false} visible={showGlobalSearchElement} style={{ width: '50vw' }} onHide={() => { if (!showGlobalSearchElement) return; setShowGlobalSearchElement(false); }}>
                 <div className="flex field-popup-navigation gap-3 justify-content-between ">
                     <div className="flex text-2xl font-bold align-items-center ml-4" style={{ color: '#000' }}>
-                        <i className="pi pi-search" style={{ marginRight: '5px',color:"#06b6d4" }}></i>
+                        <i className="pi pi-search" style={{ marginRight: '5px', color: "#06b6d4" }}></i>
                         <p className="popup-heading m-0">Search and Filter</p>
                     </div>
                     <div className="flex align-items-center gap-3 close-popup">
-                        <Button icon="pi pi-times" rounded text aria-label="Cancel" type="reset" size="small" onClick={() => setVisible(false)} />
+                        <Button icon="pi pi-times" rounded text aria-label="Cancel" type="reset" size="small" onClick={() => setShowGlobalSearchElement(false)} />
                     </div>
                 </div>
                 <div className="card relative">
@@ -49,7 +69,7 @@ export const SolidGlobalSearchElement = ({ viewData, applyFilter, filterValues,
                         </TabPanel>
                         <TabPanel header="Filter" >
                             {fields.length > 0 &&
-                                <FilterComponent viewData={viewData} fields={fields}></FilterComponent>
+                                <FilterComponent viewData={viewData} fields={fields} filterRules={customFilter} setFilterRules={setCustomFilter} handleApplyCustomFilter={handleApplyCustomFilter} ></FilterComponent>
                             }
                             {/* <SolidKanbanFilter solidKanbanViewMetaData={solidKanbanViewMetaData} handleApplyFilter={handleApplyFilter} filterValues={filterValues} setFilterValues={setFilterValues}></SolidKanbanFilter> */}
                         </TabPanel>

package/src/components/core/common/SolidLayoutViews.tsx

@@ -0,0 +1,87 @@
+'use client';
+import { Button } from 'primereact/button';
+import { OverlayPanel } from 'primereact/overlaypanel';
+import { RadioButton } from 'primereact/radiobutton';
+import { useRef } from 'react';
+interface Props {
+    sizeOptions: { label: string; value: string, image: string }[];
+    setSize: (value: string) => void;
+    size: string;
+    viewModes: { label: string; value: string, image: string }[];
+    setView: (value: string) => void;
+    view: string;
+}
+export const SolidLayoutViews = ({ sizeOptions, setSize, size, viewModes, setView, view }: Props) => {
+    const op = useRef(null);
+
+    return (
+        <div className="position-relative">
+            <Button
+                type="button"
+                size='small'
+                severity='secondary'
+                icon={
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none">
+                        <path d="M14.9016 13.1969L10.8031 9.09845L14.9016 5L19 9.09845L14.9016 13.1969ZM5 11.7461V5.94301H10.8031V11.7461H5ZM12.2539 19V13.1969H18.057V19H12.2539ZM5 19V13.1969H10.8031V19H5ZM6.45078 10.2953H9.35233V7.39378H6.45078V10.2953ZM14.9197 11.1658L16.9689 9.11658L14.9197 7.06736L12.8705 9.11658L14.9197 11.1658ZM13.7047 17.5492H16.6062V14.6477H13.7047V17.5492ZM6.45078 17.5492H9.35233V14.6477H6.45078V17.5492Z" fill="#4B4D52" />
+                    </svg>
+                }
+                className='custom-icon-button'
+                outlined
+                // @ts-ignore
+                onClick={(e) => op.current.toggle(e)}
+            />
+            <OverlayPanel ref={op} className='solid-header-dropdown-panel'>
+                <div className='secondary-border-bottom p-1'>
+                    <p className='px-3 pt-2'>Density</p>
+                    <div className="flex flex-column gap-1">
+                        {sizeOptions.map((option) => (
+                            <div key={option.value} className={`flex align-items-center ${option.value === size ? 'solid-active-view' : 'solid-view'}`}>
+                                <RadioButton
+                                    inputId={option.value}
+                                    name="sizes"
+                                    value={option.value}
+                                    onChange={(e) => setSize(e.value)}
+                                    checked={option.value === size}
+                                />
+                                <label htmlFor={option.value} className="ml-2 flex align-items-center justify-content-between w-full">
+                                    {option.label}
+                                    <img
+                                        src={option.image}
+                                        alt={option.value}
+                                        className='img-fluid position-relative'
+                                        style={{ width: '2.75rem' }}
+                                    />
+                                </label>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+                <div className='p-1'>
+                    <p className='px-3 pt-2'>View Mode</p>
+                    <div className="flex flex-column gap-1">
+                        {viewModes.map((option) => (
+                            <div key={option.value} className={`flex align-items-center ${option.value === view ? 'solid-active-view' : 'solid-view'}`}>
+                                <RadioButton
+                                    inputId={option.value}
+                                    name="views"
+                                    value={option.value}
+                                    onChange={(e) => setView(e.value)}
+                                    checked={option.value === view}
+                                />
+                                <label htmlFor={option.value} className="ml-2 flex align-items-center justify-content-between w-full">
+                                    {option.label}
+                                    <img
+                                        src={option.image}
+                                        alt={option.value}
+                                        className='img-fluid position-relative'
+                                        style={{ width: '2.75rem' }}
+                                    />
+                                </label>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </OverlayPanel>
+        </div>
+    );
+}

package/src/components/core/common/SolidListViewOptions.tsx

@@ -0,0 +1,31 @@
+'use client';
+import { Dialog } from "primereact/dialog";
+import { useState } from "react";
+
+
+export const SolidListViewOptions = ({ }: any) => {
+
+    const [visible, setVisible] = useState<boolean>(false);
+
+    const [componentsToRender, setComponentsToRender] = useState(["Header", "NonExistentComponent"]);
+
+    return (
+        <div className="card flex justify-content-center">
+            <i className="pi pi-cog" onClick={() => setVisible(true)}></i>
+
+            <Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => { if (!visible) return; setVisible(false); }}>
+                <p className="m-0">
+                    ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+                <div>
+                   
+                </div>
+
+            </Dialog>
+        </div>
+    )
+
+}

package/src/components/core/common/SolidSearchBox.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+import { AutoComplete } from "primereact/autocomplete";
 import { useState } from "react";
 
 

package/src/components/core/field/FieldListViewData.tsx

@@ -1,20 +1,20 @@
 "use client";
-import React, { useState, useEffect } from "react";
+import { useLazyGetfieldsQuery } from "@/redux/api/fieldApi";
+import {
+  useDeleteMultipleModelsMutation,
+} from "@/redux/api/modelApi";
+import Link from "next/link";
+import { FilterMatchMode } from "primereact/api";
+import { Button } from "primereact/button";
+import { Column } from "primereact/column";
 import {
   DataTable,
   DataTableFilterMeta,
   DataTableStateEvent,
 } from "primereact/datatable";
-import { Column } from "primereact/column";
-import { FilterMatchMode } from "primereact/api";
-import Link from "next/link";
-import {
-  useDeleteMultipleModelsMutation,
-} from "@/redux/api/modelApi";
-import qs from "qs";
-import { Button } from "primereact/button";
 import { Dialog } from "primereact/dialog";
-import { useLazyGetfieldsQuery } from "@/redux/api/fieldApi";
+import qs from "qs";
+import { useEffect, useState } from "react";
 
 export interface ModelMetaData {
   id: string;

package/src/components/core/filter/SolidFilterFields.tsx

@@ -1,23 +1,23 @@
 "use client";
-import SolidBigintField from "./columns/SolidBigintField";
-import SolidFloatField from "./columns/SolidFloatField";
-import SolidDecimalField from "./columns/SolidDecimalField";
-import SolidShortTextField from "./columns/SolidShortTextField";
-import SolidLongTextField from "./columns/SolidLongTextField";
-import SolidRichTextField from "./columns/SolidRichTextField";
-import SolidBooleanField from "./columns/SolidBooleanField";
-import SolidDateField from "./columns/SolidDateField";
-import SolidDatetimeField from "./columns/SolidDatetimeField";
-import SolidTimeField from "./columns/SolidTimeField";
-import SolidRelationField from "./columns/SolidRelationField";
-import SolidMediaSingleField from "./columns/SolidMediaSingleField";
-import SolidMediaMultipleField from "./columns/SolidMediaMultipleField";
-import SolidSelectionStaticField from "./columns/SolidSelectionStaticField";
-import SolidSelectionDynamicField from "./columns/SolidSelectionDynamicField";
-import SolidComputedField from "./columns/SolidComputedField";
-import SolidExternalIdField from "./columns/SolidExternalIdField";
-import SolidUuidField from "./columns/SolidUuidField";
-import SolidIntField from "./columns/SolidIntField";
+import SolidBigintField from "./fields/SolidBigintField";
+import SolidFloatField from "./fields/SolidFloatField";
+import SolidDecimalField from "./fields/SolidDecimalField";
+import SolidShortTextField from "./fields/SolidShortTextField";
+import SolidLongTextField from "./fields/SolidLongTextField";
+import SolidRichTextField from "./fields/SolidRichTextField";
+import SolidBooleanField from "./fields/SolidBooleanField";
+import SolidDateField from "./fields/SolidDateField";
+import SolidDatetimeField from "./fields/SolidDatetimeField";
+import SolidTimeField from "./fields/SolidTimeField";
+import SolidRelationField from "./fields/SolidRelationField";
+import SolidMediaSingleField from "./fields/SolidMediaSingleField";
+import SolidMediaMultipleField from "./fields/SolidMediaMultipleField";
+import SolidSelectionStaticField from "./fields/SolidSelectionStaticField";
+import SolidSelectionDynamicField from "./fields/SolidSelectionDynamicField";
+import SolidComputedField from "./fields/SolidComputedField";
+import SolidExternalIdField from "./fields/SolidExternalIdField";
+import SolidUuidField from "./fields/SolidUuidField";
+import SolidIntField from "./fields/SolidIntField";
 // import SolidRelationField from "./columns/SolidRelationField";
 // import SolidMediaSingleField from "./columns/SolidMediaSingleField";
 // import SolidMediaMultipleField from "./columns/SolidMediaMultipleField";
@@ -36,26 +36,23 @@ export type SolidFilterFieldsParams = {
 };
 
 export const getNumberOfInputs = (matchMode: any): number | null => {
-    if (matchMode.label && matchMode.label === 'Not In') {
-        matchMode = 'notIn';
-    }
 
     switch (matchMode) {
-        case 'between':
+        case '$between':
             return 2;
-        case 'in':
-        case 'notIn':
+        case '$in':
+        case '$notIn':
             return null;
-        case 'startsWith':
-        case 'contains':
-        case 'notContains':
-        case 'endsWith':
-        case 'equals':
-        case 'notEquals':
-        case 'lt':
-        case 'lte':
-        case 'gt':
-        case 'gte':
+        case '$startsWith':
+        case '$contains':
+        case '$notContains':
+        case '$endsWith':
+        case '$equals':
+        case '$notEquals':
+        case '$lt':
+        case '$lte':
+        case '$gt':
+        case '$gte':
             return 1;
         default:
             return 1; // Default to single input if no specific match is found

package/src/components/core/filter/SolidManyToOneFilterElement.tsx

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { createSolidEntityApi } from "@/redux/api/solidEntityApi";
 import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
 import { useState } from "react";
@@ -20,7 +20,7 @@ export const SolidManyToOneFilterElement = ({ value, updateInputs, index, fieldM
             limit: 10,
             filters: {
                 [fieldMetadata.relationModel.userKeyField.name]: {
-                    '$containsi': event.query
+                    $containsi: event.query
                 }
             }
         };

package/src/components/core/filter/SolidSelectionDynamicFilterElement.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
 import { useState } from "react";
 import qs from "qs";

package/src/components/core/filter/SolidSelectionStaticFilterElement.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
 import { useState } from "react";
 

package/src/components/core/filter/SolidVarInputsFilterElement.tsx

@@ -1,12 +1,10 @@
-'use client';
-import { Button } from "primereact/button"
 import { Calendar } from "primereact/calendar";
 import { InputNumber } from "primereact/inputnumber";
-import { InputText } from "primereact/inputtext"
+import { InputText } from "primereact/inputtext";
 import { useEffect, useState } from "react";
 import { SolidManyToOneFilterElement } from "./SolidManyToOneFilterElement";
-import { SolidSelectionStaticFilterElement } from "./SolidSelectionStaticFilterElement";
 import { SolidSelectionDynamicFilterElement } from "./SolidSelectionDynamicFilterElement";
+import { SolidSelectionStaticFilterElement } from "./SolidSelectionStaticFilterElement";
 
 export enum InputTypes {
     Date = 'Date',

package/src/components/core/filter/{columns → fields}/SolidBigintField.tsx

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { SolidFilterFieldsParams } from '../SolidFilterFields';
 import SolidIntField from './SolidIntField';
 

package/src/components/core/filter/{columns → fields}/SolidBooleanField.tsx

@@ -1,5 +1,4 @@
-'use client';
-import { FilterMatchMode } from 'primereact/api';
+"use client";
 import { Dropdown } from 'primereact/dropdown';
 import { SolidFilterFieldsParams } from '../SolidFilterFields';
 
@@ -9,11 +8,11 @@ const SolidBooleanField = ({ fieldMetadata, onChange, index, rule }: SolidFilter
     const columnDataType = 'boolean';
 
     const booleanOptions = [
-        { label: 'Yes', value: true },
-        { label: 'No', value: false },
+        { label: 'true', value: true },
+        { label: 'false', value: false },
     ];
     const filterMatchModeOptions = [
-        { label: 'Equals', value: FilterMatchMode.EQUALS },
+        { label: 'Equals', value: "$eqi" },
   ];
 
 
@@ -23,7 +22,7 @@ const SolidBooleanField = ({ fieldMetadata, onChange, index, rule }: SolidFilter
     return (
         <>
             <Dropdown
-                value={rule.operator}
+                value={rule.matchMode}
                 onChange={(e: any) => {
                     console.log("e", e);
                     onChange(rule.id, 'matchMode', e.value)
@@ -37,7 +36,7 @@ const SolidBooleanField = ({ fieldMetadata, onChange, index, rule }: SolidFilter
                 options={booleanOptions}
                 onChange={(e: any) => {
                     console.log("e", e);
-                    onChange(rule.id, 'value', e)
+                    onChange(rule.id, 'value', e.value)
                 }}
                 placeholder="Select"
                 className="p-column-filter"

package/src/components/core/filter/{columns → fields}/SolidComputedField.tsx

@@ -1,9 +1,9 @@
-'use client';
-import SolidShortTextField from './SolidShortTextField';
-import SolidIntField from './SolidIntField';
+"use client";
+import { SolidFilterFieldsParams } from '../SolidFilterFields';
 import SolidDateField from './SolidDateField';
 import SolidDatetimeField from './SolidDatetimeField';
-import { SolidFilterFieldsParams } from '../SolidFilterFields';
+import SolidIntField from './SolidIntField';
+import SolidShortTextField from './SolidShortTextField';
 
 const SolidComputedField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
     if (['text', 'string'].includes(fieldMetadata.computedFieldValueType)) {

package/src/components/core/filter/{columns → fields}/SolidDateField.tsx

@@ -1,19 +1,18 @@
-'use client';
-import { FilterMatchMode } from 'primereact/api';
+"use client";
 import { Dropdown } from 'primereact/dropdown';
 import { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';
 import { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';
 
 export const dateFilterMatchModeOptions = [
-    { label: 'Equals', value: FilterMatchMode.EQUALS },
-    { label: 'Not Equals', value: FilterMatchMode.NOT_EQUALS },
-    { label: 'Less Than', value: FilterMatchMode.LESS_THAN },
-    { label: 'Less Than Or Equal', value: FilterMatchMode.LESS_THAN_OR_EQUAL_TO },
-    { label: 'Greater Than', value: FilterMatchMode.GREATER_THAN },
-    { label: 'Greater Than Or Equal', value: FilterMatchMode.GREATER_THAN_OR_EQUAL_TO },
-    { label: 'In', value: FilterMatchMode.IN },
-    { label: 'Not In', value: FilterMatchMode.NOT_IN },
-    { label: 'Between', value: FilterMatchMode.BETWEEN }
+    { label: 'Equals', value: "$eqi" },
+    { label: 'Not Equals', value: "$nei" },
+    { label: 'Less Than', value: "$lt" },
+    { label: 'Less Than Or Equal', value: "$lte" },
+    { label: 'Greater Than', value: "$gt" },
+    { label: 'Greater Than Or Equal', value: "$gte" },
+    { label: 'In', value: "$in" },
+    { label: 'Not In', value: "$notIn" },
+    { label: 'Between', value: "$between" }
 ];
 
 const SolidDateField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
@@ -24,12 +23,12 @@ const SolidDateField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFie
 
     // TODO: the body template to be controlled based on the format that one is expecting the date to be displayed in.
     // const header = column.attrs.label ?? fieldMetadata.displayName;
-    const numberOfInputs = getNumberOfInputs("in");
+    const numberOfInputs = getNumberOfInputs(rule.matchMode);
 
     return (
         <>
             <Dropdown
-                value={rule.operator}
+                value={rule.matchMode}
                 onChange={(e: any) => {
                     console.log("e", e);
                     onChange(rule.id, 'matchMode', e.value)

package/src/components/core/filter/{columns → fields}/SolidDatetimeField.tsx

@@ -1,24 +1,27 @@
-'use client';
-
-import { Dropdown } from 'primereact/dropdown';
+"use client";
+import React, { useEffect, useState } from 'react';
+import { dateFilterMatchModeOptions } from './SolidDateField';
 import { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';
+import { Dropdown } from 'primereact/dropdown';
 import { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';
-import { dateFilterMatchModeOptions } from './SolidDateField';
 
 const SolidDatetimeField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
     // const filterable = column.attrs.filterable;
     const showFilterOperator = false;
     const columnDataType = 'date';
 
-
+    const [numberOfInputs,setNumberOfInputs] = useState<any>(null);
     // TODO: the body template to be controlled based on the format that one is expecting the date to be displayed in.
     // const header = column.attrs.label ?? fieldMetadata.displayName;
-    const numberOfInputs = getNumberOfInputs("in");
+    useEffect(()=>{
+        setNumberOfInputs(getNumberOfInputs(rule.matchMode))
+    },[rule])
+    // const numberOfInputs = getNumberOfInputs(rule.matchMode);
 
     return (
         <>
             <Dropdown
-                value={rule.operator}
+                value={rule.matchMode}
                 onChange={(e: any) => {
                     console.log("e", e);
                     onChange(rule.id, 'matchMode', e.value)

package/src/components/core/filter/{columns → fields}/SolidDecimalField.tsx

@@ -1,5 +1,4 @@
-'use client';
-
+"use client";
 import { SolidFilterFieldsParams } from '../SolidFilterFields';
 import SolidIntField from './SolidIntField';
 

package/src/components/core/filter/{columns → fields}/SolidExternalIdField.tsx

@@ -1,25 +1,22 @@
-'use client';
-
-import React from 'react';
-import { FilterMatchMode } from 'primereact/api';
-import { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';
+"use client";
 import { Dropdown } from 'primereact/dropdown';
+import { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';
 import { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';
 
 const SolidExternalIdField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
     const showFilterOperator = false;
     const columnDataType = 'text';
     const filterMatchModeOptions = [
-        { label: 'In', value: FilterMatchMode.IN },
-        { label: 'Not In', value: FilterMatchMode.NOT_IN },
+        { label: 'In', value: "$in" },
+        { label: 'Not In', value: "$notIn" },
     ];
-    const numberOfInputs = getNumberOfInputs("in");
+    const numberOfInputs = getNumberOfInputs(rule.matchMode);
 
 
     return (
         <>
             <Dropdown
-                value={rule.operator}
+                value={rule.matchMode}
                 onChange={(e: any) => {
                     console.log("e", e);
                     onChange(rule.id, 'matchMode', e.value)

package/src/components/core/filter/{columns → fields}/SolidFloatField.tsx

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { SolidFilterFieldsParams } from '../SolidFilterFields';
 import SolidIntField from './SolidIntField';
 

package/src/components/core/filter/{columns → fields}/SolidIdField.tsx

@@ -1,28 +1,26 @@
-'use client';
-import React from 'react';
-import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
-import { FilterMatchMode } from 'primereact/api';
+"use client";
 import { Dropdown } from 'primereact/dropdown';
 import { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';
+import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
 
 const SolidIdField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
     const showFilterOperator = false;
     const columnDataType = 'text';
     const filterMatchModeOptions = [
-        { label: 'In', value: FilterMatchMode.IN },
-        { label: 'Not In', value: FilterMatchMode.NOT_IN },
+        { label: 'In', value: "$in" },
+        { label: 'Not In', value: "$notIn" },
     ];
-    const numberOfInputs = getNumberOfInputs("in");
+    const numberOfInputs = getNumberOfInputs(rule.matchMode);
 
 
     return (
        <>
                   <Dropdown
-                      value={rule.operator}
+                      value={rule.matchMode}
                       onChange={(e: any) => {
                           console.log("e", e);
-                          onChange(index, 'operator', e.value)
-                      }}
+                          onChange(rule.id, 'matchMode', e.value)
+                        }}
                       options={filterMatchModeOptions}
                       optionLabel='label'
                       optionValue='value'