@solidstarters/solid-core-ui 1.1.57 → 1.1.58

package/src/components/core/form/fields/SolidMediaSingleField.tsx

@@ -19,9 +19,13 @@ import { getExtensionComponent } from "@/helpers/registry";
 export class SolidMediaSingleField implements ISolidField {
 
     private fieldContext: SolidFieldProps;
-
-    constructor(fieldContext: SolidFieldProps) {
+    private setLightboxUrls?: (urls: { src: string; downloadUrl: string }[]) => void;
+    private setOpenLightbox?: (open: boolean) => void;
+    constructor(fieldContext: SolidFieldProps, setLightboxUrls?: (urls: { src: string; downloadUrl: string }[]) => void,
+        setOpenLightbox?: (open: boolean) => void) {
         this.fieldContext = fieldContext;
+        this.setLightboxUrls = setLightboxUrls;
+        this.setOpenLightbox = setOpenLightbox;
     }
 
     updateFormData(value: any, formData: FormData): any {
@@ -217,6 +221,25 @@ export class SolidMediaSingleField implements ISolidField {
         const widgetProps = {
             formik: formik,
             fieldContext: this.fieldContext,
+            setLightboxUrls: this.setLightboxUrls,
+            setOpenLightbox: this.setOpenLightbox
+        }
+
+        const handleFileView = (url: any) => {
+            if (url?.type.includes('image/')) {
+                this.setLightboxUrls?.([
+                    { src: url.fileUrl, downloadUrl: url.fileUrl },
+                ]);
+                this.setOpenLightbox?.(true);
+            } else {
+                const link = document.createElement('a');
+                link.href = url.fileUrl;
+                link.download = ''; // or specify a file name like 'file.pdf'
+                link.target = '_blank';
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+            }
         }
 
         return (
@@ -262,7 +285,7 @@ export class SolidMediaSingleField implements ISolidField {
                                         <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>
+                                                <p className="font-normal w-9 text-primary m-0" style={{ cursor: 'pointer' }} onClick={() => handleFileView(fileDetails)}>{fileDetails.name}</p>
                                                 <div className="flex align-items-center gap-2">
                                                     <div>
                                                         <Button

package/src/components/core/form/fields/relations/SolidRelationOneToManyField.tsx

@@ -144,12 +144,18 @@ export class SolidRelationOneToManyField implements ISolidField {
 
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
         const viewMode: string = this.fieldContext.viewMode;
+
+        const userKeyFieldName = fieldMetadata.relationModel?.userKeyField?.name;
+
         let DynamicWidget = getExtensionComponent("SolidFormFieldRelationViewModeWidget");
         const widgetProps = {
             label: fieldLabel,
-            value: formik.values[fieldLayoutInfo.attrs.name],
+            value: (this.fieldContext.data[fieldLayoutInfo.attrs.name] || []).map(
+                (item: any) => ({ label: item[userKeyFieldName] ?? '' })
+            )
         }
 
+
         return (
             <>
                 {viewMode === "view" &&

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

@@ -7,7 +7,7 @@ import { downloadMediaFile } from "@/helpers/downloadMediaFile";
 import { SolidMediaSingleFieldWidgetProps } from "@/types/solid-core";
 import { Dialog } from "primereact/dialog";
 
-export const SolidFormFieldViewMediaMultipleWidget = ({ formik, fieldContext }: SolidMediaSingleFieldWidgetProps) => {
+export const SolidFormFieldViewMediaMultipleWidget = ({ formik, fieldContext, setLightboxUrls, setOpenLightbox }: SolidMediaSingleFieldWidgetProps) => {
     const [fileDetails, setFileDetails] = useState<{ name: string; type: string; size: number, id: number, fileUrl: string }[]>([]);
     const [isShowAllFiles, setShowAllFiles] = useState(false);
     const fieldMetadata = fieldContext.fieldMetadata;
@@ -60,6 +60,23 @@ export const SolidFormFieldViewMediaMultipleWidget = ({ formik, fieldContext }:
         }
     }, [formik.values, fieldLayoutInfo.attrs.name]);
 
+    const handleFileView = (url: any) => {
+        if (url?.type.includes('image/')) {
+            setLightboxUrls?.([
+                { src: url.fileUrl, downloadUrl: url.fileUrl },
+            ]);
+            setOpenLightbox?.(true);
+        } else {
+            const link = document.createElement('a');
+            link.href = url.fileUrl;
+            link.download = ''; // or specify a file name like 'file.pdf'
+            link.target = '_blank';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+    }
+
     return (
         <div className={className}>
             {showFieldLabel != false &&
@@ -72,7 +89,7 @@ export const SolidFormFieldViewMediaMultipleWidget = ({ formik, fieldContext }:
                         <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>
+                                <p className="font-normal w-11 text-primary m-0" style={{ cursor: 'pointer' }} onClick={() => handleFileView(fileDetails[0])}>{fileDetails[0].name}</p>
                                 <div className="flex align-items-center gap-2">
                                     <div>
                                         <Button
@@ -124,7 +141,7 @@ export const SolidFormFieldViewMediaMultipleWidget = ({ formik, fieldContext }:
                                     <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>
+                                            <p className="font-normal w-11" style={{ cursor: 'pointer' }} onClick={() => handleFileView(file)}>{file.name}</p>
                                             <div className="flex align-items-center gap-2">
                                                 <div>
                                                     <Button

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

@@ -6,7 +6,7 @@ import Link from "next/link";
 import { downloadMediaFile } from "@/helpers/downloadMediaFile";
 import { SolidMediaSingleFieldWidgetProps } from "@/types/solid-core";
 
-export const SolidFormFieldViewMediaSingleWidget = ({ formik, fieldContext }: SolidMediaSingleFieldWidgetProps) => {
+export const SolidFormFieldViewMediaSingleWidget = ({ formik, fieldContext, setLightboxUrls, setOpenLightbox }: SolidMediaSingleFieldWidgetProps) => {
     const [fileDetails, setFileDetails] = useState<{ name: string; type: string, fileUrl: string, fileSize: number } | null>(null);
     const fieldMetadata = fieldContext.fieldMetadata;
     const fieldLayoutInfo = fieldContext.field;
@@ -52,6 +52,23 @@ export const SolidFormFieldViewMediaSingleWidget = ({ formik, fieldContext }: So
         }
     }, [formik.values, fieldLayoutInfo.attrs.name]);
 
+    const handleFileView = (url: any) => {
+        if (url?.type.includes('image/')) {
+            setLightboxUrls?.([
+                { src: url.fileUrl, downloadUrl: url.fileUrl },
+            ]);
+            setOpenLightbox?.(true);
+        } else {
+            const link = document.createElement('a');
+            link.href = url.fileUrl;
+            link.download = ''; // or specify a file name like 'file.pdf'
+            link.target = '_blank';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+    }
+
     return (
         <div className={className}>
             <div className="flex flex-column gap-2 mt-4 relative">
@@ -66,7 +83,7 @@ export const SolidFormFieldViewMediaSingleWidget = ({ formik, fieldContext }: So
                             <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>
+                                    <p className="font-normal w-9 text-primary m-0" style={{ cursor: 'pointer' }} onClick={() => handleFileView(fileDetails)}>{fileDetails.name}</p>
                                     <div className="flex align-items-center gap-2">
                                         <div>
                                             <Button

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

@@ -11,7 +11,6 @@ import { Toast } from "primereact/toast";
 
 export const KanbanUserViewLayout = ({ solidKanbanViewMetaData, setLayoutDialogVisible }: any) => {
     const toast = useRef<Toast>(null);
-    const { user } = useSelector((state: any) => state.auth);
     const entityApi = createSolidEntityApi("userViewMetadata");
     const { useUpsertSolidEntityMutation } = entityApi;
     const [upsertUserView] = useUpsertSolidEntityMutation();
@@ -40,7 +39,6 @@ export const KanbanUserViewLayout = ({ solidKanbanViewMetaData, setLayoutDialogV
             try {
                 if (solidView.id) {
                     const response = await upsertUserView({
-                        userId: user?.user?.id,
                         viewMetadataId: solidView.id,
                         layout: JSON.stringify(parsedLayout),
                     }).unwrap();

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

@@ -29,7 +29,6 @@ import "yet-another-react-lightbox/plugins/counter.css";
 import { useRouter, useSearchParams } from "next/navigation";
 import { SolidKanbanViewConfigure } from "./SolidKanbanViewConfigure";
 import { KanbanUserViewLayout } from "./KanbanUserViewLayout";
-import { useSelector } from "react-redux";
 
 
 
@@ -41,7 +40,6 @@ type SolidKanbanViewParams = {
 
 
 export const SolidKanbanView = (params: SolidKanbanViewParams) => {
-  const { user } = useSelector((state: any) => state.auth);
   const solidGlobalSearchElementRef = useRef();
   const searchParams = useSearchParams().toString(); // Converts the query params to a string
   const router = useRouter();
@@ -121,7 +119,7 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
   } = entityApi;
 
   // Get the kanban view layout & metadata first. 
-  const kanbanViewMetaDataQs = qs.stringify({ ...params, viewType: 'kanban', userId: user?.user?.id }, {
+  const kanbanViewMetaDataQs = qs.stringify({ ...params, viewType: 'kanban' }, {
     encodeValuesOnly: true,
   });
   const [kanbanViewMetaData, setKanbanViewMetaData] = useState<any>({});

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

@@ -71,7 +71,7 @@ export const SolidKanbanViewConfigure = ({ solidKanbanViewMetaData, actionsAllow
                         <Button
                             text
                             type="button"
-                            className="w-8rem text-left gap-2 purple-200"
+                            className="w-8rem text-left text-base gap-2 purple-200"
                             label="Layout"
                             size="small"
                             iconPos="left"

package/src/components/core/list/SolidListColumnSelector.tsx

@@ -4,7 +4,6 @@ import { Button } from 'primereact/button';
 import { Checkbox, CheckboxChangeEvent } from 'primereact/checkbox';
 import React, { useEffect, useRef, useState } from 'react'
 import qs from "qs";
-import { useSelector } from 'react-redux';
 import { createSolidEntityApi } from '@/redux/api/solidEntityApi';
 import { Toast } from "primereact/toast";
 
@@ -20,7 +19,6 @@ interface FilterColumns {
 export const SolidListColumnSelector = ({ listViewMetaData }: any) => {
     const toast = useRef<Toast>(null);
 
-    const { user } = useSelector((state: any) => state.auth);
     const entityApi = createSolidEntityApi('userViewMetadata');
     const {
         useUpsertSolidEntityMutation
@@ -104,7 +102,6 @@ export const SolidListColumnSelector = ({ listViewMetaData }: any) => {
                 if (listViewMetaData?.data?.solidView?.id) {
                     // Update existing user view
                     const response = await upsertUserView({
-                        userId: user?.user?.id,
                         viewMetadataId: listViewMetaData?.data?.solidView?.id,
                         layout: JSON.stringify(updatedView.layout),
                     }).unwrap();

package/src/components/core/list/SolidListView.tsx

@@ -43,7 +43,6 @@ 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 { SolidListViewConfigure } from "./SolidListViewConfigure";
-import { useSelector } from "react-redux";
 
 
 const getRandomInt = (min: number, max: number) => {
@@ -92,8 +91,6 @@ type SolidListViewParams = {
 export const SolidListView = (params: SolidListViewParams) => {
 
   const solidGlobalSearchElementRef = useRef();
-  const { user } = useSelector((state: any) => state.auth);
-
 
   const router = useRouter()
   const searchParams = useSearchParams().toString(); // Converts the query params to a string
@@ -150,7 +147,7 @@ export const SolidListView = (params: SolidListViewParams) => {
   } = entityApi;
 
   // Get the list view layout & metadata first. 
-  const listViewMetaDataQs = qs.stringify({ modelName: params.modelName, moduleName: params.moduleName, viewType: 'list', userId: user?.user?.id }, {
+  const listViewMetaDataQs = qs.stringify({ modelName: params.modelName, moduleName: params.moduleName, viewType: 'list'}, {
     encodeValuesOnly: true,
   });
   const [listViewMetaData, setListViewMetaData] = useState({});

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

@@ -21,11 +21,11 @@ const MediaWithFallback = ({ src, alt, onClick }: { src: string; alt: string; on
                     width={40}
                     height={40}
                     style={{ objectFit: "cover" }}
-                    onError={() => setIsBroken(true)} // Handle broken image
+                    onError={() => setIsBroken(true)}
                     onClick={onClick}
                 />
             ) : (
-                <i className={classNames(isImageFile(src) ? "pi pi-image" : "pi pi-file", "text-3xl text-gray-400")}></i> // Image or file icon
+                <i className={classNames(isImageFile(src) ? "pi pi-image" : "pi pi-file", "text-3xl text-gray-400")}></i>
             )}
         </div>
     );
@@ -50,7 +50,10 @@ const SolidMediaSingleColumn = ({ solidListViewMetaData, fieldMetadata, column,
                     }}
                 />
             ) : (
-                <i className="pi pi-image text-3xl text-gray-400"></i> // Default fallback icon
+                <div
+                    style={{ height: 40, width: 40 }}
+                >
+                </div>
             )
         );
     };

package/src/types/solid-core.d.ts

@@ -120,10 +120,12 @@ export type SolidSelectionStaticFieldWidgetProps = {
 };
 
 export type SolidShortTextImageRenderModeWidgetProps = {
-data: string;
+    data: string;
 }
 
 export type SolidMediaSingleFieldWidgetProps = {
     formik: any;
     fieldContext?: SolidFieldProps;
+    setLightboxUrls?: any,
+    setOpenLightbox?: any
 };