@solidstarters/solid-core-ui 1.1.72 → 1.1.74

package/dist/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/dist/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;
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidstarters/solid-core-ui",
-  "version": "1.1.72",
+  "version": "1.1.74",
   "scripts": {
     "prebuild": "npm run copy-resources && npm run copy-styles",
     "build": "tsc && tsc-alias",

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/SolidFormActionHeader.tsx

@@ -0,0 +1,216 @@
+import { BackButton } from "@/components/common/BackButton";
+import { SolidCancelButton } from "@/components/common/CancelButton";
+import { SolidFormHeader } from "@/components/common/SolidFormHeader";
+import { createPermission, deletePermission, updatePermission } from "@/helpers/permissions";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { Button } from "primereact/button";
+import { OverlayPanel } from "primereact/overlaypanel";
+import { useRef } from "react";
+
+export const SolidFormActionHeader = ({ formik, params, actionsAllowed, formViewLayout, solidView, solidFormViewMetaData, initialEntityData, setDeleteDialogVisible, setLayoutDialogVisible, setRedirectToList, viewMode, setViewMode }: any) => {
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const op = useRef(null);
+
+    const createHeaderTitle = `Create ${solidView.model.displayName}`;
+    const editHeaderTitle = `Edit ${solidView.model.displayName}`;
+
+    const updateViewMode = (newMode: "view" | "edit") => {
+        setViewMode(newMode);
+        const params = new URLSearchParams(searchParams.toString());
+        params.set("viewMode", newMode);
+        router.push(`${pathname}?${params.toString()}`, { scroll: false });
+    };
+    const FormActionDropdown = () => {
+        return (
+            <div>
+                <Button
+                    outlined
+                    severity="secondary"
+                    type="button"
+                    icon={'pi pi-cog'}
+                    size="small"
+                    className="surface-card p-0"
+                    style={{
+                        height: 33.06,
+                        width: 33.06
+                    }}
+                    onClick={(e) =>
+                        // @ts-ignore 
+                        op.current.toggle(e)
+                    }
+                />
+                <OverlayPanel ref={op} className="solid-custom-overlay">
+                    <div className="flex flex-column gap-1 p-1">
+                        {/* <Button
+                            text
+                            type="button"
+                            className="w-8rem text-left gap-2 text-color"
+                            label="Duplicate"
+                            size="small"
+                            iconPos="left"
+                            icon={<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                                <path d="M6 11.9997C5.63333 11.9997 5.31944 11.8691 5.05833 11.608C4.79722 11.3469 4.66667 11.033 4.66667 10.6663V2.66634C4.66667 2.29967 4.79722 1.98579 5.05833 1.72467C5.31944 1.46356 5.63333 1.33301 6 1.33301H12C12.3667 1.33301 12.6806 1.46356 12.9417 1.72467C13.2028 1.98579 13.3333 2.29967 13.3333 2.66634V10.6663C13.3333 11.033 13.2028 11.3469 12.9417 11.608C12.6806 11.8691 12.3667 11.9997 12 11.9997H6ZM6 10.6663H12V2.66634H6V10.6663ZM3.33333 14.6663C2.96667 14.6663 2.65278 14.5358 2.39167 14.2747C2.13056 14.0136 2 13.6997 2 13.333V3.99967H3.33333V13.333H10.6667V14.6663H3.33333Z" fill="black" fill-opacity="0.88" />
+                            </svg>}
+                        /> */}
+                        {params.embeded !== true &&
+                            params.id !== "new" &&
+                            actionsAllowed.includes(`${deletePermission(params.modelName)}`) &&
+                            !formViewLayout.attrs.readonly &&
+                            <Button
+                                text
+                                type="button"
+                                className="w-8rem text-left gap-2"
+                                label="Delete"
+                                size="small"
+                                iconPos="left"
+                                severity="danger"
+                                icon={'pi pi-trash'}
+                                onClick={() => setDeleteDialogVisible(true)}
+                            />
+                        }
+                        <Button
+                            text
+                            type="button"
+                            className="w-8rem text-left gap-2 purple-200"
+                            label="Layout"
+                            size="small"
+                            iconPos="left"
+                            severity="contrast"
+                            icon={'pi pi-objects-column'}
+                            onClick={() => setLayoutDialogVisible(true)}
+                        />
+                    </div>
+                </OverlayPanel>
+            </div>
+        )
+    }
+
+    return (
+        <>
+            <div className="solid-form-header">
+                {params.id === "new" ? (
+                    <>
+                        <div className="flex align-items-center gap-3">
+                            {params.embeded !== true && <BackButton />}
+                            <div className="form-wrapper-title"> {createHeaderTitle}</div>
+                        </div>
+                        <div className="gap-3 flex">
+                            {params.embeded !== true &&
+                                actionsAllowed.includes(`${createPermission(params.modelName)}`) &&
+                                !formViewLayout.attrs.readonly &&
+                                formik.dirty &&
+                                <div>
+                                    <Button
+                                        label="Save"
+                                        size="small"
+                                        type="submit"
+                                    />
+                                </div>
+                            }
+                            {params.embeded == true &&
+                                actionsAllowed.includes(`${createPermission(params.modelName)}`) &&
+                                !formViewLayout.attrs.readonly &&
+                                formik.dirty &&
+                                <div>
+                                    <Button
+                                        label="Save"
+                                        size="small"
+                                        onClick={() => {
+                                            setRedirectToList(false);
+                                        }}
+                                        type="submit"
+                                    />
+                                </div>
+                            }
+                            {params.embeded == true &&
+                                <Button outlined size="small" type="button" label="Close" onClick={() => params.handlePopupClose()} className='bg-primary-reverse' />
+
+                            }
+                            {params.embeded !== true &&
+                                <SolidCancelButton />
+                            }
+                            <FormActionDropdown />
+                        </div>
+                    </>
+                ) : (
+                    <>
+                        <div className="flex align-items-center gap-3">
+                            {params.embeded !== true && <BackButton />}
+                            <div className="form-wrapper-title"> {editHeaderTitle}</div>
+                        </div>
+                        <div className="gap-3 flex">
+                            {params.embeded !== true && viewMode === "view" &&
+                                <div>
+                                    <Button
+                                        label="Edit"
+                                        size="small"
+                                        onClick={() => updateViewMode("edit")}
+                                        type="button"
+                                    />
+                                </div>
+                            }
+
+                            {params.embeded !== true &&
+                                actionsAllowed.includes(`${updatePermission(params.modelName)}`) &&
+                                !formViewLayout.attrs.readonly &&
+                                formik.dirty &&
+                                <div>
+                                    <Button
+                                        label="Save"
+                                        size="small"
+                                        type="submit"
+                                    />
+                                </div>
+                            }
+
+                            {/* Inline */}
+                            {params.embeded == true &&
+                                actionsAllowed.includes(`${updatePermission(params.modelName)}`) &&
+                                !formViewLayout.attrs.readonly &&
+                                formik.dirty &&
+                                <div>
+                                    <Button
+                                        label="Save"
+                                        size="small"
+                                        type="submit"
+                                    />
+                                </div>
+                            }
+                            {params.embeded == true &&
+                                actionsAllowed.includes(`${deletePermission(params.modelName)}`) &&
+                                !formViewLayout.attrs.readonly &&
+                                <div>
+                                    <Button
+                                        size="small"
+                                        type="button"
+                                        label="Delete"
+                                        severity="danger"
+                                        onClick={() => setDeleteDialogVisible(true)}
+                                    />
+                                </div>
+                            }
+                            {params.embeded == true &&
+                                <Button outlined size="small" type="button" label="Close" onClick={() => params.handlePopupClose()} className='bg-primary-reverse' />
+
+                            }
+                            {params.embeded !== true &&
+                                <SolidCancelButton />
+                            }
+                            <FormActionDropdown />
+                        </div>
+                    </>
+                )}
+            </div>
+            {params.embeded !== true &&
+                <SolidFormHeader
+                    solidFormViewMetaData={solidFormViewMetaData}
+                    initialEntityData={initialEntityData}
+                    modelName={params.modelName}
+                    id={params.id}
+                />
+            }
+        </>
+    )
+}