@solidstarters/solid-core-ui 1.1.74 → 1.1.77

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

@@ -1,79 +0,0 @@
-'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 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 = 'DefaultTextRenderModeWidget';
-                }
-                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,110 +0,0 @@
-'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

@@ -1,95 +0,0 @@
-'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 { getExtensionComponent } from '@/helpers/registry';
-import { SolidListFieldWidgetProps } from '@/types/solid-core';
-
-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 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

@@ -1,111 +0,0 @@
-'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

@@ -1,89 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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,
-                    }}
-                >
-                    {initials}
-                </div>
-                <span>{value}</span>
-            </div>
-        </div>
-    );
-};
-

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

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