@solidstarters/solid-core-ui 1.1.211 → 1.1.212

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

@@ -0,0 +1,131 @@
+"use client";
+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";
+// 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 => {
+
+    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;
+        case '$null':
+        case '$notNull':
+            return 0;    
+        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/dist/components/core/filter/SolidManyToManyFilterElement.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { createSolidEntityApi } from "../../../redux/api/solidEntityApi";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+import { useEffect, useState } from "react";
+import qs from "qs";
+
+export const SolidManyToManyFilterElement = ({
+    value = [],
+    updateInputs,
+    index,
+    fieldMetadata
+}: any) => {
+
+    const entityApi = createSolidEntityApi(fieldMetadata.relationCoModelSingularName);
+    const { useLazyGetSolidEntitiesQuery } = entityApi;
+    const [triggerGetSolidEntities] = useLazyGetSolidEntitiesQuery();
+
+    const [suggestions, setSuggestions] = useState<any[]>([]);
+
+    const search = async (event: AutoCompleteCompleteEvent) => {
+        const queryData = {
+            offset: 0,
+            limit: 20,
+            filters: {
+                [fieldMetadata?.relationModel?.userKeyField?.name]: {
+                    $containsi: event.query
+                }
+            }
+        };
+
+        const qsString = qs.stringify(queryData, { encodeValuesOnly: true });
+        const response = await triggerGetSolidEntities(qsString);
+
+        if (response.data) {
+            setSuggestions(
+                response.data.records.map((item: any) => ({
+                    label: item[fieldMetadata.relationModel.userKeyField.name],
+                    value: item.id
+                }))
+            );
+        }
+    };
+
+
+    return (
+        <AutoComplete
+            // multiple
+            dropdown
+            field="label"
+            value={value}
+            suggestions={suggestions}
+            completeMethod={search}
+            onChange={(e) => {
+                // const cleanValues = Array.isArray(e.value) ? e.value : [];
+                // updateInputs(index, cleanValues);
+                updateInputs(index, e.value)
+            }}
+            placeholder={`Select ${fieldMetadata.displayName}`}
+            className="w-full"
+            inputClassName="w-full p-inputtext-sm"
+        />
+    );
+};

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

@@ -0,0 +1,61 @@
+"use client";
+import { createSolidEntityApi } from "../../../redux/api/solidEntityApi";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+import { useState } from "react";
+import qs from "qs";
+
+
+export const SolidManyToOneFilterElement = ({ value, updateInputs, index, fieldMetadata }: any) => {
+
+    const entityApi = createSolidEntityApi(fieldMetadata.relationCoModelSingularName);
+    const { useLazyGetSolidEntitiesQuery } = entityApi;
+    const [triggerGetSolidEntities] = useLazyGetSolidEntitiesQuery();
+
+    const [autoCompleteItems, setAutoCompleteItems] = useState([]);
+    const autoCompleteSearch = async (event: AutoCompleteCompleteEvent) => {
+
+        // Get the list view layout & metadata first. 
+        const queryData = {
+            offset: 0,
+            limit: 10,
+            filters: {
+                [fieldMetadata?.relationModel?.userKeyField?.name]: {
+                    $containsi: event.query
+                }
+            }
+        };
+
+        const autocompleteQs = qs.stringify(queryData, {
+            encodeValuesOnly: true,
+        });
+
+        // TODO: do error handling here, possible errors like modelname is incorrect etc...
+        const autocompleteResponse = await triggerGetSolidEntities(autocompleteQs);
+
+        // TODO: if no data found then can we show no matching "entities", where entities can be replaced with the model plural name,
+        const autocompleteData = autocompleteResponse.data;
+
+        if (autocompleteData) {
+            const autoCompleteItems = autocompleteData.records.map((item: any) => {
+                return {
+                    label: item[fieldMetadata?.relationModel?.userKeyField?.name],
+                    value: item['id']
+                }
+            });
+            setAutoCompleteItems(autoCompleteItems);
+        }
+    }
+
+    return (
+        <AutoComplete
+            dropdown
+            field="label"
+            value={value}
+            suggestions={autoCompleteItems}
+            completeMethod={autoCompleteSearch}
+            onChange={(e) => updateInputs(index, e.value)}
+            className="w-full"
+            inputClassName="w-full p-inputtext-sm"
+        />
+    )
+}

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

@@ -0,0 +1,50 @@
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+import { useState } from "react";
+import qs from "qs";
+import { useLazyGetSelectionDynamicValuesQuery } from "../../../redux/api/fieldApi";
+
+
+export const SolidSelectionDynamicFilterElement = ({ value, updateInputs, index, fieldMetadata }: any) => {
+
+
+    // selection dynamic specific code. 
+    const [triggerGetSelectionDynamicValues] = useLazyGetSelectionDynamicValuesQuery();
+    const [selectionDynamicItems, setSelectionDynamicItems] = useState([]);
+    const selectionDynamicSearch = async (event: AutoCompleteCompleteEvent) => {
+
+        // Get the list view layout & metadata first. 
+        const queryData = {
+            offset: 0,
+            limit: 10,
+            query: event.query,
+            fieldId: fieldMetadata.id
+        };
+
+        const sdQs = qs.stringify(queryData, {
+            encodeValuesOnly: true,
+        });
+
+        // TODO: do error handling here, possible errors like modelname is incorrect etc...
+        const sdResponse = await triggerGetSelectionDynamicValues(sdQs);
+
+        // TODO: if no data found then can we show no matching "entities", where entities can be replaced with the model plural name,
+        const sdData = sdResponse.data.data;
+
+        // @ts-ignore
+        setSelectionDynamicItems(sdData);
+    }
+
+
+    return (
+        <AutoComplete
+            field="label"
+            value={value}
+            dropdown
+            suggestions={selectionDynamicItems}
+            completeMethod={selectionDynamicSearch}
+            onChange={(e) => updateInputs(index, e.value)}
+            className="w-full"
+            inputClassName="w-full p-inputtext-sm"
+        />
+    )
+}

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

@@ -0,0 +1,32 @@
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+import { useState } from "react";
+
+
+export const SolidSelectionStaticFilterElement = ({ value, updateInputs, index, fieldMetadata }: any) => {
+
+    // selection dynamic specific code. 
+    const [selectionStaticItems, setSelectionStaticItems] = useState([]);
+    const selectionStaticSearch = (event: AutoCompleteCompleteEvent) => {
+        const selectionStaticData = fieldMetadata.selectionStaticValues.map((i: string) => {
+            return {
+                label: i.split(":")[1],
+                value: i.split(":")[0]
+            }
+        });
+        const suggestionData = selectionStaticData.filter((t: any) => t.value.toLowerCase().startsWith(event.query.toLowerCase()));
+        setSelectionStaticItems(suggestionData)
+    }
+
+    return (
+        <AutoComplete
+            field="label"
+            value={value}
+            dropdown
+            suggestions={selectionStaticItems}
+            completeMethod={selectionStaticSearch}
+            onChange={(e) => updateInputs(index, e.value)}
+            className="w-full"
+            inputClassName="w-full p-inputtext-sm"
+        />
+    )
+}

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

@@ -0,0 +1,209 @@
+import { Calendar } from "primereact/calendar";
+import { InputNumber } from "primereact/inputnumber";
+import { InputText } from "primereact/inputtext";
+import { useEffect, useState } from "react";
+import { SolidManyToOneFilterElement } from "./SolidManyToOneFilterElement";
+import { SolidSelectionDynamicFilterElement } from "./SolidSelectionDynamicFilterElement";
+import { SolidSelectionStaticFilterElement } from "./SolidSelectionStaticFilterElement";
+import { Button } from "primereact/button";
+import { SolidManyToManyFilterElement } from "./SolidManyToManyFilterElement";
+import { SolidBooleanFilterElement } from "./SolidBooleanFilterElement";
+
+export enum InputTypes {
+    Date = 'Date',
+    DateTime = 'DateTime',
+    Time = 'Time',
+    Numeric = 'Numeric',
+    Text = 'Text',
+    SelectionStatic = 'SelectionStatic',
+    RelationManyToOne = 'RelationManyToOne',
+    RelationManyToMany = 'RelationManyToMany',
+    SelectionDynamic = 'SelectionDynamic',
+    Boolean = 'Boolean',
+}
+
+
+// Based on numberOfInputs map the input filed and hide add and delete 
+export const SolidVarInputsFilterElement = ({ values, onChange, inputType = InputTypes.Text, numberOfInputs = null, fieldMetadata }: any) => {
+
+    if (!values) {
+        values = numberOfInputs && numberOfInputs > 0 ? Array(numberOfInputs).fill('') : [''];
+        // values = [''];
+    } else {
+        if (values[0] == '') {
+            values = numberOfInputs && numberOfInputs > 0 ? Array(numberOfInputs).fill('') : [''];
+        } else {
+
+            values = values
+        }
+    }
+
+
+
+    // TODO: Ideally values will be an array, so we can spread them here instead of making a nested array.
+    const [inputs, setInputs] = useState([...values]);
+    useEffect(() => {
+        setInputs([...values])
+    }, [numberOfInputs])
+
+    const updateInputs = (index: number, value: any) => {
+        const updatedSpecification = inputs.map((item, i) =>
+            i === index ? value : item
+        );
+        setInputs(updatedSpecification);
+    };
+
+    const addInput = () => {
+        setInputs([...inputs, '']);
+    };
+
+    const deleteInput = (index: number) => {
+        if (inputs.length > 1) {
+            const updatedRows = inputs.filter((_, rowIndex) => rowIndex !== index);
+            setInputs(updatedRows);
+
+        } else {
+        }
+    };
+
+    useEffect(() => {
+        onChange(inputs)
+    }, [inputs])
+
+
+
+    return (
+        <>
+            {inputs && inputs.map((value: any, index: number) => (
+                <div className="flex">
+                    {numberOfInputs === 0 ?
+                        <></>
+                        :
+                        <>
+                            {inputType === InputTypes.Text &&
+                                <InputText
+                                    value={value}
+                                    onChange={(e) => updateInputs(index, e.target.value)}
+                                    placeholder=""
+                                    className='w-full p-inputtext-sm'
+                                />
+                            }
+                            {inputType === InputTypes.Numeric &&
+                                <InputNumber
+                                    value={value}
+                                    onChange={(e) => updateInputs(index, e.value)}
+                                    placeholder=""
+                                    className='w-full p-inputtext-sm'
+                                />
+                            }
+                            {inputType === InputTypes.Date &&
+                                <Calendar
+                                    value={value}
+                                    onChange={(e) => updateInputs(index, e.target.value)}
+                                    dateFormat="mm/dd/yy"
+                                    placeholder="mm/dd/yyyy"
+                                    mask="99/99/9999"
+                                    className="w-full"
+                                    inputClassName="w-full p-inputtext-sm"
+                                />
+                            }
+                            {inputType === InputTypes.DateTime &&
+                                <Calendar
+                                    value={value}
+                                    onChange={(e) => updateInputs(index, e.target.value)}
+                                    dateFormat="mm/dd/yy"
+                                    placeholder="mm/dd/yyyy hh:mm"
+                                    mask="99/99/9999 99:99"
+                                    showTime
+                                    hourFormat="24"
+                                    className="w-full"
+                                    inputClassName="w-full p-inputtext-sm"
+                                />
+                            }
+                            {inputType === InputTypes.Time &&
+                                <Calendar
+                                    value={value}
+                                    onChange={(e) => updateInputs(index, e.target.value)}
+                                    placeholder="hh:mm"
+                                    mask="99:99"
+                                    timeOnly
+                                    hourFormat="24"
+                                    className="w-full"
+                                    inputClassName="w-full p-inputtext-sm"
+                                />
+                            }
+                            {inputType === InputTypes.RelationManyToOne &&
+                                <SolidManyToOneFilterElement
+                                    value={value}
+                                    index={index}
+                                    updateInputs={updateInputs}
+                                    fieldMetadata={fieldMetadata}
+                                ></SolidManyToOneFilterElement>
+                            }
+                            {inputType === InputTypes.RelationManyToMany &&
+                                <SolidManyToManyFilterElement
+                                    value={value}
+                                    index={index}
+                                    updateInputs={updateInputs}
+                                    fieldMetadata={fieldMetadata}
+                                ></SolidManyToManyFilterElement>
+                            }
+                            {inputType === InputTypes.SelectionDynamic &&
+                                <SolidSelectionDynamicFilterElement
+                                    value={value}
+                                    index={index}
+                                    updateInputs={updateInputs}
+                                    fieldMetadata={fieldMetadata}
+                                ></SolidSelectionDynamicFilterElement>
+                            }
+                            {inputType === InputTypes.SelectionStatic &&
+
+                                <SolidSelectionStaticFilterElement
+                                    value={value}
+                                    index={index}
+                                    updateInputs={updateInputs}
+                                    fieldMetadata={fieldMetadata}
+                                ></SolidSelectionStaticFilterElement>
+                            }
+                            {inputType === InputTypes.Boolean &&
+
+                                <SolidBooleanFilterElement
+                                    value={value}
+                                    index={index}
+                                    updateInputs={updateInputs}
+                                    fieldMetadata={fieldMetadata}
+                                ></SolidBooleanFilterElement>
+                            }
+
+
+                            {numberOfInputs === null &&
+                                <>
+                                    {/* Plus Button to add a new row */}
+                                    {/* < Button
+                                    icon="pi pi-plus"
+                                    size="small"
+                                    className="small-button"
+                                    onClick={addInput}
+                                    type="button"
+                                /> */}
+
+                                    {/* Trash Button to delete the row */}
+                                    {/* <Button
+                                    icon="pi pi-trash"
+                                    size="small"
+                                    className="small-button"
+                                    onClick={() => deleteInput(index)}
+                                    severity="danger"
+                                    type="button"
+                                /> */}
+                                    <Button text severity='secondary' icon="pi pi-plus" size='small' onClick={() => addInput()} className='solid-filter-action-btn' />
+                                    <Button text severity='secondary' icon="pi pi-trash" size='small' onClick={() => deleteInput(index)} className='solid-filter-action-btn' />
+                                </>
+                            }
+                        </>
+                    }
+                </div>
+            ))}
+        </>
+    )
+}

package/dist/components/core/filter/fields/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/dist/components/core/filter/fields/SolidBooleanField.tsx

@@ -0,0 +1,68 @@
+"use client";
+import { Dropdown } from 'primereact/dropdown';
+import { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';
+import { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';
+
+const SolidBooleanField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
+    // const filterable = column.attrs.filterable;
+    const showFilterOperator = false;
+    const columnDataType = 'boolean';
+
+    const booleanOptions = [
+        { label: 'true', value: true },
+        { label: 'false', value: false },
+    ];
+    const filterMatchModeOptions = [
+        { label: 'Equals', value: "$eq" },
+        { label: 'Is null', value: "$null" },
+        { label: 'Is Not null', value: "$notNull" }
+
+    ];
+
+
+    // const header = column.attrs.label ?? fieldMetadata.displayName;
+
+    const numberOfInputs = getNumberOfInputs(rule.matchMode);
+
+    return (
+        <div className='flex flex-column md:flex-row align-items-start gap-2 md:gap-0'>
+            <div className="col-12 md:col-6 px-0 md:pr-2 md:pl-0">
+                <Dropdown
+                    value={rule.matchMode}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'matchMode', e.value)
+                    }}
+                    options={filterMatchModeOptions}
+                    optionLabel='label'
+                    optionValue='value'
+                    placeholder="Select Operator"
+                    className="p-inputtext-sm w-full "
+                />
+            </div>
+
+            <div className='flex flex-column gap-2 col-12 md:col-6 px-0 md:pl-2 md:pr-0'>
+                {/* <Dropdown
+                    value={rule.value}
+                    options={booleanOptions}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'value', e.value)
+                    }}
+                    placeholder="Select"
+                    className="p-column-filter"
+                /> */}
+                <SolidVarInputsFilterElement
+                    values={rule.value}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'value', e)
+                    }}
+                    numberOfInputs={numberOfInputs}
+                    inputType={InputTypes.Boolean}
+                    fieldMetadata={fieldMetadata}
+                >
+                </SolidVarInputsFilterElement>
+            </div>
+        </div>
+    );
+};
+
+export default SolidBooleanField;

package/dist/components/core/filter/fields/SolidComputedField.tsx

@@ -0,0 +1,23 @@
+"use client";
+import { SolidFilterFieldsParams } from '../SolidFilterFields';
+import SolidDateField from './SolidDateField';
+import SolidDatetimeField from './SolidDatetimeField';
+import SolidIntField from './SolidIntField';
+import SolidShortTextField from './SolidShortTextField';
+
+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;