@solidstarters/solid-core-ui 0.1.26

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

@@ -0,0 +1,184 @@
+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";
+
+
+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 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 [visibleCreateRelationEntity, setvisibleCreateRelationEntity] = useState(false);
+        const [listViewParams, setListViewParams] = useState<any>()
+        const [formViewParams, setformViewParams] = useState<any>()
+        const [refreshList, setRefreshList] = useState(false); // Added state for rerender
+
+
+        const handlePopupOpen = (id: any) => {
+            const formviewparams = {
+                moduleName: this.fieldContext.fieldMetadata.relationModelModuleName,
+                id: id,
+                embeded: true,
+                isCustomCreate: false,
+                customLayout: fieldLayoutInfo?.attrs?.inlineCreateLayout,
+                modelName: camelCase(this.fieldContext.fieldMetadata.relationModelSingularName)
+            }
+            setformViewParams(formviewparams);
+            setvisibleCreateRelationEntity(true);
+
+        }
+
+        const handlePopupClose = () => {
+            setvisibleCreateRelationEntity(false);
+            setRefreshList((prev) => !prev);
+            const lisviewparams = {
+                moduleName: this.fieldContext.fieldMetadata.relationModelModuleName,
+                modelName: camelCase(this.fieldContext.fieldMetadata.relationModelSingularName),
+                inlineCreate: true,
+                customLayout: fieldLayoutInfo?.attrs?.inlineListLayout,
+                embeded: true
+            }
+            setListViewParams(lisviewparams)
+        }
+        //Intial Params 
+        useEffect(() => {
+
+            const customFilter = this.fieldContext.fieldMetadata.relationModelFieldName ? this.fieldContext.fieldMetadata.relationModelFieldName : `${this.fieldContext.modelName}`
+            const listviewparams = {
+                moduleName: this.fieldContext.fieldMetadata.relationModelModuleName,
+                modelName: camelCase(this.fieldContext.fieldMetadata.relationModelSingularName),
+                inlineCreate: true,
+                customLayout: fieldLayoutInfo?.attrs?.inlineListLayout,
+                embeded: true,
+                customFilter: {
+                    [customFilter]: {
+                        id: {
+                            $eq: this.fieldContext.data ? this?.fieldContext?.data?.id : -1
+                        }
+                    }
+                }
+            }
+            setListViewParams(listviewparams);
+            const formviewparams = {
+                moduleName: this.fieldContext.fieldMetadata.relationModelModuleName,
+                id: "new",
+                embeded: true,
+                isCustomCreate: false,
+                customLayout: fieldLayoutInfo?.attrs?.inlineCreateLayout,
+                modelName: camelCase(this.fieldContext.fieldMetadata.relationModelSingularName)
+            }
+            setformViewParams(formviewparams)
+
+        }, [])
+
+        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 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>
+                <br></br>
+                {listViewParams &&
+                    <SolidListView key={refreshList.toString()}  {...listViewParams} handlePopUpOpen={handlePopupOpen} />
+                }
+                {this.renderSolidFormEmbededView(visibleCreateRelationEntity, setvisibleCreateRelationEntity, formViewParams, handlePopupClose)}
+
+            </div>
+        );
+
+    }
+
+
+    renderSolidFormEmbededView(visibleCreateRelationEntity: any, setvisibleCreateRelationEntity: any, formViewParams: any, handlePopupClose: any) {
+
+        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;
+
+
+        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="many-to-many-creat-form-dialog"
+                    style={{ width: fieldLayoutInfo?.attrs?.inlineCreateLayout?.attrs?.width ?? "40vw" }}
+                    onHide={() => {
+                        if (!visibleCreateRelationEntity) return;
+                        setvisibleCreateRelationEntity(false);
+                    }}
+                >
+                    {formViewParams &&
+                        < SolidFormView {...formViewParams} handlePopupClose={handlePopupClose} />
+                    }
+                </Dialog>
+            </div>
+        )
+    }
+}

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

@@ -0,0 +1,116 @@
+// @ts-nocheck
+
+import React, { useState, useEffect } from "react";
+import { DragDropContext, DropResult } from "@hello-pangea/dnd";
+import axios from "axios";
+import KanbanColumn from "./KanbanColumn";
+
+// 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 = ({ kanbanViewData, solidViewMetaData, setKanbanViewData, handleLoadMore, onDragEnd }: 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
+        <DragDropContext onDragEnd={onDragEnd}>
+            <div style={{ display: "flex", gap: "1rem", background: "#f0f0f5", padding: "20px" }}>
+                {/* {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,
+                        folded: foldedStates[data.groupName] || false,
+                    };
+
+                    return (
+                        <KanbanColumn
+                            key={data.groupName}
+                            groupByField={data.groupName}
+                            group={group}
+                            solidViewMetaData={solidViewMetaData}
+                            groupData={data.groupData.records}
+                            toggleFold={toggleFold}
+                            handleLoadMore={handleLoadMore}
+                        />
+                    );
+                })}
+            </div>
+        </DragDropContext>
+    );
+}
+
+export default KanbanBoard;

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

@@ -0,0 +1,159 @@
+// @ts-nocheck
+
+import React from "react";
+import { Draggable, DraggableProvided } from "@hello-pangea/dnd";
+import { Card } from "primereact/card";
+
+// Define the types for the data and props
+interface Data {
+  id: string;
+  title: string;
+  content: string;
+}
+
+interface KanbanCardProps {
+  data: Data;
+  solidViewMetaData: any;
+  index: number;
+}
+
+const KanbanCard: React.FC<KanbanCardProps> = ({ data, solidViewMetaData, index }) => {
+
+  const SolidRow = ({ children, attrs }: any) => {
+    const className = attrs.className;
+    return (
+      <div className={`row ${className}`}>
+        <div className="s_group">
+          <fieldset>
+            {attrs.label && <p className="s_group_heading">{attrs.label}</p>}
+            <div className="grid">{children}</div>
+          </fieldset>
+        </div>
+      </div>
+    );
+  };
+  const SolidColumn = ({ children, attrs }: any) => {
+    const className = attrs.className;
+    return (
+      <div className={`${className}`}>
+        <div className="s_group">
+          <fieldset>
+            {attrs.label && <p className="s_group_heading">{attrs.label}</p>}
+            <div className="grid">{children}</div>
+          </fieldset>
+        </div>
+
+      </div>
+    );
+  };
+  const SolidImage = ({ children, attrs }: any) => {
+    const className = attrs.className;
+    return (
+      <div className={`${className}`}>
+        <div className="s_group">
+          <fieldset>
+            {attrs.label && <p className="s_group_heading">{attrs.label}</p>}
+            <div className="grid">{children}</div>
+          </fieldset>
+        </div>
+
+      </div>
+    );
+  };
+
+  const SolidField = ({ field, initialEntityData, solidFormViewMetaData }: any) => {
+
+    switch (initialEntityData[field.attrs.name].type) {
+      case "mediaSingle":
+        return <img src=""></img>
+      default:
+        return <p>{initialEntityData[field.attrs.name]}</p>
+
+    }
+  };
+
+
+  const SolidCard = ({ children }: any) => (
+    <div className="p-fluid p-grid">
+      {children}
+    </div>
+  );
+
+  // Now render the form dynamically...
+  const renderFormElementDynamically: any = (element: any, solidViewMetaData: any) => {
+    const { type, attrs, children } = element;
+    // const key = attrs?.name ?? generateRandomKey();
+    const key = attrs?.name;
+    switch (type) {
+      case "card":
+        return <SolidCard key={key}>{children.map((element: any) => renderFormElementDynamically(element, solidViewMetaData))}</SolidCard>;
+      case "row":
+        return <SolidRow key={key} attrs={attrs}>{children.map((element: any) => renderFormElementDynamically(element, solidViewMetaData))}</SolidRow>;
+      case "column":
+        return <SolidColumn key={key} attrs={attrs}>{children.map((element: any) => renderFormElementDynamically(element, solidViewMetaData))}</SolidColumn>;
+      case "image":
+        return <SolidImage key={key} attrs={attrs}>{children.map((element: any) => renderFormElementDynamically(element, solidViewMetaData))}</SolidImage>;
+
+      case "field": {
+        // const fieldMetadata = solidFieldsMetadata[attrs.name];
+        const fieldMetadata = solidViewMetaData.solidFieldsMetadata[attrs.name];
+        return <SolidField key={key} field={element} fieldMetadata={fieldMetadata} initialEntityData={data ? data : null} solidViewMetaData={solidViewMetaData} />;
+      }
+      default:
+        return null;
+    }
+  };
+
+  const renderFormDynamically = (solidViewMetaData: any) => {
+    if (!solidViewMetaData) {
+      return;
+    }
+    const solidView = solidViewMetaData.solidView;
+    const solidFieldsMetadata = solidViewMetaData.solidFieldsMetadata;
+    if (!solidView || !solidFieldsMetadata) {
+      return;
+    }
+    if (!solidView || !solidFieldsMetadata) {
+      return;
+    }
+    const updatedLayout = solidView.layout.children;
+    const dynamicForm = updatedLayout.map((element: any) => renderFormElementDynamically(element, solidViewMetaData));
+    return dynamicForm;
+  };
+
+
+  return (
+    <Draggable draggableId={String(data.id)} index={index}>
+      {(provided: DraggableProvided, snapshot) => (
+        <div
+          className=""
+          ref={provided.innerRef}
+          {...provided.draggableProps}
+          {...provided.dragHandleProps}
+          style={{ marginBottom: "1rem", ...provided.draggableProps.style }}
+        >
+          {/* <p className="kanban-card-heading">{data.title}</p> */}
+          {/* <p className="kanban-card-content">{data.content}</p> */}
+          <Card
+            style={{
+              opacity: snapshot.isDragging ? 0.9 : 1,
+              transform: snapshot.isDragging ? "rotate(-2deg)" : "",
+            }}
+            elevation={snapshot.isDragging ? 3 : 1}
+          >
+            {renderFormDynamically(solidViewMetaData)}
+
+            {/* {solidViewMetaData?.solidView?.layout?.layoutData &&
+              Object.entries(solidViewMetaData?.solidView?.layout?.layoutData).map(([key, value]) => (
+                <p className="kanban-card-heading" key={key}>{data[value]}</p>
+              ))
+            } */}
+            {/* <p className="kanban-card-content">{data.content}</p> */}
+          </Card>
+        </div>
+      )}
+    </Draggable>
+  );
+};
+
+export default KanbanCard;

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

@@ -0,0 +1,124 @@
+// @ts-nocheck
+
+
+import React, { useRef } from "react";
+import { Droppable, DroppableProvided } from "@hello-pangea/dnd";
+import { Button } from "primereact/button";
+import KanbanCard from "./KanbanCard";
+import { OverlayPanel } from "primereact/overlaypanel";
+
+// Define types for props
+interface Group {
+  label: string;
+  count: number;
+  folded: boolean;
+}
+
+interface GroupData {
+  id: string;
+  title: string;
+  groupByField: string;
+}
+
+interface KanbanColumnProps {
+  groupByField: string;
+  group: Group;
+  groupData: GroupData[];
+  toggleFold: (groupByField: string) => void;
+  handleLoadMore: (groupByField: string) => void;
+}
+
+const KanbanColumn = ({ groupByField, solidViewMetaData,group, groupData, toggleFold, handleLoadMore }: KanbanColumnProps) => {
+  const op = useRef<any>(null);
+
+  return (
+    <div className={group.folded ? "kanban-column kanban-column-folded" : "kanban-column"}>
+      <div className="kaban-heading-area">
+        {group.folded &&
+          <a onClick={e => toggleFold(groupByField)}>
+            <div className="flex align-items-center">
+              <div className="kanban-arrow-icon-container">
+                <i className="pi pi-sort-up-fill"></i>
+                <i className="pi pi-sort-down-fill"></i>
+              </div>
+              <p className="kanban-group-heading">{`${group.label}`}<span className="count">{group.count}</span></p>
+            </div>
+          </a>
+        }
+
+        {!group.folded &&
+          <div className="flex align-items-center">
+            <p className="kanban-group-heading">{`${group.label}`}<span className="count">{group.count}</span></p>
+          </div>
+        }
+        {!group.folded &&
+          <a onClick={(e: any) => op?.current?.toggle(e)}>
+            < i className="pi pi-cog" />
+          </a>
+        }
+        <OverlayPanel ref={op} className="kanban-options-panel">
+
+          <div
+            className="w-full md:w-10rem p-menu p-component"
+            data-pc-name="menu"
+            data-pc-section="root"
+          >
+            <ul
+              className="p-menu-list p-reset"
+              id="pr_id_11_list"
+              role="menu"
+              data-pc-section="menu"
+            >
+              <li
+                className="p-menuitem"
+                role="menuitem"
+                data-pc-section="menuitem"
+                data-p-focused="false"
+                data-p-disabled="false"
+              >
+                <button className="p-menuitem-link w-full p-link flex align-items-center pl-2 text-color hover:surface-200 border-noround">
+                  <div
+                    className="mr-2 p-avatar p-component p-avatar-image p-avatar-circle"
+                    data-pc-name="avatar"
+                    data-pc-section="root"
+                  >
+                  </div>
+                  <div className="flex flex-column align">
+
+                    <a className="flex align-items-center p-menuitem-link" onClick={e => { toggleFold(groupByField); op?.current?.toggle(e) }}>
+                      <span className="">Fold</span>
+                    </a>
+                  </div>
+                </button>
+              </li>
+            </ul>
+          </div>
+        </OverlayPanel>
+      </div>
+      {!group.folded && (
+        <Droppable droppableId={groupByField}>
+          {(provided: DroppableProvided) => (
+            <div
+              ref={provided.innerRef}
+              {...provided.droppableProps}
+              style={{ minHeight: "100px" }}
+            >
+              {groupData.map((data, index) => (
+                <KanbanCard key={data.id} data={data} solidViewMetaData={solidViewMetaData} index={index} />
+              ))}
+              {provided.placeholder}
+              <a
+              className="load-more-button"
+                onClick={() => handleLoadMore(groupByField)}
+              >
+                Load more data...
+              </a>
+            </div>
+          )}
+        </Droppable>
+      )}
+    </div>
+  );
+};
+
+export default KanbanColumn;

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

@@ -0,0 +1,104 @@
+import { useEffect, useState } from "react";
+import { Button } from "primereact/button";
+import { Dropdown } from "primereact/dropdown";
+import { SolidKanbanViewSearchColumn } from "./SolidKanbanViewSearchColumn";
+
+
+export const SolidKanbanFilter = ({ solidKanbanViewMetaData, handleApplyFilter, filterValues, setFilterValues }: any) => {
+
+    const [fieldsList, setFieldsList] = useState<any[]>([]);
+
+
+    useEffect(() => {
+        if (solidKanbanViewMetaData) {
+            const arrayOfFields = Object.entries(solidKanbanViewMetaData.data.solidFieldsMetadata).map(([key, value]) => {
+                return { label: key, value: key }
+            })
+            setFieldsList(arrayOfFields);
+        }
+    }, [solidKanbanViewMetaData])
+
+    const addEnumValue = () => {
+        setFilterValues([...filterValues, { field: '', operator: '', value: '' }]);
+    };
+
+    const updateEnumValues = (index: number, field: keyof { field: string; operator: string; value: string }, value: string) => {
+        const updatedSpecification = filterValues.map((filterValue: any, i: number) =>
+            i === index ? { ...filterValue, [field]: value } : filterValue
+        );
+        setFilterValues(updatedSpecification);
+    };
+
+
+    const deleteEnumValue = (index: number) => {
+        if (filterValues.length > 1) {
+            const updatedRows = filterValues.filter((_: any, rowIndex: number) => rowIndex !== index);
+            setFilterValues(updatedRows)
+        } else {
+        }
+    };
+
+
+    return (
+        <div className="grid formgrid">
+            <div className="col-12">
+                <div className="flex flex-column gap-2">
+                    {filterValues && filterValues.map((filterValue: any, index: number) => (
+                        <div key={index} className="flex align-items-center gap-2">
+                            {/* <InputText
+                                value={filterValue.field}
+                                onChange={(e) => updateEnumValues(index, 'field', e.target.value)}
+                                placeholder="Enter Display"
+                                className="p-inputtext-sm small-input w-full"
+                            // onBlur={(e: any) => handleBlurAndUpdateState(e, formik.setFieldValue, formik.values, formik)}
+                            /> */}
+                            <Dropdown
+                                value={filterValue.field}
+                                onChange={e => {
+                                    console.log("e.value", e.value);
+
+                                    // setFieldName({ name: e.value.name, type: e.value.type })
+                                    // onChange(rule.id, 'fieldName', e.value.name)
+                                    updateEnumValues(index, 'field', e.value)
+                                }}
+                                options={fieldsList}
+                                optionLabel='label'
+                                optionValue='value'
+                                placeholder="Select Field" className="w-full md:w-14rem" />
+                            {/* <InputText
+                                value={filterValue.value}
+                                onChange={(e) => updateEnumValues(index, 'value', e.target.value)}
+                                placeholder="Enter Value"
+                                className="p-inputtext-sm small-input w-full"
+                            // onBlur={(e: any) => handleBlurAndUpdateState(e, formik.setFieldValue, formik.values, formik)}
+                            /> */}
+                            <SolidKanbanViewSearchColumn solidKanbanViewMetaData={solidKanbanViewMetaData} fieldMetadata={solidKanbanViewMetaData.data.solidFieldsMetadata[filterValue.field]} updateEnumValues={updateEnumValues} index={index} enumValue={filterValue}></SolidKanbanViewSearchColumn>
+                            <Button
+                                icon="pi pi-plus"
+                                size="small"
+                                className="small-button"
+                                onClick={addEnumValue}
+                                type="button"
+                            />
+                            {/* Trash Button to delete the row */}
+                            <Button
+                                icon="pi pi-trash"
+                                size="small"
+                                className="small-button"
+                                onClick={() => deleteEnumValue(index)}
+                                outlined
+                                severity="danger"
+                                type="button"
+                            />
+                        </div>
+                    ))}
+
+                    <Button onClick={() => handleApplyFilter(filterValues)}>Apply</Button>
+
+                </div>
+
+            </div>
+        </div>
+    )
+
+}