@solidstarters/solid-core-ui 1.1.69 → 1.1.71

package/dist/components/layout/Layout.tsx

@@ -0,0 +1,136 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client';
+
+import { ChildContainerProps, LayoutState } from '@/types';
+import { usePathname, useSearchParams } from 'next/navigation';
+import { PrimeReactContext } from 'primereact/api';
+import { useEventListener, useUnmountEffect } from 'primereact/hooks';
+import { classNames } from 'primereact/utils';
+import React, { useContext, useEffect, useRef } from 'react';
+import { useSelector } from 'react-redux';
+import { CustomFooter } from '../CustomFooter/CustomFooter';
+import { CustomHeader } from '../CustomHeader/CustomHeader';
+import AppConfig from './AppConfig';
+import { LayoutContext } from './context/layoutcontext';
+import AppSidebar from './AppSidebar';
+
+export const Layout = ({ children }: ChildContainerProps) => {
+    const { layoutConfig, layoutState, setLayoutState } = useContext(LayoutContext);
+    const { setRipple } = useContext(PrimeReactContext);
+    // const topbarRef = useRef<AppTopbarRef>(null);
+    const sidebarRef = useRef<HTMLDivElement>(null);
+    const [bindMenuOutsideClickListener, unbindMenuOutsideClickListener] = useEventListener({
+        type: 'click',
+        listener: (event) => {
+            const isOutsideClicked = !(
+                sidebarRef.current?.isSameNode(event.target as Node) ||
+                sidebarRef.current?.contains(event.target as Node)
+                // topbarRef.current?.menubutton?.isSameNode(event.target as Node) ||
+                // topbarRef.current?.menubutton?.contains(event.target as Node)
+            );
+
+            if (isOutsideClicked) {
+                hideMenu();
+            }
+        }
+    });
+
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    useEffect(() => {
+        hideMenu();
+        hideProfileMenu();
+    }, [pathname, searchParams]);
+
+    // const [bindProfileMenuOutsideClickListener, unbindProfileMenuOutsideClickListener] = useEventListener({
+    //     type: 'click',
+    //     listener: (event) => {
+    //         const isOutsideClicked = !(
+    //             topbarRef.current?.topbarmenu?.isSameNode(event.target as Node) ||
+    //             topbarRef.current?.topbarmenu?.contains(event.target as Node) ||
+    //             topbarRef.current?.topbarmenubutton?.isSameNode(event.target as Node) ||
+    //             topbarRef.current?.topbarmenubutton?.contains(event.target as Node)
+    //         );
+
+    //         if (isOutsideClicked) {
+    //             hideProfileMenu();
+    //         }
+    //     }
+    // });
+
+    const hideMenu = () => {
+        setLayoutState((prevLayoutState: LayoutState) => ({
+            ...prevLayoutState,
+            overlayMenuActive: false,
+            staticMenuMobileActive: false,
+            menuHoverActive: false
+        }));
+        unbindMenuOutsideClickListener();
+        unblockBodyScroll();
+    };
+
+    const hideProfileMenu = () => {
+        setLayoutState((prevLayoutState: LayoutState) => ({
+            ...prevLayoutState,
+            profileSidebarVisible: false
+        }));
+        // unbindProfileMenuOutsideClickListener();
+    };
+
+    const blockBodyScroll = (): void => {
+        if (document.body.classList) {
+            document.body.classList.add('blocked-scroll');
+        } else {
+            document.body.className += ' blocked-scroll';
+        }
+    };
+
+    const unblockBodyScroll = (): void => {
+        if (document.body.classList) {
+            document.body.classList.remove('blocked-scroll');
+        } else {
+            document.body.className = document.body.className.replace(new RegExp('(^|\\b)' + 'blocked-scroll'.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
+        }
+    };
+
+    useEffect(() => {
+        if (layoutState.overlayMenuActive || layoutState.staticMenuMobileActive) {
+            bindMenuOutsideClickListener();
+        }
+
+        layoutState.staticMenuMobileActive && blockBodyScroll();
+    }, [layoutState.overlayMenuActive, layoutState.staticMenuMobileActive]);
+
+    // useEffect(() => {
+    //     if (layoutState.profileSidebarVisible) {
+    //         bindProfileMenuOutsideClickListener();
+    //     }
+    // }, [layoutState.profileSidebarVisible]);
+
+    useUnmountEffect(() => {
+        unbindMenuOutsideClickListener();
+        // unbindProfileMenuOutsideClickListener();
+    });
+
+    const containerClass = classNames('layout-wrapper', {
+        'layout-overlay-active': layoutState.overlayMenuActive,
+        'layout-mobile-active': layoutState.staticMenuMobileActive,
+        'p-input-filled': layoutConfig.inputStyle === 'filled',
+    });
+    const { visibleNavbar } = useSelector((state:any) => state.navbarState); // Get the visibility state of sidebar-two
+
+    return (
+        <React.Fragment>
+            <div className={containerClass}>
+                {process.env.NEXT_PUBLIC_ENABLE_CUSTOM_HEADER_FOOTER == "true" && <CustomHeader />}
+                <AppSidebar />
+                <div className={`main-content ${visibleNavbar ? "shifted" : ""}`}>
+                    {children}
+                    {process.env.NEXT_PUBLIC_ENABLE_CUSTOM_HEADER_FOOTER == "true" && <CustomFooter />}
+                </div>
+                <AppConfig />
+                <div className="layout-mask"></div>
+            </div>
+        </React.Fragment>
+    );
+};

package/dist/components/layout/ListingHeader.tsx

@@ -0,0 +1,204 @@
+"use client";
+import { Menu } from "primereact/menu";
+import React, { useRef, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+// import { RootState } from "@/redux/store";
+import { gridView, listView } from "@/redux/features/dataViewSlice";
+import { usePathname, useRouter } from 'next/navigation';
+import { HeaderDynamicTitles } from "../common/HeaderDynamicTitles";
+import FilterMenu from "./FilterMenu";
+
+const ListingHeader = () => {
+  const dispatch = useDispatch();
+  const router = useRouter();
+  const pathname = usePathname();
+
+
+  const visibleFieldsPopup = useSelector(
+    (state: any) => state.popup.visibleFieldsPopup
+  );
+
+  const menu = useRef<Menu>(null);
+  const items = [
+    {
+      label: "Settings",
+      icon: "pi pi-cog",
+      command: () => {
+      },
+    },
+    {
+      label: "Update",
+      icon: "pi pi-refresh",
+      command: () => {
+      },
+    },
+    {
+      label: "Delete",
+      icon: "pi pi-trash",
+      command: () => {
+      },
+    },
+  ];
+  const [value, setValue] = useState(null);
+  const contextMenuOptions = [
+    {
+      label: (
+        <div id="kanban" onClick={() => dispatch(gridView())}>
+          <img
+            src="/images/icons/icon-kanban.svg"
+            style={{ width: "18px", height: "18px" }}
+          />
+        </div>
+      ),
+      value: "kanban",
+      tooltip: "Kanban",
+    },
+    {
+      label: (
+        <div id="list_view" onClick={() => dispatch(listView())}>
+          <img
+            src="/images/icons/icon-list.svg"
+            style={{ width: "18px", height: "18px" }}
+          />
+        </div>
+      ),
+      value: "list_view",
+      tooltip: "List view",
+    },
+    {
+      label: (
+        <div id="calender">
+          <img
+            src="/images/icons/icon-calender.svg"
+            style={{ width: "18px", height: "18px" }}
+          />
+        </div>
+      ),
+      value: "calender",
+      tooltip: "Calender",
+    },
+    {
+      label: (
+        <div id="activity">
+          <img
+            src="/images/icons/icon-activity.svg"
+            style={{ width: "18px", height: "18px" }}
+          />
+        </div>
+      ),
+      value: "activity",
+      tooltip: "Activity",
+    },
+    {
+      label: (
+        <div id="graph">
+          <img
+            src="/images/icons/icon-graph.svg"
+            style={{ width: "18px", height: "18px" }}
+          />
+        </div>
+      ),
+      value: "graph",
+      tooltip: "Graph",
+    },
+  ];
+
+  const justifyTemplate = (option: any) => {
+    return <i className={option.icon}></i>;
+  };
+
+
+  const save = () => {
+    const pathName = window.location.pathname;
+    const newPath = pathName.split('/').slice(0, -1).join('/') + '/create';
+
+    router.push(newPath);
+
+
+
+    // switch (pathParts[3]) {
+    //   case "model":
+    //     dispatch(showFieldsPopup());
+    //     break;
+    //   case "module":
+    //     dispatch(showModulePopup());
+    //     break;
+    // }
+  };
+
+  const toggleMenu = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    if (menu.current) {
+      menu.current.toggle(e);
+    }
+  };
+
+
+
+  return (
+    <>
+      <div
+        className="flex justify-content-between align-items-center px-5 relative lg:static"
+        style={{ height: "60px", minHeight: 60, backgroundColor: '#f6f6f9' }}
+      >
+        <div className="flex align-items-center">
+          {/* <i className="pi pi-users" style={{backgroundColor:"#1D6CBC"}}></i> */}
+          {/* <img src="/images/icons/icon-users.svg" />
+                <span className="listHead ml-2">Employees</span> */}
+          <div className="">
+            {/* <SplitButton
+              label="Add"
+              icon="pi pi-plus"
+              onClick={save}
+              model={items}
+              severity="info"
+              className="small-splitbutton"
+            /> */}
+            {pathname.includes('all') &&
+              <HeaderDynamicTitles />
+            }
+          </div>
+        </div>
+        {/* <GlobalSearch /> */}
+        <div className="flex align-items-center">
+
+          {/* <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} /> */}
+
+          <div>
+            {/* <Menu model={items} popup ref={menu} /> */}
+            {pathname == "/admin/address-master/states" &&
+              <FilterMenu></FilterMenu>
+
+            }
+            {/* <Button
+              icon="pi pi-cog"
+              className="transparent-background"
+              onClick={toggleMenu}
+              aria-haspopup
+              aria-controls="popup_menu"
+            /> */}
+          </div>
+        </div>
+        <div className="flex align-items-center">
+          {/* <div>
+            {contextMenuOptions.map((option) => (
+              <Tooltip
+                key={option.value}
+                target={`#${option.value}`}
+                content={option.tooltip}
+                className="custom-tooltip"
+              />
+            ))}
+            <SelectButton
+              value={value}
+              onChange={(e) => setValue(e.value)}
+              options={contextMenuOptions}
+              className="custom-select-button"
+            />
+          </div> */}
+        </div>
+      </div>
+      {/* <CreateModule></CreateModule> */}
+    </>
+  );
+};
+export default ListingHeader;

package/dist/components/layout/Loader.tsx

@@ -0,0 +1,16 @@
+"use client";
+import React from "react";
+
+const Loader = () => {
+  return (
+    <div className="d-flex justify-content-center center-loader">
+      <div className="lds-ellipsis">
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+    </div>
+  );
+};
+
+export default Loader;

package/dist/components/layout/UserSidebar.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useState } from "react";
+
+const UserSidebar = () => {
+  const pathname = usePathname();
+
+  const menuItem = [
+    {
+      name: "Update Profile",
+      url: "/me/update",
+      icon: "fas fa-user",
+    },
+    {
+      name: "Upload Avatar",
+      url: "/me/upload_avatar",
+      icon: "fas fa-user-circle",
+    },
+    {
+      name: "Update Password",
+      url: "/me/update_password",
+      icon: "fas fa-lock",
+    },
+  ];
+
+  const [activeMenuItem, setActiveMenuItem] = useState(pathname);
+
+  const handleMenuItemClick = (menuItem: string) => {
+    setActiveMenuItem(menuItem);
+  };
+
+  return (
+    <div className="list-group mt-5 pl-4">
+      {menuItem.map((menuItem, index) => (
+        <Link
+          key={index}
+          href={menuItem.url}
+          className={`fw-bold list-group-item list-group-item-action ${
+            activeMenuItem === menuItem.url ? "active" : ""
+          }`}
+          onClick={() => handleMenuItemClick(menuItem.url)}
+          aria-current={activeMenuItem === menuItem.url ? "true" : "false"}
+        >
+          <i className={`${menuItem.icon} fa-fw pe-2`}></i> {menuItem.name}
+        </Link>
+      ))}
+    </div>
+  );
+};
+
+export default UserSidebar;

package/dist/components/layout/context/layoutcontext.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ChildContainerProps, LayoutContextProps } from '@/types';
+import { ChildContainerProps, LayoutContextProps } from '../../../types';
 export declare const LayoutContext: React.Context<LayoutContextProps>;
 export declare const LayoutProvider: ({ children }: ChildContainerProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=layoutcontext.d.ts.map

package/dist/components/layout/context/layoutcontext.tsx

@@ -0,0 +1,52 @@
+'use client';
+import React, { useState, createContext } from 'react';
+import { LayoutState, ChildContainerProps, LayoutConfig, LayoutContextProps } from '@/types';
+export const LayoutContext = createContext({} as LayoutContextProps);
+
+export const LayoutProvider = ({ children }: ChildContainerProps) => {
+    const [layoutConfig, setLayoutConfig] = useState<LayoutConfig>({
+        inputStyle: 'outlined',
+        colorScheme: 'light',
+        theme: 'solid-light-purple',
+        scale: 14,
+        authLayout: 'Center'
+    });
+
+    const [layoutState, setLayoutState] = useState<LayoutState>({
+        overlayMenuActive: false,
+        profileSidebarVisible: false,
+        configSidebarVisible: false,
+        staticMenuMobileActive: false,
+        menuHoverActive: false
+    });
+
+    const onMenuToggle = () => {
+
+        if (isDesktop()) {
+            setLayoutState((prevLayoutState:any) => ({ ...prevLayoutState, staticMenuDesktopInactive: !prevLayoutState.staticMenuDesktopInactive }));
+        } else {
+            setLayoutState((prevLayoutState:any) => ({ ...prevLayoutState, staticMenuMobileActive: !prevLayoutState.staticMenuMobileActive }));
+        }
+    };
+
+    const showProfileSidebar = () => {
+        setLayoutState((prevLayoutState:any) => ({ ...prevLayoutState, profileSidebarVisible: !prevLayoutState.profileSidebarVisible }));
+    };
+
+ 
+
+    const isDesktop = () => {
+        return window.innerWidth > 991;
+    };
+
+    const value: LayoutContextProps = {
+        layoutConfig,
+        setLayoutConfig,
+        layoutState,
+        setLayoutState,
+        onMenuToggle,
+        showProfileSidebar
+    };
+
+    return <LayoutContext.Provider value={value}>{children}</LayoutContext.Provider>;
+};