@solidstarters/solid-core-ui 1.1.71 → 1.1.73

package/src/components/common/SolidBreadcrumb.tsx

@@ -36,8 +36,10 @@ export const SolidBreadcrumb = (props: Props) => {
 
   useEffect(() => {
     if (segments.length === 6 && segments[4] === "form" && userKeyFieldValue && !queryUserKeyField) {
-      const newUrl = `${pathname}?userKeyField=${encodeURIComponent(userKeyFieldValue)}`;
-      router.replace(newUrl, { scroll: false });
+      const params = new URLSearchParams(searchParams.toString());
+      params.set("userKeyField", userKeyFieldValue);
+      const newUrl = `${pathname}?${params.toString()}`;
+      router.push(newUrl, { scroll: false });
     }
   }, [pathname, userKeyFieldValue, queryUserKeyField, router]);
 
@@ -81,7 +83,7 @@ export const SolidBreadcrumb = (props: Props) => {
 
     if (segments.length === 6 && segments[4] === "form") {
       breadcrumbItems.push({
-        label: queryUserKeyField || segments[5],
+        label: queryUserKeyField ? decodeURIComponent(queryUserKeyField) : segments[5],
       });
     }
   }

package/src/components/core/common/SolidCreateButton.tsx

@@ -1,19 +1,16 @@
 'use client';
 import Link from 'next/link';
-import { usePathname, useRouter } from 'next/navigation';
+import { usePathname } from 'next/navigation';
 import { Button } from 'primereact/button';
 
-export const SolidCreateButton = ({ url }: any) => {
-    const router = useRouter();
+export const SolidCreateButton = ({ url, title }: any) => {
     const pathName = usePathname();
-
     const createPath = url ? url : pathName.split('/').slice(0, -1).join('/') + '/form/new';
 
-
     return (
         <div>
             <Link href={createPath}>
-              <Button type="button" icon="pi pi-plus" label="Add" size='small'></Button>
+                <Button type="button" icon="pi pi-plus" label={`Add ${title ? title : ''}`} size='small'></Button>
             </Link>
         </div>
     )

package/src/components/core/form/SolidFormView.tsx

@@ -353,7 +353,6 @@ const SolidFormView = (params: SolidFormViewProps) => {
     const router = useRouter();
     const toast = useRef<Toast>(null);
     const searchParams = useSearchParams();
-    const viewModeFromURL = searchParams.get("viewMode");
 
     const [redirectToList, setRedirectToList] = useState(false);
 
@@ -372,15 +371,20 @@ const SolidFormView = (params: SolidFormViewProps) => {
     const op = useRef(null);
 
     useEffect(() => {
-        if (viewModeFromURL === "edit" || viewModeFromURL === "view") {
-            setViewMode(viewModeFromURL);
-        } else {
-            setViewMode("view"); // Default to 'view' if not present
-        }
+        const mode = searchParams.get('viewMode');
+
         if (params.id === 'new') {
-            setViewMode("edit");
+            setViewMode('edit');
+            return;
+        }
+
+        // Set the viewMode based on the URL
+        if (mode === 'view' || mode === 'edit') {
+            setViewMode(mode);
+        } else {
+            setViewMode('view'); // Default to 'view' if no valid mode is provided
         }
-    }, [viewModeFromURL]);
+    }, [searchParams, params.id]);
 
 
     // function that updates view mode 

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

@@ -0,0 +1,41 @@
+import { createPermission } from '@/helpers/permissions'
+import { SolidCreateButton } from '../common/SolidCreateButton'
+import Image from 'next/image'
+
+export const SolidEmptyListViewPlaceholder = ({ createButtonUrl, actionsAllowed, params, solidListViewMetaData }: any) => {
+    const noDataText = solidListViewMetaData?.data?.solidView?.layout?.attrs?.listViewNoDataHelperText
+        ?? (process.env.NEXT_PUBLIC_DEFAULT_LIST_VIEW_NODATA_HELPER_TEXT && solidListViewMetaData?.data?.solidView?.displayName
+            ? `${process.env.NEXT_PUBLIC_DEFAULT_LIST_VIEW_NODATA_HELPER_TEXT} ${solidListViewMetaData.data.solidView.displayName}`
+            : null)
+    return (
+        <div className="page-parent-wrapper">
+            <div className="page-header">
+                <p className="m-0 view-title">{solidListViewMetaData?.data?.solidView?.displayName}</p>
+            </div>
+            <div className='solid-empty-listview-placeholder-container'>
+                {process.env.NEXT_PUBLIC_DEFAULT_LIST_VIEW_NODATA_IMAGE &&
+                    <Image
+                        alt={solidListViewMetaData?.data?.solidView?.displayName}
+                        src={process.env.NEXT_PUBLIC_DEFAULT_LIST_VIEW_NODATA_IMAGE}
+                        className='relative'
+                        height={385}
+                        width={617}
+                    />
+                }
+                <div className='text-base font-bold'>
+                    No Data Available.
+                </div>
+                {noDataText &&
+                    <div className='text-sm mt-1'>
+                        {noDataText}
+                    </div>
+                }
+                {actionsAllowed.includes(`${createPermission(params.modelName)}`) && solidListViewMetaData?.data?.solidView?.layout?.attrs?.create !== false && params.embeded !== true &&
+                    <div className='mt-2'>
+                        <SolidCreateButton url={createButtonUrl} title={solidListViewMetaData?.data?.solidView?.displayName} />
+                    </div>
+                }
+            </div>
+        </div>
+    )
+}

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

@@ -43,6 +43,8 @@ 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 { SolidListViewShimmerLoading } from "./SolidListViewShimmerLoading";
+import { SolidEmptyListViewPlaceholder } from "./SolidEmptyListViewPlaceholder";
 
 
 const getRandomInt = (min: number, max: number) => {
@@ -708,6 +710,23 @@ export const SolidListView = (params: SolidListViewParams) => {
     setListViewRowActionPopupState(false)
   }
 
+  if (loading || isLoading) {
+    return <SolidListViewShimmerLoading />;
+  }
+
+  const isListViewEmptyWithoutFilters = !loading && (!filters || Object.keys(filters).length === 0) && listViewData.length === 0;
+
+  if (isListViewEmptyWithoutFilters) {
+    return (
+      <SolidEmptyListViewPlaceholder
+        createButtonUrl={createButtonUrl}
+        actionsAllowed={actionsAllowed}
+        params={params}
+        solidListViewMetaData={solidListViewMetaData}
+      />
+    );
+  }
+
   return (
     <div className="page-parent-wrapper">
       <div className="page-header">
@@ -791,8 +810,9 @@ export const SolidListView = (params: SolidListViewParams) => {
           onSort={(e: DataTableStateEvent) => onSort(e)}
           sortField={sortField}
           sortOrder={sortOrder === 1 || sortOrder === -1 ? sortOrder : 0}
-          loading={loading || isLoading}
-          loadingIcon="pi pi-spinner"
+          loading={false}
+          // loading={loading || isLoading}
+          // loadingIcon="pi pi-spinner"
           selection={[...selectedRecords, ...selectedRecoverRecords]}
           onSelectionChange={onSelectionChange}
           selectionMode="checkbox"
@@ -818,7 +838,7 @@ export const SolidListView = (params: SolidListViewParams) => {
               if (typeof window !== "undefined") {
                 sessionStorage.setItem("fromView", "list");
               }
-              router.push(`${editButtonUrl}/${rowData?.id}`);
+              router.push(`${editButtonUrl}/${rowData?.id}?viewMode=view`);
             }
           }}
         >
@@ -848,7 +868,7 @@ export const SolidListView = (params: SolidListViewParams) => {
                           if (params.embeded == true) {
                             params.handlePopUpOpen(selectedSolidViewData?.id);
                           } else {
-                            router.push(`${editButtonUrl}/${selectedSolidViewData?.id}`)
+                            router.push(`${editButtonUrl}/${selectedSolidViewData?.id}?viewMode=edit`)
                           }
                         }}
                       />

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

@@ -100,6 +100,9 @@ export const SolidListViewColumn = ({ solidListViewMetaData, fieldMetadata, colu
     if (fieldMetadata.type === 'richText') {
         return SolidRichTextColumn({ solidListViewMetaData, fieldMetadata, column });
     }
+    if (fieldMetadata.type === 'email') {
+        return SolidShortTextColumn({ solidListViewMetaData, fieldMetadata, column });
+    }
     if (fieldMetadata.type === 'boolean') {
         return SolidBooleanColumn({ solidListViewMetaData, fieldMetadata, column });
     }

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

@@ -0,0 +1,77 @@
+import { Skeleton } from 'primereact/skeleton'
+import React from 'react'
+
+export const SolidListViewShimmerLoading = () => {
+    const rows = Array.from({ length: 14 });
+    return (
+        <div className='h-screen surface-0'>
+            <div className="page-header">
+                <div className='flex align-items-center gap-3'>
+                    <Skeleton width="50px" className='border-round-lg'></Skeleton>
+                    <Skeleton width="300px" className='border-round-lg'></Skeleton>
+                </div>
+                <div className='flex align-items-center gap-3'>
+                    <Skeleton width="4rem" height="2rem"></Skeleton>
+                    <Skeleton width="4rem" height="2rem"></Skeleton>
+                </div>
+            </div>
+            <div className='solid-list-skeleton-wrapper'>
+                <table className="solid-list-skeleton-table" style={{ borderCollapse: 'collapse', width: '100%' }}>
+                    <thead>
+                        <tr className="solid-list-skeleton-header">
+                            <th className="solid-list-skeleton-col-1">
+                                <Skeleton width="16px" height='16px' className='border-round-xs' />
+                            </th>
+                            <th className="solid-list-skeleton-col-2">
+                                <Skeleton width="70px" className='border-round-lg' />
+                            </th>
+                            <th className="solid-list-skeleton-col-3">
+                                <Skeleton width="90px" className='border-round-lg' />
+                            </th>
+                            <th className="solid-list-skeleton-col-4">
+                                <Skeleton width="80px" className='border-round-lg' />
+                            </th>
+                            <th className="solid-list-skeleton-col-5">
+                                <Skeleton width="90px" className='border-round-lg' />
+                            </th>
+                            <th className="solid-list-skeleton-col-6">
+                                <Skeleton width="100px" className='border-round-lg' />
+                            </th>
+                            <th className="solid-list-skeleton-col-7">
+                                <Skeleton width="30px" className='border-round-lg' />
+                            </th>
+                            <th className="solid-list-skeleton-col-8">
+                                <Skeleton width="30px" className='border-round-lg' />
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {rows.map((_, i) => (
+                            <tr className="solid-list-skeleton-row" key={i}>
+                                <td><Skeleton width="16px" height='16px' className='border-round-xs'/></td>
+                                <td><Skeleton width="50%" /></td>
+                                <td><Skeleton width="50%" /></td>
+                                <td><Skeleton width="50%" /></td>
+                                <td><Skeleton width="50%" /></td>
+                                <td><Skeleton width="50%" /></td>
+                                <td><Skeleton shape="circle" height='15px' width='15px' /></td>
+                                <td><Skeleton width="5px" height='20px' /></td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+                <div className='solid-list-skeleton-footer flex align-items-center justify-content-between'>
+                    <div className='flex align-items-center gap-3'>
+                        <Skeleton width="5rem" height="1rem"></Skeleton>
+                        <Skeleton width="30px" height='15px' className='border-round-sm'></Skeleton>
+                    </div>
+                    <div className='flex align-items-center gap-3'>
+                        <Skeleton width="70px"></Skeleton>
+                        <Skeleton width="10px" height='15px' className='border-round-sm'></Skeleton>
+                        <Skeleton width="15px" height='15px' className='border-round-sm'></Skeleton>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}

package/src/components/core/list/widgets/SolidShortTextAvatarWidget.tsx

@@ -46,7 +46,6 @@ export const SolidShortTextAvatarWidget = ({ rowData, solidListViewMetaData, fie
                         justifyContent: 'center',
                         fontWeight: 600,
                         fontSize: 12,
-                        boxShadow: '0 0 0 2px rgba(0,0,0,0.1)',
                     }}
                 >
                     {initials}