@solidstarters/solid-core-ui 1.1.210 → 1.1.211

package/src/components/core/form/fields/widgets/SolidRelationFieldAvatarFormWidget.tsx

@@ -0,0 +1,50 @@
+"use client";
+import { useEffect, useState } from "react";
+import { Message } from "primereact/message";
+import { classNames } from "primereact/utils";
+import { SelectButton } from "primereact/selectbutton";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+import { RadioButton } from "primereact/radiobutton";
+import { SolidFormFieldWidgetProps } from "../../../../../types/solid-core";
+import { AvatarWidget } from "../../../../../components/core/common/AvatarWidget";
+
+export const SolidRelationFieldAvatarFormWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
+
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const userKeyFieldName = fieldMetadata.relationModel?.userKeyField?.name;
+    const [fieldValue, setFieldValue] = useState<any>([]);
+    useEffect(() => {        
+        let rawValue = fieldContext.data?.[fieldLayoutInfo.attrs.name];
+        let value: any[] = [];
+        if (Array.isArray(rawValue)) {
+            value = rawValue.map((item: any) => ({ label: item?.[userKeyFieldName] ?? '' }));
+        } else if (rawValue && typeof rawValue === "object") {
+            value = [{ label: rawValue[userKeyFieldName] ?? '' }];
+        }
+        if (Array.isArray(value)) {
+
+            if (value.length > 0) {
+                const data = value.map((v: any) => v.label);
+                setFieldValue(data);
+            }
+        }
+        // if (value && !Array.isArray(value) && typeof value === "object") {
+        //     setFieldValue([value.label]);
+        // }
+    }, [fieldContext]);
+
+
+
+    return (
+        <div className="mt-2 flex-column">
+            <p className="m-0 form-field-label font-medium">{fieldLabel}</p>
+            <div className="flex flex-wrap gap-2 mt-2">
+                {fieldValue.map((v: any) => (
+                    <AvatarWidget value={v} />
+                ))}
+            </div>
+        </div>
+    );
+}

package/src/components/core/form/fields/widgets/SolidS3FileViewerWidget.tsx

@@ -0,0 +1,222 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import { SolidFormFieldWidgetProps } from "../../../../../types/solid-core";
+import { Button } from "primereact/button";
+import { Dialog } from "primereact/dialog";
+import { useResolveS3UrlMutation } from "../../../../../redux/api/fieldApi";
+import Viewer from "viewerjs";
+import "viewerjs/dist/viewer.css";
+
+/**
+ * SolidS3FileViewerWidget (PrimeReact version)
+ */
+export const SolidS3FileViewerWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const value = formik.values[fieldLayoutInfo.attrs.name];
+    const fileType = fieldLayoutInfo.attrs.fileType?.toLowerCase();
+    const downloadAllowed = fieldLayoutInfo.attrs.downloadAllowed !== false;
+    const bucketName = fieldLayoutInfo.attrs.bucketName;
+    const mediaStorageProviderUserKey = fieldLayoutInfo.attrs.mediaStorageProviderUserKey;
+    const isPrivate = fieldLayoutInfo.attrs.isPrivate ? fieldLayoutInfo.attrs.isPrivate : "false";
+
+    const imageRef = useRef<HTMLImageElement | null>(null);
+    const viewerRef = useRef<Viewer | null>(null);
+
+    const [previewUrl, setPreviewUrl] = useState<string>("");
+    const [isLoading, setIsLoading] = useState(false);
+    const [open, setOpen] = useState(false);
+    const [shouldShowViewer, setShouldShowViewer] = useState(false);
+
+    const [resolveS3Url] = useResolveS3UrlMutation();
+
+    const fetchS3Url = async () => {
+        console.log("fetch url called");
+        setIsLoading(true);
+        try {
+            const result = await resolveS3Url({
+                modelName: fieldContext.modelName,
+                fieldName: fieldContext.fieldMetadata.name,
+                s3Key: value,
+                fileType: fileType,
+                bucketName: bucketName,
+                mediaStorageProviderUserKey: mediaStorageProviderUserKey,
+                isPrivate: isPrivate
+            }).unwrap();
+
+            setIsLoading(false);
+            if (result.statusCode == "200") {
+                console.log("fetch url success", result.data.url);
+                return result.data.url;
+            }
+        } catch (e) {
+            console.error("Failed to resolve S3 URL:", e);
+            setIsLoading(false);
+            return null;
+        }
+    };
+
+    const handleDownload = async () => {
+        if (isLoading) return;
+        const url = await fetchS3Url();
+        if (!url) return;
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = value?.split("/").pop() || "file";
+        a.target = "_blank";
+        a.rel = "noopener noreferrer";
+        a.click();
+    };
+
+    const handleView = async () => {
+        console.log("isLoading in view", isLoading);
+        if (isLoading) return;
+        
+        const url = await fetchS3Url();
+        console.log("url after fetch success", url);
+        if (!url) return;
+        
+        setPreviewUrl(url);
+        
+        if (isImage) {
+            // Trigger viewer to show after state update
+            setShouldShowViewer(true);
+        } else {
+            setOpen(true);
+        }
+    };
+
+    const isImage = ["jpeg", "jpg", "png", "gif", "webp"].includes(fileType);
+    const isPDF = fileType === "pdf";
+    const isDownloadOnly = ["xlsx", "xls", "csv", "doc", "docx"].includes(fileType);
+
+    // 🔹 Initialize Viewer.js once image exists
+    useEffect(() => {
+        if (imageRef.current && previewUrl && isImage) {
+            // Destroy existing viewer if any
+            if (viewerRef.current) {
+                viewerRef.current.destroy();
+            }
+
+            // Create new viewer instance
+            viewerRef.current = new Viewer(imageRef.current, {
+                toolbar: {
+                    zoomIn: 1,
+                    zoomOut: 1,
+                    rotateLeft: 1,
+                    rotateRight: 1,
+                    reset: 1,
+                },
+                navbar: false,
+                title: false,
+                transition: true,
+                movable: true,
+                scalable: true,
+                rotatable: true,
+                zoomable: true,
+                zIndex:9999,
+                // Add hidden event to reset state
+                hidden: () => {
+                    setShouldShowViewer(false);
+                }
+            });
+
+            console.log("Viewer initialized");
+        }
+
+        return () => {
+            if (viewerRef.current) {
+                viewerRef.current.destroy();
+                viewerRef.current = null;
+            }
+        };
+    }, [previewUrl, isImage]);
+
+    // 🔹 Show viewer when shouldShowViewer becomes true
+    useEffect(() => {
+        if (shouldShowViewer && viewerRef.current) {
+            console.log("Showing viewer");
+            viewerRef.current.show();
+        }
+    }, [shouldShowViewer]);
+
+    return (
+        <div className="mt-2 flex flex-col gap-2">
+            <p className="m-0 form-field-label font-medium">{fieldLabel}</p>
+
+            {value ? (
+                <div className="flex gap-3 items-center">
+                    {(isImage || isPDF) && (
+                        <Button
+                            icon="pi pi-eye"
+                            type="button"
+                            style={{ minWidth: 66 }}
+                            loading={isLoading}
+                            tooltip={value}
+                            disabled={isLoading}
+                            label={`View ${fileType}`}
+                            size="small"
+                            iconPos="left"
+                            onClick={handleView}
+                        />
+                    )}
+                    {downloadAllowed && (
+                        <Button
+                            size="small"
+                            type="button"
+                            icon="pi pi-download"
+                            tooltip={`Download ${value?.split("/").pop()}`}
+                            loading={isLoading}
+                            onClick={handleDownload}
+                            disabled={isLoading}
+                            className='solid-icon-button' />
+                    )}
+                </div>
+            ) : (
+                <p className="text-sm text-muted-foreground">No file uploaded</p>
+            )}
+
+            {/* Hidden image for Viewer.js - keep visibility hidden instead of display none */}
+            {isImage && previewUrl && (
+                <img
+                    ref={imageRef}
+                    src={previewUrl}
+                    alt={value}
+                    style={{ 
+                        position: "absolute",
+                        visibility: "hidden",
+                        width: "1px",
+                        height: "1px"
+                    }}
+                />
+            )}
+
+            <Dialog
+                header={value}
+                visible={open}
+                modal
+                style={{ width: "80vw", maxHeight: "90vh" }}
+                onHide={() => setOpen(false)}
+                headerClassName='p-1 form-wrapper-title'
+                contentClassName='p-0'
+                contentStyle={{ borderRadius: 6 }}
+            >
+                {previewUrl && isPDF && (
+                    <div
+                        style={{
+                            width: "100%",
+                            height: "75vh",
+                            overflow: "hidden",
+                        }}
+                    >
+                        <iframe
+                            src={previewUrl}
+                            style={{ width: "100%", height: "100%", border: "none" }}
+                        />
+                    </div>
+                )}
+            </Dialog>
+        </div>
+    );
+};

package/src/components/core/form/fields/widgets/SolidShortTextFieldAvatarWidget.tsx

@@ -0,0 +1,70 @@
+"use client";
+import { useEffect, useState } from "react";
+import { Message } from "primereact/message";
+import { classNames } from "primereact/utils";
+import { SelectButton } from "primereact/selectbutton";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+import { RadioButton } from "primereact/radiobutton";
+import { SolidFormFieldWidgetProps } from "../../../../../types/solid-core";
+import { AvatarWidget } from "../../../../../components/core/common/AvatarWidget";
+
+export const SolidShortTextFieldAvatarWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const value = formik.values[fieldLayoutInfo.attrs.name];
+    const getInitials = (value: string) => {
+        if (value) {
+            const names = value?.trim().split(' ');
+            const initials =
+                names.length === 1
+                    ? names[0][0]
+                    : names[0][0] + names[names.length - 1][0];
+            return initials.toUpperCase();
+        } else {
+            return ""
+        }
+    };
+
+    const getColorFromInitials = (initials: string) => {
+        let hash = 0;
+        for (let i = 0; i < initials.length; i++) {
+            hash = initials.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        const hue = Math.abs(hash) % 360;
+        return `hsl(${hue}, 60%, 60%)`; // nice pastel color
+    };
+
+    const initials = getInitials(value);
+    const bgColor = getColorFromInitials(initials);
+
+
+    return (
+        <div className="mt-2 flex-column gap-2">
+            <p className="m-0 form-field-label font-medium">{fieldLabel}</p>
+            <div>
+                {value &&
+                    < div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                        <div
+                            style={{
+                                width: 20,
+                                height: 20,
+                                borderRadius: '50%',
+                                backgroundColor: bgColor,
+                                color: 'white',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                fontWeight: 600,
+                                fontSize: 12,
+                            }}
+                        >
+                            {initials}
+                        </div>
+                        <span>{value}</span>
+                    </div>
+                }
+            </div>
+        </div>
+    );
+}

package/src/components/core/form/widgets/CustomHtml.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { SolidFormWidgetProps } from "../../../../types";
+import parse from 'html-react-parser';
+// import Handlebars from "handlebars/dist/handlebars";
+import * as Handlebars from "handlebars";
+
+export const CustomHtml = ({ field, formData, viewMetadata, fieldsMetadata }: SolidFormWidgetProps) => {
+    let { type, attrs, body, children } = field;
+    
+    // TODO: null check on this field required, show a proper error message on the UI suggesting that you are using a CustomHtml widget, however the html is not specified in the layout.
+    const html = attrs.html;
+
+    // TODO: run dompurify to avoid XSS attacks...
+
+    // TODO: assume the html is a handlebars template, we try to do variable replacement on it using formData.
+    const template = Handlebars.compile(html);
+
+    return (<div className={attrs.className}>{parse(template(formData))}</div>)
+}

package/src/components/core/kanban/KanbanBoard.tsx

@@ -0,0 +1,150 @@
+// @ts-nocheck
+'use client'
+
+import React, { useState, useEffect } from "react";
+import { DragDropContext, DropResult } from "@hello-pangea/dnd";
+import axios from "axios";
+import KanbanColumn from "./KanbanColumn";
+import { Button } from "primereact/button";
+
+// Define types for groupData and Grouped Data
+interface Post {
+    id: string;
+    title: string;
+    status: string;
+}
+
+interface GroupData {
+    count: number;
+    records: Post[];
+}
+
+interface ApiResponse {
+    data: {
+        groupedData: Record<string, GroupData>;
+    };
+}
+
+export const KanbanBoard = ({ groupByFieldName, groupedView, kanbanViewData, maxSwimLanesCount, solidKanbanViewMetaData, setKanbanViewData, handleLoadMore, onDragEnd, handleSwimLanePagination, setLightboxUrls, setOpenLightbox, editButtonUrl }: any) => {
+    const [loading, setLoading] = useState<boolean>(true);
+    // State to manage the folded status of each column
+    const [foldedStates, setFoldedStates] = useState<Record<string, boolean>>({});
+
+    // Fetch data from the API
+    // useEffect(() => {
+    //     const fetchData = async (): Promise<void> => {
+    //         try {
+    //             setLoading(true);
+    //             // const response = await axios.get<ApiResponse>(
+    //             //     "http://localhost:3000/api/blog/group-kanban/status",
+    //             //     {
+    //             //         headers: { accept: "*/*" },
+    //             //     }
+    //             // );
+    //             // setGroupedData(response.data.data.groupedData);
+    //             setGroupedData({});
+    //         } catch (error) {
+    //             console.error("Error fetching data:", error);
+    //         } finally {
+    //             setLoading(false);
+    //         }
+    //     };
+
+    //     fetchData();
+    // }, []);
+
+    // if (loading) {
+    //     return <div>Loading...</div>;
+    // }
+
+
+
+
+    // Toggle fold (not yet implemented)
+    const toggleFold = (status: string): void => {
+        setFoldedStates((prevFoldedStates) => ({
+            ...prevFoldedStates,
+            [status]: !prevFoldedStates[status],
+        }));
+    };
+
+    // Render the Kanban board
+    return (
+        //@ts-ignore
+        <div className="solid-kanban-board-wrapper">
+            <DragDropContext onDragEnd={onDragEnd}>
+                <div className="flex gap-4 px-4 md:px-5 py-3 md:py-4 solid-kanban-board-scroll-context">
+                    {/* {Object.entries(kanbanViewData).map(([groupVal, data]) => {
+                    const group = {
+                        label: groupVal,
+                        count: data.count,
+                        folded: foldedStates[groupVal] || false,
+                    };
+
+                    return (
+                        <KanbanColumn
+                            key={groupVal}
+                            groupByField={groupVal}
+                            group={group}
+                            groupData={data.records}
+                            toggleFold={toggleFold}
+                            handleLoadMore={handleLoadMore}
+                        />
+                    );
+                })} */}
+                    {kanbanViewData.map((data) => {
+                        // Find the displayName for the groupName from solidKanbanViewMetaData.solidFieldsMetadata
+                        let label = data.groupName;
+                        const fieldMeta = solidKanbanViewMetaData?.solidFieldsMetadata?.[groupByFieldName];
+                        if (
+                            fieldMeta &&
+                            fieldMeta.type === "selectionStatic" &&
+                            Array.isArray(fieldMeta.selectionStaticValues)
+                        ) {
+                            const match = fieldMeta.selectionStaticValues.find(
+                                (v: string) => {
+                                    const [value, displayName] = v.split(":");
+                                    return value === data.groupName;
+                                }
+                            );
+                            if (match) {
+                                label = match.split(":")[1];
+                            }
+                        }
+
+                        const group = {
+                            label,
+                            count: data.groupData.meta.totalRecords,
+                            limit: data.groupData.meta.perPage,
+                            currentPage: data.groupData.meta.currentPage,
+                            folded: foldedStates[data.groupName] || false,
+                        };
+
+                        return (
+                            <KanbanColumn
+                                key={data.groupName}
+                                groupedView={groupedView}
+                                groupByField={data.groupName}
+                                group={group}
+                                solidKanbanViewMetaData={solidKanbanViewMetaData}
+                                groupData={data.groupData.records}
+                                toggleFold={toggleFold}
+                                handleLoadMore={handleLoadMore}
+                                setLightboxUrls={setLightboxUrls}
+                                setOpenLightbox={setOpenLightbox}
+                                editButtonUrl={editButtonUrl}
+                            />
+                        );
+                    })}
+                    {groupedView !== false && kanbanViewData.length < maxSwimLanesCount &&
+                        <div>
+                            <a size="small" className="kaban-swimlane-load-more" style={{ textWrap: 'nowrap' }} text onClick={handleSwimLanePagination}>Load More...({maxSwimLanesCount - kanbanViewData.length})</a>
+                        </div>
+                    }
+                </div>
+            </DragDropContext>
+        </div>
+    );
+}
+
+export default KanbanBoard;