@solidstarters/solid-core-ui 1.1.47 → 1.1.50

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

@@ -0,0 +1,157 @@
+'use client';
+import { Button } from "primereact/button";
+import { useEffect, useState } from "react";
+import { FileReaderExt } from "@/components/common/FileReaderExt";
+import Link from "next/link";
+import { downloadMediaFile } from "@/helpers/downloadMediaFile";
+import { SolidMediaSingleFieldWidgetProps } from "@/types/solid-core";
+import { Dialog } from "primereact/dialog";
+
+export const SolidFormFieldViewMediaMultipleWidget = ({ formik, fieldContext }: SolidMediaSingleFieldWidgetProps) => {
+    const [fileDetails, setFileDetails] = useState<{ name: string; type: string; size: number, id: number, fileUrl: string }[]>([]);
+    const [isShowAllFiles, setShowAllFiles] = useState(false);
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const className = fieldLayoutInfo.attrs?.className || 'field col-12';
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+
+    useEffect(() => { formik.setFieldValue(fieldLayoutInfo.attrs.name, "false") }, [])
+
+    const formatFileSize = (size: number) => {
+        return size >= 1024 * 1024
+            ? `${(size / (1024 * 1024)).toFixed(1)} MB`
+            : `${(size / 1024).toFixed(1)} KB`;
+    };
+
+    useEffect(() => {
+        const fieldValue = formik?.values[fieldLayoutInfo.attrs.name];
+
+        if (Array.isArray(fieldValue) && fieldValue.length > 0) {
+            const urls: string[] = [];
+            const details: { name: string; type: string; size: number, id: any, fileUrl: string }[] = [];
+            const objectUrls: string[] = [];
+            fieldValue.forEach((file: File | any) => {
+                if (file instanceof File) {
+                    // New file (from local upload)
+                    const fileUrl = URL.createObjectURL(file);
+                    objectUrls.push(fileUrl); // Store URL for cleanup
+                    urls.push(fileUrl);
+
+                    details.push({
+                        name: file.name,
+                        type: file.type,
+                        size: file.size,
+                        id: `${file.name}-${file.size}`,
+                        fileUrl: fileUrl // ✅ Store the generated object URL
+                    });
+                } else if (typeof file === "object" && file._full_url) {
+                    urls.push(file._full_url);
+                    details.push({
+                        name: file.originalFileName,
+                        type: file.mimeType,
+                        size: file.fileSize,
+                        id: file.id,
+                        fileUrl: file._full_url
+                    });
+                }
+            });
+            setFileDetails(details);
+        }
+    }, [formik.values, fieldLayoutInfo.attrs.name]);
+
+    return (
+        <div className={className}>
+            {showFieldLabel != false &&
+                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label mt-4 font-medium">{fieldLabel}
+                </label>
+            }
+            {fileDetails.length > 0 &&
+                <div className="solid-file-view-wrapper">
+                    <div className="flex align-items-center gap-2">
+                        <FileReaderExt fileDetails={fileDetails[0]} />
+                        <div className="w-full flex flex-column gap-1">
+                            <div className="flex align-items-center justify-content-between">
+                                <Link className="font-normal w-11" href={`${fileDetails[0]?.fileUrl}`} target="_blank">{fileDetails[0].name}</Link>
+                                <div className="flex align-items-center gap-2">
+                                    <div>
+                                        <Button
+                                            type="button"
+                                            text
+                                            icon={"pi pi-download"}
+                                            size="small"
+                                            style={{
+                                                height: 16,
+                                                width: 16
+                                            }}
+                                            onClick={() => downloadMediaFile(fileDetails[0]?.fileUrl, fileDetails[0]?.name)}
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="flex align-items-center gap-2 text-sm">
+                                {formatFileSize(fileDetails[0].size)}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            }
+
+            {fileDetails.length > 1 &&
+                <div className="flex align-items-center mt-1">
+                    <p className="m-0">
+                        {fileDetails.length - 1} items
+                    </p>
+                    <div>
+                        <Button type="button" size="small" text label="View" onClick={() => setShowAllFiles(true)} />
+                    </div>
+                </div>
+            }
+
+            <Dialog
+                visible={isShowAllFiles}
+                header="Items Uploaded"
+                modal
+                onHide={() => setShowAllFiles(false)}
+                style={{ minWidth: 450 }}
+            >
+                {fileDetails.length > 1 &&
+                    fileDetails.map((file, index) => {
+                        const fileId = `${file.name}-${file.size}`;
+                        return (
+                            <div key={fileId} className="solid-file-view-wrapper">
+                                <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">
+                                            <Link className="font-normal w-11" href={file?.fileUrl} target="_blank">{file.name}</Link>
+                                            <div className="flex align-items-center gap-2">
+                                                <div>
+                                                    <Button
+                                                        type="button"
+                                                        text
+                                                        icon={"pi pi-download"}
+                                                        size="small"
+                                                        style={{
+                                                            height: 16,
+                                                            width: 16
+                                                        }}
+                                                        onClick={() => downloadMediaFile(file?.fileUrl, file?.name)}
+                                                    />
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div className="flex align-items-center gap-2 text-sm">
+                                            {formatFileSize(file.size)}
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        );
+                    })
+                }
+            </Dialog>
+
+        </div>
+    );
+}

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

@@ -0,0 +1,98 @@
+'use client';
+import { Button } from "primereact/button";
+import { useEffect, useState } from "react";
+import { FileReaderExt } from "@/components/common/FileReaderExt";
+import Link from "next/link";
+import { downloadMediaFile } from "@/helpers/downloadMediaFile";
+import { SolidMediaSingleFieldWidgetProps } from "@/types/solid-core";
+
+export const SolidFormFieldViewMediaSingleWidget = ({ formik, fieldContext }: SolidMediaSingleFieldWidgetProps) => {
+    const [fileDetails, setFileDetails] = useState<{ name: string; type: string, fileUrl: string, fileSize: number } | null>(null);
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const className = fieldLayoutInfo.attrs?.className || 'field col-12';
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+
+    useEffect(() => { formik.setFieldValue(fieldLayoutInfo.attrs.name, "false") }, [])
+
+    const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
+    const formatFileSize = (size: number) => {
+        return size >= 1024 * 1024
+            ? `${(size / (1024 * 1024)).toFixed(1)} MB`
+            : `${(size / 1024).toFixed(1)} KB`;
+    };
+
+    useEffect(() => {
+        const fieldValue = formik?.values[fieldLayoutInfo.attrs.name];
+
+        if (fieldValue && typeof fieldValue === "object") {
+            let fileUrl = "";
+            let fileName = "Unknown File";
+            let fileSize = 0;
+
+            if (fieldValue instanceof File) {
+                fileUrl = URL.createObjectURL(fieldValue);
+                fileName = fieldValue.name;
+                fileSize = fieldValue.size;
+            } else if (fieldValue._full_url) {
+                fileUrl = fieldValue._full_url;
+                fileName = fieldValue.originalFileName;
+                fileSize = fieldValue.fileSize;
+            }
+
+            setFileDetails({
+                name: fileName,
+                type: fieldValue.mimeType,
+                fileUrl,
+                fileSize
+            });
+            // Ensure formik has the correct value
+            formik.setFieldValue(fieldLayoutInfo.attrs.name, fieldValue);
+        }
+    }, [formik.values, fieldLayoutInfo.attrs.name]);
+
+    return (
+        <div className={className}>
+            <div className="flex flex-column gap-2 mt-4 relative">
+                {showFieldLabel != false &&
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label font-medium">{fieldLabel}
+                    </label>
+                }
+
+                {fileDetails && (
+                    <div className="solid-file-view-wrapper mt-4">
+                        <div className="flex align-items-center gap-2">
+                            <FileReaderExt fileDetails={fileDetails} />
+                            <div className="w-full flex flex-column gap-1">
+                                <div className="flex align-items-start justify-content-between">
+                                    <Link className="font-normal w-9 text-primary" href={fileDetails.fileUrl} target="_blank">{fileDetails.name}</Link>
+                                    <div className="flex align-items-center gap-2">
+                                        <div>
+                                            <Button
+                                                type="button"
+                                                text
+                                                icon={"pi pi-download"}
+                                                size="small"
+                                                severity="secondary"
+                                                // className="p-2"
+                                                style={{
+                                                    height: 16,
+                                                    width: 16
+                                                }}
+                                                onClick={() => downloadMediaFile(fileDetails?.fileUrl, fileDetails?.name)}
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                                <div className="flex align-items-center gap-2 text-sm">
+                                    {fileDetails && formatFileSize(fileDetails.fileSize)}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,11 @@
+
+export const SolidFormFieldViewModeWidget = ({ label, value }: any) => {
+
+    return (
+        <div className="mt-2 flex-column gap-2">
+            <p className="m-0 form-field-label font-medium">{label}</p>
+            <p className="m-0">{value}</p>
+        </div>
+    );
+};
+

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

@@ -39,7 +39,7 @@ export const SolidSelectionStaticAutocompleteWidget = ({ formik, fieldContext }:
             <div className="relative">
                 <div className="flex flex-column gap-2 mt-4">
                     {showFieldLabel != false &&
-                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label font-medium">{fieldLabel}
                             {fieldMetadata.required && <span className="text-red-500"> *</span>}
                             {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
                         </label>

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

@@ -36,7 +36,7 @@ export const SolidSelectionStaticRadioWidget = ({ formik, fieldContext }: SolidS
             <div className="relative">
                 <div className="flex flex-column gap-2 mt-4">
                     {showFieldLabel !== false && (
-                        <label htmlFor={fieldName} className="form-field-label">
+                        <label htmlFor={fieldName} className="form-field-label font-medium">
                             {fieldLabel}
                             {fieldMetadata.required && <span className="text-red-500"> *</span>}
                         </label>

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

@@ -26,6 +26,7 @@ import Counter from "yet-another-react-lightbox/plugins/counter";
 import Download from "yet-another-react-lightbox/plugins/download";
 import "yet-another-react-lightbox/styles.css";
 import "yet-another-react-lightbox/plugins/counter.css";
+import { useRouter, useSearchParams } from "next/navigation";
 
 
 
@@ -38,7 +39,8 @@ type SolidKanbanViewParams = {
 
 export const SolidKanbanView = (params: SolidKanbanViewParams) => {
   const solidGlobalSearchElementRef = useRef();
-
+  const searchParams = useSearchParams().toString(); // Converts the query params to a string
+  const router = useRouter();
   // TODO: The initial filter state will be created based on the fields which are present on this kanban view. 
   const [filters, setFilters] = useState<any>();
   const [toPopulate, setToPopulate] = useState<string[]>([]);
@@ -58,9 +60,22 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
   const [triggerCheckIfPermissionExists] = useLazyCheckIfPermissionExistsQuery();
   const [openLightbox, setOpenLightbox] = useState(false);
   const [lightboxUrls, setLightboxUrls] = useState({});
+  const [filterQueryString, setFilterQueryString] = useState<any>();
 
 
 
+    const pushFiltersToRouter = (filterQueryString: any) => {
+      router.push(`?${filterQueryString}`, undefined, { shallow: true });
+    };
+  
+    useEffect(() => {
+      if (filterQueryString) {
+        pushFiltersToRouter(filterQueryString);
+      }
+    }, [filterQueryString]);
+  
+  
+
   useEffect(() => {
     const fetchPermissions = async () => {
       if (params.modelName) {
@@ -286,10 +301,15 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
           // sort: [`id:desc`],
         };
         // fields=status&groupBy=status&fields=count(status)&populateGroup=true
-        const queryString = qs.stringify(queryData, {
+        let queryString = qs.stringify(queryData, {
           encodeValuesOnly: true
         });
-
+        if(searchParams) {
+          queryString = searchParams;
+          setFilterQueryString(searchParams)
+        }else{
+          setFilterQueryString(queryString)
+        }
         triggerGetSolidEntities(queryString);
         setSelectedRecords([]);
       }
@@ -408,7 +428,7 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
       const queryString = qs.stringify(queryData, {
         encodeValuesOnly: true
       });
-
+      setFilterQueryString(queryString);
       const data: any = await triggerGetSolidEntities(queryString);
       const newRecords = data.data.records;
       const currentData = kanbanViewData;
@@ -561,7 +581,7 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
       const queryString = qs.stringify(queryData, {
         encodeValuesOnly: true
       });
-
+      setFilterQueryString(queryString);
       const data: any = await triggerGetSolidEntities(queryString);
       if (data && data?.data?.groupRecords.length > 0) {
         const updatedData = [...kanbanViewData, ...data.data.groupRecords];
@@ -600,6 +620,7 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
       });
 
       // triggerGetSolidEntities(queryString);
+      setFilterQueryString(queryString);
       const data: any = await triggerGetSolidEntities(queryString);
       if (data && data?.data?.groupRecords.length > 0) {
         const updatedData = [...data.data.groupRecords];