@solidstarters/solid-core-ui 1.1.70 → 1.1.71

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

@@ -0,0 +1,13 @@
+"use client";
+import { SolidFilterFieldsParams } from '../SolidFilterFields';
+import SolidRelationManyToOneField from './relations/SolidRelationManyToOneField';
+
+const SolidRelationField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
+    if (fieldMetadata.relationType === 'many-to-one') {
+        return SolidRelationManyToOneField({ fieldMetadata, onChange, index, rule });
+    }
+    // TODO: Support one-to-many
+    // TODO: Support many-to-many
+};
+
+export default SolidRelationField;

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

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

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

@@ -0,0 +1,46 @@
+import { Dropdown } from 'primereact/dropdown';
+import { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';
+import { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';
+
+const SolidSelectionDynamicField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
+    const showFilterOperator = false;
+    const columnDataType = fieldMetadata.selectionValueType === 'int' ? 'numeric' : 'text';
+    const filterMatchModeOptions = [
+        { label: 'In', value: "$in" },
+        { label: 'Not In', value: "$notIn" },
+    ];
+    const numberOfInputs = getNumberOfInputs(rule.matchMode);
+
+
+
+    return (
+        <div className='flex align-items-start gap-3 w-full'>
+            <Dropdown
+                value={rule.matchMode}
+                onChange={(e: any) => {
+                    onChange(rule.id, 'matchMode', e.value)
+                }}
+                options={filterMatchModeOptions}
+                optionLabel='label'
+                optionValue='value'
+                placeholder="Select Operator"
+                className="w-full p-inputtext-sm"
+            />
+            <div className='flex flex-column gap-2 w-full'>
+                <SolidVarInputsFilterElement
+                    values={rule.value}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'value', e)
+                    }}
+                    numberOfInputs={numberOfInputs}
+                    inputType={InputTypes.SelectionDynamic}
+                    fieldMetadata={fieldMetadata}
+                >
+                </SolidVarInputsFilterElement>
+            </div>
+        </div>
+    );
+
+};
+
+export default SolidSelectionDynamicField;

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

@@ -0,0 +1,48 @@
+"use client";
+import { Dropdown } from 'primereact/dropdown';
+import { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';
+import { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';
+
+
+const SolidSelectionStaticField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
+
+    // const filterable = column.attrs.filterable;
+    const showFilterOperator = false;
+    const columnDataType = fieldMetadata.selectionValueType === 'int' ? 'numeric' : 'text';
+    const filterMatchModeOptions = [
+        { label: 'In', value: "$in" },
+        { label: 'Not In', value: "$notIn" },
+    ];
+
+    const numberOfInputs = getNumberOfInputs(rule.matchMode);
+
+    return (
+        <div className='flex align-items-start gap-3 w-full'>
+            <Dropdown
+                value={rule.matchMode}
+                onChange={(e: any) => {
+                    onChange(rule.id, 'matchMode', e.value)
+                }}
+                options={filterMatchModeOptions}
+                optionLabel='label'
+                optionValue='value'
+                placeholder="Select Operator"
+                className="w-full p-inputtext-sm"
+            />
+            <div className='flex flex-column gap-2 w-full'>
+                <SolidVarInputsFilterElement
+                    values={rule.value}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'value', e)
+                    }}
+                    numberOfInputs={numberOfInputs}
+                    inputType={InputTypes.SelectionStatic}
+                    fieldMetadata={fieldMetadata}
+                >
+                </SolidVarInputsFilterElement>
+            </div>
+        </div>
+    );
+};
+
+export default SolidSelectionStaticField;

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

@@ -0,0 +1,54 @@
+"use client";
+import { Dropdown } from 'primereact/dropdown';
+import { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';
+import { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';
+
+const SolidShortTextField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
+    // const filterable = column.attrs.filterable;
+    const showFilterOperator = false;
+    const columnDataType = 'text';
+    const filterMatchModeOptions = [
+        { label: 'Starts With', value: "$startsWithi" },
+        { label: 'Contains', value: "$containsi" },
+        { label: 'Not Contains', value: "$notContains" },
+        { label: 'Ends With', value: "$endsWith" },
+        { label: 'Equals', value: "$eqi" },
+        { label: 'Not Equals', value: "$nei" },
+        { label: 'In', value: "$in" },
+        { label: 'Not In', value: "$notIn" }
+    ];
+
+    // const header = column.attrs.label ?? fieldMetadata.displayName;
+    const numberOfInputs = getNumberOfInputs(rule.matchMode);
+
+    return (
+        <div className='flex align-items-start gap-3 w-full'>
+            <Dropdown
+                value={rule.matchMode}
+                onChange={(e: any) => {
+                    onChange(rule.id, 'matchMode', e.value)
+                }}
+                options={filterMatchModeOptions}
+                optionLabel='label'
+                optionValue='value'
+                placeholder="Select Operator"
+                className="w-full p-inputtext-sm"
+            />
+            <div className='flex flex-column gap-2 w-full'>
+                <SolidVarInputsFilterElement
+                    values={rule.value}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'value', e)
+                    }}
+                    numberOfInputs={numberOfInputs}
+                    inputType={InputTypes.Text}
+                    fieldMetadata={fieldMetadata}
+                >
+                </SolidVarInputsFilterElement>
+            </div>
+        </div>
+    );
+
+};
+
+export default SolidShortTextField;

package/dist/components/core/filter/fields/SolidTimeField.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 SolidTimeField = ({ 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(rule.matchMode);
+    return (
+        <div className='flex align-items-start gap-3 w-full'>
+            <Dropdown
+                value={rule.matchMode}
+                onChange={(e: any) => {
+                    onChange(rule.id, 'matchMode', e.value)
+                }}
+                options={dateFilterMatchModeOptions}
+                optionLabel='label'
+                optionValue='value'
+                placeholder="Select Operator"
+                className="w-full p-inputtext-sm"
+            />
+            <div className='flex flex-column gap-2 w-full'>
+                <SolidVarInputsFilterElement
+                    values={rule.value}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'value', e)
+                    }}
+                    numberOfInputs={numberOfInputs}
+                    inputType={InputTypes.Time}
+                    fieldMetadata={fieldMetadata}
+                >
+                </SolidVarInputsFilterElement>
+            </div>
+        </div>
+    );
+
+};
+
+export default SolidTimeField;

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

@@ -0,0 +1,45 @@
+"use client";
+import { Dropdown } from 'primereact/dropdown';
+import { getNumberOfInputs, SolidFilterFieldsParams } from '../SolidFilterFields';
+import { InputTypes, SolidVarInputsFilterElement } from '../SolidVarInputsFilterElement';
+
+const SolidUuidField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
+    const showFilterOperator = false;
+    const columnDataType = 'text';
+    const filterMatchModeOptions = [
+        { label: 'In', value: "$in" },
+        { label: 'Not In', value: "$notIn" },
+    ];
+    const numberOfInputs = getNumberOfInputs(rule.matchMode);
+
+    return (
+        <div className='flex align-items-start gap-3 w-full'>
+            <Dropdown
+                value={rule.matchMode}
+                onChange={(e: any) => {
+                    onChange(rule.id, 'matchMode', e.value)
+                }}
+                options={filterMatchModeOptions}
+                optionLabel='label'
+                optionValue='value'
+                placeholder="Select Operator"
+                className="w-full p-inputtext-sm"
+            />
+            <div className='flex flex-column gap-2 w-full'>
+                <SolidVarInputsFilterElement
+                    values={rule.value}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'value', e)
+                    }}
+                    numberOfInputs={numberOfInputs}
+                    inputType={InputTypes.Text}
+                    fieldMetadata={fieldMetadata}
+                >
+                </SolidVarInputsFilterElement>
+            </div>
+        </div>
+    );
+
+};
+
+export default SolidUuidField;

package/dist/components/core/filter/fields/relations/SolidRelationManyToOneField.tsx

@@ -0,0 +1,80 @@
+"use client";
+import { InputTypes, SolidVarInputsFilterElement } from '@/components/core/filter/SolidVarInputsFilterElement';
+import { Dropdown } from 'primereact/dropdown';
+import { getNumberOfInputs, SolidFilterFieldsParams } from '../../SolidFilterFields';
+
+const SolidRelationManyToOneField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFieldsParams) => {
+    // const filterable = column.attrs.filterable;
+    const showFilterOperator = false;
+    const filterMatchModeOptions = [
+        { label: 'In', value: "$in" },
+        { label: 'Not In', value: "$notIn" },
+    ];
+    const columnDataType = undefined;
+    const numberOfInputs = getNumberOfInputs(rule.matchMode);
+
+    // const filterTemplate = (options: ColumnFilterElementTemplateOptions) => {
+
+    //     return (
+    //         <SolidVarInputsFilterElement
+    //             values={options.value}
+    //             onChange={(e: FormEvent<HTMLInputElement>) => options.filterCallback(e, options.index)}
+    //             inputType={InputTypes.RelationManyToOne}
+    //             solidListViewMetaData={solidListViewMetaData}
+    //             fieldMetadata={fieldMetadata}
+    //             column={column}
+    //         >
+    //         </SolidVarInputsFilterElement>
+    //     )
+    // };
+
+    // const bodyTemplate = (rowData: any) => {
+    //     const manyToOneFieldData = rowData[column.attrs.name];
+
+    //     // This is the userkey that will be present within the rowData.
+    //     if (manyToOneFieldData) {
+    //         // Since this is a many-to-one field, we fetch the user key field of the associated model.
+    //         const userKeyField = fieldMetadata.relationModel.userKeyField.name;
+
+    //         const manyToOneColVal = manyToOneFieldData[userKeyField];
+
+    //         // TODO: change this to use an anchor tag so that on click we open that entity form view. 
+    //         return <span>{manyToOneColVal}</span>;
+    //     }
+    //     else {
+    //         return <span></span>
+    //     }
+    // };
+    // const header = column.attrs.label ?? fieldMetadata.displayName;
+
+    return (
+        <div className='flex align-items-start gap-3 w-full'>
+            <Dropdown
+                value={rule.matchMode}
+                onChange={(e: any) => {
+                    onChange(rule.id, 'matchMode', e.value)
+                }}
+                options={filterMatchModeOptions}
+                optionLabel='label'
+                optionValue='value'
+                placeholder="Select Operator"
+                className="w-full p-inputtext-sm"
+            />
+            <div className='flex flex-column gap-2 w-full'>
+                <SolidVarInputsFilterElement
+                    values={rule.value}
+                    onChange={(e: any) => {
+                        onChange(index, 'value', e)
+                    }}
+                    numberOfInputs={numberOfInputs}
+                    inputType={InputTypes.RelationManyToOne}
+                    fieldMetadata={fieldMetadata}
+                >
+                </SolidVarInputsFilterElement>
+            </div>
+        </div>
+    );
+
+};
+
+export default SolidRelationManyToOneField;

package/dist/components/core/form/SolidFormLayouts.tsx

@@ -0,0 +1,104 @@
+"use client"
+import { useGetmodelByIdQuery } from "@/redux/api/modelApi";
+import { useGetmoduleByIdQuery } from "@/redux/api/moduleApi";
+import { useGetusersByIdQuery } from "@/redux/api/userApi";
+import { useEffect } from "react";
+import CreateModel from "../model/CreateModel";
+import CreateModule from "../module/CreateModule";
+import CreateUser from "../users/CreateUser";
+import SolidFormView from "./SolidFormView";
+import { camelCase } from "change-case";
+
+type SolidViewParams = {
+    params: {
+        moduleName: string;
+        modelName: string;
+        id: string;
+    };
+};
+
+const SolidFormLayouts = ({ params }: any) => {
+    const {
+        data: modelData,
+        error,
+        isLoading,
+        isError,
+        refetch
+    } = useGetmodelByIdQuery(params.id, {
+        skip: params.id === 'new' || params.modelName !== 'model-metadata',
+    });
+    useEffect(() => {
+        if (params?.id !== 'new' && params.modelName === 'model-metadata') {
+            refetch();
+        }
+    }, [params.id, refetch]);
+
+    const {
+        data: moduleData,
+        error: moduleError,
+        isLoading: isModuleLoading,
+        isError: isModuleError,
+        refetch: refetchModule
+    } = useGetmoduleByIdQuery(params.id, {
+        skip: params.id === 'new' || params.modelName !== 'module-metadata',
+    });
+    useEffect(() => {
+        if (params?.id !== 'new' && params.modelName === 'module-metadata') {
+            refetchModule();
+        }
+    }, [refetchModule]);
+
+    const {
+        data: userData,
+        error: usererror,
+        isLoading: isuserLoading,
+        isError: isuserError,
+        refetch: refetchuser
+    } = useGetusersByIdQuery(params.id, {
+        skip: params.id === 'new' || params.modelName !== 'user',
+    });
+    useEffect(() => {
+        if (params?.id !== 'new' && params?.modelName === 'user') {
+            refetchuser();
+        }
+    }, [refetchuser]);
+
+    return (
+        <div className="page-parent-wrapper">
+            {params.modelName === "model-metadata" &&
+                // <SolidFormView {...params} embeded={false} modelName={camelCase(params.modelName)} />
+                (params.id === "new" ?
+                    <CreateModel params={params}></CreateModel>
+                    :
+                    <CreateModel params={params} data={modelData?.data}></CreateModel>
+                )
+            }
+            {params.modelName === "module-metadata" &&
+                // <SolidFormView {...params} embeded={false} modelName={camelCase(params.modelName)} />
+                (params.id === "new" ?
+                    <CreateModule params={params}></CreateModule>
+                    :
+                    <CreateModule params={params} data={moduleData?.data}></CreateModule>
+                )
+            }
+
+            {params.modelName === "user" &&
+                // <SolidFormView {...params} embeded={false} modelName={camelCase(params.modelName)} />
+                (params.id === "new" ?
+                    <CreateUser params={params}></CreateUser>
+                    :
+                    <CreateUser params={params} data={userData?.data}></CreateUser>
+                )
+            }
+
+            {params.modelName === "field-metadata" &&
+                <SolidFormView {...params} embeded={false} modelName={camelCase(params.modelName)} />
+            }
+            {params.modelName !== "field-metadata" && params.modelName !== "model-metadata" && params.modelName !== "module-metadata" && params.modelName !== "user" &&
+                <SolidFormView {...params} embeded={false} modelName={camelCase(params.modelName)} />
+            }
+        </div>
+    )
+}
+
+export default SolidFormLayouts

package/dist/components/core/form/SolidFormUserViewLayout.tsx

@@ -0,0 +1,85 @@
+"use client";
+import { useFormik } from "formik";
+import { Button } from "primereact/button";
+import { useSelector } from "react-redux";
+import React, { useRef } from "react";
+import { createSolidEntityApi } from "@/redux/api/solidEntityApi";
+import { javascript } from "@codemirror/lang-javascript";
+import { oneDark } from "@codemirror/theme-one-dark";
+import CodeMirror, { EditorView } from "@uiw/react-codemirror";
+import { Toast } from "primereact/toast";
+
+export const SolidFormUserViewLayout = ({ solidFormViewMetaData, setLayoutDialogVisible }: any) => {
+    const toast = useRef<Toast>(null);
+    const entityApi = createSolidEntityApi("userViewMetadata");
+    const { useUpsertSolidEntityMutation } = entityApi;
+    const [upsertUserView] = useUpsertSolidEntityMutation();
+
+    if (!solidFormViewMetaData?.data?.solidView) return null;
+
+    const solidView = solidFormViewMetaData.data.solidView;
+
+    const showToast = (severity: "success" | "error", summary: string, detail: string) => {
+        toast.current?.show({
+            severity,
+            summary,
+            detail,
+            life: 3000,
+        });
+    };
+
+    const formik = useFormik({
+        initialValues: {
+            layoutString: JSON.stringify(solidView.layout, null, 2),
+        },
+        onSubmit: async (values) => {
+            const parsedLayout = JSON.parse(values.layoutString);
+            console.log("updatedLayout", parsedLayout);
+
+            try {
+                if (solidView.id) {
+                    const response = await upsertUserView({
+                        viewMetadataId: solidView.id,
+                        layout: JSON.stringify(parsedLayout)
+                    }).unwrap();
+                    console.log("Response", response);
+                    if (response.statusCode === 200) {
+                        showToast("success", "Layout", "Form Layout Updated successfully!");
+                        setLayoutDialogVisible(false);
+                        window.location.reload();
+                    }
+                }
+            } catch (error) {
+                console.error("Update failed:", error);
+            }
+        },
+    });
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <form onSubmit={formik.handleSubmit}>
+                <CodeMirror
+                    value={formik.values.layoutString}
+                    height="500px"
+                    theme={oneDark}
+                    style={{ fontSize: '10px' }}
+                    extensions={[javascript(), EditorView.lineWrapping]}
+                    onChange={(value) => {
+                        formik.setFieldValue("layoutString", value);
+                    }}
+                />
+                <div className="pt-3 flex gap-2">
+                    <Button type="submit" label="Apply" size="small" />
+                    <Button
+                        type="button"
+                        outlined
+                        label="Cancel"
+                        size="small"
+                        onClick={() => setLayoutDialogVisible(false)}
+                    />
+                </div>
+            </form>
+        </>
+    );
+};

package/dist/components/core/form/SolidFormView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidFormView.d.ts","sourceRoot":"","sources":["../../../../src/components/core/form/SolidFormView.tsx"],"names":[],"mappings":"AAUA,OAAO,yBAAyB,CAAC;AAuCjC,OAAO,uCAAuC,CAAC;AAC/C,OAAO,gDAAgD,CAAC;AAExD,MAAM,MAAM,kBAAkB,GAAG;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,GAAG,CAAC;IACvB,mBAAmB,CAAC,EAAE,GAAG,CAAA;IACzB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,YAAY,CAAC,EAAE,GAAG,CAAC;CACtB,CAAC;AAgSF,QAAA,MAAM,aAAa,WAAY,kBAAkB,4CA08BhD,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"SolidFormView.d.ts","sourceRoot":"","sources":["../../../../src/components/core/form/SolidFormView.tsx"],"names":[],"mappings":"AAUA,OAAO,yBAAyB,CAAC;AAuCjC,OAAO,uCAAuC,CAAC;AAC/C,OAAO,gDAAgD,CAAC;AAGxD,MAAM,MAAM,kBAAkB,GAAG;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,CAAC,EAAE,GAAG,CAAC;IACvB,mBAAmB,CAAC,EAAE,GAAG,CAAA;IACzB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,YAAY,CAAC,EAAE,GAAG,CAAC;CACtB,CAAC;AAgSF,QAAA,MAAM,aAAa,WAAY,kBAAkB,4CAu+BhD,CAAC;AAEF,eAAe,aAAa,CAAC"}