@solidxai/core-ui 0.1.1 → 0.1.3

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

@@ -1,160 +0,0 @@
-
-import { FilterMatchMode } from 'primereact/api';
-import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
-import { FormEvent } from "primereact/ts-helpers";
-import { getNumberOfInputs, SolidListViewColumnParams } from '../SolidListViewColumn';
-import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
-import SolidTableRowCell from '../SolidTableRowCell';
-import { getExtensionComponent } from '../../../../helpers/registry';
-import { SolidListFieldWidgetProps, SolidMediaListFieldWidgetProps, SolidShortTextImageRenderModeWidgetProps } from '../../../../types/solid-core';
-import dayjs from 'dayjs';
-
-const SolidShortTextColumn = ({ solidListViewMetaData, fieldMetadata, column, setLightboxUrls, setOpenLightbox }: SolidListViewColumnParams) => {
-    const filterable = column.attrs.filterable;
-    const showFilterOperator = false;
-    const columnDataType = 'text';
-    const filterMatchModeOptions = [
-        { label: 'Starts With', value: FilterMatchMode.STARTS_WITH },
-        { label: 'Contains', value: FilterMatchMode.CONTAINS },
-        { label: 'Not Contains', value: FilterMatchMode.NOT_CONTAINS },
-        { label: 'Ends With', value: FilterMatchMode.ENDS_WITH },
-        { label: 'Equals', value: FilterMatchMode.EQUALS },
-        { label: 'Not Equals', value: FilterMatchMode.NOT_EQUALS },
-        { label: 'In', value: FilterMatchMode.IN },
-        { label: 'Not In', value: FilterMatchMode.NOT_IN }
-    ];
-    const filterTemplate = (options: ColumnFilterElementTemplateOptions) => {
-        const numberOfInputs = getNumberOfInputs(options.filterModel.matchMode);
-
-        return (
-            <SolidVarInputsFilterElement
-                values={options.value}
-                onChange={(e: FormEvent<HTMLInputElement>) => options.filterCallback(e, options.index)}
-                numberOfInputs={numberOfInputs}
-                inputType={InputTypes.Text}
-                solidListViewMetaData={solidListViewMetaData}
-                fieldMetadata={fieldMetadata}
-                column={column}
-            >
-            </SolidVarInputsFilterElement >
-        )
-    };
-
-    const truncateAfter = solidListViewMetaData?.data?.solidView?.layout?.attrs?.truncateAfter;
-    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}
-            filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
-            // style={{ minWidth: "12rem" }}
-            // headerClassName="table-header-fs"
-            header={() => {
-                return (<div style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>{header}</div>)
-            }}
-
-            body={(rowData) => {
-                //add this widget to render media image in image format  - SolidShortTextFieldImageRenderModeWidget 
-                let viewWidget = column.attrs.viewWidget;
-                if (!viewWidget) {
-                    viewWidget = 'DefaultTextListWidget';
-                }
-                let DynamicWidget = getExtensionComponent(viewWidget);
-                const widgetProps: SolidMediaListFieldWidgetProps = {
-                    rowData,
-                    solidListViewMetaData,
-                    fieldMetadata,
-                    column,
-                    setLightboxUrls: setLightboxUrls,
-                    setOpenLightbox: setOpenLightbox
-                }
-                return (
-                    <>
-                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
-                    </>
-                )
-            }
-            }
-
-        ></Column >
-    );
-
-};
-
-export default SolidShortTextColumn;
-
-function parseIsoDate(value: string): Date | null {
-    if (!value || typeof value !== "string") return null;
-
-    // Fast reject (avoids false positives)
-    if (!value.includes("T")) return null;
-
-    const d = new Date(value);
-    return isNaN(d.getTime()) ? null : d;
-}
-
-
-export const DefaultTextListWidget = ({ rowData, solidListViewMetaData, fieldMetadata, column }: SolidListFieldWidgetProps) => {
-    const truncateAfter = solidListViewMetaData?.data?.solidView?.layout?.attrs?.truncateAfter;
-    let displayValue = rowData[fieldMetadata.name];
-    //    if (typeof displayValue === "string" && displayValue.includes("T") && displayValue.endsWith("Z")) {
-    //         const d = new Date(displayValue);
-    //         if (!isNaN(d.getTime())) {
-    //             const year = d.getFullYear();
-    //             const month = String(d.getMonth() + 1).padStart(2, "0");
-    //             const day = String(d.getDate()).padStart(2, "0");
-    //             const hours = String(d.getHours()).padStart(2, "0");
-    //             const minutes = String(d.getMinutes()).padStart(2, "0");
-    //             const seconds = String(d.getSeconds()).padStart(2, "0");
-
-    //             displayValue = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}.000`;
-    //         }
-    //     }
-    if (typeof displayValue === "string") {
-        const parsedDate = parseIsoDate(displayValue);
-
-        if (parsedDate) {
-            const format = column?.attrs?.format as string | undefined;
-
-            // 🔵 Explicit format → dayjs
-            if (format) {
-                displayValue = dayjs(parsedDate).format(format);
-            }
-            // 🟢 Default → user locale
-            else {
-                displayValue = parsedDate.toLocaleString();
-            }
-        }
-    }
-
-
-
-    if (fieldMetadata?.selectionStaticValues && displayValue) {
-        const mapping: Record<string, string> = {};
-
-        fieldMetadata.selectionStaticValues.forEach((entry: string) => {
-            const [val, label] = entry.split(":");
-            mapping[val] = label;
-        });
-
-        const values = displayValue.split(",").map((v: string) => v.trim());
-
-        displayValue = values.map((v: string) => mapping[v] || v).join(", ");
-    }
-
-    return (
-        <SolidTableRowCell
-            value={displayValue}
-            truncateAfter={truncateAfter}
-        />
-    );
-};

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

@@ -1,78 +0,0 @@
-
-import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
-import { FormEvent } from "primereact/ts-helpers";
-import { getNumberOfInputs, SolidListViewColumnParams } from '../SolidListViewColumn';
-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;
-    const showFilterOperator = false;
-    const columnDataType = 'date';
-    const filterTemplate = (options: ColumnFilterElementTemplateOptions) => {
-        const numberOfInputs = getNumberOfInputs(options.filterModel.matchMode);
-
-        return (
-            <SolidVarInputsFilterElement
-                values={options.value}
-                onChange={(e: FormEvent<Date>) => options.filterCallback(e, options.index)}
-                numberOfInputs={numberOfInputs}
-                inputType={InputTypes.Time}
-                solidListViewMetaData={solidListViewMetaData}
-                fieldMetadata={fieldMetadata}
-                column={column}
-            >
-            </SolidVarInputsFilterElement >
-        )
-    };
-
-    // TODO: the body template to be controlled based on the format that one is expecting the date to be displayed in.
-    const truncateAfter = solidListViewMetaData?.data?.solidView?.layout?.attrs?.truncateAfter
-    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={dateFilterMatchModeOptions}
-            filterElement={filterTemplate}
-            filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
-            // style={{ minWidth: "12rem" }}
-            // headerClassName="table-header-fs"
-            header={() => {
-                return (<div style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>{header}</div>)
-            }}
-            body={(rowData) => {
-                let viewWidget = column.attrs.viewWidget;
-                if (!viewWidget) {
-                    viewWidget = 'DefaultTextListWidget';
-                }
-                let DynamicWidget = getExtensionComponent(viewWidget);
-                const widgetProps: SolidListFieldWidgetProps = {
-                    rowData,
-                    solidListViewMetaData,
-                    fieldMetadata,
-                    column
-                }
-                return (
-                    <>
-                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
-                    </>
-                )
-            }
-            }
-        ></Column>
-    );
-
-};
-
-export default SolidTimeColumn;

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

@@ -1,79 +0,0 @@
-
-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 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;
-    const showFilterOperator = false;
-    const columnDataType = 'text';
-    const filterMatchModeOptions = [
-        { label: 'In', value: FilterMatchMode.IN },
-        { label: 'Not In', value: FilterMatchMode.NOT_IN },
-    ];
-    const filterTemplate = (options: ColumnFilterElementTemplateOptions) => {
-
-        return (
-            <SolidVarInputsFilterElement
-                values={options.value}
-                onChange={(e: FormEvent<HTMLInputElement>) => options.filterCallback(e, options.index)}
-                inputType={InputTypes.Text}
-                solidListViewMetaData={solidListViewMetaData}
-                fieldMetadata={fieldMetadata}
-                column={column}
-            >
-            </SolidVarInputsFilterElement>
-        )
-    }
-
-    const truncateAfter = solidListViewMetaData?.data?.solidView?.layout?.attrs?.truncateAfter
-    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}
-            filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
-            // style={{ minWidth: "12rem" }}
-            // headerClassName="table-header-fs"
-            header={() => {
-                return (<div style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>{header}</div>)
-            }}
-            body={(rowData) => {
-                let viewWidget = column.attrs.viewWidget;
-                if (!viewWidget) {
-                    viewWidget = 'DefaultTextListWidget';
-                }
-                let DynamicWidget = getExtensionComponent(viewWidget);
-                const widgetProps: SolidListFieldWidgetProps = {
-                    rowData,
-                    solidListViewMetaData,
-                    fieldMetadata,
-                    column
-                }
-                return (
-                    <>
-                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
-                    </>
-                )
-            }
-            }
-        ></Column>
-    );
-
-};
-
-export default SolidUuidColumn;

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

@@ -1,106 +0,0 @@
-
-import { FilterMatchMode } from 'primereact/api';
-import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
-import { FormEvent } from "primereact/ts-helpers";
-import { SolidListViewColumnParams } from '../../../../../components/core/list/SolidListViewColumn';
-import { InputTypes, SolidVarInputsFilterElement } from '../../../../../components/core/list/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 = column?.attrs?.coModelFieldToDisplay ? column?.attrs?.coModelFieldToDisplay : 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>
-
-                        <span style={{backgroundColor: '#f5f5f5', padding: '7px', borderRadius: '4px'}}>{manyToManyColVal[0]}</span>
-                        <span style={{ color: "#0895CD", fontWeight: 'bold' }}>{manyToManyColVal.length - 1 > 0 ? ` +${manyToManyColVal.length - 1}` : ""}</span>
-
-                    </p >
-                }
-            </>
-        )
-    }
-    else {
-        return <span></span>
-    }
-};

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

@@ -1,117 +0,0 @@
-
-import { FilterMatchMode } from 'primereact/api';
-import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
-import { FormEvent } from "primereact/ts-helpers";
-import { SolidListViewColumnParams } from '../../../../../components/core/list/SolidListViewColumn';
-import { InputTypes, SolidVarInputsFilterElement } from '../../../../../components/core/list/SolidVarInputsFilterElement';
-import { getExtensionComponent } from '../../../../../helpers/registry';
-import { SolidListFieldWidgetProps } from '../../../../../types/solid-core';
-import { Button } from 'primereact/button';
-import { useRouter } from "../../../../../hooks/useRouter";
-import { kebabCase } from 'change-case';
-
-const SolidRelationManyToOneColumn = ({ 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 = '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"
-        ></Column>
-    );
-
-};
-
-export default SolidRelationManyToOneColumn;
-
-
-export const DefaultRelationManyToOneListWidget = ({ rowData, solidListViewMetaData, fieldMetadata, column }: SolidListFieldWidgetProps) => {
-    const router = useRouter();
-    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 = column?.attrs?.coModelFieldToDisplay ? column?.attrs?.coModelFieldToDisplay : fieldMetadata?.relationModel?.userKeyField?.name;
-
-        const manyToOneColVal = manyToOneFieldData[userKeyField];
-
-        return (
-            <Button
-                label={manyToOneColVal}
-                link
-                onClick={() => {
-                    // Get current path from browser
-                    const pathSegments = window.location.pathname.split('/').filter(Boolean);
-
-                    // The modelName is the second-last segment before "list"
-                    const listIndex = pathSegments.lastIndexOf('list');
-                    if (listIndex > 0) {
-                        pathSegments[listIndex - 1] = kebabCase(fieldMetadata?.relationModel?.singularName);
-                        pathSegments[listIndex] = `form/${manyToOneFieldData?.id}`;
-                    }
-                    const newPath = `/${pathSegments.join('/')}?viewMode=view`;
-                    router.push(newPath);
-                }}
-            />
-        );
-    }
-    else {
-        return <span></span>
-    }
-};

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

@@ -1,110 +0,0 @@
-
-import { FilterMatchMode } from 'primereact/api';
-import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
-import { FormEvent } from "primereact/ts-helpers";
-import { SolidListViewColumnParams } from '../../../../../components/core/list/SolidListViewColumn';
-import { InputTypes, SolidVarInputsFilterElement } from '../../../../../components/core/list/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 = column?.attrs?.coModelFieldToDisplay ? column?.attrs?.coModelFieldToDisplay : 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] && <span style={{ backgroundColor: '#f5f5f5', padding: '7px', borderRadius: '4px' }}>{manyToManyColVal[0]}</span>}
-                        <span style={{ color: "#0895CD", fontWeight: 'bold' }}>{manyToManyColVal.length - 1 > 0 ? ` +${manyToManyColVal.length - 1}` : ""}</span>
-
-
-                    </p >
-                }
-            </>
-
-        )
-    }
-    else {
-        return <span></span>
-    }
-};

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

@@ -1,30 +0,0 @@
-import { SolidListFieldWidgetProps } from "../../../../types/solid-core";
-import { AvatarWidget } from '../../../../components/core/common/AvatarWidget';
-
-
-export const SolidManyToManyRelationAvatarListWidget = ({ 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 &&
-                    <div className="flex align-items-center gap-2">
-                        <AvatarWidget value={manyToManyColVal[0]}></AvatarWidget>
-                        <span style={{ color: "#0895CD", fontWeight: 'bold' }}>{manyToManyColVal.length - 1 > 0 ? ` +${manyToManyColVal.length - 1}` : ""}</span>
-                    </div>
-                }
-            </>
-        )
-    }
-    else {
-        return <span></span>
-    }
-};