@solidstarters/solid-core-ui 1.1.211 → 1.1.212

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

@@ -0,0 +1,301 @@
+'use client';
+import React, { useState } from 'react';
+import { Column } from "primereact/column";
+import { SolidListViewColumnParams } from '../SolidListViewColumn';
+import { Button } from 'primereact/button';
+import { SolidMediaListFieldWidgetProps } from '../../../../types/solid-core';
+import { getExtensionComponent } from '../../../../helpers/registry';
+import { classNames } from 'primereact/utils';
+import { FileReaderExt } from '../../../../components/common/FileReaderExt';
+import { Dialog } from 'primereact/dialog';
+
+// Helpers
+const isImageFile = (url: string) => /\.(jpg|jpeg|png|gif|bmp|webp)$/i.test(url);
+const isVideoFile = (url: string) => /\.(mp4|webm|ogg)$/i.test(url);
+const isAudioFile = (url: string) => /\.(mp3|wav|ogg)$/i.test(url);
+
+const downloadOnlyExt = [
+    "txt", "zip", "rar",
+    "doc", "docx",
+    "xls", "xlsx",
+    "ppt", "pptx",
+    "pdf", "csv"
+];
+
+const isDocumentType = (url: string) => {
+    const ext = url.split("?")[0].split(".").pop()?.toLowerCase();
+    return ext ? downloadOnlyExt.includes(ext) : false;
+};
+
+const downloadFile = (url: string, name: string = "") => {
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = name;
+    link.target = "_blank";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+};
+
+
+
+// Thumbnail preview component
+const MediaPreview = ({ src, onClick }: { src: string; onClick: (event: React.MouseEvent) => void }) => {
+    const [isBroken, setIsBroken] = useState(false);
+
+    const handleClick = (event: React.MouseEvent) => {
+        onClick(event);
+    };
+
+    if (!isBroken) {
+        if (isImageFile(src)) {
+            return (
+                <img
+                    src={src}
+                    alt="media"
+                    className="shadow-2 border-round"
+                    width={40}
+                    height={40}
+                    style={{ objectFit: "cover" }}
+                    onError={() => setIsBroken(true)}
+                    onClick={handleClick}
+                />
+            );
+        }
+
+        if (isVideoFile(src)) {
+            return (
+                <video
+                    src={src}
+                    width={40}
+                    height={40}
+                    className="shadow-2 border-round"
+                    style={{ objectFit: "cover" }}
+                    onError={() => setIsBroken(true)}
+                    onClick={handleClick}
+                    muted
+                />
+            );
+        }
+
+        if (isAudioFile(src)) {
+            return (
+                <div
+                    className="shadow-2 border-round flex align-items-center justify-content-center bg-gray-100"
+                    style={{ width: 40, height: 40 }}
+                    onClick={handleClick}
+                >
+                    <i className="pi pi-volume-up text-xl text-gray-600"></i>
+                </div>
+            );
+        }
+    }
+
+    return (
+        <div
+            style={{ width: 40, height: 40, display: "flex", alignItems: "center", justifyContent: "center" }}
+            onClick={handleClick}
+        >
+            <i className={classNames("pi pi-file", "text-3xl text-gray-400")}></i>
+        </div>
+    );
+};
+
+
+// Column Component
+const SolidMediaMultipleColumn = ({ solidListViewMetaData, fieldMetadata, column, setLightboxUrls, setOpenLightbox }: SolidListViewColumnParams) => {
+    const filterable = false;
+    const showFilterOperator = false;
+    const columnDataType = undefined;
+    const header = column.attrs.label ?? fieldMetadata.displayName;
+
+    return (
+        <Column
+            key={fieldMetadata.name}
+            field={fieldMetadata.name}
+            header={header}
+            body={(rowData) => {
+                let viewWidget = column.attrs.viewWidget;
+                if (!viewWidget) {
+                    viewWidget = 'DefaultMediaMultipleListWidget';
+                }
+                let DynamicWidget = getExtensionComponent(viewWidget);
+                const widgetProps: SolidMediaListFieldWidgetProps = {
+                    rowData,
+                    solidListViewMetaData,
+                    fieldMetadata,
+                    column,
+                    setLightboxUrls,
+                    setOpenLightbox
+                }
+                return (
+                    <>
+                        {
+                            DynamicWidget && <DynamicWidget {...widgetProps} />
+                        }
+                    </>
+                )
+            }}
+            sortable={column.attrs.sortable}
+            dataType={columnDataType}
+            showFilterOperator={showFilterOperator}
+            filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
+            style={{ minWidth: "12rem" }}
+            headerClassName="table-header-fs"
+        />
+    );
+};
+
+export default SolidMediaMultipleColumn;
+
+// Default multiple widget
+export const DefaultMediaMultipleListWidget = ({ rowData, fieldMetadata, setLightboxUrls, setOpenLightbox }: SolidMediaListFieldWidgetProps) => {
+    const [isShowAllFiles, setShowAllFiles] = useState(false);
+
+    if (!rowData?._media?.[fieldMetadata.name]) return null;
+
+    const fullrecord = rowData._media[fieldMetadata.name]?.map((file: any) => ({
+        name: file.originalFileName,
+        type: file.mimeType,
+        size: file.fileSize,
+        id: file.id,
+        fileUrl: file._full_url
+    }));
+
+
+    const formatFileSize = (size: number) =>
+        size >= 1024 * 1024 ? `${(size / (1024 * 1024)).toFixed(1)} MB` : `${(size / 1024).toFixed(1)} KB`;
+
+
+    const handleFileView = (file: any) => {
+        const fileUrl = file?.fileUrl || "";
+        const cleanUrl = fileUrl.split("?")[0];
+        const ext = cleanUrl.split(".").pop()?.toLowerCase();
+
+        if (ext && downloadOnlyExt.includes(ext)) {
+            downloadFile(file?.fileUrl, "")
+
+        } else {
+            setLightboxUrls?.([{ src: file.fileUrl, downloadUrl: file.fileUrl }]);
+            setOpenLightbox?.(true);
+        }
+    };
+
+
+
+    return fullrecord.length > 0 ? (
+        <div className='flex gap-2 align-items-end'>
+
+            {/* THUMBNAIL - FIXED BEHAVIOR */}
+            <MediaPreview
+                src={fullrecord[0]?.fileUrl}
+                onClick={(event) => {
+                    event.stopPropagation();
+
+                    const cleanUrl = fullrecord[0]?.fileUrl.split("?")[0];
+                    const ext = cleanUrl.split(".").pop()?.toLowerCase();
+
+                    if (ext && downloadOnlyExt.includes(ext) && fullrecord?.length > 1) {
+                        setShowAllFiles(true)
+                        return;
+                    }
+
+                    else if (ext && downloadOnlyExt.includes(ext)) {
+                        downloadFile(fullrecord[0]?.fileUrl, "")
+                        return;
+                    }
+
+                    // FIRST FILE IS MEDIA ⇒ OPEN LIGHTBOX
+                    const urlsWithType = fullrecord.map((file: any) => ({
+                        src: file.fileUrl,
+                        downloadUrl: file.fileUrl,
+                    }));
+                    setLightboxUrls(urlsWithType);
+                    setOpenLightbox(true);
+                }}
+            />
+
+                {fullrecord?.length > 1 && <span
+                        style={{
+                            color: "#0895CD",
+                            fontWeight: "bold",
+                            cursor: "pointer",
+                            marginLeft: "4px"
+                        }}
+                        onClick={(event) => {
+                            event.stopPropagation();
+    
+                            if (isDocumentType(fullrecord[0]?.fileUrl)) {
+                                setShowAllFiles(true);
+                            } else {
+                                const urlsWithType = fullrecord.map((file: any) => ({
+                                    src: file.fileUrl,
+                                    downloadUrl: file.fileUrl
+                                }));
+                                setLightboxUrls(urlsWithType);
+                                setOpenLightbox(true);
+                            }
+                        }}
+                    >
+                        +{fullrecord.length - 1}
+                   </span>
+                }
+
+             
+
+            {/* VIEW ALL DIALOG */}
+            <Dialog
+                visible={isShowAllFiles}
+                header="Items Uploaded"
+                modal
+                onHide={() => setShowAllFiles(false)}
+                // style={{ minWidth: 450 }}
+                style={{ width: '32rem' }}
+                onClick={(event) => event.stopPropagation()}
+                breakpoints={{ '591px': '94vw'}}
+            >
+                {fullrecord?.map((file: any) => {
+                    const fileId = `${file.name}-${file.size}`;
+                    return (
+                        <div key={fileId} className="solid-file-upload-wrapper mb-3">
+                            <div className="flex align-items-center gap-2">
+
+                                <FileReaderExt fileDetails={file} />
+
+                                <div className="w-full flex flex-column gap-1">
+                                    <div className="flex align-items-center justify-content-between">
+
+                                        <p
+                                            className="font-normal w-11 text-primary m-0"
+                                            style={{ cursor: "pointer" }}
+                                            onClick={() => handleFileView(file)}
+                                        >
+                                            {file?.name}
+                                        </p>
+
+                                        <Button
+                                            type="button"
+                                            text
+                                            icon="pi pi-download"
+                                            size="small"
+                                            onClick={() => {
+                                                downloadFile(file?.fileUrl, "")
+                                            }}
+                                            style={{ height: 16, width: 16 }}
+                                        />
+                                    </div>
+
+                                    <div className="text-sm">{formatFileSize(file.size)}</div>
+                                </div>
+
+                            </div>
+                        </div>
+                    )
+                }
+                )}
+            </Dialog>
+        </div>
+    ) : (
+        <div style={{ height: 40, width: 40 }} />
+    );
+};

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

@@ -0,0 +1,170 @@
+'use client';
+import React, { useState } from 'react';
+import { Column } from "primereact/column";
+import { SolidListViewColumnParams } from '../SolidListViewColumn';
+import { classNames } from 'primereact/utils';
+import { SolidMediaListFieldWidgetProps } from '../../../../types/solid-core';
+import { getExtensionComponent } from '../../../../helpers/registry';
+
+// Helpers for file type detection
+const isImageFile = (url: string) => /\.(jpg|jpeg|png|gif|bmp|webp)$/i.test(url);
+const isVideoFile = (url: string) => /\.(mp4|webm|ogg)$/i.test(url);
+const isAudioFile = (url: string) => /\.(mp3|wav|ogg)$/i.test(url);
+
+// Extensions that should be downloaded directly
+const downloadOnlyExt = [
+    "txt", "zip", "rar",
+    "doc", "docx",
+    "xls", "xlsx",
+    "ppt", "pptx",
+    "pdf"
+];
+
+// Media component with fallback for broken links
+const MediaWithFallback = ({ src, alt, onClick }: { src: string; alt: string; onClick: (event: React.MouseEvent) => void }) => {
+    const [isBroken, setIsBroken] = useState(false);
+
+    const handleClick = (event: React.MouseEvent) => {
+        event.stopPropagation();
+        const cleanUrl = src.split("?")[0];
+        const ext = cleanUrl.split(".").pop()?.toLowerCase();
+
+        if (ext && downloadOnlyExt.includes(ext)) {
+            // Trigger download for docs/archives
+            const link = document.createElement("a");
+            link.href = src;
+            link.download = "";
+            link.target = "_blank";
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        } else {
+            onClick(event);
+        }
+    };
+
+    if (!isBroken) {
+        if (isImageFile(src)) {
+            return (
+                <img
+                    src={src}
+                    alt={alt}
+                    className="shadow-2 border-round"
+                    width={40}
+                    height={40}
+                    style={{ objectFit: "cover", cursor: "pointer" }}
+                    onError={() => setIsBroken(true)}
+                    onClick={handleClick}
+                />
+            );
+        }
+
+        if (isVideoFile(src)) {
+            return (
+                <video
+                    src={src}
+                    width={40}
+                    height={40}
+                    className="shadow-2 border-round"
+                    style={{ objectFit: "cover", cursor: "pointer" }}
+                    onError={() => setIsBroken(true)}
+                    onClick={handleClick}
+                    muted
+                />
+            );
+        }
+
+        if (isAudioFile(src)) {
+            return (
+                <div
+                    className="shadow-2 border-round flex align-items-center justify-content-center bg-gray-100"
+                    style={{ width: 40, height: 40, cursor: "pointer" }}
+                    onClick={handleClick}
+                >
+                    <i className="pi pi-volume-up text-xl text-gray-600"></i>
+                </div>
+            );
+        }
+    }
+
+    // fallback icon (docs/others)
+    return (
+        <div
+            style={{ width: 40, height: 40, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer" }}
+            onClick={handleClick}
+        >
+            <i className={classNames("pi pi-file", "text-3xl text-gray-400")}></i>
+        </div>
+    );
+};
+
+// Main column renderer
+const SolidMediaSingleColumn = ({ solidListViewMetaData, fieldMetadata, column, setLightboxUrls, setOpenLightbox }: SolidListViewColumnParams) => {
+    const header = column.attrs.label ?? fieldMetadata.displayName;
+
+    return (
+        <Column
+            key={fieldMetadata.name}
+            field={fieldMetadata.name}
+            header={header}
+            body={(rowData) => {
+                let viewWidget = column.attrs.viewWidget;
+                if (!viewWidget) {
+                    viewWidget = 'DefaultMediaSingleListWidget';
+                }
+                let DynamicWidget = getExtensionComponent(viewWidget);
+                const widgetProps: SolidMediaListFieldWidgetProps = {
+                    rowData,
+                    solidListViewMetaData,
+                    fieldMetadata,
+                    column,
+                    setLightboxUrls,
+                    setOpenLightbox
+                }
+                return (
+                    <>
+                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
+                    </>
+                )
+            }}
+            sortable={column.attrs.sortable}
+            showFilterOperator={false}
+            filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
+            style={{ minWidth: "12rem" }}
+            headerClassName="table-header-fs"
+        />
+    );
+};
+
+export default SolidMediaSingleColumn;
+
+// Default widget for single media field
+export const DefaultMediaSingleListWidget = ({
+    rowData,
+    solidListViewMetaData,
+    fieldMetadata,
+    column,
+    setLightboxUrls,
+    setOpenLightbox
+}: SolidMediaListFieldWidgetProps) => {
+    if (!rowData?._media?.[fieldMetadata.name]) return null;
+    const mediaUrls = rowData._media[fieldMetadata.name].map((i: any) => i._full_url);
+
+    const firstUrl = mediaUrls[0];
+    if (!firstUrl) return <div style={{ height: 40, width: 40 }} />;
+
+    return (
+        <MediaWithFallback
+            src={firstUrl}
+            alt="media"
+            onClick={(event) => {
+                // Only open lightbox for image, video, or audio
+                event.stopPropagation()
+                if (isImageFile(firstUrl) || isVideoFile(firstUrl) || isAudioFile(firstUrl)) {
+                    setLightboxUrls([{ src: firstUrl, downloadUrl: firstUrl }]);
+                    setOpenLightbox(true);
+                }
+            }}
+        />
+    );
+};

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

@@ -0,0 +1,21 @@
+'use client';
+import { SolidListViewColumnParams } from '../SolidListViewColumn';
+import SolidRelationManyToManyColumn from './relations/SolidRelationManyToManyColumn';
+import SolidRelationManyToOneColumn from './relations/SolidRelationManyToOneColumn';
+import SolidRelationOneToManyColumn from './relations/SolidRelationOneToManyColumn';
+
+const SolidRelationColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
+    if (fieldMetadata.relationType === 'many-to-one') {
+        return SolidRelationManyToOneColumn({ solidListViewMetaData, fieldMetadata, column });
+    }
+    if (fieldMetadata.relationType === 'one-to-many') {
+        return SolidRelationOneToManyColumn({ solidListViewMetaData, fieldMetadata, column });
+    }
+    if (fieldMetadata.relationType === 'many-to-many') {
+        return SolidRelationManyToManyColumn({ solidListViewMetaData, fieldMetadata, column });
+    }
+    // TODO: Support one-to-many
+    // TODO: Support many-to-many
+};
+
+export default SolidRelationColumn;

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

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

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

@@ -0,0 +1,80 @@
+'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 { getExtensionComponent } from '../../../../helpers/registry';
+import { SolidListFieldWidgetProps } from '../../../../types/solid-core';
+
+const SolidSelectionDynamicColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
+    const filterable = column.attrs.filterable;
+    const showFilterOperator = false;
+    const columnDataType = fieldMetadata.selectionValueType === 'int' ? 'numeric' : '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.SelectionDynamic}
+                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 SolidSelectionDynamicColumn;

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

@@ -0,0 +1,81 @@
+'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 { getExtensionComponent } from '../../../../helpers/registry';
+import { SolidListFieldWidgetProps } from '../../../../types/solid-core';
+
+
+const SolidSelectionStaticColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
+
+    const filterable = column.attrs.filterable;
+    const showFilterOperator = false;
+    const columnDataType = fieldMetadata.selectionValueType === 'int' ? 'numeric' : '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.SelectionStatic}
+                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 SolidSelectionStaticColumn;