@solidstarters/solid-core-ui 1.1.72 → 1.1.73

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}

package/src/components/layout/AppSidebar.tsx

@@ -188,7 +188,7 @@ const AppSidebar = () => {
                 <div className={`sidebar-right ${visibleNavbar ? "open" : ""}`}>
 
                     <div className="flex relative justify-content-between align-items-center py-4 px-3">
-                        <div className="text-base font-semibold">{currentMainMenu && currentMainMenu}</div>
+                        <div className="text-base sidebar-title font-semibold">{currentMainMenu && currentMainMenu}</div>
                         {/* <button
                             className="sidebar-toggle-button"
                             onClick={handleToggle}
@@ -213,7 +213,7 @@ const AppSidebar = () => {
                             />
                         </div>
                     </div> */}
-                    <div className="px-3">
+                    <div className="px-3 solid-sidebar-menuitems-wrapper">
                         <NavbarTwoMenu menuItems={currentMenu}></NavbarTwoMenu>
                     </div>
                 </div>

package/src/resources/globals.css

@@ -3112,7 +3112,84 @@ flex-shrink: 0; */
 }
 
 .solid-global-search-element input {
-
   min-width: 300px;
+}
+
+.solid-empty-listview-placeholder-container {
+  border-top: 1px solid var(--primary-light-color) !important;
+  height: calc(100vh - 54px);
+  background-color: var(--solid-list-view-placeholder);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+}
+
+.solid-list-skeleton-wrapper {
+  height: calc(100vh - 60px);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.solid-list-skeleton-col-1 {
+  width: 50px;
+}
+
+.solid-list-skeleton-col-2 {
+  width: 120px;
+}
+
+.solid-list-skeleton-col-8 {
+  width: 50px;
+}
+
+.solid-list-skeleton-col-3,
+.solid-list-skeleton-col-4,
+.solid-list-skeleton-col-5,
+.solid-list-skeleton-col-6 {
+  width: auto;
+}
+
+.solid-list-skeleton-header th {
+  border-top: 1px solid #CED0D6;
+  border-bottom: 1px solid #CED0D6;
+  text-align: left;
+  padding: 8px 15px;
+  height: 45px;
+  position: relative;
+}
+
+.solid-list-skeleton-header th::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 60%;
+  width: 0.0625rem;
+  background-color: #D8E2EA
+}
+
+.solid-list-skeleton-row td {
+  border-bottom: 1px solid rgba(216, 226, 234, 0.40);
+  padding: 8px 15px;
+  height: 45px;
+  vertical-align: middle;
+}
 
+.solid-list-skeleton-row td .p-skeleton {
+  height: 1rem;
+  /* Set skeleton height to 0.75rem */
+}
+
+.solid-list-skeleton-footer {
+  border-top: 1px solid rgba(216, 226, 234, 0.40);
+  padding: 20px;
+}
+
+.solid-sidebar-menuitems-wrapper {
+  height: calc(100vh - 64px);
+  overflow-y: auto;
 }

package/src/resources/solid-primereact.css

@@ -1312,7 +1312,7 @@
     }
 
     .p-datatable .p-paginator-bottom {
-        border-width: 1px 0 1px 0;
+        border-width: 1px 0 0 0;
         border-radius: 0;
     }