@solidstarters/solid-core-ui 1.1.70 → 1.1.72

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

@@ -0,0 +1,162 @@
+"use client";
+import SolidBigintColumn from "./columns/SolidBigintColumn";
+import SolidBooleanColumn from "./columns/SolidBooleanColumn";
+import SolidComputedColumn from "./columns/SolidComputedColumn";
+import SolidDateColumn from "./columns/SolidDateColumn";
+import SolidDatetimeColumn from "./columns/SolidDatetimeColumn";
+import SolidDecimalColumn from "./columns/SolidDecimalColumn";
+import SolidExternalIdColumn from "./columns/SolidExternalIdColumn";
+import SolidFloatColumn from "./columns/SolidFloatColumn";
+import SolidIntColumn from "./columns/SolidIntColumn";
+import SolidLongTextColumn from "./columns/SolidLongTextColumn";
+import SolidMediaMultipleColumn from "./columns/SolidMediaMultipleColumn";
+import SolidMediaSingleColumn from "./columns/SolidMediaSingleColumn";
+import SolidRelationColumn from "./columns/SolidRelationColumn";
+import SolidRichTextColumn from "./columns/SolidRichTextColumn";
+import SolidSelectionDynamicColumn from "./columns/SolidSelectionDynamicColumn";
+import SolidSelectionStaticColumn from "./columns/SolidSelectionStaticColumn";
+import SolidShortTextColumn from "./columns/SolidShortTextColumn";
+import SolidTimeColumn from "./columns/SolidTimeColumn";
+import SolidUuidColumn from "./columns/SolidUuidColumn";
+
+export type SolidListViewColumnParams = {
+    solidListViewMetaData: any;
+    fieldMetadata: any,
+    column: any,
+    setLightboxUrls?: any,
+    setOpenLightbox?: any
+};
+
+export const getNumberOfInputs = (matchMode: any): number | null => {
+    if (matchMode.label && matchMode.label === 'Not In') {
+        matchMode = 'notIn';
+    }
+
+    switch (matchMode) {
+        case 'between':
+            return 2;
+        case 'in':
+        case 'notIn':
+            return null;
+        case 'startsWith':
+        case 'contains':
+        case 'notContains':
+        case 'endsWith':
+        case 'equals':
+        case 'notEquals':
+        case 'lt':
+        case 'lte':
+        case 'gt':
+        case 'gte':
+            return 1;
+        default:
+            return 1; // Default to single input if no specific match is found
+    }
+}
+
+// // @ts-ignore
+// const components = require.context('./columns', false, /Solid.*Column\.tsx$/);
+
+// // Define a function to dynamically load components based on type
+// const loadComponentByType = async (type: string) => {
+//     try {
+//         const componentName = `./columns/Solid${type.charAt(0).toUpperCase() + type.slice(1)}Column.tsx`;
+
+//         // Dynamically import the component based on type
+//         const componentModule = await import(componentName);
+
+//         return componentModule.default;
+//     } catch (error) {
+//         console.error(`Failed to load component for type: ${type}`, error);
+//         return null;
+//     }
+// };
+
+export const SolidListViewColumn = ({ solidListViewMetaData, fieldMetadata, column, setLightboxUrls, setOpenLightbox }: SolidListViewColumnParams) => {
+
+    // And finally we can implement additional switching logic based on certain special fields. 
+    if (fieldMetadata.name === 'id') {
+        return SolidIntColumn({ solidListViewMetaData, fieldMetadata, column });
+    }
+
+    if (fieldMetadata.type === 'int') {
+        return SolidIntColumn({ solidListViewMetaData, fieldMetadata, column });
+    }
+    if (fieldMetadata.type === 'bigint') {
+        return SolidBigintColumn({ solidListViewMetaData, fieldMetadata, column });
+    }
+    if (fieldMetadata.type === 'float') {
+        return SolidFloatColumn({ solidListViewMetaData, fieldMetadata, column });
+    }
+    if (fieldMetadata.type === 'decimal') {
+        return SolidDecimalColumn({ solidListViewMetaData, fieldMetadata, column });
+    }
+    if (fieldMetadata.type === 'shortText') {
+        return SolidShortTextColumn({ solidListViewMetaData, fieldMetadata, column, setLightboxUrls, setOpenLightbox });
+    }
+    if (fieldMetadata.type === 'longText') {
+        return SolidLongTextColumn({ solidListViewMetaData, fieldMetadata, column });
+    }
+    if (fieldMetadata.type === 'richText') {
+        return SolidRichTextColumn({ solidListViewMetaData, fieldMetadata, column });
+    }
+    if (fieldMetadata.type === 'boolean') {
+        return SolidBooleanColumn({ solidListViewMetaData, fieldMetadata, column });
+    }
+    if (fieldMetadata.type === 'date') {
+        return SolidDateColumn({ solidListViewMetaData, fieldMetadata, column });
+    }
+    if (fieldMetadata.type === 'datetime') {
+        return SolidDatetimeColumn({ solidListViewMetaData, fieldMetadata, column });
+    }
+    if (fieldMetadata.type === 'time') {
+        return SolidTimeColumn({ solidListViewMetaData, fieldMetadata, column });
+    }
+    if (fieldMetadata.type === 'relation') {
+        return SolidRelationColumn({ solidListViewMetaData, fieldMetadata, column });
+    }
+    if (fieldMetadata.type === 'mediaSingle') {
+        return SolidMediaSingleColumn({ solidListViewMetaData, fieldMetadata, column, setLightboxUrls, setOpenLightbox });
+    }
+    if (fieldMetadata.type === 'mediaMultiple') {
+        return SolidMediaMultipleColumn({ solidListViewMetaData, fieldMetadata, column, setLightboxUrls, setOpenLightbox });
+    }
+    if (fieldMetadata.type === 'selectionStatic') {
+        return SolidSelectionStaticColumn({ solidListViewMetaData, fieldMetadata, column });
+    }
+    if (fieldMetadata.type === 'selectionDynamic') {
+        return SolidSelectionDynamicColumn({ solidListViewMetaData, fieldMetadata, column });
+    }
+    if (fieldMetadata.type === 'computed') {
+        return SolidComputedColumn({ solidListViewMetaData, fieldMetadata, column });
+    }
+    if (fieldMetadata.type === 'externalId') {
+        return SolidExternalIdColumn({ solidListViewMetaData, fieldMetadata, column });
+    }
+    if (fieldMetadata.type === 'uuid') {
+        return SolidUuidColumn({ solidListViewMetaData, fieldMetadata, column });
+    }
+    // // Load everything else based on type and dynamically.
+    // else {
+    //     const ComponentFound = await loadComponentByType(fieldMetadata.type);
+    //     const ComponentNotFound = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => (
+    //         <Column
+    //             key={fieldMetadata.name}
+    //             field={fieldMetadata.name}
+    //             header={fieldMetadata.displayName}
+    //             className="text-sm"
+    //             sortable={false}
+    //             filter={false}
+    //             showFilterOperator={false}
+    //             body={() => (<span>Type not supported</span>)}
+    //             style={{ minWidth: "12rem" }}
+    //             headerClassName="table-header-fs"
+    //         ></Column>
+    //     );
+
+    //     return ComponentFound ? ComponentFound({ solidListViewMetaData, fieldMetadata, column }) : ComponentNotFound({ solidListViewMetaData, fieldMetadata, column });
+    // }
+
+    // TODO: we can implement additional switching logic based on the widget type being used to render the list view column.
+
+};

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

@@ -0,0 +1,198 @@
+"use client"
+import { deleteManyPermission, deletePermission } from "@/helpers/permissions";
+import Image from "next/image";
+import { usePathname, useRouter } from "next/navigation";
+import { Accordion, AccordionTab } from "primereact/accordion";
+import { Button } from "primereact/button";
+import { Checkbox, CheckboxChangeEvent } from "primereact/checkbox";
+import { Divider } from "primereact/divider";
+import { OverlayPanel } from "primereact/overlaypanel";
+import { RadioButton } from "primereact/radiobutton";
+import { useEffect, useRef, useState } from "react";
+import { SolidListColumnSelector } from "./SolidListColumnSelector";
+
+export const SolidListViewConfigure = ({ listViewMetaData, setShowArchived, showArchived, viewData, sizeOptions, setSize, size, viewModes, params, actionsAllowed, selectedRecords, setDialogVisible, setShowSaveFilterPopup }: any) => {
+    // const [visible, setVisible] = useState<boolean>(false);
+    const op = useRef(null);
+    const customizeLayout = useRef<OverlayPanel | null>(null);
+    const pathname = usePathname();
+    const router = useRouter();
+    const [view, setView] = useState<string>("");
+
+    const handleViewChange = (newView: string) => {
+        if (view === newView) return; // Prevent unnecessary updates
+        const pathSegments = pathname.split('/').filter(Boolean);
+        pathSegments[pathSegments.length - 1] = newView; // Replace the last part with new view
+        const newPath = '/' + pathSegments.join('/');
+        router.push(newPath);
+    };
+
+    useEffect(() => {
+        if (typeof pathname === 'string') {
+            const pathSegments = pathname.split('/').filter(Boolean);
+            if (pathSegments.length > 0) {
+                setView(pathSegments[pathSegments.length - 1]);
+            }
+        }
+    }, [])
+
+
+    const [isOverlayOpen, setIsOverlayOpen] = useState(false);
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (
+                customizeLayout.current &&
+                !customizeLayout.current.getElement()?.contains(event.target as Node)
+            ) {
+                setIsOverlayOpen(false);
+            }
+        };
+
+        if (isOverlayOpen) {
+            document.addEventListener("click", handleClickOutside);
+        } else {
+            document.removeEventListener("click", handleClickOutside);
+        }
+
+        return () => document.removeEventListener("click", handleClickOutside);
+    }, [isOverlayOpen])
+
+    return (
+        <div className="position-relative">
+            <Button
+                type="button"
+                size="small"
+                icon="pi pi-cog"
+                severity="secondary"
+                outlined
+                // @ts-ignore
+                onClick={(e) => op.current.toggle(e)}
+            />
+            <OverlayPanel ref={op} className="listview-cogwheel-panel">
+                <div className="p-2">
+                    <div className="flex flex-column">
+                        {actionsAllowed.includes(`${deleteManyPermission(params.modelName)}`) && viewData?.data?.solidView?.layout?.attrs?.delete !== false && selectedRecords.length > 0 &&
+                            <Button
+                                text
+                                type="button"
+                                className="text-left gap-2 text-base"
+                                label="Delete"
+                                size="small"
+                                iconPos="left"
+                                severity="danger"
+                                icon={'pi pi-trash'}
+                                onClick={() => setDialogVisible(true)}
+                            />}
+                        <Button text icon='pi pi-download' label="Import" size="small" severity="secondary" className="text-left gap-2 text-base" />
+                        <Button text icon='pi pi-upload' label="Export" size="small" severity="secondary" className="text-left gap-2 text-base" />
+                        {/* <Button text icon='pi pi-share-alt' label="Share" size="small" severity="secondary" className="text-left gap-2" /> */}
+                        {/* {viewData?.data?.solidView?.model?.enableSoftDelete &&
+                        <Button text severity="secondary" size="small" className="text-left w-13rem" label={showArchived ? "Hide Archived Records" : "Show Archived Records"} iconPos="left" onClick={() => { setShowArchived(!showArchived); }} />
+                    } */}
+                        {viewData?.data?.solidView?.model?.enableSoftDelete && (
+                            <div className="flex align-items-center px-3 gap-2 mt-2 mb-1">
+                                <Checkbox
+                                    inputId="showArchived"
+                                    checked={showArchived}
+                                    onChange={() => setShowArchived(!showArchived)}
+                                />
+                                <label htmlFor="showArchived" className="ml-2 text-base solid-secondary-text-color">
+                                    Show Archived Records
+                                </label>
+                            </div>
+                        )}
+                    </div>
+                </div>
+                <Divider className="m-0" />
+                <div className="p-2 relative flex flex-column gap-1">
+                    <Button
+                        icon='pi pi-sliders-h'
+                        label="Customize Layout"
+                        severity={isOverlayOpen ? undefined : "secondary"}
+                        size="small"
+                        text={isOverlayOpen ? false : true}
+                        className="text-left gap-2 w-full text-base"
+                        // @ts-ignore
+                        onClick={(e) => {
+                            customizeLayout.current?.toggle(e);
+                            setIsOverlayOpen((prev) => !prev); // ✅ Ensure state updates when toggled
+                        }}
+                    >
+                        <i className="pi pi-chevron-right text-sm"></i>
+                    </Button>
+                    <Button text icon='pi pi-save' label="Save Custom Filter" size="small" severity="secondary" className="text-left gap-2 text-base" onClick={() => setShowSaveFilterPopup(true)} />
+                    {/* <p className="mt-3 mb-1 font-medium" style={{ color: 'var(--gray-400)' }}>Saved Layouts</p> */}
+                    {/* <Button text severity="secondary" label="Diet Tracking" icon="pi pi-plus" size="small" /> */}
+                    <OverlayPanel ref={customizeLayout} className="customize-layout-panel" style={{ minWidth: 250 }}
+                        onShow={() => setIsOverlayOpen(true)}
+                        onHide={() => {
+                            console.log("Overlay closed");
+                            setTimeout(() => setIsOverlayOpen(false), 50); // ✅ Ensure state updates
+                        }}
+                    >
+
+                        <div className="solid-layout-accordion">
+                            <Accordion multiple expandIcon="pi pi-chevron-down" collapseIcon="pi pi-chevron-up" activeIndex={[2]}>
+                                {viewModes && viewModes.length > 0 &&
+                                    <AccordionTab header="Switch Type">
+                                        <div className="flex flex-column gap-1 p-1">
+                                            {viewModes.map((option: any) => (
+                                                <div key={option.value} className={`flex align-items-center ${option.value === view ? 'solid-active-view' : 'solid-view'}`}>
+                                                    <RadioButton
+                                                        inputId={option.value}
+                                                        name="views"
+                                                        value={option.value}
+                                                        // onChange={(e) => router}
+                                                        onChange={() => handleViewChange(option.value)}
+                                                        checked={option.value === view}
+                                                    />
+                                                    <label htmlFor={option.value} className="ml-2 flex align-items-center justify-content-between w-full">
+                                                        {option.label}
+                                                        {/* <Image
+                                                        src={option.image}
+                                                        alt={option.value}
+                                                        fill
+                                                        className='relative row-spacing-img'
+                                                    /> */}
+                                                    </label>
+                                                </div>
+                                            ))}
+                                        </div>
+                                    </AccordionTab>
+                                }
+                                <AccordionTab header="Row Spacing">
+                                    <div className="flex flex-column gap-1 p-1flex flex-column gap-1 p-1">
+                                        {/* <p className="m-0 px-3">Row Spacing</p> */}
+                                        {sizeOptions.map((option: any) => (
+                                            <div key={option.value} className={`flex align-items-center ${option.value === size ? 'solid-active-view' : 'solid-view'}`}>
+                                                <RadioButton
+                                                    inputId={option.value}
+                                                    name="sizes"
+                                                    value={option.value}
+                                                    onChange={(e) => setSize(e.value)}
+                                                    checked={option.value === size}
+                                                />
+                                                <label htmlFor={option.value} className="ml-2 flex align-items-center justify-content-between w-full">
+                                                    {option.label}
+                                                    <Image
+                                                        src={option.image}
+                                                        alt={option.value}
+                                                        fill
+                                                        className='relative row-spacing-img'
+                                                    />
+                                                </label>
+                                            </div>
+                                        ))}
+                                    </div>
+                                </AccordionTab>
+                                <AccordionTab header="Column Selector">
+                                    <SolidListColumnSelector listViewMetaData={listViewMetaData} />
+                                </AccordionTab>
+                            </Accordion>
+                        </div>
+                    </OverlayPanel>
+                </div>
+            </OverlayPanel>
+        </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,59 @@
+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,12 @@
+const SolidTableRowCell = ({ value, truncateAfter }: { value: string; truncateAfter?: number }) => {
+    return (
+        <div
+            className="solid-table-row"
+            style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch' }}
+        >
+            {value}
+        </div>
+    );
+};
+
+export default SolidTableRowCell;