@solidstarters/solid-core-ui 0.1.26

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

@@ -0,0 +1,97 @@
+import { Editor } from "primereact/editor";
+import { Message } from "primereact/message";
+import { useState } from "react";
+import * as Yup from 'yup';
+import { Schema } from "yup";
+import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+
+export class SolidRichTextField implements ISolidField {
+
+    private fieldContext: SolidFieldProps;
+
+    constructor(fieldContext: SolidFieldProps) {
+        this.fieldContext = fieldContext;
+    }
+
+    updateFormData(value: any, formData: FormData): any {
+        const fieldLayoutInfo = this.fieldContext.field;
+        if (value) {
+            formData.append(fieldLayoutInfo.attrs.name, value);
+        }
+    }
+
+    initialValue(): any {
+        return this.fieldContext.data[this.fieldContext.field.attrs.name];
+    }
+
+    validationSchema(): Schema {
+        let schema: Yup.StringSchema<string | null | undefined> = Yup.string();
+
+        const fieldMetadata = this.fieldContext.fieldMetadata;
+        const fieldLayoutInfo = this.fieldContext.field;
+        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+
+        // 1. required 
+        if (fieldMetadata.required) {
+            schema = schema.required(`${fieldLabel} is required.`);
+        } else {
+            schema = schema.nullable(); // Allow null when not required
+        }
+        // 2. length (min/max)
+        if (fieldMetadata.min && fieldMetadata.min > 0) {
+            schema = schema.min(fieldMetadata.min, `${fieldLabel} should be at-least ${fieldMetadata.min} characters long.`);
+        }
+        if (fieldMetadata.max && fieldMetadata.max > 0) {
+            schema = schema.max(fieldMetadata.max, `${fieldLabel} should not be more than ${fieldMetadata.max} characters long.`);
+        }
+        // 3. regular expression
+        if (fieldMetadata.regexPattern) {
+            const regexPatternNotMatchingErrorMsg = fieldMetadata.regexPatternNotMatchingErrorMsg ?? `${fieldLabel} has invalid data.`
+            schema = schema.matches(fieldMetadata.regexPattern, regexPatternNotMatchingErrorMsg);
+        }
+
+        return schema;
+    }
+
+    render(formik: FormikObject) {
+        const fieldMetadata = this.fieldContext.fieldMetadata;
+        const fieldLayoutInfo = this.fieldContext.field;
+        const className = fieldLayoutInfo.attrs?.className || 'col-12 s-field';
+        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+        const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
+        const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+        const [text, setText] = useState();
+
+        const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
+
+        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;
+
+        return (
+            <div className={className}>
+                <div className="justify-content-center align-items-center">
+                    <label htmlFor={fieldLayoutInfo.attrs.name}>{fieldLabel}
+                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                    </label>
+                </div>
+                <div className="s-input">
+                    <Editor
+                        readOnly={formReadonly || fieldReadonly}
+                        disabled={formDisabled || fieldDisabled}
+                        key={fieldLayoutInfo.attrs.name}  // React will re-render the component whenever this value changes
+                        id={fieldLayoutInfo.attrs.name}
+                        value={formik.values[fieldLayoutInfo.attrs.name]}
+                        onTextChange={e => formik.setFieldValue(fieldLayoutInfo.attrs.name, e.htmlValue)}
+                        style={{ height: "320px" }}
+                    />
+                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                    )}
+                </div>
+            </div>
+        );
+    }
+}

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

@@ -0,0 +1,122 @@
+import { useLazyGetSelectionDynamicValuesQuery } from "@/redux/api/fieldApi";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+import { Message } from "primereact/message";
+import qs from "qs";
+import { useState } from "react";
+import * as Yup from 'yup';
+import { Schema } from "yup";
+import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+
+
+export class SolidSelectionDynamicField implements ISolidField {
+
+    private fieldContext: SolidFieldProps;
+
+    constructor(fieldContext: SolidFieldProps) {
+        this.fieldContext = fieldContext;
+    }
+
+    initialValue(): any {
+        // TODO: Use the field metadata to re-create the object in the valid format 
+        // {label: '', value: ''}
+        const optionValue = this.fieldContext.data[this.fieldContext.field.attrs.name];
+        const fieldMetadata = this.fieldContext.fieldMetadata;
+
+        return { label: optionValue || '', value: optionValue || '' };
+    }
+
+    updateFormData(value: any, formData: FormData): any {
+        const fieldLayoutInfo = this.fieldContext.field;
+        if (value) {
+            formData.append(fieldLayoutInfo.attrs.name, value.value);
+        }
+    }
+
+    validationSchema(): Schema {
+        let schema = Yup.object();
+
+        const fieldMetadata = this.fieldContext.fieldMetadata;
+        const fieldLayoutInfo = this.fieldContext.field;
+        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+
+        // 1. required 
+        if (fieldMetadata.required) {
+            schema = schema.required(`${fieldLabel} is required.`);
+        }
+
+        return schema;
+    }
+
+    render(formik: FormikObject) {
+        const fieldMetadata = this.fieldContext.fieldMetadata;
+        const fieldLayoutInfo = this.fieldContext.field;
+        const className = fieldLayoutInfo.attrs?.className || 'col-12 s-field';
+        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+        const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
+        const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+
+        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;
+
+        // 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);
+        }
+
+        const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
+
+        return (
+            <div className={className}>
+                <div className="justify-content-center align-items-center">
+                    <label htmlFor={fieldLayoutInfo.attrs.name}>{fieldLabel}
+
+                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                    </label>
+                </div>
+                <div className="s-input">
+                    <AutoComplete
+                        readOnly={formReadonly || fieldReadonly}
+                        disabled={formDisabled || fieldDisabled}
+                        {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
+                        id={fieldLayoutInfo.attrs.name}
+                        field="label"
+                        value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                        dropdown
+                        className="w-full small-input"
+                        suggestions={selectionDynamicItems}
+                        completeMethod={selectionDynamicSearch}
+                        // onChange={(e) => updateInputs(index, e.value)} />
+                        onChange={formik.handleChange} />
+                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                    )}
+                </div>
+            </div>
+        );
+    }
+}

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

@@ -0,0 +1,117 @@
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+import { Message } from "primereact/message";
+import { useState } from "react";
+import * as Yup from 'yup';
+import { Schema } from "yup";
+import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+
+export class SolidSelectionStaticField implements ISolidField {
+
+    private fieldContext: SolidFieldProps;
+
+    constructor(fieldContext: SolidFieldProps) {
+        this.fieldContext = fieldContext;
+    }
+
+    updateFormData(value: any, formData: FormData): any {
+        const fieldLayoutInfo = this.fieldContext.field;
+        if (value) {
+            formData.append(fieldLayoutInfo.attrs.name, value.value);
+        }
+    }
+
+    initialValue(): any {
+        // TODO: Use the field metadata to re-create the object in the valid format 
+        // {label: '', value: ''}
+        const optionValue = this.fieldContext.data[this.fieldContext.field.attrs.name];
+        const fieldMetadata = this.fieldContext.fieldMetadata;
+
+        const getDisplayValue = (value: string): string | null => {
+            for (const item of fieldMetadata.selectionStaticValues) {
+                const [lhs, rhs] = item.split(':');
+                if (lhs === value) {
+                    return rhs;
+                }
+            }
+            return null;
+        };
+
+        const displayValue = getDisplayValue(optionValue)
+
+        return { label: displayValue ?? '', value: optionValue };
+    }
+
+    validationSchema(): Schema {
+
+        const fieldMetadata = this.fieldContext.fieldMetadata;
+        const fieldLayoutInfo = this.fieldContext.field;
+        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+        let schema = Yup.object({
+            value: Yup.string().required(`${fieldLabel} is required.`)
+        });
+
+        // 1. required 
+        if (fieldMetadata.required) {
+            schema = schema.required(`${fieldLabel} is required.`);
+        }
+
+        return schema;
+    }
+
+    render(formik: FormikObject) {
+        const fieldMetadata = this.fieldContext.fieldMetadata;
+        const fieldLayoutInfo = this.fieldContext.field;
+        const className = fieldLayoutInfo.attrs?.className || 'col-12 s-field';
+        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+        const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
+        const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+
+        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 [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];
+
+        return (
+            <div className={className}>
+                <div className="justify-content-center align-items-center">
+                    <label htmlFor={fieldLayoutInfo.attrs.name}>{fieldLabel}
+                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                    </label>
+                </div>
+                <div className="s-input">
+                    <AutoComplete
+                        readOnly={formReadonly || fieldReadonly}
+                        disabled={formDisabled || fieldDisabled}
+                        {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
+                        id={fieldLayoutInfo.attrs.name}
+                        field="label"
+                        value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                        dropdown
+                        className="w-full small-input"
+                        suggestions={selectionStaticItems}
+                        completeMethod={selectionStaticSearch}
+                        // onChange={(e) => updateInputs(index, e.value)} />
+                        onChange={formik.handleChange} />
+
+                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                    )}
+                </div>
+            </div>
+        );
+    }
+}

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

@@ -0,0 +1,99 @@
+import { InputText } from "primereact/inputtext";
+import { Message } from "primereact/message";
+import * as Yup from 'yup';
+import { Schema } from "yup";
+import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+
+export class SolidShortTextField implements ISolidField {
+
+    private fieldContext: SolidFieldProps;
+
+    constructor(fieldContext: SolidFieldProps) {
+        this.fieldContext = fieldContext;
+    }
+
+    updateFormData(value: any, formData: FormData): any {
+        const fieldLayoutInfo = this.fieldContext.field;
+        if (value) {
+            formData.append(fieldLayoutInfo.attrs.name, value);
+        }
+    }
+
+    initialValue(): any {
+        return this.fieldContext.data[this.fieldContext.field.attrs.name];
+    }
+
+    validationSchema(): Schema {
+        let schema: Yup.StringSchema<string | null | undefined> = Yup.string();
+
+        const fieldMetadata = this.fieldContext.fieldMetadata;
+        const fieldLayoutInfo = this.fieldContext.field;
+        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+
+        // 1. required 
+        // 1. required
+        if (fieldMetadata.required) {
+            schema = schema.required(`${fieldLabel} is required.`);
+        } else {
+            schema = schema.nullable(); // Allow null when not required
+        }
+
+        // 2. length (min/max)
+        if (fieldMetadata.min && fieldMetadata.min > 0) {
+            schema = schema.min(fieldMetadata.min, `${fieldLabel} should be at-least ${fieldMetadata.min} characters long.`);
+        }
+        if (fieldMetadata.max && fieldMetadata.max > 0) {
+            schema = schema.max(fieldMetadata.max, `${fieldLabel} should not be more than ${fieldMetadata.max} characters long.`);
+        }
+        // 3. regular expression
+        if (fieldMetadata.regexPattern) {
+            const regexPatternNotMatchingErrorMsg = fieldMetadata.regexPatternNotMatchingErrorMsg ?? `${fieldLabel} has invalid data.`
+            schema = schema.matches(fieldMetadata.regexPattern, regexPatternNotMatchingErrorMsg);
+        }
+
+        return schema;
+    }
+
+    render(formik: FormikObject) {
+        const fieldMetadata = this.fieldContext.fieldMetadata;
+        const fieldLayoutInfo = this.fieldContext.field;
+        const className = fieldLayoutInfo.attrs?.className || 'col-12 s-field';
+        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+        const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
+        const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+
+        const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
+
+        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;
+
+        return (
+            <div className={className}>
+                <div className="justify-content-center align-items-center">
+                    <label htmlFor={fieldLayoutInfo.attrs.name}>{fieldLabel}
+                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+
+                        {/* &nbsp;   {fieldDescription &&  <span  className="form_field_help_text">`(${fieldDescription})` </span>} */}
+                    </label>
+                </div>
+                <div className="s-input">
+                    <InputText
+                        readOnly={formReadonly || fieldReadonly}
+                        disabled={formDisabled || fieldDisabled}
+                        id={fieldLayoutInfo.attrs.name}
+                        className="small-input"
+                        aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                        onChange={formik.handleChange}
+                        value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                    />
+                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                    )}
+                </div>
+            </div>
+        );
+    }
+}

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

@@ -0,0 +1,87 @@
+import { Calendar } from "primereact/calendar";
+import { Message } from "primereact/message";
+import { useRef } from "react";
+import * as Yup from 'yup';
+import { Schema } from "yup";
+import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+
+export class SolidTimeField implements ISolidField {
+
+    private fieldContext: SolidFieldProps;
+
+    constructor(fieldContext: SolidFieldProps) {
+        this.fieldContext = fieldContext;
+    }
+
+    updateFormData(value: any, formData: FormData): any {
+        const fieldLayoutInfo = this.fieldContext.field;
+        if (value) {
+            formData.append(fieldLayoutInfo.attrs.name, value);
+        }
+    }
+
+    initialValue(): any {
+        return this.fieldContext.data[this.fieldContext.field.attrs.name];
+    }
+
+    validationSchema(): Schema {
+        let schema: Yup.DateSchema = Yup.date();
+        const fieldMetadata = this.fieldContext.fieldMetadata;
+        const fieldLayoutInfo = this.fieldContext.field;
+        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+
+        // 1. required 
+        if (fieldMetadata.required) {
+            schema = schema.required(`${fieldLabel} is required.`);
+        }
+        return schema;
+    }
+
+    render(formik: FormikObject) {
+        const fieldMetadata = this.fieldContext.fieldMetadata;
+        const fieldLayoutInfo = this.fieldContext.field;
+        const className = fieldLayoutInfo.attrs?.className || 'col-12 s-field';
+        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+        const calendarRef = useRef<any>(null); // Reference for the Calendar component
+        const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
+        const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+
+        const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
+
+        const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
+        const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
+
+        return (
+            <div className={className}>
+                <div className="justify-content-center align-items-center">
+                    <label htmlFor={fieldLayoutInfo.attrs.name}>{fieldLabel}
+
+                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                    </label>
+                </div>
+                <div className="flex-auto">
+                    <Calendar
+                        disabled={formDisabled || fieldDisabled}
+                        ref={calendarRef} // Attach ref to Calendar
+                        id={fieldLayoutInfo.attrs.name}
+                        aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                        onChange={formik.handleChange}
+                        //@ts-ignore
+                        value={formik.values[fieldLayoutInfo.attrs.name] ? formik.values[fieldLayoutInfo.attrs.name] : Date()}
+                        // dateFormat="mm/dd/yy"
+                        // placeholder="mm/dd/yyyy hh:mm"
+                        hideOnDateTimeSelect
+                        timeOnly
+                        showTime className=""
+                        hourFormat="24"
+
+                    />
+                </div>
+
+                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                )}
+            </div>
+        );
+    }
+}