@solidstarters/solid-core-ui 1.1.70 → 1.1.72

package/src/components/core/list/columns/SolidTimeColumn.tsx

@@ -5,6 +5,8 @@ import { getNumberOfInputs, SolidListViewColumnParams } from '../SolidListViewCo
 import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
 import { dateFilterMatchModeOptions } from './SolidDateColumn';
 import SolidTableRowCell from "../SolidTableRowCell";
+import { getExtensionComponent } from "@/helpers/registry";
+import { SolidListFieldWidgetProps } from "@/types/solid-core";
 
 const SolidTimeColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
     const filterable = column.attrs.filterable;
@@ -47,14 +49,27 @@ const SolidTimeColumn = ({ solidListViewMetaData, fieldMetadata, column }: Solid
             // style={{ minWidth: "12rem" }}
             // headerClassName="table-header-fs"
             header={() => {
-                return (<div style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch', whiteSpace:'nowrap', textOverflow:'ellipsis', overflow:'hidden'}}>{header}</div>)
+                return (<div style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>{header}</div>)
             }}
-            body={(rowData) => (
-                <SolidTableRowCell
-                    value={rowData[fieldMetadata.name]}
-                    truncateAfter={truncateAfter}
-                />
-            )}
+            body={(rowData) => {
+                let viewWidget = column.attrs.viewWidget;
+                if (!viewWidget) {
+                    viewWidget = 'DefaultTextRenderModeWidget';
+                }
+                let DynamicWidget = getExtensionComponent(viewWidget);
+                const widgetProps: SolidListFieldWidgetProps = {
+                    rowData,
+                    solidListViewMetaData,
+                    fieldMetadata,
+                    column
+                }
+                return (
+                    <>
+                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
+                    </>
+                )
+            }
+            }
         ></Column>
     );
 

package/src/components/core/list/columns/SolidUuidColumn.tsx

@@ -5,6 +5,8 @@ import { FormEvent } from "primereact/ts-helpers";
 import { SolidListViewColumnParams } from '../SolidListViewColumn';
 import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
 import SolidTableRowCell from '../SolidTableRowCell';
+import { SolidListFieldWidgetProps } from '@/types/solid-core';
+import { getExtensionComponent } from '@/helpers/registry';
 
 const SolidUuidColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
     const filterable = column.attrs.filterable;
@@ -48,14 +50,27 @@ const SolidUuidColumn = ({ solidListViewMetaData, fieldMetadata, column }: Solid
             // style={{ minWidth: "12rem" }}
             // headerClassName="table-header-fs"
             header={() => {
-                return (<div style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch', whiteSpace:'nowrap', textOverflow:'ellipsis', overflow:'hidden'}}>{header}</div>)
+                return (<div style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>{header}</div>)
             }}
-            body={(rowData) => (
-                <SolidTableRowCell
-                    value={rowData[fieldMetadata.name]}
-                    truncateAfter={truncateAfter}
-                />
-            )}
+            body={(rowData) => {
+                let viewWidget = column.attrs.viewWidget;
+                if (!viewWidget) {
+                    viewWidget = 'DefaultTextRenderModeWidget';
+                }
+                let DynamicWidget = getExtensionComponent(viewWidget);
+                const widgetProps: SolidListFieldWidgetProps = {
+                    rowData,
+                    solidListViewMetaData,
+                    fieldMetadata,
+                    column
+                }
+                return (
+                    <>
+                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
+                    </>
+                )
+            }
+            }
         ></Column>
     );
 

package/src/components/core/list/columns/relations/SolidRelationManyToManyColumn.tsx

@@ -0,0 +1,110 @@
+'use client';
+import { FilterMatchMode } from 'primereact/api';
+import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
+import { FormEvent } from "primereact/ts-helpers";
+import { SolidListViewColumnParams } from '../../SolidListViewColumn';
+import { InputTypes, SolidVarInputsFilterElement } from "../../SolidVarInputsFilterElement";
+import { Button } from 'primereact/button';
+import { getExtensionComponent } from '@/helpers/registry';
+import { Chip } from 'primereact/chip';
+import { SolidListFieldWidgetProps } from '@/types/solid-core';
+
+
+const SolidRelationManyToManyColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
+    const filterable = column.attrs.filterable;
+    const showFilterOperator = false;
+    const filterMatchModeOptions = [
+        { label: 'In', value: FilterMatchMode.IN },
+        { label: 'Not In', value: FilterMatchMode.NOT_IN },
+    ];
+    const columnDataType = undefined;
+    const filterTemplate = (options: ColumnFilterElementTemplateOptions) => {
+
+        return (
+            <SolidVarInputsFilterElement
+                values={options.value}
+                onChange={(e: FormEvent<HTMLInputElement>) => options.filterCallback(e, options.index)}
+                inputType={InputTypes.RelationManyToOne}
+                solidListViewMetaData={solidListViewMetaData}
+                fieldMetadata={fieldMetadata}
+                column={column}
+            >
+            </SolidVarInputsFilterElement>
+        )
+    };
+
+    const header = column.attrs.label ?? fieldMetadata.displayName;
+
+    return (
+        <Column
+            key={fieldMetadata.name}
+            field={fieldMetadata.name}
+            header={header}
+            // className="text-sm"
+            sortable={column.attrs.sortable}
+            // filter={filterable}
+            dataType={columnDataType}
+            showFilterOperator={showFilterOperator}
+            filterMatchModeOptions={filterMatchModeOptions}
+            filterElement={filterTemplate}
+            body={(rowData) => {
+                let viewWidget = column.attrs.viewWidget;
+                if (!viewWidget) {
+                    viewWidget = 'DefaultRelationManyToManyListWidget';
+                }
+                let DynamicWidget = getExtensionComponent(viewWidget);
+                const widgetProps: SolidListFieldWidgetProps = {
+                    rowData,
+                    solidListViewMetaData,
+                    fieldMetadata,
+                    column
+                }
+                return (
+                    <>
+                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
+                    </>
+                )
+            }
+            }
+            filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
+            style={{ minWidth: "12rem" }}
+            headerClassName="table-header-fs"
+        ></Column>
+    );
+
+};
+
+export default SolidRelationManyToManyColumn;
+
+
+export const DefaultRelationManyToManyListWidget = ({ rowData, solidListViewMetaData, fieldMetadata, column }: SolidListFieldWidgetProps) => {
+    const manyToManyFieldData = rowData[column.attrs.name];
+
+    // This is the userkey that will be present within the rowData.
+    if (manyToManyFieldData) {
+        // Since this is a many-to-one field, we fetch the user key field of the associated model.
+        const userKeyField = fieldMetadata?.relationModel?.userKeyField?.name;
+
+        const manyToManyColVal = manyToManyFieldData.map((f: any) => f[userKeyField]);
+
+        // TODO: change this to use an anchor tag so that on click we open that entity form view. 
+        return (
+            <>
+                {manyToManyColVal.length > 0 &&
+                    <p>
+
+                        <p>{manyToManyColVal[0]}</p>
+                        <Button text className="kaban-load-more" style={{ padding: 0, paddingBottom: "3px" }} size="small"
+                            onClick={() => { }}
+                            label={manyToManyColVal.length - 1 > 0 ? `...${manyToManyColVal.length - 1} more` : ""}
+                        />
+
+                    </p >
+                }
+            </>
+        )
+    }
+    else {
+        return <span></span>
+    }
+};

package/src/components/core/list/columns/relations/SolidRelationManyToOneColumn.tsx

@@ -4,6 +4,8 @@ import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
 import { FormEvent } from "primereact/ts-helpers";
 import { SolidListViewColumnParams } from '../../SolidListViewColumn';
 import { InputTypes, SolidVarInputsFilterElement } from "../../SolidVarInputsFilterElement";
+import { getExtensionComponent } from '@/helpers/registry';
+import { SolidListFieldWidgetProps } from '@/types/solid-core';
 
 const SolidRelationManyToOneColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
     const filterable = column.attrs.filterable;
@@ -13,6 +15,9 @@ const SolidRelationManyToOneColumn = ({ solidListViewMetaData, fieldMetadata, co
         { label: 'Not In', value: FilterMatchMode.NOT_IN },
     ];
     const columnDataType = undefined;
+
+
+
     const filterTemplate = (options: ColumnFilterElementTemplateOptions) => {
 
         return (
@@ -28,23 +33,6 @@ const SolidRelationManyToOneColumn = ({ solidListViewMetaData, fieldMetadata, co
         )
     };
 
-    const bodyTemplate = (rowData: any) => {
-        const manyToOneFieldData = rowData[column.attrs.name];
-
-        // This is the userkey that will be present within the rowData.
-        if (manyToOneFieldData) {
-            // Since this is a many-to-one field, we fetch the user key field of the associated model.
-            const userKeyField = fieldMetadata?.relationModel?.userKeyField?.name;
-
-            const manyToOneColVal = manyToOneFieldData[userKeyField];
-
-            // TODO: change this to use an anchor tag so that on click we open that entity form view. 
-            return <span>{manyToOneColVal}</span>;
-        }
-        else {
-            return <span></span>
-        }
-    };
     const header = column.attrs.label ?? fieldMetadata.displayName;
 
     return (
@@ -59,7 +47,25 @@ const SolidRelationManyToOneColumn = ({ solidListViewMetaData, fieldMetadata, co
             showFilterOperator={showFilterOperator}
             filterMatchModeOptions={filterMatchModeOptions}
             filterElement={filterTemplate}
-            body={bodyTemplate}
+            body={(rowData) => {
+                let viewWidget = column.attrs.viewWidget;
+                if (!viewWidget) {
+                    viewWidget = 'DefaultRelationManyToOneListWidget';
+                }
+                let DynamicWidget = getExtensionComponent(viewWidget);
+                const widgetProps: SolidListFieldWidgetProps = {
+                    rowData,
+                    solidListViewMetaData,
+                    fieldMetadata,
+                    column
+                }
+                return (
+                    <>
+                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
+                    </>
+                )
+            }
+            }
             filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
             style={{ minWidth: "12rem" }}
             headerClassName="table-header-fs"
@@ -68,4 +74,22 @@ const SolidRelationManyToOneColumn = ({ solidListViewMetaData, fieldMetadata, co
 
 };
 
-export default SolidRelationManyToOneColumn;
+export default SolidRelationManyToOneColumn;
+
+
+export const DefaultRelationManyToOneListWidget = ({ rowData, solidListViewMetaData, fieldMetadata, column }: SolidListFieldWidgetProps) => {
+    const manyToOneFieldData = rowData[column.attrs.name];
+
+    // This is the userkey that will be present within the rowData.
+    if (manyToOneFieldData) {
+        // Since this is a many-to-one field, we fetch the user key field of the associated model.
+        const userKeyField = fieldMetadata?.relationModel?.userKeyField?.name;
+
+        const manyToOneColVal = manyToOneFieldData[userKeyField];
+
+        return <span>{manyToOneColVal}</span>;
+    }
+    else {
+        return <span></span>
+    }
+};

package/src/components/core/list/columns/relations/SolidRelationOneToManyColumn.tsx

@@ -0,0 +1,111 @@
+'use client';
+import { FilterMatchMode } from 'primereact/api';
+import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
+import { FormEvent } from "primereact/ts-helpers";
+import { SolidListViewColumnParams } from '../../SolidListViewColumn';
+import { InputTypes, SolidVarInputsFilterElement } from "../../SolidVarInputsFilterElement";
+import { Button } from 'primereact/button';
+import { SolidListFieldWidgetProps } from '@/types/solid-core';
+import { getExtensionComponent } from '@/helpers/registry';
+
+const SolidRelationOneToManyColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
+    const filterable = column.attrs.filterable;
+    const showFilterOperator = false;
+    const filterMatchModeOptions = [
+        { label: 'In', value: FilterMatchMode.IN },
+        { label: 'Not In', value: FilterMatchMode.NOT_IN },
+    ];
+    const columnDataType = undefined;
+    const filterTemplate = (options: ColumnFilterElementTemplateOptions) => {
+
+        return (
+            <SolidVarInputsFilterElement
+                values={options.value}
+                onChange={(e: FormEvent<HTMLInputElement>) => options.filterCallback(e, options.index)}
+                inputType={InputTypes.RelationManyToOne}
+                solidListViewMetaData={solidListViewMetaData}
+                fieldMetadata={fieldMetadata}
+                column={column}
+            >
+            </SolidVarInputsFilterElement>
+        )
+    };
+
+    const header = column.attrs.label ?? fieldMetadata.displayName;
+
+    return (
+        <Column
+            key={fieldMetadata.name}
+            field={fieldMetadata.name}
+            header={header}
+            // className="text-sm"
+            sortable={column.attrs.sortable}
+            // filter={filterable}
+            dataType={columnDataType}
+            showFilterOperator={showFilterOperator}
+            filterMatchModeOptions={filterMatchModeOptions}
+            filterElement={filterTemplate}
+            body={(rowData) => {
+                let viewWidget = column.attrs.viewWidget;
+                if (!viewWidget) {
+                    viewWidget = 'DefaultRelationOneToManyListWidget';
+                }
+                let DynamicWidget = getExtensionComponent(viewWidget);
+                const widgetProps: SolidListFieldWidgetProps = {
+                    rowData,
+                    solidListViewMetaData,
+                    fieldMetadata,
+                    column
+                }
+                return (
+                    <>
+                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
+                    </>
+                )
+            }
+            }
+            filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
+            style={{ minWidth: "12rem" }}
+            headerClassName="table-header-fs"
+        ></Column>
+    );
+
+};
+
+export default SolidRelationOneToManyColumn;
+
+
+
+
+export const DefaultRelationOneToManyListWidget = ({ rowData, solidListViewMetaData, fieldMetadata, column }: SolidListFieldWidgetProps) => {
+    const manyToManyFieldData = rowData[column.attrs.name];
+
+    // This is the userkey that will be present within the rowData.
+    if (manyToManyFieldData) {
+        // Since this is a many-to-one field, we fetch the user key field of the associated model.
+        const userKeyField = fieldMetadata?.relationModel?.userKeyField?.name;
+
+        const manyToManyColVal = manyToManyFieldData.map((f: any) => f[userKeyField]);
+
+        // TODO: change this to use an anchor tag so that on click we open that entity form view. 
+        return (
+
+            <>
+                {manyToManyColVal.length > 0 &&
+                    <p>
+                        {manyToManyColVal[0]}
+                        <Button text className="kaban-load-more" style={{ padding: 0, paddingBottom: "3px" }} size="small"
+                            onClick={() => { }}
+                            label={manyToManyColVal.length - 1 > 0 ? `...${manyToManyColVal.length - 1} more` : ""}
+                        />
+
+                    </p >
+                }
+            </>
+
+        )
+    }
+    else {
+        return <span></span>
+    }
+};

package/src/components/core/list/widgets/SolidRelationAvatarWidget.tsx

@@ -0,0 +1,89 @@
+import { SolidListFieldWidgetProps } from "@/types/solid-core";
+
+
+export const AvatarWidget = ({ value }: any) => {
+    // use "widget": "SolidUserNameAvatarWidget" in the list view field 
+
+
+    const getInitials = (value: string) => {
+        if (value) {
+            const names = value?.trim().split(' ');
+            const initials =
+                names.length === 1
+                    ? names[0][0]
+                    : names[0][0] + names[names.length - 1][0];
+            return initials.toUpperCase();
+        } else {
+            return ""
+        }
+    };
+
+    const getColorFromInitials = (initials: string) => {
+        let hash = 0;
+        for (let i = 0; i < initials.length; i++) {
+            hash = initials.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        const hue = Math.abs(hash) % 360;
+        return `hsl(${hue}, 60%, 60%)`; // nice pastel color
+    };
+
+    const initials = getInitials(value);
+    const bgColor = getColorFromInitials(initials);
+
+    return (
+        <div className="solid-table-row">
+            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                <div
+                    style={{
+                        width: 20,
+                        height: 20,
+                        borderRadius: '50%',
+                        backgroundColor: bgColor,
+                        color: 'white',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        fontWeight: 600,
+                        fontSize: 12,
+                        boxShadow: '0 0 0 2px rgba(0,0,0,0.1)',
+                    }}
+                >
+                    {initials}
+                </div>
+                <span>{value}</span>
+            </div>
+        </div>
+    );
+};
+
+
+
+
+
+export const SolidRelationAvatarWidget = ({ rowData, solidListViewMetaData, fieldMetadata, column }: SolidListFieldWidgetProps) => {
+    const manyToManyFieldData = rowData[column.attrs.name];
+
+    // This is the userkey that will be present within the rowData.
+    if (manyToManyFieldData) {
+        // Since this is a many-to-one field, we fetch the user key field of the associated model.
+        const userKeyField = fieldMetadata?.relationModel?.userKeyField?.name;
+
+        const manyToManyColVal = manyToManyFieldData.map((f: any) => f[userKeyField]);
+
+        // TODO: change this to use an anchor tag so that on click we open that entity form view. 
+        return (
+            <>
+                {manyToManyColVal.length > 0 &&
+
+                    manyToManyColVal.map((m: any) =>
+                        <AvatarWidget value={m}></AvatarWidget>
+
+                    )
+                }
+            </>
+        )
+    }
+    else {
+        return <span></span>
+    }
+};

package/src/components/core/list/widgets/SolidShortTextAvatarWidget.tsx

@@ -0,0 +1,59 @@
+import { SolidListFieldWidgetProps } from "@/types/solid-core";
+
+
+export const SolidShortTextAvatarWidget = ({ rowData, solidListViewMetaData, fieldMetadata, column }: SolidListFieldWidgetProps) => {
+    // use "widget": "SolidUserNameAvatarWidget" in the list view field 
+
+    const value = rowData[fieldMetadata.name];
+
+    const getInitials = (value: string) => {
+        if (value) {
+            const names = value?.trim().split(' ');
+            const initials =
+                names.length === 1
+                    ? names[0][0]
+                    : names[0][0] + names[names.length - 1][0];
+            return initials.toUpperCase();
+        } else {
+            return ""
+        }
+    };
+
+    const getColorFromInitials = (initials: string) => {
+        let hash = 0;
+        for (let i = 0; i < initials.length; i++) {
+            hash = initials.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        const hue = Math.abs(hash) % 360;
+        return `hsl(${hue}, 60%, 60%)`; // nice pastel color
+    };
+
+    const initials = getInitials(value);
+    const bgColor = getColorFromInitials(initials);
+
+    return (
+        <div className="solid-table-row">
+            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                <div
+                    style={{
+                        width: 20,
+                        height: 20,
+                        borderRadius: '50%',
+                        backgroundColor: bgColor,
+                        color: 'white',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        fontWeight: 600,
+                        fontSize: 12,
+                        boxShadow: '0 0 0 2px rgba(0,0,0,0.1)',
+                    }}
+                >
+                    {initials}
+                </div>
+                <span>{value}</span>
+            </div>
+        </div>
+    );
+};
+

package/src/components/core/list/widgets/SolidShortTextFieldImageRenderModeWidget.tsx

@@ -1,8 +1,10 @@
+import { SolidMediaListFieldWidgetProps } from "@/types/solid-core";
+
+export const SolidShortTextFieldImageListWidget = ({ rowData, solidListViewMetaData, fieldMetadata, column, setLightboxUrls, setOpenLightbox }: SolidMediaListFieldWidgetProps) => {
 
-export const SolidShortTextFieldImageRenderModeWidget = ({ value, setLightboxUrls, setOpenLightbox }: any) => {
     return (
         <img
-            src={value}
+            src={rowData[fieldMetadata.name]}
             alt="product-image-single"
             className="shadow-2 border-round"
             width={40}
@@ -10,7 +12,7 @@ export const SolidShortTextFieldImageRenderModeWidget = ({ value, setLightboxUrl
             style={{ objectFit: "cover" }}
             onClick={(event) => {
                 event.stopPropagation();
-                setLightboxUrls([{ src: value, downloadUrl: value }]);
+                setLightboxUrls([{ src: rowData[fieldMetadata.name], downloadUrl: rowData[fieldMetadata.name] }]);
                 setOpenLightbox(true);
             }}
         />

package/src/components/core/model/FieldMetaDataForm.tsx

@@ -1993,7 +1993,7 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
                             </div>
                           )}
 
-                          {currentFields.includes("relationCoModelFieldName") && formik.values.relationCreateInverse && (formik.values.relationType === "many-to-many" || formik.values.relationType === "many-to-one") && (
+                          {currentFields.includes("relationCoModelFieldName") && formik.values.relationCreateInverse  && (
                             <div className="field col-6 flex-flex-column gap-2 mt-3">
                               <label
                                 htmlFor="relationCoModelFieldName"