@solidstarters/solid-core-ui 1.1.211 → 1.1.212

package/dist/components/core/list/columns/SolidDateColumn.tsx

@@ -0,0 +1,90 @@
+'use client';
+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 { SolidListFieldWidgetProps } from '../../../../types/solid-core';
+import { getExtensionComponent } from '../../../../helpers/registry';
+
+export const dateFilterMatchModeOptions = [
+    { label: 'Equals', value: FilterMatchMode.EQUALS },
+    { label: 'Not Equals', value: FilterMatchMode.NOT_EQUALS },
+    { label: 'Less Than', value: FilterMatchMode.LESS_THAN },
+    { label: 'Less Than Or Equal', value: FilterMatchMode.LESS_THAN_OR_EQUAL_TO },
+    { label: 'Greater Than', value: FilterMatchMode.GREATER_THAN },
+    { label: 'Greater Than Or Equal', value: FilterMatchMode.GREATER_THAN_OR_EQUAL_TO },
+    { label: 'In', value: FilterMatchMode.IN },
+    { label: 'Not In', value: FilterMatchMode.NOT_IN },
+    { label: 'Between', value: FilterMatchMode.BETWEEN }
+];
+
+const SolidDateColumn = ({ 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.Date}
+                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 SolidDateColumn;

package/dist/components/core/list/columns/SolidDatetimeColumn.tsx

@@ -0,0 +1,79 @@
+'use client';
+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 { SolidListFieldWidgetProps } from "../../../../types/solid-core";
+import { getExtensionComponent } from "../../../../helpers/registry";
+
+const SolidDatetimeColumn = ({ 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.DateTime}
+                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 SolidDatetimeColumn;
+

package/dist/components/core/list/columns/SolidDecimalColumn.tsx

@@ -0,0 +1,9 @@
+'use client';
+import { SolidListViewColumnParams } from '../SolidListViewColumn';
+import SolidIntColumn from './SolidIntColumn';
+
+const SolidDecimalColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
+    return SolidIntColumn({ solidListViewMetaData, fieldMetadata, column });
+};
+
+export default SolidDecimalColumn;

package/dist/components/core/list/columns/SolidExternalIdColumn.tsx

@@ -0,0 +1,80 @@
+'use client';
+import React from 'react';
+import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
+import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
+import { SolidListViewColumnParams } from '../SolidListViewColumn';
+import { FormEvent } from "primereact/ts-helpers";
+import { FilterMatchMode } from 'primereact/api';
+import SolidTableRowCell from '../SolidTableRowCell';
+import { SolidListFieldWidgetProps } from '../../../../types/solid-core';
+import { getExtensionComponent } from '../../../../helpers/registry';
+
+const SolidExternalIdColumn = ({ 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 SolidExternalIdColumn;

package/dist/components/core/list/columns/SolidFloatColumn.tsx

@@ -0,0 +1,9 @@
+'use client';
+import { SolidListViewColumnParams } from '../SolidListViewColumn';
+import SolidIntColumn from './SolidIntColumn';
+
+const SolidFloatColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
+    return SolidIntColumn({ solidListViewMetaData, fieldMetadata, column });
+};
+
+export default SolidFloatColumn;

package/dist/components/core/list/columns/SolidIdColumn.tsx

@@ -0,0 +1,79 @@
+'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 SolidIdColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
+    const filterable = column.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<Date>) => options.filterCallback(e, options.index)}
+                inputType={InputTypes.Numeric}
+                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.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 SolidIdColumn;

package/dist/components/core/list/columns/SolidIntColumn.tsx

@@ -0,0 +1,87 @@
+'use client';
+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 } from '../../../../types/solid-core';
+
+const SolidIntColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
+    const filterable = column.attrs.filterable;
+    const showFilterOperator = false;
+    const columnDataType = 'numeric';
+    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.Numeric}
+                solidListViewMetaData={solidListViewMetaData}
+                fieldMetadata={fieldMetadata}
+                column={column}
+            >
+            </SolidVarInputsFilterElement>
+        )
+    };
+    const filterMatchModeOptions = [
+        { label: 'Equals', value: FilterMatchMode.EQUALS },
+        { label: 'Not Equals', value: FilterMatchMode.NOT_EQUALS },
+        { label: 'Less Than', value: FilterMatchMode.LESS_THAN },
+        { label: 'Less Than Or Equal', value: FilterMatchMode.LESS_THAN_OR_EQUAL_TO },
+        { label: 'Greater Than', value: FilterMatchMode.GREATER_THAN },
+        { label: 'Greater Than Or Equal', value: FilterMatchMode.GREATER_THAN_OR_EQUAL_TO },
+        { label: 'In', value: FilterMatchMode.IN },
+        { label: 'Not In', value: FilterMatchMode.NOT_IN },
+        { label: 'Between', value: FilterMatchMode.BETWEEN }
+    ];
+
+    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 SolidIntColumn;

package/dist/components/core/list/columns/SolidLongTextColumn.tsx

@@ -0,0 +1,9 @@
+'use client';
+import { SolidListViewColumnParams } from '../SolidListViewColumn';
+import SolidShortTextColumn from './SolidShortTextColumn';
+
+const SolidLongTextColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
+    return SolidShortTextColumn({ solidListViewMetaData, fieldMetadata, column });
+};
+
+export default SolidLongTextColumn;