@solidstarters/solid-core-ui 1.1.31 → 1.1.33

package/src/components/core/form/fields/SolidSelectionStaticField.tsx

@@ -5,6 +5,8 @@ import { useState } from "react";
 import * as Yup from 'yup';
 import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+import { getExtensionComponent } from "@/helpers/registry";
+import { SolidSelectionStaticFieldWidgetProps } from "@/types/solid-core";
 
 export class SolidSelectionStaticField implements ISolidField {
 
@@ -84,54 +86,39 @@ export class SolidSelectionStaticField implements ISolidField {
 
         const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
         const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
-
-        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)
-        }
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
-
+        let renderMode = fieldLayoutInfo.attrs.renderMode;
+        if (!renderMode) {
+            renderMode = 'field-autocomplete';
+        }
         return (
-            <div className={className}>
-                <div className="relative">
-                    <div className="flex flex-column gap-2 mt-4">
-                        {showFieldLabel != false &&
-                            <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                                {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                                {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
-                            </label>
-                        }
-                        <AutoComplete
-                            readOnly={formReadonly || fieldReadonly || readOnlyPermission}
-                            disabled={formDisabled || fieldDisabled}
-                            {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
-                            id={fieldLayoutInfo.attrs.name}
-                            name={fieldLayoutInfo.attrs.name}
-                            field="label"
-                            value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                            dropdown
-                            suggestions={selectionStaticItems}
-                            completeMethod={selectionStaticSearch}
-                            // onChange={(e) => updateInputs(index, e.value)} />
-                            // onChange={formik.handleChange}
-                            onChange={(e) => this.fieldContext.onChange(e, 'onFieldChange')}
-                            className="solid-standard-autocomplete"
-                        />
+            <>
+                {renderMode &&
+                    this.renderExtensionRenderMode(renderMode, formik) 
+                }
+                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                    <div className="absolute mt-1">
+                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
                     </div>
-                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                        <div className="absolute mt-1">
-                            <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                        </div>
-                    )}
-                </div>
-            </div>
+                )}
+            </>
         );
     }
-}
+
+    renderExtensionRenderMode(widgetName: string, formik: FormikObject) { 
+            let DynamicWidget = getExtensionComponent(widgetName);
+            if (!DynamicWidget) {
+                DynamicWidget = getExtensionComponent('field-autocomplete');
+            }
+            const widgetProps: SolidSelectionStaticFieldWidgetProps = {
+                formik: formik,
+                fieldContext: this.fieldContext,
+            }
+            return (
+                <>
+                    {DynamicWidget && <DynamicWidget {...widgetProps} />}
+                </>
+            )
+        }
+
+    }

package/src/components/core/form/fields/relations/SolidRelationManyToManyField.tsx

@@ -1,18 +1,11 @@
 'use client';
-import { createSolidEntityApi } from "@/redux/api/solidEntityApi";
-import { camelCase, capitalize } from "lodash";
-import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
-import { Button } from "primereact/button";
-import { Checkbox } from "primereact/checkbox";
-import { Dialog } from "primereact/dialog";
 import { Message } from "primereact/message";
-import { Panel } from "primereact/panel";
-import qs from "qs";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import * as Yup from 'yup';
 import { Schema } from "yup";
-import SolidFormView from "../../SolidFormView";
 import { FormikObject, ISolidField, SolidFieldProps } from "../ISolidField";
+import { getExtensionComponent } from "@/helpers/registry";
+import { SolidRelationManyToManyFieldWidgetProps } from "@/types/solid-core";
 
 
 
@@ -40,7 +33,6 @@ export class SolidRelationManyToManyField implements ISolidField {
                 };
             });
         }
-        // return { label: manyToOneColVal || '', value: manyToOneFieldData?.id || '' };
 
         return [];
     }
@@ -48,10 +40,6 @@ export class SolidRelationManyToManyField implements ISolidField {
     updateFormData(value: any, formData: FormData): any {
         const fieldLayoutInfo = this.fieldContext.field;
         if (value && value.length > 0) {
-            // value.forEach((value: any, index: any) => {
-            //     formData.append(`${fieldLayoutInfo.attrs.name}Ids[${index}]`, value.value)
-            //     formData.append(`${fieldLayoutInfo.attrs.name}[${index}]`, JSON.stringify(value.original))
-            // });
             const shouldUseOriginal = value.every((item: any) => item.original && item.original.id);
 
             value.forEach((item: any, index: number) => {
@@ -95,366 +83,42 @@ export class SolidRelationManyToManyField implements ISolidField {
     }
 
     render(formik: FormikObject) {
-        const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
-        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-        const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
-        const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
-        const [visibleCreateRelationEntity, setvisibleCreateRelationEntity] = useState(false);
-
-
-        const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
-        const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
-
-        const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
-        const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
-
+        const [visibleCreateRelationEntity, setVisibleCreateRelationEntity] = useState(false);
 
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
-
+        let renderMode = fieldLayoutInfo.attrs.renderMode;
+        if (!renderMode) {
+            renderMode = 'autocomplete';
+        }
         return (
             <>
-                {/* <div className={className}> */}
-                {fieldLayoutInfo.attrs.renderMode === "checkbox" &&
-                    <div className={className}>
-                        {this.renderCheckBoxMode(formik, visibleCreateRelationEntity, setvisibleCreateRelationEntity)}
-                    </div>
-                }
-                {(!fieldLayoutInfo.attrs.renderMode || fieldLayoutInfo.attrs.renderMode === "autocomplete") &&
-                    this.renderAutoCompleteMode(formik, visibleCreateRelationEntity, setvisibleCreateRelationEntity)
+                {renderMode &&
+                    this.renderExtensionRenderMode(renderMode, formik, visibleCreateRelationEntity, setVisibleCreateRelationEntity) 
                 }
                 {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                     <div className="absolute mt-1">
                         <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
                     </div>
                 )}
-                {/* </div> */}
             </>
         );
     }
 
-    renderCheckBoxMode(formik: FormikObject, visibleCreateRelationEntity: any, setvisibleCreateRelationEntity: any) {
-        const fieldMetadata = this.fieldContext.fieldMetadata;
-        const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
-        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
-
-        const readOnlyPermission = this.fieldContext.readOnly;
-
-
-        // auto complete specific code. 
-        const entityApi = createSolidEntityApi(fieldMetadata.relationCoModelSingularName);
-        const { useLazyGetSolidEntitiesQuery } = entityApi;
-        const [triggerGetSolidEntities] = useLazyGetSolidEntitiesQuery();
-
-        const disabled = fieldLayoutInfo.attrs?.disabled;
-        const readOnly = fieldLayoutInfo.attrs?.readOnly;
-
-        const [autoCompleteItems, setAutoCompleteItems] = useState<any>([]);
-        const autoCompleteSearch = async (query?: any) => {
-            let filterQuery;
-            if (query) {
-                filterQuery = {
-                    [fieldMetadata?.relationModel?.userKeyField?.name]: {
-                        '$containsi': query
-                    }
-                }
-            }
-            // Get the list view layout & metadata first. 
-            const queryData = {
-                offset: 0,
-                limit: 1000,
-                filters: filterQuery
-            };
-
-            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'],
-                        original: item
-                    }
-                });
-                setAutoCompleteItems(autoCompleteItems);
-            }
+    renderExtensionRenderMode(widgetName: string, formik: FormikObject, visibleCreateRelationEntity: any, setvisibleCreateRelationEntity: any) { 
+        let DynamicWidget = getExtensionComponent(widgetName);
+        if (!DynamicWidget) {
+            DynamicWidget = getExtensionComponent('autocomplete');
         }
-        useEffect(() => {
-            if (visibleCreateRelationEntity === false) {
-                autoCompleteSearch();
-            }
-        }, [visibleCreateRelationEntity])
-
-        const handleCheckboxChange = (e: any) => {
-            if (formik.values[fieldLayoutInfo.attrs.name].some((item: any) => item.value === e.value)) {
-                formik.setFieldValue(fieldLayoutInfo.attrs.name, formik.values[fieldLayoutInfo.attrs.name].filter((s: any) => s.value !== e.value));
-            } else {
-                formik.setFieldValue(fieldLayoutInfo.attrs.name, [...formik.values[fieldLayoutInfo.attrs.name], e]);
-            }
-        };
-
-        const customCreateHandler = (values: any) => {
-            const currentRelationData = formik.values[fieldLayoutInfo.attrs.name] || [];
-            const jsonValues = Object.fromEntries(values.entries());
-
-            // Create a new array with the existing data and the new entry
-            const updatedRelationData = [
-                ...currentRelationData,
-                {
-                    label: jsonValues[fieldMetadata?.relationModel?.userKeyField?.name],
-                    value: "new",
-                    original: jsonValues,
-                },
-            ];
-
-            formik.setFieldValue(fieldLayoutInfo.attrs.name, updatedRelationData);
-            // const updatedAutoCompleteItems = [
-            //     ...autoCompleteItems, ...updatedRelationData
-            // ];
-
-
-            const updatedAutoCompleteItems = [...autoCompleteItems, ...updatedRelationData].reduce((acc, current) => {
-                if (!acc.some((item: any) => item.label === current.label && item.value === current.value)) {
-                    acc.push(current);
-                }
-                return acc;
-            }, []);
-
-
-
-            setAutoCompleteItems(updatedAutoCompleteItems)
+        const widgetProps: SolidRelationManyToManyFieldWidgetProps = {
+            formik: formik,
+            fieldContext: this.fieldContext,
         }
-
-        const headerTemplate = (options: any) => {
-            const className = `${options.className} justify-content-space-between`;
-
-            return (
-                <div className={className}>
-                    <div className="relative">
-                        <div className="flex align-items-center gap-3">
-                            {showFieldLabel != false &&
-                                <label className="form-field-label">
-                                    {capitalize(fieldLayoutInfo.attrs.name)}
-                                    {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                                </label>
-                            }
-                            {fieldLayoutInfo.attrs.inlineCreate === "true" &&
-                                this.renderSolidFormEmbededView(formik, customCreateHandler, visibleCreateRelationEntity, setvisibleCreateRelationEntity)
-                            }
-                            <div className="many-to-many-add" >
-                                {/* <Button icon="pi pi-plus"
-                                rounded
-                                outlined
-                                aria-label="Filter"
-                                type="button"
-                                onClick={() => autoCompleteSearch()}
-                            /> */}
-                            </div>
-                        </div>
-                        <div>
-                            {options.togglerElement}
-                        </div>
-                    </div>
-                </div>
-            );
-        };
-
-
-
         return (
-            <div>
-
-                <Panel toggleable headerTemplate={headerTemplate}>
-
-                    <div className="formgrid grid">
-                        {autoCompleteItems && autoCompleteItems.map((a: any, i: number) => {
-                            return (
-                                <div key={a.label} className={`field col-6 flex gap-2 ${i >= 2 ? 'mt-3' : ''}`}>
-                                    <Checkbox
-                                        readOnly={readOnlyPermission}
-                                        inputId={a.label}
-                                        checked={formik.values[fieldLayoutInfo.attrs.name].some((item: any) => item.label === a.label)}
-                                        onChange={() => handleCheckboxChange(a)}
-                                    />
-                                    <label htmlFor={a.label} className="form-field-label m-0"> {a.label}</label>
-                                </div>
-                            )
-                        })}
-                    </div>
-                </Panel>
-            </div>
-
-        )
-    }
-
-
-    renderAutoCompleteMode(formik: FormikObject, visibleCreateRelationEntity: any, setvisibleCreateRelationEntity: any) {
-        const fieldMetadata = this.fieldContext.fieldMetadata;
-        const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
-        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
-        const readOnlyPermission = this.fieldContext.readOnly;
-
-        // auto complete specific code. 
-        const entityApi = createSolidEntityApi(fieldMetadata.relationCoModelSingularName);
-        const { useLazyGetSolidEntitiesQuery } = entityApi;
-        const [triggerGetSolidEntities] = useLazyGetSolidEntitiesQuery();
-
-
-        const disabled = fieldLayoutInfo.attrs?.disabled;
-        const readOnly = fieldLayoutInfo.attrs?.readOnly;
-
-        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'],
-                        original: item
-
-                    }
-                });
-                setAutoCompleteItems(autoCompleteItems);
-            }
-        }
-
-        const customCreateHandler = (values: any) => {
-            const currentRelationData = formik.values[fieldLayoutInfo.attrs.name] || [];
-            const jsonValues = Object.fromEntries(values.entries());
-            const updatedRelationData = [
-                ...currentRelationData,
-                {
-                    label: jsonValues[fieldMetadata?.relationModel?.userKeyField?.name],
-                    value: "new",
-                    original: jsonValues,
-                },
-            ];
-
-            formik.setFieldValue(fieldLayoutInfo.attrs.name, updatedRelationData);
-
-        }
-
-
-
-        return (
-            <div className={className}>
-                <div className="mt-4">
-                    {showFieldLabel != false &&
-                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">
-                            {fieldLabel}
-                            {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                        </label>
-                    }
-                    <div className="flex align-items-center gap-3 mt-2">
-                        <AutoComplete
-                            readOnly={readOnly || readOnlyPermission}
-                            disabled={disabled || readOnlyPermission}
-                            multiple
-                            {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
-                            id={fieldLayoutInfo.attrs.name}
-                            field="label"
-                            value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                            dropdown={!readOnlyPermission}
-                            suggestions={autoCompleteItems}
-                            completeMethod={autoCompleteSearch}
-                            onChange={formik.handleChange}
-                            className="solid-standard-autocomplete w-full"
-                        />
-                        {fieldLayoutInfo.attrs.inlineCreate === "true" && readOnlyPermission === false &&
-                            this.renderSolidFormEmbededView(formik, customCreateHandler, visibleCreateRelationEntity, setvisibleCreateRelationEntity)
-                        }
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    renderSolidFormEmbededView(formik: FormikObject, customCreateHandler: any, visibleCreateRelationEntity: any, setvisibleCreateRelationEntity: any) {
-
-        const fieldMetadata = this.fieldContext.fieldMetadata;
-        const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
-        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-
-        const params = {
-            moduleName: this.fieldContext.fieldMetadata.relationModelModuleName,
-            id: "new",
-            embeded: true,
-            layout: fieldLayoutInfo?.attrs?.inlineCreateLayout,
-            customCreateHandler: ((values: any) => {
-                setvisibleCreateRelationEntity(false);
-                customCreateHandler(values)
-            }),
-            inlineCreateAutoSave: fieldLayoutInfo?.attrs?.inlineCreateAutoSave,
-            handlePopupClose: (() => {
-                setvisibleCreateRelationEntity(false);
-            }),
-            modelName: camelCase(this.fieldContext.fieldMetadata.relationCoModelSingularName)
-        }
-
-        return (
-            <div >
-                <Button
-                    icon="pi pi-plus"
-                    rounded
-                    outlined
-                    aria-label="Filter"
-                    type="button"
-                    size="small"
-                    onClick={() => setvisibleCreateRelationEntity(true)}
-                    className="custom-add-button"
-                />
-                <Dialog
-                    header=""
-                    showHeader={false}
-                    visible={visibleCreateRelationEntity}
-                    style={{ width: fieldLayoutInfo?.attrs?.inlineCreateLayout?.attrs?.width ?? "60vw" }}
-                    onHide={() => {
-                        if (!visibleCreateRelationEntity) return;
-                        setvisibleCreateRelationEntity(false);
-                    }}
-                    className="solid-dialog"
-                >
-                    <SolidFormView {...params} />
-
-                </Dialog>
-            </div>
+            <>
+                {DynamicWidget && <DynamicWidget {...widgetProps} />}
+            </>
         )
     }
 }

package/src/components/core/form/fields/relations/widgets/SolidRelationManyToManyAutocompleteWidget.tsx

@@ -0,0 +1,74 @@
+"use client";
+import { SolidRelationManyToManyFieldWidgetProps } from "@/types/solid-core";
+import { AutoComplete } from "primereact/autocomplete";
+import { useState } from "react";
+import { Button } from "primereact/button";
+import { useRelationEntityHandler } from "./helpers/useRelationEntityHandler";
+import { InlineRelationEntityDialog } from "./helpers/InlineRelationEntityDialog";
+
+export const SolidRelationManyToManyAutocompleteWidget = ({ formik, fieldContext }: SolidRelationManyToManyFieldWidgetProps) => {
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const className = fieldLayoutInfo.attrs?.className || 'field col-12';
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+    const readOnlyPermission = fieldContext.readOnly;
+    const disabled = fieldLayoutInfo.attrs?.disabled;
+    const readOnly = fieldLayoutInfo.attrs?.readOnly;
+
+    const [visibleCreateDialog, setVisibleCreateDialog] = useState(false);
+    const { autoCompleteItems, fetchRelationEntities, addNewRelation } = useRelationEntityHandler({ fieldContext, formik });
+  
+    const onChange = (e: any) => {
+      formik.setFieldValue(fieldContext.field.attrs.name, e.value);
+    };
+
+    return (
+        <div className={className}>
+            <div className="mt-4">
+                {showFieldLabel != false &&
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">
+                        {fieldLabel}
+                        {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                    </label>
+                }
+                <div className="flex align-items-center gap-3 mt-2">
+                    <AutoComplete
+                        readOnly={readOnly || readOnlyPermission}
+                        disabled={disabled || readOnlyPermission}
+                        multiple
+                        {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
+                        id={fieldLayoutInfo.attrs.name}
+                        field="label"
+                        value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                        dropdown={!readOnlyPermission}
+                        suggestions={autoCompleteItems}
+                        completeMethod={(e) => fetchRelationEntities(e.query)}
+                        onChange={onChange}
+                        className="solid-standard-autocomplete w-full"
+                    />
+                    {fieldContext.field.attrs.inlineCreate && (
+                        <>
+                         <Button
+                            icon="pi pi-plus"
+                            rounded
+                            outlined
+                            aria-label="Filter"
+                            type="button"
+                            size="small"
+                            onClick={() => setVisibleCreateDialog(true)}
+                            className="custom-add-button"
+                        />
+                        <InlineRelationEntityDialog
+                            visible={visibleCreateDialog}
+                            setVisible={setVisibleCreateDialog}
+                            fieldContext={fieldContext}
+                            onCreate={addNewRelation}
+                        />
+                        </>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}