@solidstarters/solid-core-ui 1.1.74 → 1.1.75

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

@@ -1,311 +0,0 @@
-'use client';
-import { SolidListView } from "@/components/core/list/SolidListView";
-import { camelCase } from "lodash";
-import { Dialog } from "primereact/dialog";
-import { useEffect, useState } from "react";
-import * as Yup from 'yup';
-import { Schema } from "yup";
-import SolidFormView from "../../SolidFormView";
-import { FormikObject, ISolidField, SolidFieldProps } from "../ISolidField";
-import { usePathname } from "next/navigation";
-import { getExtensionComponent } from "@/helpers/registry";
-import { SolidFormFieldWidgetProps } from "@/types/solid-core";
-import { Message } from "primereact/message";
-import FieldMetaData from "@/components/core/model/FieldMetaData";
-import { Chip } from "primereact/chip";
-
-
-export class SolidRelationOneToManyField implements ISolidField {
-
-    private fieldContext: SolidFieldProps;
-
-    constructor(fieldContext: SolidFieldProps) {
-        this.fieldContext = fieldContext;
-    }
-
-    initialValue(): any {
-
-        // const manyToOneFieldData = this.fieldContext.data[this.fieldContext.field.attrs.name];
-        // const fieldMetadata = this.fieldContext.fieldMetadata;
-        // const userKeyField = fieldMetadata.relationModel.userKeyField.name;
-        // const manyToOneColVal = manyToOneFieldData ? manyToOneFieldData[userKeyField] : '';
-
-        // return { label: manyToOneColVal || '', value: manyToOneFieldData?.id || '' };
-
-        return '';
-    }
-
-    updateFormData(value: any, formData: FormData): any {
-        const fieldLayoutInfo = this.fieldContext.field;
-        if (value) {
-            formData.append(`${fieldLayoutInfo.attrs.name}Id`, 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 fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
-
-        const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
-
-        const userKeyFieldName = fieldMetadata.relationModel?.userKeyField?.name;
-
-        let DynamicWidget = getExtensionComponent("SolidFormFieldRelationViewModeWidget");
-        const widgetProps = {
-            label: fieldLabel,
-            value: (this.fieldContext.data?.[fieldLayoutInfo.attrs.name] || []).map(
-                (item: any) => ({ label: item[userKeyFieldName] ?? '' })
-            ),
-            layout: fieldLayoutInfo
-        }
-
-        DefaultRelationOneToManyFormEditWidget
-
-
-        let viewWidget = fieldLayoutInfo.attrs.viewWidget;
-        let editWidget = fieldLayoutInfo.attrs.editWidget;
-        if (!editWidget) {
-            editWidget = 'DefaultRelationManyToOneFormEditWidget';
-        }
-        if (!viewWidget) {
-            viewWidget = 'DefaultRelationOneToManyFormViewWidget';
-        }
-        const viewMode: string = this.fieldContext.viewMode;
-        return (
-            <>
-                <div className={className}>
-                    {viewMode === "view" &&
-                        this.renderExtensionRenderMode(viewWidget, formik)
-                    }
-                    {viewMode === "edit" && (
-                        <>
-                            {editWidget &&
-                                this.renderExtensionRenderMode(editWidget, formik)
-                            }
-                            {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                                <div className="absolute mt-1">
-                                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                                </div>
-                            )}
-                        </>
-                    )
-                    }
-                </div>
-            </>
-        );
-
-    }
-
-    renderExtensionRenderMode(widget: string, formik: FormikObject) {
-        let DynamicWidget = getExtensionComponent(widget);
-        const widgetProps: SolidFormFieldWidgetProps = {
-            formik: formik,
-            fieldContext: this.fieldContext,
-        }
-        return (
-            <>
-                {DynamicWidget && <DynamicWidget {...widgetProps} />}
-            </>
-        )
-    }
-
-
-}
-
-
-export const DefaultRelationOneToManyFormEditWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
-    const fieldMetadata = fieldContext.fieldMetadata;
-
-    const fieldLayoutInfo = 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 = fieldContext.solidFormViewMetaData;
-    const [visibleCreateRelationEntity, setvisibleCreateRelationEntity] = useState(false);
-    const [listViewParams, setListViewParams] = useState<any>()
-    const [formViewParams, setformViewParams] = useState<any>()
-    const [refreshList, setRefreshList] = useState(false); // Added state for rerender
-    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
-    const readOnlyPermission = fieldContext.readOnly;
-    const pathname = usePathname();
-    const lastPathSegment = pathname.split('/').pop();
-
-    const handlePopupOpen = (id: any) => {
-        const formviewparams = {
-            moduleName: fieldContext.fieldMetadata.relationModelModuleName,
-            id: id,
-            embeded: true,
-            isCustomCreate: false,
-            customLayout: fieldLayoutInfo?.attrs?.inlineCreateLayout,
-            modelName: camelCase(fieldContext.fieldMetadata.relationCoModelSingularName)
-        }
-        setformViewParams(formviewparams);
-        setvisibleCreateRelationEntity(true);
-
-    }
-
-    const handlePopupClose = () => {
-        setvisibleCreateRelationEntity(false);
-        setRefreshList((prev) => !prev);
-        const customFilter = fieldContext.fieldMetadata.relationCoModelFieldName ? fieldContext.fieldMetadata.relationCoModelFieldName : `${fieldContext.modelName}`
-        const lisviewparams = {
-            moduleName: fieldContext.fieldMetadata.relationModelModuleName,
-            modelName: camelCase(fieldContext.fieldMetadata.relationCoModelSingularName),
-            inlineCreate: readOnlyPermission === false ? true : false,
-            customLayout: fieldLayoutInfo?.attrs?.inlineListLayout,
-            embeded: true,
-            id: fieldContext.data ? fieldContext?.data?.id : 'new',
-            customFilter: {
-                [customFilter]: {
-                    id: {
-                        $eq: fieldContext.data ? fieldContext?.data?.id : -1
-                    }
-                }
-            }
-        }
-        setListViewParams(lisviewparams)
-    }
-    //Intial Params 
-    useEffect(() => {
-
-        const customFilter = fieldContext.fieldMetadata.relationCoModelFieldName ? fieldContext.fieldMetadata.relationCoModelFieldName : `${fieldContext.modelName}`
-        const listviewparams = {
-            moduleName: fieldContext.fieldMetadata.relationModelModuleName,
-            modelName: camelCase(fieldContext.fieldMetadata.relationCoModelSingularName),
-            inlineCreate: readOnlyPermission === false ? true : false,
-            customLayout: fieldLayoutInfo?.attrs?.inlineListLayout,
-            embeded: true,
-            id: fieldContext.data ? fieldContext?.data?.id : 'new',
-            customFilter: {
-                [customFilter]: {
-                    id: {
-                        $eq: fieldContext.data ? fieldContext?.data?.id : -1
-                    }
-                }
-            }
-        }
-        setListViewParams(listviewparams);
-        const formviewparams = {
-            moduleName: fieldContext.fieldMetadata.relationModelModuleName,
-            id: "new",
-            embeded: true,
-            isCustomCreate: false,
-            customLayout: fieldLayoutInfo?.attrs?.inlineCreateLayout,
-            modelName: camelCase(fieldContext.fieldMetadata.relationCoModelSingularName),
-        }
-        setformViewParams(formviewparams)
-
-    }, [readOnlyPermission])
-
-    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>
-            {/* <div className="justify-content-center align-items-center"> */}
-            {showFieldLabel != false &&
-                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                    {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                </label>
-            }
-
-            {lastPathSegment === 'new' && <p>Please save the {solidFormViewMetaData.data.solidView.model.displayName} to be able to save {fieldMetadata.displayName}</p>}
-            {listViewParams && lastPathSegment !== 'new' &&
-                <SolidListView key={refreshList.toString()}  {...listViewParams} handlePopUpOpen={handlePopupOpen} />
-            }
-            {readOnlyPermission !== true &&
-                <RenderSolidFormEmbededView formik={formik} fieldContext={fieldContext} visibleCreateRelationEntity={visibleCreateRelationEntity} setvisibleCreateRelationEntity={setvisibleCreateRelationEntity} formViewParams={formViewParams} handlePopupClose={handlePopupClose}></RenderSolidFormEmbededView>
-            }
-
-        </div>
-    );
-}
-
-export const RenderSolidFormEmbededView = ({ formik, fieldContext, customCreateHandler, visibleCreateRelationEntity, setvisibleCreateRelationEntity, formViewParams, handlePopupClose }: any) => {
-
-    const fieldMetadata = fieldContext.fieldMetadata;
-    const fieldLayoutInfo = fieldContext.field;
-    const className = fieldLayoutInfo.attrs?.className || 'col-12';
-    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-
-
-    return (
-        <div className="many-to-many-add" >
-            {/* <Button icon="pi pi-plus"
-                rounded
-                outlined
-                aria-label="Filter"
-                type="button"
-                onClick={() => setvisibleCreateRelationEntity(true)}
-            /> */}
-            <Dialog
-                header=""
-                showHeader={false}
-                visible={visibleCreateRelationEntity}
-                className="solid-dialog"
-                style={{ width: fieldLayoutInfo?.attrs?.inlineCreateLayout?.attrs?.width ?? "40vw" }}
-                onHide={() => {
-                    if (!visibleCreateRelationEntity) return;
-                    setvisibleCreateRelationEntity(false);
-                }}
-            >
-                {formViewParams &&
-                    < SolidFormView {...formViewParams} handlePopupClose={handlePopupClose} />
-                }
-            </Dialog>
-        </div>
-    )
-}
-
-export const DefaultRelationOneToManyFormViewWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
-
-    const fieldMetadata = fieldContext.fieldMetadata;
-    const fieldLayoutInfo = fieldContext.field;
-    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-    const userKeyFieldName = fieldMetadata.relationModel?.userKeyField?.name;
-    const [fieldValue, setFieldValue] = useState<any>([]);
-    useEffect(() => {
-        const value = (fieldContext.data?.[fieldLayoutInfo.attrs.name] || []).map((item: any) => ({ label: item[userKeyFieldName] ?? '' }));
-        if (Array.isArray(value)) {
-
-            if (value.length > 0) {
-                const data = value.map((v: any) => v.label);
-                setFieldValue(data);
-            }
-        }
-        if (value && !Array.isArray(value) && typeof value === "object") {
-            setFieldValue([value.label]);
-        }
-    }, [fieldContext]);
-
-    return (
-        <div className="mt-2 flex-column">
-            <p className="m-0 form-field-label font-medium">{fieldLabel}</p>
-            <div className="flex flex-wrap gap-2 mt-2">
-                {fieldValue.map((v: any) => (
-                    <Chip key={v} label={v} className="view-widget-chip" />
-                ))}
-            </div>
-        </div>
-    );
-}

package/src/components/core/form/fields/relations/widgets/helpers/InlineRelationEntityDialog.tsx

@@ -1,33 +0,0 @@
-import { Dialog } from "primereact/dialog";
-import { camelCase } from "lodash";
-import SolidFormView from "@/components/core/form/SolidFormView";
-
-export const InlineRelationEntityDialog = ({ visible, setVisible, fieldContext, onCreate }: any) => {
-  const fieldLayoutInfo = fieldContext.field;
-
-  const params = {
-    moduleName: fieldContext.fieldMetadata.relationModelModuleName,
-    id: "new",
-    embeded: true,
-    layout: fieldLayoutInfo?.attrs?.inlineCreateLayout,
-    customCreateHandler: (values: any) => {
-      setVisible(false);
-      onCreate(values);
-    },
-    inlineCreateAutoSave: fieldLayoutInfo?.attrs?.inlineCreateAutoSave,
-    handlePopupClose: () => setVisible(false),
-    modelName: camelCase(fieldContext.fieldMetadata.relationCoModelSingularName)
-  };
-
-  return (
-    <Dialog
-      visible={visible}
-      showHeader={false}
-      style={{ width: fieldLayoutInfo?.attrs?.inlineCreateLayout?.attrs?.width ?? "60vw" }}
-      onHide={() => setVisible(false)}
-      className="solid-dialog"
-    >
-      <SolidFormView {...params} />
-    </Dialog>
-  );
-};

package/src/components/core/form/fields/relations/widgets/helpers/useRelationEntityHandler.ts

@@ -1,64 +0,0 @@
-import { useState } from "react";
-import qs from "qs";
-import { createSolidEntityApi } from "@/redux/api/solidEntityApi";
-
-export const useRelationEntityHandler = ({ fieldContext, formik, autoCompleteLimit = 1000 }: any) => {
-  const fieldMetadata = fieldContext.fieldMetadata;
-  const fieldLayoutInfo = fieldContext.field;
-
-  const entityApi = createSolidEntityApi(fieldMetadata.relationCoModelSingularName);
-  const { useLazyGetSolidEntitiesQuery } = entityApi;
-  const [triggerGetSolidEntities] = useLazyGetSolidEntitiesQuery();
-
-  const [autoCompleteItems, setAutoCompleteItems] = useState([]);
-
-  const fetchRelationEntities = async (query = "", limit = autoCompleteLimit) => {
-    const queryData = {
-      offset: 0,
-      limit: limit,
-      filters: {
-        [fieldMetadata?.relationModel?.userKeyField?.name]: {
-          '$containsi': query
-        }
-      }
-    };
-
-    const autocompleteQs = qs.stringify(queryData, { encodeValuesOnly: true });
-
-    const response = await triggerGetSolidEntities(autocompleteQs);
-    const data = response.data;
-
-    if (data) {
-      const mappedItems = data.records.map((item: any) => ({
-        label: item[fieldMetadata?.relationModel?.userKeyField?.name],
-        value: item['id'],
-        original: item
-      }));
-      setAutoCompleteItems(mappedItems);
-    }
-  };
-
-  const addNewRelation = (values: any) => {
-    const currentData = formik.values[fieldLayoutInfo.attrs.name] || [];
-    const jsonValues = Object.fromEntries(values.entries());
-    const newItem = {
-      label: jsonValues[fieldMetadata?.relationModel?.userKeyField?.name],
-      value: "new",
-      original: jsonValues,
-    };
-
-    formik.setFieldValue(fieldLayoutInfo.attrs.name, [...currentData, newItem]);
-
-    // Optionally add to autocomplete list
-    setAutoCompleteItems((prev: any) => {
-      const exists = prev.some((item: any) => item.label === newItem.label);
-      return exists ? prev : [...prev, newItem];
-    });
-  };
-
-  return {
-    autoCompleteItems,
-    fetchRelationEntities,
-    addNewRelation
-  };
-};

package/src/components/core/form/fields/widgets/SolidRelationFieldAvatarFormWidget.tsx

@@ -1,46 +0,0 @@
-"use client";
-import { useEffect, useState } from "react";
-import { Message } from "primereact/message";
-import { classNames } from "primereact/utils";
-import { SelectButton } from "primereact/selectbutton";
-import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
-import { RadioButton } from "primereact/radiobutton";
-import { SolidFormFieldWidgetProps } from "@/types/solid-core";
-import { AvatarWidget } from "@/components/core/list/widgets/SolidRelationAvatarWidget";
-
-export const SolidRelationFieldAvatarFormWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
-
-    const fieldMetadata = fieldContext.fieldMetadata;
-    const fieldLayoutInfo = fieldContext.field;
-    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-    const userKeyFieldName = fieldMetadata.relationModel?.userKeyField?.name;
-    const [fieldValue, setFieldValue] = useState<any>([]);
-    useEffect(() => {
-        console.log("fieldContext.data?.[fieldLayoutInfo.attrs.name]",fieldContext.data?.[fieldLayoutInfo.attrs.name]);
-        
-        const value = (fieldContext.data?.[fieldLayoutInfo.attrs.name] || []).map((item: any) => ({ label: item[userKeyFieldName] ?? '' }));
-        if (Array.isArray(value)) {
-
-            if (value.length > 0) {
-                const data = value.map((v: any) => v.label);
-                setFieldValue(data);
-            }
-        }
-        if (value && !Array.isArray(value) && typeof value === "object") {
-            setFieldValue([value.label]);
-        }
-    }, [fieldContext]);
-
-
-
-    return (
-        <div className="mt-2 flex-column">
-            <p className="m-0 form-field-label font-medium">{fieldLabel}</p>
-            <div className="flex flex-wrap gap-2 mt-2">
-                {fieldValue.map((v: any) => (
-                    <AvatarWidget value={v} />
-                ))}
-            </div>
-        </div>
-    );
-}

package/src/components/core/form/widgets/CustomHtml.tsx

@@ -1,19 +0,0 @@
-"use client";
-
-import { SolidFormWidgetProps } from "@/types";
-import parse from 'html-react-parser';
-import Handlebars from "handlebars";
-
-export const CustomHtml = ({ field, formData, viewMetadata, fieldsMetadata }: SolidFormWidgetProps) => {
-    let { type, attrs, body, children } = field;
-
-    // TODO: null check on this field required, show a proper error message on the UI suggesting that you are using a CustomHtml widget, however the html is not specified in the layout.
-    const html = attrs.html;
-
-    // TODO: run dompurify to avoid XSS attacks...
-
-    // TODO: assume the html is a handlebars template, we try to do variable replacement on it using formData.
-    const template = Handlebars.compile(html);
-
-    return (<div className={attrs.className}>{parse(template(formData))}</div>)
-}

package/src/components/core/kanban/KanbanBoard.tsx

@@ -1,131 +0,0 @@
-// @ts-nocheck
-'use client'
-
-import React, { useState, useEffect } from "react";
-import { DragDropContext, DropResult } from "@hello-pangea/dnd";
-import axios from "axios";
-import KanbanColumn from "./KanbanColumn";
-import { Button } from "primereact/button";
-
-// Define types for groupData and Grouped Data
-interface Post {
-    id: string;
-    title: string;
-    status: string;
-}
-
-interface GroupData {
-    count: number;
-    records: Post[];
-}
-
-interface ApiResponse {
-    data: {
-        groupedData: Record<string, GroupData>;
-    };
-}
-
-export const KanbanBoard = ({ groupedView, kanbanViewData, solidKanbanViewMetaData, setKanbanViewData, handleLoadMore, onDragEnd, handleSwimLanePagination, setLightboxUrls, setOpenLightbox, editButtonUrl }: any) => {
-    const [loading, setLoading] = useState<boolean>(true);
-    // State to manage the folded status of each column
-    const [foldedStates, setFoldedStates] = useState<Record<string, boolean>>({});
-
-    // Fetch data from the API
-    // useEffect(() => {
-    //     const fetchData = async (): Promise<void> => {
-    //         try {
-    //             setLoading(true);
-    //             // const response = await axios.get<ApiResponse>(
-    //             //     "http://localhost:3000/api/blog/group-kanban/status",
-    //             //     {
-    //             //         headers: { accept: "*/*" },
-    //             //     }
-    //             // );
-    //             // setGroupedData(response.data.data.groupedData);
-    //             setGroupedData({});
-    //         } catch (error) {
-    //             console.error("Error fetching data:", error);
-    //         } finally {
-    //             setLoading(false);
-    //         }
-    //     };
-
-    //     fetchData();
-    // }, []);
-
-    // if (loading) {
-    //     return <div>Loading...</div>;
-    // }
-
-
-
-
-    // Toggle fold (not yet implemented)
-    const toggleFold = (status: string): void => {
-        setFoldedStates((prevFoldedStates) => ({
-            ...prevFoldedStates,
-            [status]: !prevFoldedStates[status],
-        }));
-    };
-
-    // Render the Kanban board
-    return (
-        //@ts-ignore
-        <div className="solid-kanban-board-wrapper">
-            <DragDropContext onDragEnd={onDragEnd}>
-                <div className="flex gap-4 px-5 py-4 solid-kanban-board-scroll-context">
-                    {/* {Object.entries(kanbanViewData).map(([groupVal, data]) => {
-                    const group = {
-                        label: groupVal,
-                        count: data.count,
-                        folded: foldedStates[groupVal] || false,
-                    };
-
-                    return (
-                        <KanbanColumn
-                            key={groupVal}
-                            groupByField={groupVal}
-                            group={group}
-                            groupData={data.records}
-                            toggleFold={toggleFold}
-                            handleLoadMore={handleLoadMore}
-                        />
-                    );
-                })} */}
-                    {kanbanViewData.map((data) => {
-                        const group = {
-                            label: data.groupName,
-                            count: data.groupData.meta.totalRecords,
-                            limit: data.groupData.meta.perPage,
-                            currentPage: data.groupData.meta.currentPage,
-                            folded: foldedStates[data.groupName] || false,
-                        };
-
-                        return (
-                            <KanbanColumn
-                                key={data.groupName}
-                                groupedView={groupedView}
-                                groupByField={data.groupName}
-                                group={group}
-                                solidKanbanViewMetaData={solidKanbanViewMetaData}
-                                groupData={data.groupData.records}
-                                toggleFold={toggleFold}
-                                handleLoadMore={handleLoadMore}
-                                setLightboxUrls={setLightboxUrls}
-                                setOpenLightbox={setOpenLightbox}
-                                editButtonUrl={editButtonUrl}
-                            />
-                        );
-                    })}
-                    {groupedView !== false &&
-                        <div>
-                            <Button size="small" style={{ textWrap: 'nowrap' }} text onClick={handleSwimLanePagination}>Load More...</Button>
-                        </div>
-                    }
-                </div>
-            </DragDropContext>
-        </div>
-    );
-}
-
-export default KanbanBoard;