@griddo/ax 11.15.9 → 11.16.0-rc.1

package/src/modules/Users/Profile/index.tsx

@@ -1,6 +1,7 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { connect } from "react-redux";
 
+import { sites as sitesApi } from "@ax/api";
 import {
 	ErrorToast,
 	FieldsBehavior,
@@ -15,12 +16,13 @@ import { appActions } from "@ax/containers/App";
 import { sitesActions } from "@ax/containers/Sites";
 import { usersActions } from "@ax/containers/Users";
 import { RouteLeavingGuard } from "@ax/guards";
+import { isReqOk } from "@ax/helpers";
 import { useModals, useShouldBeSaved, useURLSearchParam } from "@ax/hooks";
-import type { IImage, IRole, IRootState, ISite, IUser } from "@ax/types";
+import type { IImage, ILanguage, IPage, IRole, IRootState, ISite, IUser } from "@ax/types";
 
 import { timezones } from "../../Settings/Globals/constants";
 import { PasswordModal } from "../UserForm/atoms";
-import { LinkDeviceModal } from "./atoms";
+import { LinkDeviceModal, ProfilePagePermissionsList } from "./atoms";
 
 import * as S from "./style";
 
@@ -32,7 +34,20 @@ const PROFILE_TABS = {
 const PROFILE_TAB_LIST = [PROFILE_TABS.PROFILE, PROFILE_TABS.PERMISSIONS] as const;
 
 const Profile = (props: IProps) => {
-	const { user, updateUser, isSaving, isLoading, getSites, token, roles, sites, setHistoryPush } = props;
+	const {
+		user,
+		updateUser,
+		isSaving,
+		isLoading,
+		getSites,
+		token,
+		roles,
+		sites,
+		siteLanguages,
+		globalLanguages,
+		currentSiteInfo,
+		setHistoryPush,
+	} = props;
 
 	if (!user) {
 		throw new Error(`ERROR: User reached Profile with null user`);
@@ -46,15 +61,63 @@ const Profile = (props: IProps) => {
 
 	const [form, setForm] = useState<IUser>(initForm);
 	const [activeTab, setActiveTab] = useState<(typeof PROFILE_TABS)[keyof typeof PROFILE_TABS]>(PROFILE_TABS.PROFILE);
+	const [selectedPages, setSelectedPages] = useState<IPage[]>([]);
+	const pagesHeaderRef = useRef<HTMLDivElement>(null);
 	const { isOpen, toggleModal } = useModals(["linkDevice", "password"]);
 	const { isDirty, setIsDirty } = useShouldBeSaved(form);
 
+	const defaultLanguage = currentSiteInfo
+		? siteLanguages.find((lang) => lang.isDefault)
+		: globalLanguages.find((lang) => lang.isDefault);
+
+	const scrollToPagesHeader = () => {
+		pagesHeaderRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
+	};
+
 	useEffect(() => {
 		if (isUserInit) {
 			getSites();
 		}
 	}, [isUserInit, getSites]);
 
+	// biome-ignore lint/correctness/useExhaustiveDependencies: runs on mount only
+	useEffect(() => {
+		const fetchPages = async () => {
+			if (!user.pagePermissions || user.pagePermissions.length === 0) {
+				setSelectedPages([]);
+				return;
+			}
+
+			const requests = user.pagePermissions
+				.filter((p) => p.pageIds.length > 0)
+				.map((pagePermission) =>
+					sitesApi
+						.getSitePages({
+							siteID: pagePermission.siteId,
+							page: 1,
+							itemsPerPage: 50,
+							deleted: false,
+							filterPages: pagePermission.pageIds,
+							lang: defaultLanguage?.id,
+							ignoreLang: true,
+						})
+						.catch((error) => {
+							console.error("Failed to fetch page permissions", error);
+							return null;
+						}),
+				);
+
+			const responses = await Promise.all(requests);
+			const allPages = responses
+				.filter((response) => response && isReqOk(response.status))
+				.flatMap((response) => response?.data?.items || []);
+
+			setSelectedPages(allPages);
+		};
+
+		fetchPages();
+	}, []);
+
 	const { username, name, email, image, company, position, timezone, isSuperAdmin } = form;
 
 	const handleNameChange = useCallback((value: string) => setForm((prev) => ({ ...prev, name: value })), []);
@@ -203,6 +266,16 @@ const Profile = (props: IProps) => {
 								roles={roles}
 								showRows={false}
 							/>
+							{selectedPages.length > 0 && (
+								<>
+									<S.PagesHeader ref={pagesHeaderRef}>ACCESS TO PAGES</S.PagesHeader>
+									<ProfilePagePermissionsList
+										pages={selectedPages}
+										testId="profile-pages-list"
+										onPageChange={scrollToPagesHeader}
+									/>
+								</>
+							)}
 						</S.UserPermissions>
 					)}
 				</S.Content>
@@ -220,6 +293,9 @@ const mapStateToProps = (state: IRootState) => ({
 	token: state.app.token,
 	roles: state.users.roles,
 	sites: state.sites.allSites,
+	siteLanguages: state.sites.currentSiteLanguages,
+	globalLanguages: state.app.globalLangs,
+	currentSiteInfo: state.sites.currentSiteInfo,
 });
 
 interface IDispatchProps {
@@ -241,6 +317,9 @@ interface IProfileProps {
 	token: string;
 	roles: IRole[];
 	sites: ISite[];
+	siteLanguages: ILanguage[];
+	globalLanguages: ILanguage[];
+	currentSiteInfo: ISite | null;
 }
 
 type IProps = IProfileProps & IDispatchProps;

package/src/modules/Users/Profile/style.tsx

@@ -79,6 +79,57 @@ const UserPermissions = styled.div`
   padding-top: ${(p) => p.theme.spacing.s};
 `;
 
+const PagesHeader = styled.div`
+  ${(p) => p.theme.textStyle.headingXS};
+  margin-top: ${(p) => p.theme.spacing.m};
+`;
+
+const PageList = styled.ul`
+  padding-top: ${(p) => p.theme.spacing.s};
+  padding-bottom: ${(p) => p.theme.spacing.m};
+`;
+
+const PageListItem = styled.li`
+  display: flex;
+  width: 100%;
+  padding: ${(p) => p.theme.spacing.s};
+  background-color: ${(p) => p.theme.color.uiBarBackground};
+  border: 1px solid ${(p) => p.theme.color.uiLine};
+  border-radius: ${(p) => p.theme.radii.s};
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
+`;
+
+const PageItemContent = styled.div`
+  width: 100%;
+`;
+
+const PageItemHeader = styled.div`
+  display: flex;
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
+  align-items: center;
+  gap: ${(p) => p.theme.spacing.s};
+`;
+
+const PageItemType = styled.div`
+  ${(p) => p.theme.textStyle.headingXXS};
+  color: ${(p) => p.theme.color.textLowEmphasis};
+`;
+
+const PageItemTitle = styled.div`
+  ${(p) => p.theme.textStyle.fieldContent};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+`;
+
+const PageItemSiteTag = styled.div`
+  margin-left: auto;
+`;
+
+const PaginationWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  margin-top: ${(p) => p.theme.spacing.s};
+`;
+
 export {
 	ModalContent,
 	QRWrapper,
@@ -94,4 +145,13 @@ export {
 	UserForm,
 	FormColumn,
 	UserPermissions,
+	PagesHeader,
+	PageList,
+	PageListItem,
+	PageItemContent,
+	PageItemHeader,
+	PageItemType,
+	PageItemTitle,
+	PageItemSiteTag,
+	PaginationWrapper,
 };

package/src/modules/Users/UserCreate/SiteItem/RolesModal/RoleItem/index.tsx

@@ -1,7 +1,5 @@
-import React from "react";
-
 import { CheckField, Tag } from "@ax/components";
-import { ICheck, IRole } from "@ax/types";
+import type { ICheck, IRole } from "@ax/types";
 
 import * as S from "./style";
 
@@ -9,8 +7,8 @@ const RoleItem = (props: IRoleItemProps): JSX.Element => {
 	const { role, onChange, onClick, isChecked = false, isSelected = false, isReadOnly = false } = props;
 
 	const handleClick = () => {
-		onClick && onClick(role);
-		onChange && onChange({ value: role.id, isChecked: !isChecked });
+		onClick?.(role);
+		onChange?.({ value: role.id, isChecked: !isChecked });
 	};
 
 	return (

package/src/modules/Users/UserCreate/SiteItem/index.tsx

@@ -114,8 +114,8 @@ const SiteItem = (props: ISiteItemProps): JSX.Element => {
 };
 
 export interface ISiteItemProps {
-	item: { name: string; id: number | string; onChange: (id: number | string) => void };
-	sites: (string | number)[];
+	item: { name: string; id: number | "global" | "all"; onChange: (id: number | "global" | "all") => void };
+	sites: ("global" | "all" | number)[];
 	roles?: IRole[];
 	addRoles?(newRoles: any): void;
 	selected?: number[];

package/src/modules/Users/UserCreate/atoms.tsx

@@ -0,0 +1,69 @@
+import { Button, ContentItem } from "@ax/components";
+import { getStructuredDataTitle } from "@ax/helpers";
+import type { IPage } from "@ax/types";
+
+import * as S from "./style";
+
+const SettingsSection = ({
+	heading,
+	description,
+	actionLabel,
+	onActionClick,
+	showAction = false,
+	children,
+}: ISettingsSectionProps) => (
+	<S.SettingsWrapper>
+		<S.HeadingWrapper>
+			<S.Heading>{heading}</S.Heading>
+			{showAction && actionLabel && (
+				<Button type="button" buttonStyle="text" onClick={onActionClick} icon="addCircle">
+					{actionLabel}
+				</Button>
+			)}
+		</S.HeadingWrapper>
+		{children ? (
+			<S.SettingContent>{children}</S.SettingContent>
+		) : (
+			<S.SettingContent>
+				<S.SettingText>{description}</S.SettingText>
+			</S.SettingContent>
+		)}
+	</S.SettingsWrapper>
+);
+
+const PagePermissionsList = ({ pages, onManageClick, testId }: IPagePermissionsListProps) => (
+	<S.PageList data-testid={testId || "user-pages-list"}>
+		{pages.map((page: IPage) => (
+			<ContentItem
+				key={page.id}
+				title={page.title}
+				type={getStructuredDataTitle(page.structuredData)}
+				date={page.modified}
+			/>
+		))}
+		{pages.length > 0 && (
+			<li>
+				<Button type="button" buttonStyle="line" onClick={onManageClick}>
+					Manage page permissions
+				</Button>
+			</li>
+		)}
+	</S.PageList>
+);
+
+interface ISettingsSectionProps {
+	heading: string;
+	description?: string;
+	actionLabel?: string;
+	onActionClick?: () => void;
+	showAction?: boolean;
+	children?: React.ReactNode;
+}
+
+interface IPagePermissionsListProps {
+	pages: IPage[];
+	onManageClick: () => void;
+	testId?: string;
+}
+
+export { SettingsSection, PagePermissionsList };