@solidstarters/solid-core-ui 1.1.211 → 1.1.212

package/dist/components/core/list/SolidListViewShimmerLoading.tsx

@@ -0,0 +1,78 @@
+import { Skeleton } from 'primereact/skeleton'
+import React from 'react'
+
+export const SolidListViewShimmerLoading = () => {
+    const rows = Array.from({ length: 14 });
+    return (
+        <div className='h-screen surface-0'>
+            {/* <div className="page-header pl-2 ">
+                <div className='flex align-items-center gap-3'>
+                    <Skeleton width="50px" height='1.4rem' className='md:h-1.3rem border-round-lg '></Skeleton>
+                    <Skeleton width="300px" className='border-round-lg hidden md:flex'></Skeleton>
+                </div>
+                <div className='flex align-items-center gap-3'>
+                    <Skeleton width="2.7rem" height="1.6rem" className="md:w-4rem md:h-2rem" />
+                    <Skeleton width="2.7rem" height="1.6rem" className="md:w-4rem md:h-2rem" />
+                    <Skeleton width="2.7rem" height="1.6rem" className="md:w-4rem md:h-2rem flex md:hidden" />
+                </div>
+            </div> */}
+            <div className='solid-list-skeleton-wrapper'>
+                <table className="solid-list-skeleton-table" style={{ borderCollapse: 'collapse', width: '100%' }}>
+                    <thead>
+                        <tr className="solid-list-skeleton-header">
+                            <th className="solid-list-skeleton-col-1">
+                                <Skeleton width="16px" height='16px' className='border-round-xs' />
+                            </th>
+                            <th className="solid-list-skeleton-col-2">
+                                <Skeleton width="70px" className='border-round-lg' />
+                            </th>
+                            <th className="solid-list-skeleton-col-3">
+                                <Skeleton width="90px" className='border-round-lg' />
+                            </th>
+                            <th className="solid-list-skeleton-col-4">
+                                <Skeleton width="80px" className='border-round-lg' />
+                            </th>
+                            <th className="solid-list-skeleton-col-5">
+                                <Skeleton width="90px" className='border-round-lg' />
+                            </th>
+                            <th className="solid-list-skeleton-col-6">
+                                <Skeleton width="100px" className='border-round-lg' />
+                            </th>
+                            <th className="solid-list-skeleton-col-7">
+                                <Skeleton width="30px" className='border-round-lg' />
+                            </th>
+                            <th className="solid-list-skeleton-col-8">
+                                <Skeleton width="30px" className='border-round-lg' />
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {rows.map((_, i) => (
+                            <tr className="solid-list-skeleton-row" key={i}>
+                                <td><Skeleton width="16px" height='16px' className='border-round-xs'/></td>
+                                <td><Skeleton width="50%" /></td>
+                                <td><Skeleton width="50%" /></td>
+                                <td><Skeleton width="50%" /></td>
+                                <td><Skeleton width="50%" /></td>
+                                <td><Skeleton width="50%" /></td>
+                                <td><Skeleton shape="circle" height='15px' width='15px' /></td>
+                                <td><Skeleton width="5px" height='20px' /></td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+                <div className='solid-list-skeleton-footer flex align-items-center justify-content-between'>
+                    <div className='flex align-items-center gap-3'>
+                        <Skeleton width="5rem" height="1rem"></Skeleton>
+                        <Skeleton width="30px" height='15px' className='border-round-sm'></Skeleton>
+                    </div>
+                    <div className='flex align-items-center gap-3'>
+                        <Skeleton width="70px"></Skeleton>
+                        <Skeleton width="10px" height='15px' className='border-round-sm'></Skeleton>
+                        <Skeleton width="15px" height='15px' className='border-round-sm'></Skeleton>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}

package/dist/components/core/list/SolidListingHeader.tsx

@@ -0,0 +1,42 @@
+'use client';
+import { usePathname } from 'next/navigation';
+import { plural } from "pluralize";
+import { } from "react";
+
+
+const SolidListingHeader = () => {
+  const path = usePathname();
+  const getHeading = path.split('/').slice(-2, -1)[0].replace(/-/g, ' ').replace(/\b\w/g, char => char.toUpperCase());
+  const pathSegments = path.split('/');
+
+
+  return (
+    <>
+      {pathSegments[pathSegments.length - 1] === "list" &&
+
+        <div
+          className="flex justify-content-between align-items-center px-5 relative lg:static"
+          style={{ height: "60px", minHeight: 60, backgroundColor: '#f6f6f9' }}
+        >
+          <div className="flex align-items-center">
+            <div className="">
+              <div className='text-xl font-bold'>
+                All {plural(getHeading)}
+              </div>
+            </div>
+          </div>
+          {/* <GlobalSearch /> */}
+          <div className="flex align-items-center">
+            <div>
+              {/* <FilterMenu></FilterMenu> */}
+            </div>
+          </div>
+          <div className="flex align-items-center">
+          </div>
+        </div>
+      }
+    </>
+
+  );
+};
+export default SolidListingHeader;

package/dist/components/core/list/SolidManyToOneFilterElement.tsx

@@ -0,0 +1,60 @@
+"use client";
+import { createSolidEntityApi } from "../../../redux/api/solidEntityApi";
+import { InputTypes } from "./SolidVarInputsFilterElement"
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+import { useState } from "react";
+import qs from "qs";
+
+
+export const SolidManyToOneFilterElement = ({ value, updateInputs, index, fieldMetadata }: any) => {
+
+    const entityApi = createSolidEntityApi(fieldMetadata.relationCoModelSingularName);
+    const { useLazyGetSolidEntitiesQuery } = entityApi;
+    const [triggerGetSolidEntities] = useLazyGetSolidEntitiesQuery();
+
+    const [autoCompleteItems, setAutoCompleteItems] = useState([]);
+    const autoCompleteSearch = async (event: AutoCompleteCompleteEvent) => {
+
+        // Get the list view layout & metadata first. 
+        const queryData = {
+            offset: 0,
+            limit: 10,
+            filters: {
+                [fieldMetadata?.relationModel?.userKeyField?.name]: {
+                    $containsi: event.query
+                }
+            }
+        };
+
+        const autocompleteQs = qs.stringify(queryData, {
+            encodeValuesOnly: true,
+        });
+
+        // TODO: do error handling here, possible errors like modelname is incorrect etc...
+        const autocompleteResponse = await triggerGetSolidEntities(autocompleteQs);
+
+        // TODO: if no data found then can we show no matching "entities", where entities can be replaced with the model plural name,
+        const autocompleteData = autocompleteResponse.data;
+
+        if (autocompleteData) {
+            const autoCompleteItems = autocompleteData.records.map((item: any) => {
+                return {
+                    label: item[fieldMetadata?.relationModel?.userKeyField?.name],
+                    value: item['id']
+                }
+            });
+            setAutoCompleteItems(autoCompleteItems);
+        }
+    }
+
+    return (
+        <AutoComplete
+            field="label"
+            value={value}
+            suggestions={autoCompleteItems}
+            completeMethod={autoCompleteSearch}
+            onChange={(e) => updateInputs(index, e.value)}
+            className="solid-standard-autocomplete"
+        />
+    )
+}

package/dist/components/core/list/SolidSelectionDynamicFilterElement.tsx

@@ -0,0 +1,50 @@
+'use client';
+import { useLazyGetSelectionDynamicValuesQuery } from "../../../redux/api/fieldApi";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+import qs from "qs";
+import { useState } from "react";
+
+
+export const SolidSelectionDynamicFilterElement = ({ value, updateInputs, index, fieldMetadata }: any) => {
+
+
+    // selection dynamic specific code. 
+    const [triggerGetSelectionDynamicValues] = useLazyGetSelectionDynamicValuesQuery();
+    const [selectionDynamicItems, setSelectionDynamicItems] = useState([]);
+    const selectionDynamicSearch = async (event: AutoCompleteCompleteEvent) => {
+
+        // Get the list view layout & metadata first. 
+        const queryData = {
+            offset: 0,
+            limit: 10,
+            query: event.query,
+            id: fieldMetadata.id
+        };
+
+        const sdQs = qs.stringify(queryData, {
+            encodeValuesOnly: true,
+        });
+
+        // TODO: do error handling here, possible errors like modelname is incorrect etc...
+        const sdResponse = await triggerGetSelectionDynamicValues(sdQs);
+
+        // TODO: if no data found then can we show no matching "entities", where entities can be replaced with the model plural name,
+        const sdData = sdResponse.data.data;
+
+        // @ts-ignore
+        setSelectionDynamicItems(sdData);
+    }
+
+
+    return (
+
+        <AutoComplete
+            field="label"
+            value={value}
+            dropdown
+            className="w-full solid-standard-autocomplete"
+            suggestions={selectionDynamicItems}
+            completeMethod={selectionDynamicSearch}
+            onChange={(e) => updateInputs(index, e.value)} />
+    )
+}

package/dist/components/core/list/SolidSelectionStaticFilterElement.tsx

@@ -0,0 +1,32 @@
+'use client';
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+import { useState } from "react";
+
+
+export const SolidSelectionStaticFilterElement = ({ value, updateInputs, index, fieldMetadata }: any) => {
+
+    // selection dynamic specific code. 
+    const [selectionStaticItems, setSelectionStaticItems] = useState([]);
+    const selectionStaticSearch = (event: AutoCompleteCompleteEvent) => {
+        const selectionStaticData = fieldMetadata.selectionStaticValues.map((i: string) => {
+            return {
+                label: i.split(":")[1],
+                value: i.split(":")[0]
+            }
+        });
+        const suggestionData = selectionStaticData.filter((t: any) => t.value.toLowerCase().startsWith(event.query.toLowerCase()));
+        setSelectionStaticItems(suggestionData)
+    }
+
+    return (
+
+        <AutoComplete
+            field="label"
+            value={value}
+            dropdown
+            className="w-full solid-standard-autocomplete"
+            suggestions={selectionStaticItems}
+            completeMethod={selectionStaticSearch}
+            onChange={(e) => updateInputs(index, e.value)} />
+    )
+}

package/dist/components/core/list/SolidTableRowCell.tsx

@@ -0,0 +1,35 @@
+import { Tooltip } from "primereact/tooltip";
+
+const SolidTableRowCell = ({ value, truncateAfter }: { value: string; truncateAfter?: number }) => {
+    const safeValue = value !== null && value !== undefined ? String(value) : "";
+    // Utility function to detect if value contains HTML
+    const isHTML = (str: string) => /<\/?[a-z][\s\S]*>/i.test(str);
+
+    // Utility function to strip HTML tags
+    const stripHTML = (str: string) => str.replace(/<[^>]+>/g, '');
+
+    const displayValue = isHTML(safeValue) ? stripHTML(safeValue) : safeValue;
+
+    return (
+        <div className="flex align-items-center">
+            <div
+                className="solid-table-row"
+                style={truncateAfter ? { maxWidth: `${truncateAfter}ch` } : {}}
+            // title={truncateAfter ? displayValue : undefined}
+            >
+                {displayValue}
+            </div>
+            {truncateAfter && displayValue.length > truncateAfter &&
+                <>
+                    <Tooltip target=".solid-field-tooltip-icon" />
+                    <i className="pi pi-info-circle solid-field-tooltip-icon"
+                        data-pr-tooltip={displayValue}
+                    />
+                </>
+            }
+        </div>
+    );
+
+};
+
+export default SolidTableRowCell;

package/dist/components/core/list/SolidVarInputsFilterElement.tsx

@@ -0,0 +1,184 @@
+'use client';
+import { Button } from "primereact/button";
+import { Calendar } from "primereact/calendar";
+import { InputNumber } from "primereact/inputnumber";
+import { InputText } from "primereact/inputtext";
+import { useEffect, useState } from "react";
+import { SolidManyToOneFilterElement } from "./SolidManyToOneFilterElement";
+import { SolidSelectionDynamicFilterElement } from "./SolidSelectionDynamicFilterElement";
+import { SolidSelectionStaticFilterElement } from "./SolidSelectionStaticFilterElement";
+
+export enum InputTypes {
+    Date = 'Date',
+    DateTime = 'DateTime',
+    Time = 'Time',
+    Numeric = 'Numeric',
+    Text = 'Text',
+    SelectionStatic = 'SelectionStatic',
+    RelationManyToOne = 'RelationManyToOne',
+    SelectionDynamic = 'SelectionDynamic'
+}
+
+
+// Based on numberOfInputs map the input filed and hide add and delete 
+export const SolidVarInputsFilterElement = ({ values, onChange, inputType = InputTypes.Text, numberOfInputs = null, solidListViewMetaData, fieldMetadata }: any) => {
+
+    if (!values) {
+        values = numberOfInputs && numberOfInputs > 0 ? Array(numberOfInputs).fill('') : [''];
+        // values = [''];
+    } else {
+        if (values[0] == '') {
+            values = numberOfInputs && numberOfInputs > 0 ? Array(numberOfInputs).fill('') : [''];
+        } else {
+
+            values = values
+        }
+    }
+
+    
+
+    // TODO: Ideally values will be an array, so we can spread them here instead of making a nested array.
+    const [inputs, setInputs] = useState([...values]);
+    useEffect(() => {
+        setInputs([...values])
+    }, [numberOfInputs])
+
+    const updateInputs = (index: number, value: any) => {
+        const updatedSpecification = inputs.map((item, i) =>
+            i === index ? value : item
+        );
+        setInputs(updatedSpecification);
+    };
+
+    const addInput = () => {
+        setInputs([...inputs, '']);
+    };
+
+    const deleteInput = (index: number) => {
+        if (inputs.length > 1) {
+            const updatedRows = inputs.filter((_, rowIndex) => rowIndex !== index);
+            setInputs(updatedRows);
+
+        } else {
+        }
+    };
+
+    useEffect(() => {
+        onChange(inputs)
+    }, [inputs])
+
+
+
+    return (
+        <div className="grid formgrid">
+            <div className="col-12">
+                <div className="flex flex-column gap-2">
+                    {inputs && inputs.map((value: any, index: number) => (
+
+                        <div key={index} className="flex align-items-center gap-2">
+
+                            {inputType === InputTypes.Text &&
+                                <InputText
+                                    value={value}
+                                    onChange={(e) => updateInputs(index, e.target.value)}
+                                    placeholder=""
+                                    className="p-inputtext-sm small-input w-full"
+                                />
+                            }
+                            {inputType === InputTypes.Numeric &&
+                                <InputNumber
+                                    value={value}
+                                    onChange={(e) => updateInputs(index, e.value)}
+                                    placeholder=""
+                                    className="p-inputtext-sm small-input w-full"
+                                />
+                            }
+                            {inputType === InputTypes.Date &&
+                                <Calendar
+                                    value={value}
+                                    onChange={(e) => updateInputs(index, e.target.value)}
+                                    dateFormat="mm/dd/yy"
+                                    placeholder="mm/dd/yyyy"
+                                    mask="99/99/9999"
+                                />
+                            }
+                            {inputType === InputTypes.DateTime &&
+                                <Calendar
+                                    value={value}
+                                    onChange={(e) => updateInputs(index, e.target.value)}
+                                    dateFormat="mm/dd/yy"
+                                    placeholder="mm/dd/yyyy hh:mm"
+                                    mask="99/99/9999 99:99"
+                                    showTime
+                                    hourFormat="24"
+                                />
+                            }
+                            {inputType === InputTypes.Time &&
+                                <Calendar
+                                    value={value}
+                                    onChange={(e) => updateInputs(index, e.target.value)}
+                                    placeholder="hh:mm"
+                                    mask="99:99"
+                                    timeOnly
+                                    hourFormat="24"
+                                />
+                            }
+                            {inputType === InputTypes.RelationManyToOne &&
+                                <SolidManyToOneFilterElement
+                                    value={value}
+                                    index={index}
+                                    updateInputs={updateInputs}
+                                    fieldMetadata={fieldMetadata}
+                                ></SolidManyToOneFilterElement>
+                            }
+                            {inputType === InputTypes.SelectionDynamic &&
+                                <SolidSelectionDynamicFilterElement
+                                    value={value}
+                                    index={index}
+                                    updateInputs={updateInputs}
+                                    fieldMetadata={fieldMetadata}
+                                ></SolidSelectionDynamicFilterElement>
+                            }
+                            {inputType === InputTypes.SelectionStatic &&
+
+                                <SolidSelectionStaticFilterElement
+                                    value={value}
+                                    index={index}
+                                    updateInputs={updateInputs}
+                                    fieldMetadata={fieldMetadata}
+                                ></SolidSelectionStaticFilterElement>
+                            }
+
+                            {numberOfInputs === null &&
+                                <>
+                                    {/* Plus Button to add a new row */}
+                                    < Button
+                                        icon="pi pi-plus"
+                                        size="small"
+                                        className="small-button"
+                                        onClick={addInput}
+                                        type="button"
+                                    />
+
+                                    {/* Trash Button to delete the row */}
+                                    <Button
+                                        icon="pi pi-trash"
+                                        size="small"
+                                        className="small-button"
+                                        onClick={() => deleteInput(index)}
+                                        outlined
+                                        severity="danger"
+                                        type="button"
+                                    />
+                                </>
+                            }
+                        </div>
+
+                    ))}
+
+                </div>
+
+            </div>
+        </div>
+    )
+}

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

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

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

@@ -0,0 +1,90 @@
+'use client';
+
+import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
+import { Dropdown } from 'primereact/dropdown';
+import { SolidListViewColumnParams } from '../SolidListViewColumn';
+import { SolidListFieldWidgetProps } from "../../../../types/solid-core";
+import { getExtensionComponent } from "../../../../helpers/registry";
+import { log } from "console";
+
+const SolidBooleanColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
+    const filterable = column.attrs.filterable;
+    const showFilterOperator = false;
+    const columnDataType = 'boolean';
+
+    const booleanOptions = [
+        { label: 'Yes', value: true },
+        { label: 'No', value: false },
+    ];
+
+    // Custom filter template for Boolean column
+    const filterTemplate = (options: ColumnFilterElementTemplateOptions) => {
+        return (
+            <Dropdown
+                value={options.value}
+                options={booleanOptions}
+                onChange={(e) => options.filterCallback(e.value)}
+                placeholder="Select"
+                className="p-column-filter"
+            />
+        );
+    };
+
+    // Custom body template for Boolean column
+    const bodyTemplate = (rowData: any) => {
+        const fieldKey = column.attrs.label ?? fieldMetadata.name;
+        return rowData[fieldKey] ? 'Yes' : 'No';
+    };
+
+    const header = column.attrs.label ?? fieldMetadata.displayName;
+
+    // TODO: filterTemplate, bodyTemplate & filterMatchModeOptions to be provided.
+
+    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 = 'DefaultBooleanListWidget';
+                    }
+                    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 SolidBooleanColumn;
+
+export const DefaultBooleanListWidget = ({ rowData, solidListViewMetaData, fieldMetadata, column }: SolidListFieldWidgetProps) => {
+    const fieldKey = column.attrs.label ?? fieldMetadata.name;
+    const trueLabel = column.attrs.trueLabel ?? 'Yes';
+    const falseLabel = column.attrs.falseLabel ?? 'No';
+    console.log(`rendering boolean column ${fieldKey} with value ${rowData[fieldKey]}, trueLabel=${trueLabel}, falseLabel=${falseLabel}`);
+    return rowData[fieldKey] === true ? trueLabel : falseLabel;
+}

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

@@ -0,0 +1,27 @@
+'use client';
+import { SolidListViewColumnParams } from '../SolidListViewColumn';
+import SolidBooleanColumn from './SolidBooleanColumn';
+import SolidDateColumn from './SolidDateColumn';
+import SolidDatetimeColumn from './SolidDatetimeColumn';
+import SolidIntColumn from './SolidIntColumn';
+import SolidShortTextColumn from './SolidShortTextColumn';
+
+const SolidComputedColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
+    if (['text', 'string'].includes(fieldMetadata.computedFieldValueType)) {
+        return SolidShortTextColumn({ solidListViewMetaData, fieldMetadata, column });
+    }
+    if (['int', 'decimal'].includes(fieldMetadata.computedFieldValueType)) {
+        return SolidIntColumn({ solidListViewMetaData, fieldMetadata, column });
+    }
+    if (fieldMetadata.computedFieldValueType === 'date') {
+        return SolidDateColumn({ solidListViewMetaData, fieldMetadata, column });
+    }
+    if (fieldMetadata.computedFieldValueType === 'datetime') {
+        return SolidDatetimeColumn({ solidListViewMetaData, fieldMetadata, column });
+    }
+    if (fieldMetadata.computedFieldValueType === 'boolean') {
+        return SolidBooleanColumn({ solidListViewMetaData, fieldMetadata, column });
+    }
+};
+
+export default SolidComputedColumn;