@solidstarters/solid-core-ui 0.1.26 → 1.0.0

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

@@ -1,20 +1,20 @@
 "use client";
-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 React, { useState, useEffect } from "react";
 import {
   DataTable,
   DataTableFilterMeta,
   DataTableStateEvent,
 } from "primereact/datatable";
-import { Dialog } from "primereact/dialog";
+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 { useEffect, useState } from "react";
+import { Button } from "primereact/button";
+import { Dialog } from "primereact/dialog";
+import { useLazyGetfieldsQuery } from "@/redux/api/fieldApi";
 
 export interface ModelMetaData {
   id: string;

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

@@ -0,0 +1,131 @@
+"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 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";
+
+export type SolidFilterFieldsParams = {
+    solidViewMetaData?: any;
+    fieldMetadata: any,
+    onChange: any,
+    index: any,
+    rule: any
+};
+
+export const getNumberOfInputs = (matchMode: any): number | null => {
+    if (matchMode.label && matchMode.label === 'Not In') {
+        matchMode = 'notIn';
+    }
+
+    switch (matchMode) {
+        case 'between':
+            return 2;
+        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':
+            return 1;
+        default:
+            return 1; // Default to single input if no specific match is found
+    }
+}
+
+export const SolidFilterFields = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
+
+    if (fieldMetadata) {
+
+        // And finally we can implement additional switching logic based on certain special fields. 
+        if (fieldMetadata.name === 'id') {
+            return SolidIntField({ fieldMetadata, onChange, index, rule });
+        }
+        if (fieldMetadata.type === 'int') {
+            return SolidIntField({ fieldMetadata, onChange, index, rule });
+        }
+        if (fieldMetadata.type === 'bigint') {
+            return SolidBigintField({ fieldMetadata, onChange, index, rule });
+        }
+        if (fieldMetadata.type === 'float') {
+            return SolidFloatField({ fieldMetadata, onChange, index, rule });
+        }
+        if (fieldMetadata.type === 'decimal') {
+            return SolidDecimalField({ fieldMetadata, onChange, index, rule });
+        }
+        if (fieldMetadata.type === 'shortText') {
+            return SolidShortTextField({ fieldMetadata, onChange, index, rule });
+        }
+        if (fieldMetadata.type === 'longText') {
+            return SolidLongTextField({ fieldMetadata, onChange, index, rule });
+        }
+        if (fieldMetadata.type === 'richText') {
+            return SolidRichTextField({ fieldMetadata, onChange, index, rule });
+        }
+        if (fieldMetadata.type === 'boolean') {
+            return SolidBooleanField({ fieldMetadata, onChange, index, rule });
+        }
+        if (fieldMetadata.type === 'date') {
+            return SolidDateField({ fieldMetadata, onChange, index, rule });
+        }
+        if (fieldMetadata.type === 'datetime') {
+            return SolidDatetimeField({ fieldMetadata, onChange, index, rule });
+        }
+        if (fieldMetadata.type === 'time') {
+            return SolidTimeField({ fieldMetadata, onChange, index, rule });
+        }
+        if (fieldMetadata.type === 'relation') {
+            return SolidRelationField({ fieldMetadata, onChange, index, rule });
+        }
+        if (fieldMetadata.type === 'mediaSingle') {
+            return SolidMediaSingleField({ fieldMetadata, onChange, index, rule });
+        }
+        if (fieldMetadata.type === 'mediaMultiple') {
+            return SolidMediaMultipleField({ fieldMetadata, onChange, index, rule });
+        }
+        if (fieldMetadata.type === 'selectionStatic') {
+            return SolidSelectionStaticField({ fieldMetadata, onChange, index, rule });
+        }
+        if (fieldMetadata.type === 'selectionDynamic') {
+            return SolidSelectionDynamicField({ fieldMetadata, onChange, index, rule });
+        }
+        if (fieldMetadata.type === 'computed') {
+            return SolidComputedField({ fieldMetadata, onChange, index, rule });
+        }
+        if (fieldMetadata.type === 'externalId') {
+            return SolidExternalIdField({ fieldMetadata, onChange, index, rule });
+        }
+        if (fieldMetadata.type === 'uuid') {
+            return SolidUuidField({ fieldMetadata, onChange, index, rule });
+        }
+    }
+};

package/src/components/core/{kanban → filter}/SolidManyToOneFilterElement.tsx

@@ -1,10 +1,11 @@
+'use client';
 import { createSolidEntityApi } from "@/redux/api/solidEntityApi";
 import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
 import { useState } from "react";
 import qs from "qs";
 
 
-export const SolidKanbanManyToOneFilterElement = ({ value, updateInputs, index, fieldMetadata }: any) => {
+export const SolidManyToOneFilterElement = ({ value, updateInputs, index, fieldMetadata }: any) => {
 
     const entityApi = createSolidEntityApi(fieldMetadata.relationModelSingularName);
     const { useLazyGetSolidEntitiesQuery } = entityApi;

package/src/components/core/{kanban → filter}/SolidSelectionDynamicFilterElement.tsx

@@ -1,10 +1,11 @@
+'use client';
 import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
 import { useState } from "react";
 import qs from "qs";
 import { useLazyGetSelectionDynamicValuesQuery } from "@/redux/api/fieldApi";
 
 
-export const SolidKanbanSelectionDynamicFilterElement = ({ value, updateInputs, index, fieldMetadata }: any) => {
+export const SolidSelectionDynamicFilterElement = ({ value, updateInputs, index, fieldMetadata }: any) => {
 
 
     // selection dynamic specific code. 

package/src/components/core/{kanban → filter}/SolidSelectionStaticFilterElement.tsx

@@ -1,8 +1,9 @@
+'use client';
 import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
 import { useState } from "react";
 
 
-export const SolidKanbanSelectionStaticFilterElement = ({ value, updateInputs, index, fieldMetadata }: any) => {
+export const SolidSelectionStaticFilterElement = ({ value, updateInputs, index, fieldMetadata }: any) => {
 
     // selection dynamic specific code. 
     const [selectionStaticItems, setSelectionStaticItems] = useState([]);

package/src/components/core/{kanban → filter}/SolidVarInputsFilterElement.tsx

@@ -1,13 +1,14 @@
+'use client';
 import { Button } from "primereact/button"
 import { Calendar } from "primereact/calendar";
 import { InputNumber } from "primereact/inputnumber";
 import { InputText } from "primereact/inputtext"
 import { useEffect, useState } from "react";
-import { SolidKanbanManyToOneFilterElement } from "./SolidManyToOneFilterElement";
-import { SolidKanbanSelectionStaticFilterElement } from "./SolidSelectionStaticFilterElement";
-import { SolidKanbanSelectionDynamicFilterElement } from "./SolidSelectionDynamicFilterElement";
+import { SolidManyToOneFilterElement } from "./SolidManyToOneFilterElement";
+import { SolidSelectionStaticFilterElement } from "./SolidSelectionStaticFilterElement";
+import { SolidSelectionDynamicFilterElement } from "./SolidSelectionDynamicFilterElement";
 
-export enum KanbanInputTypes {
+export enum InputTypes {
     Date = 'Date',
     DateTime = 'DateTime',
     Time = 'Time',
@@ -20,7 +21,7 @@ export enum KanbanInputTypes {
 
 
 // Based on numberOfInputs map the input filed and hide add and delete 
-export const SolidKanbanVarInputsFilterElement = ({ values, onChange, inputType = KanbanInputTypes.Text, numberOfInputs = null, solidListViewMetaData, fieldMetadata }: any) => {
+export const SolidVarInputsFilterElement = ({ values, onChange, inputType = InputTypes.Text, numberOfInputs = null, fieldMetadata }: any) => {
 
     if (!values) {
         values = numberOfInputs && numberOfInputs > 0 ? Array(numberOfInputs).fill('') : [''];
@@ -34,7 +35,7 @@ export const SolidKanbanVarInputsFilterElement = ({ values, onChange, inputType
         }
     }
 
-    
+
 
     // TODO: Ideally values will be an array, so we can spread them here instead of making a nested array.
     const [inputs, setInputs] = useState([...values]);
@@ -76,7 +77,7 @@ export const SolidKanbanVarInputsFilterElement = ({ values, onChange, inputType
 
                         <div key={index} className="flex align-items-center gap-2">
 
-                            {inputType === KanbanInputTypes.Text &&
+                            {inputType === InputTypes.Text &&
                                 <InputText
                                     value={value}
                                     onChange={(e) => updateInputs(index, e.target.value)}
@@ -84,7 +85,7 @@ export const SolidKanbanVarInputsFilterElement = ({ values, onChange, inputType
                                     className="p-inputtext-sm small-input w-full"
                                 />
                             }
-                            {inputType === KanbanInputTypes.Numeric &&
+                            {inputType === InputTypes.Numeric &&
                                 <InputNumber
                                     value={value}
                                     onChange={(e) => updateInputs(index, e.value)}
@@ -92,7 +93,7 @@ export const SolidKanbanVarInputsFilterElement = ({ values, onChange, inputType
                                     className="p-inputtext-sm small-input w-full"
                                 />
                             }
-                            {inputType === KanbanInputTypes.Date &&
+                            {inputType === InputTypes.Date &&
                                 <Calendar
                                     value={value}
                                     onChange={(e) => updateInputs(index, e.target.value)}
@@ -101,7 +102,7 @@ export const SolidKanbanVarInputsFilterElement = ({ values, onChange, inputType
                                     mask="99/99/9999"
                                 />
                             }
-                            {inputType === KanbanInputTypes.DateTime &&
+                            {inputType === InputTypes.DateTime &&
                                 <Calendar
                                     value={value}
                                     onChange={(e) => updateInputs(index, e.target.value)}
@@ -112,7 +113,7 @@ export const SolidKanbanVarInputsFilterElement = ({ values, onChange, inputType
                                     hourFormat="24"
                                 />
                             }
-                            {inputType === KanbanInputTypes.Time &&
+                            {inputType === InputTypes.Time &&
                                 <Calendar
                                     value={value}
                                     onChange={(e) => updateInputs(index, e.target.value)}
@@ -122,53 +123,78 @@ export const SolidKanbanVarInputsFilterElement = ({ values, onChange, inputType
                                     hourFormat="24"
                                 />
                             }
-                            {inputType === KanbanInputTypes.RelationManyToOne &&
-                                <SolidKanbanManyToOneFilterElement
+                            {inputType === InputTypes.RelationManyToOne &&
+                                <SolidManyToOneFilterElement
                                     value={value}
                                     index={index}
                                     updateInputs={updateInputs}
                                     fieldMetadata={fieldMetadata}
-                                ></SolidKanbanManyToOneFilterElement>
+                                ></SolidManyToOneFilterElement>
                             }
-                            {inputType === KanbanInputTypes.SelectionDynamic &&
-                                <SolidKanbanSelectionDynamicFilterElement
+                            {inputType === InputTypes.SelectionDynamic &&
+                                <SolidSelectionDynamicFilterElement
                                     value={value}
                                     index={index}
                                     updateInputs={updateInputs}
                                     fieldMetadata={fieldMetadata}
-                                ></SolidKanbanSelectionDynamicFilterElement>
+                                ></SolidSelectionDynamicFilterElement>
                             }
-                            {inputType === KanbanInputTypes.SelectionStatic &&
+                            {inputType === InputTypes.SelectionStatic &&
 
-                                <SolidKanbanSelectionStaticFilterElement
+                                <SolidSelectionStaticFilterElement
                                     value={value}
                                     index={index}
                                     updateInputs={updateInputs}
                                     fieldMetadata={fieldMetadata}
-                                ></SolidKanbanSelectionStaticFilterElement>
+                                ></SolidSelectionStaticFilterElement>
                             }
 
                             {numberOfInputs === null &&
                                 <>
                                     {/* Plus Button to add a new row */}
-                                    < Button
+                                    {/* < Button
                                         icon="pi pi-plus"
                                         size="small"
                                         className="small-button"
                                         onClick={addInput}
                                         type="button"
-                                    />
+                                    /> */}
 
                                     {/* Trash Button to delete the row */}
-                                    <Button
+                                    {/* <Button
                                         icon="pi pi-trash"
                                         size="small"
                                         className="small-button"
                                         onClick={() => deleteInput(index)}
-                                        outlined
                                         severity="danger"
                                         type="button"
-                                    />
+                                    /> */}
+                                    <button onClick={() => addInput()}>
+                                        <div className="card flex justify-content-center">
+
+                                            <i className="custom-target-icon pi pi-plus-circle p-text-secondary p-overlay-badge"
+                                                data-pr-tooltip="Add Group"
+                                                data-pr-position="right"
+                                                data-pr-at="right+5 top"
+                                                data-pr-my="left center-2"
+                                                style={{ fontSize: '1.2rem', cursor: 'pointer' }}>
+                                            </i>
+                                        </div>
+
+                                    </button>
+
+                                    <button onClick={() => deleteInput(index)}>
+                                        <div className="card flex justify-content-center">
+
+                                            <i className="custom-target-icon pi pi-trash p-text-secondary p-overlay-badge"
+                                                data-pr-tooltip="Delete Rule"
+                                                data-pr-position="right"
+                                                data-pr-at="right+5 top"
+                                                data-pr-my="left center-2"
+                                                style={{ fontSize: '1.2rem', cursor: 'pointer' }}>
+                                            </i>
+                                        </div>
+                                    </button>
                                 </>
                             }
                         </div>

package/src/components/core/filter/columns/SolidBigintField.tsx

@@ -0,0 +1,9 @@
+'use client';
+import { SolidFilterFieldsParams } from '../SolidFilterFields';
+import SolidIntField from './SolidIntField';
+
+const SolidBigintField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
+    return SolidIntField({ fieldMetadata, onChange, index, rule });
+};
+
+export default SolidBigintField;

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

@@ -1,9 +1,9 @@
-import React from 'react';
-import { Dropdown } from 'primereact/dropdown';
-import { SolidKanbanViewColumnParams } from '../SolidKanbanViewSearchColumn';
+'use client';
 import { FilterMatchMode } from 'primereact/api';
+import { Dropdown } from 'primereact/dropdown';
+import { SolidFilterFieldsParams } from '../SolidFilterFields';
 
-const SolidBooleanColumn = ({ solidKanbanViewMetaData, fieldMetadata, updateEnumValues, index, enumValue }: SolidKanbanViewColumnParams) => {
+const SolidBooleanField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
     // const filterable = column.attrs.filterable;
     const showFilterOperator = false;
     const columnDataType = 'boolean';
@@ -23,21 +23,21 @@ const SolidBooleanColumn = ({ solidKanbanViewMetaData, fieldMetadata, updateEnum
     return (
         <>
             <Dropdown
-                value={enumValue.operator}
+                value={rule.operator}
                 onChange={(e: any) => {
                     console.log("e", e);
-                    updateEnumValues(index, 'operator', e.value)
+                    onChange(rule.id, 'matchMode', e.value)
                 }}
                 options={filterMatchModeOptions}
                 optionLabel='label'
                 optionValue='value'
                 placeholder="Select Operator" className="w-full md:w-14rem" />
             <Dropdown
-                value={enumValue.value}
+                value={rule.value}
                 options={booleanOptions}
                 onChange={(e: any) => {
                     console.log("e", e);
-                    updateEnumValues(index, 'value', e)
+                    onChange(rule.id, 'value', e)
                 }}
                 placeholder="Select"
                 className="p-column-filter"
@@ -46,4 +46,4 @@ const SolidBooleanColumn = ({ solidKanbanViewMetaData, fieldMetadata, updateEnum
     );
 };
 
-export default SolidBooleanColumn;
+export default SolidBooleanField;

package/src/components/core/filter/columns/SolidComputedField.tsx

@@ -0,0 +1,23 @@
+'use client';
+import SolidShortTextField from './SolidShortTextField';
+import SolidIntField from './SolidIntField';
+import SolidDateField from './SolidDateField';
+import SolidDatetimeField from './SolidDatetimeField';
+import { SolidFilterFieldsParams } from '../SolidFilterFields';
+
+const SolidComputedField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
+    if (['text', 'string'].includes(fieldMetadata.computedFieldValueType)) {
+        return SolidShortTextField({ fieldMetadata, onChange, index, rule });
+    }
+    if (['int', 'decimal'].includes(fieldMetadata.computedFieldValueType)) {
+        return SolidIntField({ fieldMetadata, onChange, index, rule });
+    }
+    if (fieldMetadata.computedFieldValueType === 'date') {
+        return SolidDateField({ fieldMetadata, onChange, index, rule });
+    }
+    if (fieldMetadata.computedFieldValueType === 'datetime') {
+        return SolidDatetimeField({ fieldMetadata, onChange, index, rule });
+    }
+};
+
+export default SolidComputedField;

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

@@ -1,10 +1,10 @@
-import React from 'react';
+'use client';
 import { FilterMatchMode } from 'primereact/api';
 import { Dropdown } from 'primereact/dropdown';
-import { getSolidKanbanViewNumberOfInputs, SolidKanbanViewColumnParams } from '../SolidKanbanViewSearchColumn';
-import { KanbanInputTypes, SolidKanbanVarInputsFilterElement } from '../../kanban/SolidVarInputsFilterElement';
+import { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';
+import { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';
 
-export const kanbanDateFilterMatchModeOptions = [
+export const dateFilterMatchModeOptions = [
     { label: 'Equals', value: FilterMatchMode.EQUALS },
     { label: 'Not Equals', value: FilterMatchMode.NOT_EQUALS },
     { label: 'Less Than', value: FilterMatchMode.LESS_THAN },
@@ -16,7 +16,7 @@ export const kanbanDateFilterMatchModeOptions = [
     { label: 'Between', value: FilterMatchMode.BETWEEN }
 ];
 
-const SolidDateColumn = ({ solidKanbanViewMetaData, fieldMetadata, updateEnumValues, index, enumValue }: SolidKanbanViewColumnParams) => {
+const SolidDateField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
     // const filterable = column.attrs.filterable;
     const showFilterOperator = false;
     const columnDataType = 'date';
@@ -24,35 +24,34 @@ const SolidDateColumn = ({ solidKanbanViewMetaData, fieldMetadata, updateEnumVal
 
     // 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 = getSolidKanbanViewNumberOfInputs("in");
+    const numberOfInputs = getNumberOfInputs("in");
 
     return (
         <>
             <Dropdown
-                value={enumValue.operator}
+                value={rule.operator}
                 onChange={(e: any) => {
                     console.log("e", e);
-                    updateEnumValues(index, 'operator', e.value)
+                    onChange(rule.id, 'matchMode', e.value)
                 }}
-                options={kanbanDateFilterMatchModeOptions}
+                options={dateFilterMatchModeOptions}
                 optionLabel='label'
                 optionValue='value'
                 placeholder="Select Operator" className="w-full md:w-14rem" />
-            <SolidKanbanVarInputsFilterElement
-                values={enumValue.value}
+            <SolidVarInputsFilterElement
+                values={rule.value}
                 onChange={(e: any) => {
                     console.log("e", e);
-                    updateEnumValues(index, 'value', e)
+                    onChange(rule.id, 'value', e)
                 }}
                 numberOfInputs={numberOfInputs}
-                inputType={KanbanInputTypes.Date}
-                solidListViewMetaData={solidKanbanViewMetaData}
+                inputType={InputTypes.Date}
                 fieldMetadata={fieldMetadata}
             >
-            </SolidKanbanVarInputsFilterElement>
+            </SolidVarInputsFilterElement>
         </>
     );
 
 };
 
-export default SolidDateColumn;
+export default SolidDateField;

package/src/components/core/filter/columns/SolidDatetimeField.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { Dropdown } from 'primereact/dropdown';
+import { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';
+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';
+
+
+    // 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");
+
+    return (
+        <>
+            <Dropdown
+                value={rule.operator}
+                onChange={(e: any) => {
+                    console.log("e", e);
+                    onChange(rule.id, 'matchMode', e.value)
+                }}
+                options={dateFilterMatchModeOptions}
+                optionLabel='label'
+                optionValue='value'
+                placeholder="Select Operator" className="w-full md:w-14rem" />
+            <SolidVarInputsFilterElement
+                values={rule.value}
+                onChange={(e: any) => {
+                    console.log("e", e);
+                    onChange(rule.id, 'value', e)
+                }}
+                numberOfInputs={numberOfInputs}
+                inputType={InputTypes.DateTime}
+                fieldMetadata={fieldMetadata}
+            >
+            </SolidVarInputsFilterElement></>
+    );
+
+};
+
+export default SolidDatetimeField;

package/src/components/core/filter/columns/SolidDecimalField.tsx

@@ -0,0 +1,10 @@
+'use client';
+
+import { SolidFilterFieldsParams } from '../SolidFilterFields';
+import SolidIntField from './SolidIntField';
+
+const SolidDecimalField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
+    return SolidIntField({ fieldMetadata, onChange, index, rule });
+};
+
+export default SolidDecimalField;

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

@@ -1,46 +1,47 @@
+'use client';
+
 import React from 'react';
 import { FilterMatchMode } from 'primereact/api';
-import { getSolidKanbanViewNumberOfInputs, SolidKanbanViewColumnParams } from '../SolidKanbanViewSearchColumn';
+import { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';
 import { Dropdown } from 'primereact/dropdown';
-import { KanbanInputTypes, SolidKanbanVarInputsFilterElement } from '../../kanban/SolidVarInputsFilterElement';
+import { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';
 
-const SolidExternalIdColumn = ({ solidKanbanViewMetaData, fieldMetadata, updateEnumValues, index, enumValue }: SolidKanbanViewColumnParams) => {
+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 },
     ];
-    const numberOfInputs = getSolidKanbanViewNumberOfInputs("in");
+    const numberOfInputs = getNumberOfInputs("in");
 
 
     return (
         <>
             <Dropdown
-                value={enumValue.operator}
+                value={rule.operator}
                 onChange={(e: any) => {
                     console.log("e", e);
-                    updateEnumValues(index, 'operator', e.value)
+                    onChange(rule.id, 'matchMode', e.value)
                 }}
                 options={filterMatchModeOptions}
                 optionLabel='label'
                 optionValue='value'
                 placeholder="Select Operator" className="w-full md:w-14rem" />
-            <SolidKanbanVarInputsFilterElement
-                values={enumValue.value}
+            <SolidVarInputsFilterElement
+                values={rule.value}
                 onChange={(e: any) => {
                     console.log("e", e);
-                    updateEnumValues(index, 'value', e)
+                    onChange(rule.id, 'value', e)
                 }}
                 numberOfInputs={numberOfInputs}
-                inputType={KanbanInputTypes.Text}
-                solidListViewMetaData={solidKanbanViewMetaData}
+                inputType={InputTypes.Text}
                 fieldMetadata={fieldMetadata}
             >
-            </SolidKanbanVarInputsFilterElement>
+            </SolidVarInputsFilterElement>
         </>
     );
 
 };
 
-export default SolidExternalIdColumn;
+export default SolidExternalIdField;