@rnaga/wp-next-admin 1.0.1

package/client/components/contents/users/Edit/Roles/ActionLink.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { useServerActions } from "@rnaga/wp-next-core/client/hooks/use-server-actions";
+import { AdminLink } from "../../../../../components/utils/link";
+import { useAdminNavigation } from "../../../../../hooks/use-admin-navigation";
+import { useAdminUser } from "../../../../../hooks/use-admin-user";
+import { useWPAdmin } from "../../../../../wp-admin";
+import { RoleEditContext } from "./context";
+import { Typography } from "@rnaga/wp-next-ui/Typography";
+export const ActionLink = (props) => {
+    const { blog, blogIndex } = props;
+    const { overlay, site } = useWPAdmin();
+    const { adminUser: currentUser } = useAdminUser();
+    const { actions, parse } = useServerActions();
+    const { refresh } = useAdminNavigation();
+    const { userId, setSelectedBlogIndex } = useContext(RoleEditContext);
+    const availableSites = currentUser.availableSites;
+    const currentBlog = !site.isMultiSite
+        ? availableSites.primary_blog
+        : availableSites.sites
+            ?.flatMap((site) => site.blogs)
+            .find((currentBlog) => currentBlog?.blog_id == blog?.blog_id);
+    const handleEdit = (index) => () => {
+        setSelectedBlogIndex(index);
+    };
+    const handleSuperAdminRole = (blog, remove) => () => {
+        if (!userId) {
+            return;
+        }
+        overlay.confirm.open(_jsxs(_Fragment, { children: ["You are about to ", remove ? "remove" : "grant", " ", _jsx(Typography, { bold: true, size: "large", component: "span", children: "Super Admin" }), " ", "access to", " ", _jsx(Typography, { bold: true, size: "large", component: "span", children: blog.blogname })] }), async (confirm) => {
+            if (!confirm) {
+                return;
+            }
+            await overlay.circular.promise(actions.user
+                .updateSuperAdmin(userId, {
+                blogId: blog.blog_id,
+                remove,
+            })
+                .then(parse));
+            //refreshRoleTab();
+            refresh(["content"]);
+        });
+    };
+    const handleRemoveRoles = (blog) => async () => {
+        if (!blog.blog_id || !userId) {
+            return;
+        }
+        await overlay.circular.promise(actions.user
+            .updateRole(userId, [], { blogId: blog.blog_id })
+            .then(parse));
+        //refreshRoleTab();
+        refresh(["content"]);
+    };
+    const hasRoles = (roleNames) => roleNames && roleNames.some((roleName) => roleName !== "superadmin");
+    const hasSuperAdminRole = (roleNames) => roleNames && roleNames.some((roleName) => roleName == "superadmin");
+    // In multisite, user can't edit own role except superadmin
+    if (site.isMultiSite &&
+        currentUser.ID == userId &&
+        !currentBlog?.rolenames?.includes("superadmin")) {
+        return null;
+    }
+    return (_jsxs(Typography, { children: [_jsx(AdminLink, { onClick: handleEdit(blogIndex), children: "Edit" }), " ", hasRoles(blog.rolenames) && (_jsx(AdminLink, { color: "error", onClick: handleRemoveRoles(blog), children: "Remove Roles" })), " ", currentBlog?.rolenames?.includes("superadmin") && (_jsxs(_Fragment, { children: [" ", hasSuperAdminRole(blog.rolenames) ? (_jsx(AdminLink, { color: "error", onClick: handleSuperAdminRole(blog, true), children: "Remove Super Admin" })) : (_jsx(AdminLink, { onClick: handleSuperAdminRole(blog, false), children: "Grant Super Admin" }))] }))] }));
+};

package/client/components/contents/users/Edit/Roles/Add.d.ts

@@ -0,0 +1,5 @@
+import type * as wpCoreTypes from "@rnaga/wp-next-core/types";
+export declare const Add: (props: {
+    blogs: wpCoreTypes.actions.RoleEditableBlogs;
+}) => import("react/jsx-runtime").JSX.Element | "Loading.." | null;
+//# sourceMappingURL=Add.d.ts.map

package/client/components/contents/users/Edit/Roles/Add.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Add.d.ts","sourceRoot":"","sources":["../../../../../../../src/client/components/contents/users/Edit/Roles/Add.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,KAAK,WAAW,MAAM,2BAA2B,CAAC;AAK9D,eAAO,MAAM,GAAG,GAAI,OAAO;IACzB,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC,iBAAiB,CAAC;CAC9C,iEAwGA,CAAC"}

package/client/components/contents/users/Edit/Roles/Add.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import CancelIcon from "@mui/icons-material/Cancel";
+import { useAdminServerActions } from "../../../../../hooks/use-admin-server-actions";
+import { useWPAdmin } from "../../../../../wp-admin";
+import { Edit } from "./Edit";
+import { Box, IconButton, Tooltip } from "@mui/material";
+import { Select } from "@rnaga/wp-next-ui/Select";
+import { Button } from "@rnaga/wp-next-ui/Button";
+export const Add = (props) => {
+    const { blogs } = props;
+    const { overlay } = useWPAdmin();
+    const { actions, parse } = useAdminServerActions();
+    const [show, setShow] = useState(false);
+    const [selectedBlog, setSelectedBlog] = useState();
+    const [roleAdditiveBlogs, setRoleAdditiveBlogs] = useState();
+    useEffect(() => {
+        const blogIds = blogs.map((blog) => blog.blog_id);
+        actions.adminUser.getRoleAdditiveBlogs(blogIds).then((response) => {
+            const [blogs] = parse(response);
+            setRoleAdditiveBlogs(blogs);
+        });
+    }, [show, blogs]);
+    const handleAddNewButton = () => {
+        setShow(true);
+    };
+    const handelSelected = (blogId) => {
+        for (const blog of roleAdditiveBlogs ?? []) {
+            if (blog?.blog_id === blogId) {
+                setSelectedBlog(blog);
+                break;
+            }
+        }
+    };
+    const handleCancelEdit = () => {
+        setSelectedBlog(undefined);
+        setShow(false);
+    };
+    if (!show) {
+        if (roleAdditiveBlogs && roleAdditiveBlogs.length > 0) {
+            return (_jsx(Button, { size: "medium", onClick: handleAddNewButton, children: "Add New Role" }));
+        }
+        return null;
+    }
+    if (!roleAdditiveBlogs) {
+        return "Loading..";
+    }
+    if (1 >= roleAdditiveBlogs.length) {
+        return (_jsxs(_Fragment, { children: [roleAdditiveBlogs[0]?.blogname, _jsx(Edit, { show: true, blogId: roleAdditiveBlogs[0].blog_id, roles: roleAdditiveBlogs[0].blog_roles, onCancelEdit: handleCancelEdit })] }));
+    }
+    if (selectedBlog) {
+        return (_jsxs(_Fragment, { children: [selectedBlog.blogname, _jsx(Edit, { show: true, blogId: selectedBlog.blog_id, roles: selectedBlog.blog_roles, onCancelEdit: handleCancelEdit })] }));
+    }
+    return (_jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [_jsx(Select, { size: "medium", label: "Select Blog", enum: roleAdditiveBlogs.map((blog) => ({
+                    label: blog.blogname,
+                    value: blog.blog_id,
+                })), onChange: (v) => handelSelected(parseInt(`${v}`)), sx: {
+                    minWidth: 300,
+                } }), _jsx(Tooltip, { title: "Cancel", placement: "top", children: _jsx(IconButton, { color: "error", size: "small", onClick: handleCancelEdit, children: _jsx(CancelIcon, {}) }) })] }));
+};

package/client/components/contents/users/Edit/Roles/Edit.d.ts

@@ -0,0 +1,8 @@
+import type * as wpTypes from "@rnaga/wp-node/types";
+export declare const Edit: (props: {
+    blogId: number | undefined;
+    roles: Record<string, wpTypes.Role>;
+    show: boolean;
+    onCancelEdit: (...args: any) => any;
+}) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Edit.d.ts.map

package/client/components/contents/users/Edit/Roles/Edit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Edit.d.ts","sourceRoot":"","sources":["../../../../../../../src/client/components/contents/users/Edit/Roles/Edit.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,OAAO,MAAM,sBAAsB,CAAC;AAarD,eAAO,MAAM,IAAI,GAAI,OAAO;IAC1B,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;IACpC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;CACrC,mDAoFA,CAAC"}

package/client/components/contents/users/Edit/Roles/Edit.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useState } from "react";
+import CancelIcon from "@mui/icons-material/Cancel";
+import DoneIcon from "@mui/icons-material/Done";
+import { Box, IconButton, Tooltip } from "@mui/material";
+import { useServerActions } from "@rnaga/wp-next-core/client/hooks/use-server-actions";
+import { SelectMultiple } from "@rnaga/wp-next-ui/SelectMultiple";
+import { useAdminNavigation } from "../../../../../hooks/use-admin-navigation";
+import { useWPAdmin } from "../../../../../wp-admin";
+import { RoleEditContext } from "./context";
+export const Edit = (props) => {
+    const { blogId, show, onCancelEdit } = props;
+    let { roles } = props;
+    const { overlay } = useWPAdmin();
+    const { refresh } = useAdminNavigation();
+    const { actions, safeParse } = useServerActions();
+    const [values, setValues] = useState();
+    const { userId, targetBlogs } = useContext(RoleEditContext);
+    if (!show) {
+        return null;
+    }
+    // superadmin and anonymous can't be edited through this component.
+    const roleNames = Object.keys(roles).filter((roleName) => !["superadmin", "anonymous"].includes(roleName)) ?? [];
+    const defaultRoleNames = targetBlogs
+        ?.filter((blog) => blog.blog_id == blogId)[0]
+        ?.rolenames?.filter((roleName) => !["superadmin", "anonymous"].includes(roleName));
+    const selectedRoleNames = Array.from(new Set(values ?? defaultRoleNames ?? []));
+    const handleUpdateRole = async () => {
+        if (!values || !userId || !blogId) {
+            return;
+        }
+        const result = await overlay.circular.promise(actions.user
+            .updateRole(userId, values, {
+            blogId,
+        })
+            .then(safeParse));
+        if (!result.success) {
+            overlay.snackbar.open("error", result.error);
+            return;
+        }
+        refresh(["content"]);
+    };
+    return (_jsxs(Box, { sx: { display: "flex", gap: 0.5, alignItems: "center" }, children: [_jsx(SelectMultiple, { items: roleNames.map((roleName) => ({
+                    label: roleName,
+                    id: roleName,
+                })), value: selectedRoleNames, onChange: (items) => {
+                    const newRoleNames = items.map((item) => item.id);
+                    setValues(newRoleNames);
+                    console.log("onChange", items);
+                }, slotSxProps: {
+                    input: { minWidth: "300px", minHeight: "28px" },
+                }, limitTags: 5 }), _jsx(Tooltip, { title: "Update Roles", placement: "top", children: _jsx(IconButton, { color: "success", size: "small", onClick: handleUpdateRole, children: _jsx(DoneIcon, {}) }) }), _jsx(Tooltip, { title: "Cancel", placement: "top", children: _jsx(IconButton, { color: "error", size: "small", onClick: onCancelEdit, children: _jsx(CancelIcon, {}) }) })] }));
+};

package/client/components/contents/users/Edit/Roles/Roles.d.ts

@@ -0,0 +1,4 @@
+export declare const Roles: (props: {
+    userId: number;
+}) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Roles.d.ts.map

package/client/components/contents/users/Edit/Roles/Roles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Roles.d.ts","sourceRoot":"","sources":["../../../../../../../src/client/components/contents/users/Edit/Roles/Roles.tsx"],"names":[],"mappings":"AA0BA,eAAO,MAAM,KAAK,GAAI,OAAO;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,mDAkG9C,CAAC"}

package/client/components/contents/users/Edit/Roles/Roles.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useTransition } from "react";
+import { AccordionDetails, Box } from "@mui/material";
+import { Accordion, AccordionSummary } from "@rnaga/wp-next-ui/Accordion";
+import { ActionTd, ListGrid, ListGridItem, Table, Td, Th, THead, Tr, } from "@rnaga/wp-next-ui/list";
+import { Loading } from "@rnaga/wp-next-ui/Loading";
+import { Typography } from "@rnaga/wp-next-ui/Typography";
+import { Viewport } from "@rnaga/wp-next-ui/Viewport";
+import { useAdminServerActions } from "../../../../../hooks/use-admin-server-actions";
+import { Add } from "./";
+import { ActionLink } from "./ActionLink";
+import { RoleEditContext } from "./context";
+import { Edit } from "./Edit";
+export const Roles = (props) => {
+    const { userId } = props;
+    const { actions, parse } = useAdminServerActions();
+    const [selectedBlogIndex, setSelectedBlogIndex] = useState();
+    const [blogs, setBlogs] = useState();
+    const [loading, startTransition] = useTransition();
+    useEffect(() => {
+        startTransition(async () => {
+            const [blogs] = await actions.adminUser
+                .getRoleEditableBlogs(userId)
+                .then(parse);
+            setBlogs(blogs);
+        });
+    }, [userId]);
+    const handleCancelEdit = () => {
+        setSelectedBlogIndex(undefined);
+    };
+    if (!blogs) {
+        return null;
+    }
+    return (_jsx(RoleEditContext, { value: {
+            userId,
+            targetBlogs: blogs,
+            selectedBlogIndex,
+            setSelectedBlogIndex,
+        }, children: _jsxs(Loading, { loading: loading, sx: { mb: 2 }, children: [_jsx(Box, { sx: { mt: 1 }, children: _jsxs(Table, { children: [_jsxs(THead, { children: [_jsx(Th, { children: "Blog Name" }), _jsx(Th, { viewport: "desktop", style: { width: "60%" }, children: "Roles" })] }), _jsx("tbody", { children: blogs.map((blog, index) => (_jsxs(Tr, { style: { paddingTop: "1em" }, children: [_jsxs(ActionTd, { children: [_jsx(Viewport, { device: "desktop", children: blog?.blogname }), _jsx(Viewport, { device: "desktop", children: _jsx(ActionLink, { blog: blog, blogIndex: index }) })] }), _jsx(Td, { viewport: "mobile", children: _jsxs(Accordion, { children: [_jsx(AccordionSummary, { children: blog?.blogname }), _jsxs(AccordionDetails, { children: [_jsx(ActionLink, { blog: blog, blogIndex: index }), _jsx(ListGrid, { children: _jsxs(ListGridItem, { title: "Roles", children: [_jsx(Edit, { blogId: blog.blog_id, roles: blog.blog_roles, show: selectedBlogIndex == index, onCancelEdit: handleCancelEdit }), selectedBlogIndex !== index &&
+                                                                            blog?.rolenames?.join(", ")] }) })] })] }) }), _jsxs(Td, { viewport: "desktop", children: [_jsx(Edit, { blogId: blog.blog_id, roles: blog.blog_roles, show: selectedBlogIndex == index, onCancelEdit: handleCancelEdit }), selectedBlogIndex !== index && (_jsx(Typography, { size: "medium", children: blog?.rolenames?.join(", ") }))] })] }, `${blog.blog_id}`))) })] }) }), _jsx(Box, { sx: { display: "flex", gap: 1, mt: 1, alignItems: "center" }, children: _jsx(Add, { blogs: blogs }) })] }) }));
+};

package/client/components/contents/users/Edit/Roles/context.d.ts

@@ -0,0 +1,9 @@
+import { Dispatch, SetStateAction } from "react";
+import type * as wpCoreTypes from "@rnaga/wp-next-core/types";
+export declare const RoleEditContext: import("react").Context<{
+    userId: number;
+    targetBlogs?: wpCoreTypes.actions.RoleEditableBlogs;
+    selectedBlogIndex: number | undefined;
+    setSelectedBlogIndex: Dispatch<SetStateAction<number | undefined>>;
+}>;
+//# sourceMappingURL=context.d.ts.map

package/client/components/contents/users/Edit/Roles/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../../../../src/client/components/contents/users/Edit/Roles/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,KAAK,KAAK,WAAW,MAAM,2BAA2B,CAAC;AAE9D,eAAO,MAAM,eAAe;YAClB,MAAM;kBACA,WAAW,CAAC,OAAO,CAAC,iBAAiB;uBAChC,MAAM,GAAG,SAAS;0BACf,QAAQ,CAAC,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;EACvD,CAAC"}

package/client/components/contents/users/Edit/Roles/context.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export const RoleEditContext = createContext({});

package/client/components/contents/users/Edit/Roles/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Add";
+export * from "./Roles";
+//# sourceMappingURL=index.d.ts.map

package/client/components/contents/users/Edit/Roles/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/client/components/contents/users/Edit/Roles/index.tsx"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC"}

package/client/components/contents/users/Edit/Roles/index.js

@@ -0,0 +1,2 @@
+export * from "./Add";
+export * from "./Roles";

package/client/components/contents/users/Edit/index.d.ts

@@ -0,0 +1,4 @@
+export declare const Edit: (props?: {
+    userId?: number;
+}) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=index.d.ts.map

package/client/components/contents/users/Edit/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/client/components/contents/users/Edit/index.tsx"],"names":[],"mappings":"AAaA,eAAO,MAAM,IAAI,GAAI,QAAQ;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,mDA6E/C,CAAC"}

package/client/components/contents/users/Edit/index.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { z } from "zod";
+import { Box } from "@mui/material";
+import { useServerActions } from "@rnaga/wp-next-core/client/hooks/use-server-actions";
+import { useUser } from "@rnaga/wp-next-core/client/hooks/use-user";
+import { Tabs } from "@rnaga/wp-next-ui/Tabs";
+import { useAdminNavigation } from "../../../../hooks/use-admin-navigation";
+import { useWPAdmin } from "../../../../wp-admin";
+import { Profile } from "./Profile";
+import { Roles } from "./Roles/";
+export const Edit = (props) => {
+    const { overlay } = useWPAdmin();
+    const { user } = useUser();
+    const { searchParams, refreshValue } = useAdminNavigation();
+    const { actions, safeParse } = useServerActions();
+    const [canEditUser, setCanEditUser] = useState();
+    const refreshContent = refreshValue().content;
+    const userId = props?.userId && user?.ID == props.userId
+        ? props.userId
+        : z
+            .string()
+            .transform((v) => parseInt(v))
+            .parse(searchParams.get("id"));
+    useEffect(() => {
+        (async () => {
+            const response = await actions.user
+                .can("edit_user", userId)
+                .then(safeParse);
+            if (!response.success) {
+                console.info(response.error);
+                setCanEditUser(false);
+                return;
+            }
+            setCanEditUser(response.data);
+        })();
+    }, []);
+    const canUpdateRole = useMemo(() => user?.role.capabilities.has("promote_user") ||
+        user?.role.capabilities.has("remove_users"), [user?.role.capabilities]);
+    if (canEditUser === undefined) {
+        return null;
+    }
+    console.log("user.role.capabilities", user?.role.capabilities);
+    const tabItems = [
+        ...(canEditUser
+            ? [{ label: "Profile", content: _jsx(Profile, { userId: userId }) }]
+            : []),
+        ...(canUpdateRole
+            ? [
+                {
+                    label: "Roles",
+                    content: _jsx(Roles, { userId: userId }, `role-${refreshContent}`),
+                },
+            ]
+            : []),
+    ];
+    return (_jsx(Box, { sx: {
+            //backgroundColor: (theme) => theme.palette.background.surface,
+            width: "100%",
+        }, children: _jsx(Tabs, { items: tabItems, size: "medium", slotSxProps: {
+                tab: {
+                    width: `calc(100% / ${tabItems.length})`,
+                    minWidth: "unset",
+                },
+            } }) }));
+};

package/client/components/contents/users/List/CountRoles.d.ts

@@ -0,0 +1,2 @@
+export declare const CountRoles: () => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=CountRoles.d.ts.map

package/client/components/contents/users/List/CountRoles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountRoles.d.ts","sourceRoot":"","sources":["../../../../../../src/client/components/contents/users/List/CountRoles.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,UAAU,sDAmGtB,CAAC"}

package/client/components/contents/users/List/CountRoles.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from "react";
+import { useServerActions } from "@rnaga/wp-next-core/client/hooks/use-server-actions";
+import { Typography } from "@rnaga/wp-next-ui/Typography";
+import { Link } from "@rnaga/wp-next-ui/Link";
+import { useAdminNavigation } from "../../../../hooks/use-admin-navigation";
+import { useWPAdmin } from "../../../../wp-admin";
+export const CountRoles = () => {
+    const { site } = useWPAdmin();
+    const { actions, parse } = useServerActions();
+    const { pushRouter, searchParams, queryObject } = useAdminNavigation();
+    const [roles, setRoles] = useState();
+    useEffect(() => {
+        const params = queryObject?.site_id
+            ? { site_id: queryObject.site_id }
+            : queryObject?.blog_id
+                ? { blog_id: queryObject.blog_id }
+                : site.blogId
+                    ? { blog_id: site.blogId }
+                    : undefined;
+        // Early return if params is not set
+        if (!params) {
+            return;
+        }
+        actions.roles.count(params).then((response) => {
+            const [roles] = parse(response);
+            setRoles(roles);
+        });
+    }, [site.blogId, queryObject?.blog_id, queryObject?.site_id]);
+    if (!roles) {
+        return null;
+    }
+    const buildQueryObject = (qb = {}) => {
+        return {
+            ...(queryObject?.site_id
+                ? {
+                    site_id: queryObject.site_id,
+                }
+                : {
+                    blog_id: queryObject?.blog_id ?? site.blogId,
+                }),
+            ...qb,
+        };
+    };
+    const elements = [
+        Object.keys(queryObject ?? {}).filter((key) => false === ["site_id", "blog_id", "page"].includes(key)).length > 0 ? (_jsxs(React.Fragment, { children: [_jsx(Link, { component: "button", onClick: () => pushRouter(buildQueryObject()), children: "All" }), " "] }, "all")) : (_jsx(React.Fragment, { children: " All" }, "all")),
+    ];
+    elements.push(_jsxs(React.Fragment, { children: [" | ", " "] }, "separator"));
+    Object.entries(roles)
+        .filter(([, count]) => count && count > 0)
+        .forEach(([roleName, count], index, arr) => {
+        let newQueryObject;
+        if (roleName == "superadmins") {
+            newQueryObject = buildQueryObject({ superadmins: true });
+        }
+        else {
+            newQueryObject = buildQueryObject({
+                roles: [`${roleName}`],
+            });
+        }
+        elements.push(searchParams.get("roles") === roleName ||
+            searchParams.get("superadmins") === "true" ? (_jsxs(React.Fragment, { children: [roleName, " (", count, ")"] }, `role-${roleName}`)) : (_jsxs(React.Fragment, { children: [_jsx(Link, { onClick: () => pushRouter(newQueryObject), children: roleName }), " (", count, ")"] }, `role-${roleName}`)));
+        if (index + 1 < arr.length) {
+            elements.push(_jsx(React.Fragment, { children: " | " }, `separator-${index}`));
+        }
+    });
+    return (_jsx(Typography, { size: "medium", component: "div", children: elements }));
+};

package/client/components/contents/users/List/Toolbar.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+import type * as wpCoreTypes from "@rnaga/wp-next-core/types";
+export declare const Toolbar: (props: {
+    list: {
+        users: wpCoreTypes.actions.UsersEdit;
+        info: wpCoreTypes.actions.UsersEditInfo;
+    } | undefined;
+    children?: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Toolbar.d.ts.map

package/client/components/contents/users/List/Toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../../../src/client/components/contents/users/List/Toolbar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUlC,OAAO,KAAK,KAAK,WAAW,MAAM,2BAA2B,CAAC;AAE9D,eAAO,MAAM,OAAO,GAAI,OAAO;IAC7B,IAAI,EACA;QACE,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC,SAAS,CAAC;QACrC,IAAI,EAAE,WAAW,CAAC,OAAO,CAAC,aAAa,CAAC;KACzC,GACD,SAAS,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,4CAgDA,CAAC"}

package/client/components/contents/users/List/Toolbar.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Stack } from "@mui/material";
+import { InputSearch } from "@rnaga/wp-next-ui/InputSearch";
+import { Pagination } from "@rnaga/wp-next-ui/list/Pagination";
+import { SelectWPAvailableSite } from "../../../../components/utils/dropdown/SelectWPAvailableSite";
+import { useAdminNavigation } from "../../../../hooks/use-admin-navigation";
+import { useWPAdmin } from "../../../../wp-admin";
+export const Toolbar = (props) => {
+    const { list, children } = props;
+    const { wp: { viewport }, } = useWPAdmin();
+    const { pushRouter } = useAdminNavigation();
+    const handleSitesDropdown = (siteId, blogId) => {
+        blogId
+            ? pushRouter({
+                blog_id: blogId,
+            })
+            : siteId &&
+                pushRouter({
+                    site_id: siteId,
+                });
+    };
+    return (_jsxs(_Fragment, { children: [children, _jsxs(Stack, { spacing: 1, sx: {
+                    display: "grid",
+                    gridTemplateColumns: viewport.isMobile ? "100%" : "1.5fr 1fr",
+                }, children: [_jsxs(Box, { sx: {
+                            display: "flex",
+                            justifyContent: "flex-start",
+                            gap: 1,
+                            flexGrow: 1,
+                        }, children: [_jsx(SelectWPAvailableSite, { onClick: handleSitesDropdown, capabilities: ["list_users"] }), _jsx(InputSearch, { size: "medium", sx: { flexGrow: 1, minWidth: 250 } })] }), _jsx(Pagination, { pagination: list?.info?.pagination })] })] }));
+};

package/client/components/contents/users/List/index.d.ts

@@ -0,0 +1,2 @@
+export declare const List: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/client/components/contents/users/List/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/client/components/contents/users/List/index.tsx"],"names":[],"mappings":"AA4BA,eAAO,MAAM,IAAI,+CA6FhB,CAAC"}

package/client/components/contents/users/List/index.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useTransition } from "react";
+import { AccordionDetails, Stack } from "@mui/material";
+import { useServerActions } from "@rnaga/wp-next-core/client/hooks/use-server-actions";
+import { Accordion } from "@rnaga/wp-next-ui/Accordion";
+import { ActionTd, ListGrid, ListGridItem, ListGridTitle, SortableTh, Table, Td, Th, THead, Tr, } from "@rnaga/wp-next-ui/list";
+import { Loading } from "@rnaga/wp-next-ui/Loading";
+import { Typography } from "@rnaga/wp-next-ui/Typography";
+import { AdminLink } from "../../../../components/utils/link";
+import { useAdminNavigation } from "../../../../hooks/use-admin-navigation";
+import { CountRoles } from "./CountRoles";
+import { Toolbar } from "./Toolbar";
+export const List = () => {
+    const { actions, parse } = useServerActions();
+    const { queryObject, navigationStatus } = useAdminNavigation();
+    const [loading, startTransition] = useTransition();
+    const [list, setList] = useState();
+    useEffect(() => {
+        startTransition(async () => {
+            const [users, info] = await actions.user
+                .list({ ...queryObject, per_page: 20 }, {
+                context: "edit",
+            })
+                .then(parse);
+            setList({ users, info });
+        });
+    }, [navigationStatus]);
+    return (_jsxs(Stack, { spacing: 1, children: [_jsx(Toolbar, { list: list, children: _jsx(CountRoles, {}) }), _jsx(Loading, { loading: loading, children: _jsxs(Table, { children: [_jsxs(THead, { children: [_jsx(SortableTh, { name: "Username", orderby: "user_login" }), _jsx(Th, { viewport: "desktop", children: "Name" }), _jsx(SortableTh, { viewport: "desktop", name: "Email", orderby: "user_email" }), _jsx(Th, { viewport: "desktop", children: "Role" }), _jsx(Th, { viewport: "desktop", children: "Posts" })] }), _jsx("tbody", { children: list?.users?.map((user) => (_jsxs(Tr, { style: { paddingTop: "1em" }, children: [_jsxs(ActionTd, { children: [_jsx(Typography, { size: "medium", bold: true, children: user.user_login }), _jsx(AdminLink, { subPage: "edit", queryParams: { id: user.ID }, children: "Edit" })] }), _jsx(Td, { viewport: "mobile", children: _jsxs(Accordion, { children: [_jsx(ListGridTitle, { title: user.user_login }), _jsxs(AccordionDetails, { children: [_jsx(AdminLink, { subPage: "edit", queryParams: { id: user.ID }, children: "Edit" }), _jsxs(ListGrid, { children: [_jsx(ListGridItem, { title: "Name", children: user.display_name }), _jsx(ListGridItem, { title: "Email", children: user.user_email }), _jsx(ListGridItem, { title: "Role", children: user.roles.join(",") }), _jsx(ListGridItem, { title: "Posts", children: user.posts })] })] })] }) }), _jsx(Td, { viewport: "desktop", children: _jsx(Typography, { children: user.display_name }) }), _jsx(Td, { viewport: "desktop", children: _jsx(Typography, { children: user.user_email }) }), _jsx(Td, { viewport: "desktop", children: _jsx(Typography, { children: user.roles.join(",") }) }), _jsx(Td, { viewport: "desktop", children: _jsx(Typography, { children: user.posts }) })] }, `${user.ID}`))) })] }) })] }));
+};

package/client/components/contents/users/index.d.ts

@@ -0,0 +1,9 @@
+export declare const Users: {
+    Create: () => import("react/jsx-runtime").JSX.Element;
+    List: () => import("react/jsx-runtime").JSX.Element;
+    Edit: (props?: {
+        userId?: number;
+    }) => import("react/jsx-runtime").JSX.Element | null;
+    Delete: () => import("react/jsx-runtime").JSX.Element | null;
+};
+//# sourceMappingURL=index.d.ts.map

package/client/components/contents/users/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/client/components/contents/users/index.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,KAAK;;;;cAM0V,CAAC;;;CAD5W,CAAC"}

package/client/components/contents/users/index.js

@@ -0,0 +1,10 @@
+import { Create } from "./Create";
+import { List } from "./List";
+import { Edit } from "./Edit";
+import { Delete } from "./Delete";
+export const Users = {
+    Create,
+    List,
+    Edit,
+    Delete,
+};

package/client/components/layout/Layout.d.ts

@@ -0,0 +1,3 @@
+export declare const Layout: () => import("react/jsx-runtime").JSX.Element;
+export default Layout;
+//# sourceMappingURL=Layout.d.ts.map

package/client/components/layout/Layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../../../src/client/components/layout/Layout.tsx"],"names":[],"mappings":"AAkBA,eAAO,MAAM,MAAM,+CA8FlB,CAAC;AAEF,eAAe,MAAM,CAAC"}