@solidxai/core-ui 0.1.1 → 0.1.2

package/src/components/core/users/UserListView.tsx

@@ -1,376 +0,0 @@
-
-import { useDeleteMultipleUsersMutation, useLazyGetusersQuery } from '../../../redux/api/userApi';
-import Link from "../../common/Link";
-import { FilterMatchMode } from "primereact/api";
-import { Button } from "primereact/button";
-import { Column } from "primereact/column";
-import {
-    DataTable,
-    DataTableFilterMeta,
-    DataTableStateEvent,
-} from "primereact/datatable";
-import { useEffect, useRef, useState } from "react";
-
-import { CreateButton } from "../../../components/common/CreateButton";
-import { FetchBaseQueryError } from "@reduxjs/toolkit/query";
-import { Dialog } from "primereact/dialog";
-import { Toast } from "primereact/toast";
-import qs from "qs";
-import { ERROR_MESSAGES } from '../../../constants/error-messages';
-
-interface Users {
-    id: string;
-    fullName: string;
-    username: string;
-    email: string;
-    mobile: string;
-    // roles: string[];
-}
-
-interface ErrorResponseData {
-    message: string;
-    statusCode: number;
-    error: string;
-}
-
-export const UserListView = () => {
-    const toast = useRef<Toast>(null);
-    const [users, setUsers] = useState<Users[]>([]);
-    const [filters, setFilters] = useState<DataTableFilterMeta>({
-        fullName: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
-        username: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
-        email: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
-        mobile: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
-        // "roles.name": { value: null, matchMode: FilterMatchMode.STARTS_WITH },
-    });
-    const [first, setFirst] = useState(0);
-    const [rows, setRows] = useState(25);
-    const [totalRecords, setTotalRecords] = useState(0);
-    const [sortField, setSortField] = useState("");
-    const [sortOrder, setSortOrder] = useState(0);
-    const [selectedUsers, setSelectedUsers] = useState<Users[]>([]);
-    const [loading, setLoading] = useState<boolean>(true);
-    const [isDialogVisible, setDialogVisible] = useState(false);
-    const [triggerGetUser, { data: user, isLoading, error, isError }] = useLazyGetusersQuery();
-
-    const [
-        deleteManyUser,
-        {
-            isLoading: isUserDeleted,
-            isSuccess: isDeleteUserSuceess,
-            isError: isUserDeleteError,
-            error: UserDeleteError,
-            data: DeletedUser,
-        },
-    ] = useDeleteMultipleUsersMutation();
-
-
-    useEffect(() => {
-        if (user) {
-            setUsers(user?.data.records);
-            setTotalRecords(user?.data.meta?.totalRecords);
-            setLoading(false);
-        }
-    }, [user]);
-
-    // const initFilters = () => {
-    //     setFilters(defaultFilters);
-    //     setGlobalFilterValue('');
-    // };
-
-    // const clearFilter = () => {
-    //     initFilters();
-    // };
-
-    useEffect(() => {
-        const queryData = {
-            offset: 0,
-            limit: 25,
-            populate: ['roles']
-        };
-        const queryString = qs.stringify(queryData, {
-            encodeValuesOnly: true
-        });
-        triggerGetUser(queryString);
-        setSelectedUsers([]);
-    }, [isDeleteUserSuceess]);
-
-    useEffect(() => {
-        if (isError || isUserDeleteError) {
-            setLoading(false);
-            let errorMessage = ERROR_MESSAGES.ERROR_OCCURED;
-
-            const errorToast = isError ? error : UserDeleteError;
-
-            if (isFetchBaseQueryErrorWithErrorResponse(errorToast)) {
-                errorMessage = `${errorToast.data.message}`;
-            } else {
-                errorMessage = ERROR_MESSAGES.SOMETHING_WRONG;
-            }
-
-            toast.current?.show({
-                severity: 'error',
-                summary: ERROR_MESSAGES.ERROR,
-                detail: errorMessage,
-                life: 3000,
-                //@ts-ignore
-                content: (props) => (
-                    <div
-                        className="flex flex-column align-items-left"
-                        style={{ flex: "1" }}
-                    >
-                        <div className="flex align-items-center gap-2" >
-                            <span className="font-bold text-900">{errorMessage}</span>
-                        </div>
-                    </div>
-                ),
-            });
-        }
-    }, [isError, isUserDeleteError]);
-
-    function isFetchBaseQueryErrorWithErrorResponse(error: any): error is FetchBaseQueryError & { data: ErrorResponseData } {
-        return error && typeof error === 'object' && 'data' in error && 'message' in error.data;
-    }
-
-    const onPageChange = (event: any) => {
-        setFirst(event.first);
-        setRows(event.rows);
-        setQueryString(event.first, event.rows, sortField, sortOrder, filters);
-    };
-
-    const onSort = (event: DataTableStateEvent) => {
-        const { sortField, sortOrder } = event;
-        const validSortOrder = sortOrder === 1 || sortOrder === -1 ? sortOrder : 0;
-        setSortField(sortField);
-        setSortOrder(validSortOrder);
-        setFirst(0);
-        setQueryString(
-            0,
-            rows,
-            sortField,
-            sortOrder === 1 || sortOrder === -1 ? sortOrder : 0,
-            filters
-        );
-    };
-
-    const onSelectionChange = (event: any) => {
-        const value = event.value;
-        setSelectedUsers(value);
-    };
-
-    // Filter fuctions
-    const setQueryString = async (
-        offset?: number,
-        row?: number,
-        field?: string,
-        order?: number,
-        filterQuery?: any
-    ) => {
-
-        const formattedFilters: any = {};
-
-        Object.keys(filterQuery).forEach((field) => {
-            const filterValue = filterQuery[field].value;
-            const matchMode = filterQuery[field].matchMode;
-
-            if (filterValue !== null && filterValue !== undefined) {
-                let operator = matchMode;
-                switch (matchMode) {
-                    case FilterMatchMode.CONTAINS:
-                        operator = "$containsi";
-                        break;
-                    case FilterMatchMode.STARTS_WITH:
-                        operator = "$startsWithi";
-                        break;
-                    case FilterMatchMode.EQUALS:
-                        operator = "$eqi";
-                        break;
-                    case FilterMatchMode.NOT_CONTAINS:
-                        operator = "$notContainsi";
-                        break;
-                    case FilterMatchMode.NOT_EQUALS:
-                        operator = "$nei";
-                        break;
-                    case FilterMatchMode.ENDS_WITH:
-                        operator = "$endsWithi";
-                        break;
-                    default:
-                        operator = matchMode;
-                }
-
-                if (field.includes(".")) {
-                    const fieldParts = field.split(".");
-                    if (!formattedFilters[fieldParts[0]]) {
-                        formattedFilters[fieldParts[0]] = {};
-                    }
-                    formattedFilters[fieldParts[0]][fieldParts[1]] = { [operator]: filterValue };
-                } else {
-                    formattedFilters[field] = { [operator]: filterValue };
-                }
-            }
-        });
-
-        const queryData: any = {
-            offset: offset ?? first,
-            limit: row ?? rows,
-            populate: ['roles'],
-            filters: formattedFilters,
-        };
-
-        if (field) {
-            queryData.sort = [
-                `${field}:${order == 0 ? null : order == 1 ? "asc" : "desc"}`,
-            ];
-        }
-
-        const queryString = qs.stringify(queryData, {
-            encodeValuesOnly: true,
-        });
-
-        triggerGetUser(queryString);
-    };
-
-    const onFilter = (e: any) => {
-        setFilters(e.filters);
-        setQueryString(
-            0,
-            rows,
-            sortField,
-            sortOrder === 1 || sortOrder === -1 ? sortOrder : 0,
-            e.filters
-        );
-    };
-
-    const detailsBodyTemplate = (product: Users) => {
-        return (
-            <Link
-                href={`${product.id}`}
-                rel="noopener noreferrer"
-                className="text-sm font-bold p-0"
-                style={{ color: "#12415D" }}
-            >
-                <i className="pi pi-pencil" style={{ fontSize: "1rem" }}></i>
-            </Link>
-        );
-    };
-
-    const deleteBulk = () => {
-        let deleteList: any = [];
-        selectedUsers.forEach((element: Users) => {
-            deleteList.push(element.id);
-        });
-        deleteManyUser(deleteList);
-        setDialogVisible(false);
-    };
-
-    const onDeleteClose = () => {
-        setDialogVisible(false);
-        setSelectedUsers([]);
-    }
-
-    return (
-        <div className="">
-            <Toast ref={toast} />
-            <div className="flex gap-3 mb-4">
-                <CreateButton />
-                {selectedUsers.length > 0 && <Button
-                    type="button"
-                    label="Delete"
-                    size="small"
-                    onClick={() => setDialogVisible(true)}
-                    className="small-button"
-                    severity="danger"
-                />}
-            </div>
-            <style>{`
-        .p-datatable .p-datatable-loading-overlay {
-        background-color: rgba(0, 0, 0, 0.0);
-        }
-        `}</style>
-            <DataTable
-                value={users}
-                lazy
-                tableStyle={{ minWidth: "60rem", margin: "auto" }}
-                size="small"
-                paginator
-                rows={rows}
-                rowsPerPageOptions={[10, 25, 50]}
-                dataKey="id"
-                filters={filters}
-                emptyMessage="No users found"
-                onFilter={onFilter}
-                filterDisplay="row"
-                totalRecords={totalRecords}
-                first={first}
-                onPage={onPageChange}
-                onSort={(e: DataTableStateEvent) => onSort(e)}
-                sortField={sortField}
-                sortOrder={sortOrder === 1 || sortOrder === -1 ? sortOrder : 0}
-                loading={loading || isLoading}
-                loadingIcon="pi pi-spinner"
-                selection={selectedUsers}
-                onSelectionChange={onSelectionChange}
-                selectionMode="multiple"
-                removableSort
-            >
-                <Column selectionMode="multiple" headerStyle={{ width: "3em" }} />
-                <Column field="id" header="ID" className="text-sm" sortable headerClassName="table-header-fs"></Column>
-                <Column
-                    field="fullName"
-                    header="Full Name"
-                    className="text-sm"
-                    sortable
-                    filter
-                    filterPlaceholder="Search user by full name"
-                    style={{ minWidth: "12rem" }}
-                    headerClassName="table-header-fs"
-                ></Column>
-                <Column
-                    field="username"
-                    header="Username"
-                    className="text-sm"
-                    sortable
-                    filter
-                    filterPlaceholder="Search user by username"
-                    style={{ minWidth: "12rem" }}
-                    headerClassName="table-header-fs"
-                ></Column>
-                <Column
-                    field="email"
-                    header="Email"
-                    className="text-sm"
-                    sortable
-                    filter
-                    filterPlaceholder="Search user by email"
-                    style={{ minWidth: "12rem" }}
-                    headerClassName="table-header-fs"
-                ></Column>
-                {/* <Column
-                    field="roles.name"
-                    header="Roles"
-                    className="text-sm"
-                    filter
-                    filterPlaceholder="Search category by parent category"
-                    style={{ minWidth: "12rem" }}
-                    headerClassName="table-header-fs"
-                ></Column> */}
-                <Column body={detailsBodyTemplate}></Column>
-            </DataTable>
-            <Dialog
-                visible={isDialogVisible}
-                header="Confirm Delete"
-                modal
-                className="solid-confirm-dialog"
-                footer={() => (
-                    <div className="flex justify-content-center">
-                        <Button label="Yes" icon="pi pi-check" className='small-button' severity="danger" autoFocus onClick={deleteBulk} />
-                        <Button label="No" icon="pi pi-times" className='small-button' onClick={onDeleteClose} />
-                    </div>
-                )}
-                onHide={() => setDialogVisible(false)}
-            >
-                <p>Are you sure you want to delete the selected Users?</p>
-            </Dialog>
-        </div>
-    );
-};

package/src/components/layout/AdminLayout.tsx

@@ -1,55 +0,0 @@
-import { handleError } from "../../helpers/ToastContainer";
-import { signOut } from "../../adapters/auth/index";
-import { useSession } from "../../hooks/useSession";
-import { useRouter } from "../../hooks/useRouter";
-import { useEffect, useState } from "react";
-import { Layout } from "./Layout";
-import { Dialog } from "primereact/dialog";
-import { Divider } from "primereact/divider";
-import SolidChangeForcePassword from "../auth/SolidChangeForcePassword";
-import { ERROR_MESSAGES } from "../../constants/error-messages";
-
-export const AdminLayout = ({ children }: { children: React.ReactNode }) => {
-    // const theme = useSelector((state: any) => state.theme.mode);
-    const { data: session, status } = useSession();
-    const [isForcePasswordChange, setIsForcePasswordChange] = useState(false)
-    useEffect(() => {
-        if (session?.user?.forcePasswordChange === true) {
-            setIsForcePasswordChange(true)
-        } else {
-            setIsForcePasswordChange(false)
-        }
-    }, [session])
-    // const pathname = usePathname();
-    const router = useRouter();
-    useEffect(() => {
-        if (status === "loading") return;
-        if (!session || session?.error === "RefreshAccessTokenError") {
-            handleError([ERROR_MESSAGES.SESSION_EXPIRED])
-            signOut({ callbackUrl: "/auth/login" });
-        }
-
-    }, [session, status])
-
-    return (
-        <Layout>
-            {/* <div className={`${getEnv("NEXT_PUBLIC_ENABLE_CUSTOM_HEADER_FOOTER") == "true" && 'header-margin-top'}`} style={{ minHeight: `${getEnv("NEXT_PUBLIC_ENABLE_CUSTOM_HEADER_FOOTER") == "true" ? 'calc(100vh - 70px)' : 'calc(100vh)'}` }}> */}
-
-            {/* <div className="min-h-full max-h-full flex flex-column relative flex-auto overflow-x-auto"> */}
-            {/* <DashboardHeader /> */}
-            {/* <SolidListingHeader></SolidListingHeader> */}
-            {/* {pathname.includes('all') && <ListingHeader />} */}
-            {/* <div className="flex flex-column flex-auto" style={{ backgroundColor: '#f6f6f9', padding: '1.5rem 1.5rem 1.5rem', }}> */}
-            {children}
-            {/* </div> */}
-            {/* </div> */}
-            {/* </div> */}
-            {isForcePasswordChange &&
-                <Dialog header="Change Default Password" className="solid-change-dialog" visible={isForcePasswordChange} closable={false} draggable={false} style={{ width: '25vw' }} onHide={() => setIsForcePasswordChange(false)}>
-                    <Divider className="mt-0" />
-                    <SolidChangeForcePassword />
-                </Dialog>
-            }
-        </Layout>
-    )
-}

package/src/components/layout/AdminSidebar.tsx

@@ -1,64 +0,0 @@
-
-
-import Link from "../common/Link";
-import { usePathname } from "../../hooks/usePathname";
-import { useState } from "react";
-
-const AdminSidebar = () => {
-  const pathname = usePathname();
-
-  const menuItem = [
-    {
-      name: "Dashboard",
-      url: "/admin/dashboard",
-      icon: "fas fa-tachometer-alt",
-    },
-    {
-      name: "Rooms",
-      url: "/admin/rooms",
-      icon: "fas fa-hotel",
-    },
-    {
-      name: "Bookings",
-      url: "/admin/bookings",
-      icon: "fas fa-receipt",
-    },
-    {
-      name: "Users",
-      url: "/admin/users",
-      icon: "fas fa-user",
-    },
-    {
-      name: "Reviews",
-      url: "/admin/reviews",
-      icon: "fas fa-star",
-    },
-  ];
-
-  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.includes(menuItem.url) ? "active" : ""
-            }`}
-          onClick={() => handleMenuItemClick(menuItem.url)}
-          aria-current={
-            activeMenuItem.includes(menuItem.url) ? "true" : "false"
-          }
-        >
-          <i className={`${menuItem.icon} fa-fw pe-2`}></i> {menuItem.name}
-        </Link>
-      ))}
-    </div>
-  );
-};
-
-export default AdminSidebar;

package/src/components/layout/AppConfig.tsx

@@ -1,104 +0,0 @@
-
-
-import { AppConfigProps, LayoutConfig, LayoutState } from '../../types';
-import { PrimeReactContext } from 'primereact/api';
-import { Button } from 'primereact/button';
-import { RadioButton, RadioButtonChangeEvent } from 'primereact/radiobutton';
-import { Sidebar } from 'primereact/sidebar';
-import { classNames } from 'primereact/utils';
-import { useContext, useEffect, useState } from 'react';
-import { LayoutContext } from './context/layoutcontext';
-
-const AppConfig = (props: AppConfigProps) => {
-    const [scales] = useState([12, 13, 14, 15, 16]);
-    const { layoutConfig, setLayoutConfig, layoutState, setLayoutState } = useContext(LayoutContext);
-    const { changeTheme } = useContext(PrimeReactContext);
-
-    const onConfigButtonClick = () => {
-        setLayoutState((prevState: LayoutState) => ({ ...prevState, configSidebarVisible: true }));
-    };
-
-    const onConfigSidebarHide = () => {
-        setLayoutState((prevState: LayoutState) => ({ ...prevState, configSidebarVisible: false }));
-    };
-
-    const changeInputStyle = (e: RadioButtonChangeEvent) => {
-        setLayoutConfig((prevState: LayoutConfig) => ({ ...prevState, inputStyle: e.value }));
-    };
-
-    const _changeTheme = (theme: string, colorScheme: string) => {
-        changeTheme?.(layoutConfig.theme, theme, 'theme-css', () => {
-            setLayoutConfig((prevState: LayoutConfig) => ({ ...prevState, theme, colorScheme }));
-        });
-    };
-
-    const decrementScale = () => {
-        setLayoutConfig((prevState: LayoutConfig) => ({ ...prevState, scale: prevState.scale - 1 }));
-    };
-
-    const incrementScale = () => {
-        setLayoutConfig((prevState: LayoutConfig) => ({ ...prevState, scale: prevState.scale + 1 }));
-    };
-
-    const applyScale = () => {
-        // document.documentElement.style.fontSize = layoutConfig.scale + 'px';
-        document.documentElement.style.fontSize = 15 + 'px';
-    };
-
-    useEffect(() => {
-        applyScale();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [layoutConfig.scale]);
-
-    return (
-        <>
-            {/* <button className="layout-config-button config-link" type="button" onClick={onConfigButtonClick}>
-                <i className="pi pi-cog"></i>
-            </button>
-
-            <Sidebar visible={layoutState.configSidebarVisible} onHide={onConfigSidebarHide} position="right" className="layout-config-sidebar w-20rem">
-                {!props.simple && (
-                    <>
-                        <h5>Scale</h5>
-                        <div className="flex align-items-center">
-                            <Button icon="pi pi-minus" type="button" onClick={decrementScale} rounded text className="w-2rem h-2rem mr-2" disabled={layoutConfig.scale === scales[0]}></Button>
-                            <div className="flex gap-2 align-items-center">
-                                {scales.map((item) => {
-                                    return <i className={classNames('pi pi-circle-fill', { 'text-primary-500': item === layoutConfig.scale, 'text-300': item !== layoutConfig.scale })} key={item}></i>;
-                                })}
-                            </div>
-                            <Button icon="pi pi-plus" type="button" onClick={incrementScale} rounded text className="w-2rem h-2rem ml-2" disabled={layoutConfig.scale === scales[scales.length - 1]}></Button>
-                        </div>
-
-                        <h5>Input Style</h5>
-                        <div className="flex">
-                            <div className="field-radiobutton flex-1">
-                                <RadioButton name="inputStyle" value={'outlined'} checked={layoutConfig.inputStyle === 'outlined'} onChange={(e) => changeInputStyle(e)} inputId="outlined_input"></RadioButton>
-                                <label htmlFor="outlined_input">Outlined</label>
-                            </div>
-                            <div className="field-radiobutton flex-1">
-                                <RadioButton name="inputStyle" value={'filled'} checked={layoutConfig.inputStyle === 'filled'} onChange={(e) => changeInputStyle(e)} inputId="filled_input"></RadioButton>
-                                <label htmlFor="filled_input">Filled</label>
-                            </div>
-                        </div>
-                    </>
-                )}
-                <h5>Appearance</h5>
-                <div className="grid">
-                    <div className="col-3">
-                        <button className="p-link w-2rem h-2rem" onClick={() => _changeTheme('solid-light-purple', 'light')}>
-                            <img src="/images/layout/images/themes/lara-light-blue.png" className="w-2rem h-2rem" alt="Lara Light Blue" />
-                        </button>
-                    </div>
-                    <div className="col-3">
-                        <button className="p-link w-2rem h-2rem" onClick={() => _changeTheme('solid-dark-purple', 'dark')}>
-                            <img src="/images/layout/images/themes/lara-dark-blue.png" className="w-2rem h-2rem" alt="Lara Dark Cyan" />
-                        </button>
-                    </div>
-                </div>
-            </Sidebar> */}
-        </>
-    );
-};
-
-export default AppConfig;