@griddo/ax 11.15.9 → 11.16.0-rc.1

package/src/components/RestrictionsModal/RolesList/RoleItem/index.tsx

@@ -0,0 +1,54 @@
+import { CheckField, Tag } from "@ax/components";
+import type { ICheck, IRole } from "@ax/types";
+
+import * as S from "./style";
+
+const RoleItem = (props: IProps): JSX.Element => {
+	const { role, isSelected = false, onToggle, selection = true } = props;
+
+	const handleToggle = () => {
+		onToggle?.(role.id, { value: role.id, isChecked: !isSelected });
+	};
+
+	const handleCheckboxClick = (e: React.MouseEvent) => {
+		e.stopPropagation();
+	};
+
+	const handleKeyDown = (e: React.KeyboardEvent) => {
+		if (e.key === "Enter") {
+			e.preventDefault();
+			handleToggle();
+		}
+	};
+
+	return (
+		<S.RoleItem selected={isSelected} onClick={handleToggle} onKeyDown={handleKeyDown} role="button" tabIndex={0}>
+			{selection && (
+				<S.CheckCell role="cell" onClick={handleCheckboxClick}>
+					<CheckField
+						name={`role-${role.id}`}
+						value={role.id}
+						checked={isSelected}
+						onChange={(check) => onToggle?.(role.id, check)}
+						tabIndex={-1}
+					/>
+				</S.CheckCell>
+			)}
+			<S.TitleCell role="cell">
+				<S.Name>
+					<Tag text={role.name} color={role.hex} />
+				</S.Name>
+				<S.Description>{role.description}</S.Description>
+			</S.TitleCell>
+		</S.RoleItem>
+	);
+};
+
+interface IProps {
+	role: IRole;
+	isSelected?: boolean;
+	onToggle?: (roleId: number, check: ICheck) => void;
+	selection?: boolean;
+}
+
+export default RoleItem;

package/src/components/RestrictionsModal/RolesList/RoleItem/style.tsx

@@ -0,0 +1,34 @@
+import { Row } from "@ax/components/TableList/TableItem/style";
+
+import styled from "styled-components";
+
+const CheckCell = styled.div`
+  width: 32px;
+  justify-content: flex-start;
+  label {
+    margin-bottom: ${(p) => p.theme.spacing.s};
+  }
+`;
+
+const TitleCell = styled.div`
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  width: 100%;
+`;
+
+const Name = styled.div`
+  ${(p) => p.theme.textStyle.uiS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
+`;
+
+const Description = styled.div`
+  ${(p) => p.theme.textStyle.fieldContent};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+`;
+
+const RoleItem = styled(Row)`
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
+  padding: ${(p) => p.theme.spacing.s};
+`;
+
+export { RoleItem, CheckCell, TitleCell, Name, Description };

package/src/components/RestrictionsModal/RolesList/index.tsx

@@ -0,0 +1,107 @@
+import { useState } from "react";
+import { connect } from "react-redux";
+
+import { Button, SearchField } from "@ax/components";
+import type { ICheck, IRole, IRootState } from "@ax/types";
+
+import RoleItem from "./RoleItem";
+
+import * as S from "./style";
+
+const RolesList = (props: IProps): JSX.Element => {
+	const { roles, onCancel, onApply, selectedRoleIds = [], isSaving = false, onResetAccess } = props;
+	const [search, setSearch] = useState("");
+	const [selectedRoles, setSelectedRoles] = useState<number[]>(selectedRoleIds);
+
+	const filteredRoles = roles.filter((role) => role.name.toLowerCase().includes(search.toLowerCase()));
+
+	const handleToggleRole = (roleId: number, check: ICheck) => {
+		if (check.isChecked) {
+			setSelectedRoles((prev) => [...prev, roleId]);
+		} else {
+			setSelectedRoles((prev) => prev.filter((id) => id !== roleId));
+		}
+	};
+
+	const handleSelectRoles = () => {
+		setSearch("");
+	};
+
+	const handleApply = () => {
+		onApply(selectedRoles);
+	};
+
+	const handleResetAccess = () => {
+		if (onResetAccess) {
+			onResetAccess();
+		}
+	};
+
+	return (
+		<S.Wrapper>
+			<S.Content>
+				<S.Text>
+					Select the roles you want <strong>to be able to edit this page.</strong>
+				</S.Text>
+				<S.SearchWrapper>
+					<SearchField
+						placeholder="Search"
+						value={search}
+						onChange={(value) => setSearch(value)}
+						searchOnEnter={false}
+					/>
+				</S.SearchWrapper>
+				<div>
+					{filteredRoles.map((role) => (
+						<RoleItem
+							key={role.id}
+							role={role}
+							isSelected={selectedRoles.includes(role.id)}
+							onToggle={handleToggleRole}
+						/>
+					))}
+				</div>
+			</S.Content>
+			<S.Actions>
+				{!search ? (
+					<>
+						{selectedRoleIds.length > 0 ? (
+							<Button type="button" buttonStyle="line" onClick={handleResetAccess} disabled={isSaving}>
+								Reset Page Access
+							</Button>
+						) : (
+							<Button type="button" buttonStyle="text" onClick={onCancel} disabled={isSaving}>
+								Cancel
+							</Button>
+						)}
+						<Button type="button" onClick={handleApply} disabled={isSaving}>
+							{isSaving ? "Saving" : "Apply"}
+						</Button>
+					</>
+				) : (
+					<Button type="button" onClick={handleSelectRoles}>
+						Select Roles
+					</Button>
+				)}
+			</S.Actions>
+		</S.Wrapper>
+	);
+};
+
+interface IReduxProps {
+	roles: IRole[];
+}
+
+interface IProps extends IReduxProps {
+	onCancel: () => void;
+	onApply: (rolesIDs: number[]) => void;
+	selectedRoleIds?: number[];
+	isSaving?: boolean;
+	onResetAccess?: () => void;
+}
+
+const mapStateToProps = (state: IRootState): IReduxProps => ({
+	roles: state.users.roles,
+});
+
+export default connect(mapStateToProps)(RolesList);

package/src/components/RestrictionsModal/RolesList/style.tsx

@@ -0,0 +1,76 @@
+import { Row } from "@ax/components/TableList/TableItem/style";
+
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+`;
+
+const CheckCell = styled.div`
+  width: 32px;
+  justify-content: flex-start;
+  label {
+    margin-bottom: ${(p) => p.theme.spacing.s};
+  }
+`;
+
+const TitleCell = styled.div`
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  width: 100%;
+`;
+
+const Name = styled.div`
+  ${(p) => p.theme.textStyle.uiS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
+`;
+
+const Description = styled.div`
+  ${(p) => p.theme.textStyle.fieldContent};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+`;
+
+const RoleItem = styled(Row)`
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
+  padding: ${(p) => p.theme.spacing.s};
+`;
+
+const Text = styled.div`
+  ${(p) => p.theme.textStyle.uiM};
+  margin-bottom: ${(p) => p.theme.spacing.s};
+`;
+
+const SearchWrapper = styled.div`
+  margin-bottom: ${(p) => p.theme.spacing.s};
+`;
+
+const Content = styled.div`
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
+  padding: ${(p) => `${p.theme.spacing.m} ${p.theme.spacing.m} 0 ${p.theme.spacing.m}`};
+
+  ::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: 4px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: ${(p) => p.theme.colors.iconNonActive};
+  }
+`;
+
+const Actions = styled.div`
+  display: flex;
+  gap: ${(p) => p.theme.spacing.s};
+  justify-content: flex-end;
+  flex-shrink: 0;
+  padding: ${(p) => p.theme.spacing.m};
+  border-top: 1px solid ${(p) => p.theme.colors.uiLine};
+`;
+
+export { Wrapper, Content, CheckCell, Description, Name, RoleItem, Text, TitleCell, SearchWrapper, Actions };

package/src/components/RestrictionsModal/UsersList/UserItem/index.tsx

@@ -0,0 +1,78 @@
+import { Avatar, CheckField, TruncatedTooltip } from "@ax/components";
+import type { ICheck, IUser } from "@ax/types";
+
+import * as S from "./style";
+
+const UserItem = (props: IProps): JSX.Element => {
+	const { user, isSelected = false, onToggle, allUsers, selection = true } = props;
+	const typedUser = user as IUser;
+
+	const checkFieldName = allUsers ? "all-users" : `user-${typedUser.id}`;
+	const checkFieldValue = allUsers ? "all-users" : typedUser.id!.toString();
+
+	const handleToggle = () => {
+		onToggle?.(user, { value: checkFieldValue, isChecked: !isSelected });
+	};
+
+	const handleCheckboxClick = (e: React.MouseEvent) => {
+		e.stopPropagation();
+	};
+
+	const handleKeyDown = (e: React.KeyboardEvent) => {
+		if (e.key === "Enter") {
+			e.preventDefault();
+			handleToggle();
+		}
+	};
+
+	return (
+		<S.UserItem selected={isSelected} onClick={handleToggle} onKeyDown={handleKeyDown} role="button" tabIndex={0}>
+			{selection && (
+				<button type="button" onClick={handleCheckboxClick} onKeyDown={handleKeyDown} tabIndex={-1}>
+					<CheckField
+						name={checkFieldName}
+						value={checkFieldValue}
+						checked={isSelected}
+						onChange={(check) => onToggle?.(user, check)}
+						tabIndex={-1}
+					/>
+				</button>
+			)}
+			{!allUsers && (
+				<S.AvatarWrapper>
+					<Avatar image={typedUser.image?.thumb} name={typedUser.name} />
+				</S.AvatarWrapper>
+			)}
+			<S.UserInfo>
+				<S.UserName>
+					{allUsers ? (
+						<S.Name>All Users</S.Name>
+					) : (
+						<TruncatedTooltip content={typedUser.name} expanded top={-5}>
+							<S.Name>{typedUser.name}</S.Name>
+						</TruncatedTooltip>
+					)}
+				</S.UserName>
+				{!allUsers && (
+					<S.UserEmail>
+						<TruncatedTooltip content={typedUser.email} expanded top={-5}>
+							<S.Email>{typedUser.email}</S.Email>
+						</TruncatedTooltip>
+					</S.UserEmail>
+				)}
+			</S.UserInfo>
+		</S.UserItem>
+	);
+};
+
+export type UserItemType = IUser | { id: "all-users" };
+
+interface IProps {
+	user: UserItemType;
+	isSelected?: boolean;
+	onToggle?: (user: UserItemType, check: ICheck) => void;
+	allUsers?: boolean;
+	selection?: boolean;
+}
+
+export default UserItem;

package/src/components/RestrictionsModal/UsersList/UserItem/style.tsx

@@ -0,0 +1,73 @@
+import { Row } from "@ax/components/TableList/TableItem/style";
+
+import styled from "styled-components";
+
+const UserItem = styled(Row)`
+  display: flex;
+  align-items: center;
+  padding: ${(p) => `0 ${p.theme.spacing.s}`};
+  cursor: pointer;
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
+  height: 61px;
+`;
+
+const UserInfo = styled.div`
+  display: flex;
+  flex-flow: column nowrap;
+  flex-grow: 1;
+  min-width: 0;
+  padding-left: ${(p) => p.theme.spacing.xs};
+`;
+
+const AvatarWrapper = styled.div`
+  padding-left: ${(p) => p.theme.spacing.xs};
+  padding-right: ${(p) => p.theme.spacing.xs};
+`;
+
+const UserName = styled.div`
+  ${(p) => p.theme.textStyle.uiM};
+  font-weight: 600;
+  color: ${(p) => p.theme.colors.textHighEmphasis};
+  width: 100%;
+  min-width: 0;
+  > * {
+    min-width: 0;
+    max-width: 100%;
+  }
+`;
+
+const Name = styled.div`
+  width: 100%;
+  ${(p) => p.theme.textStyle.uiM};
+  font-weight: 600;
+  color: ${(p) => p.theme.colors.textHighEmphasis};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+  min-width: 0;
+`;
+
+const UserEmail = styled.div`
+ ${(p) => p.theme.textStyle.uiXS};
+ color: ${(p) => p.theme.colors.textMediumEmphasis};
+ width: 100%;
+ min-width: 0;
+ > * {
+   min-width: 0;
+   max-width: 100%;
+ }
+`;
+
+const Email = styled.div`
+  width: 100%;
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.colors.textMediumEmphasis};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+  min-width: 0;
+`;
+
+export { UserInfo, UserItem, AvatarWrapper, UserName, UserEmail, Name, Email };

package/src/components/RestrictionsModal/UsersList/index.tsx

@@ -0,0 +1,151 @@
+import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+
+import { Button, Loading, SearchField } from "@ax/components";
+import type { ICheck, IRootState, IUser } from "@ax/types";
+
+import { fetchUsers } from "../utils";
+import UserItem, { type UserItemType } from "./UserItem";
+
+import * as S from "./style";
+
+const ALL_USERS_ITEM: UserItemType = { id: "all-users" };
+
+const UsersList = (props: IUsersListProps): JSX.Element => {
+	const { onCancel, onApply, selectedUserIds = [], isSaving = false, onResetAccess, users } = props;
+	const currentUser = useSelector((state: IRootState) => state.users.currentUser);
+	const currentSiteInfo = useSelector((state: IRootState) => state.sites.currentSiteInfo);
+	const [search, setSearch] = useState("");
+	const [selectedUsers, setSelectedUsers] = useState<IUser[]>(users);
+	const [options, setOptions] = useState<IUser[]>([]);
+	const [loading, setLoading] = useState(false);
+
+	const handleApply = () => {
+		let userIDs = selectedUsers.map((user) => user.id!);
+		// Ensure current user is always included unless "all users" is selected (when selectedUsers is empty)
+		const isAllUsersSelected = selectedUsers.length === 0;
+		if (currentUser && !isAllUsersSelected && !userIDs.includes(currentUser.id!)) {
+			userIDs = [...userIDs, currentUser.id!];
+		}
+		onApply(userIDs);
+	};
+
+	const handleResetAccess = () => onResetAccess();
+
+	useEffect(() => {
+		const loadUsers = async () => {
+			setLoading(true);
+			const data = await fetchUsers(search, currentSiteInfo);
+			if (data) {
+				setOptions(data);
+			}
+			setLoading(false);
+		};
+
+		loadUsers();
+	}, [search, currentSiteInfo]);
+
+	const handleToggleUser = (user: UserItemType, check: ICheck) => {
+		if (user.id === "all-users") {
+			if (check.isChecked) {
+				setSelectedUsers([]);
+			}
+		} else if (check.isChecked) {
+			setSelectedUsers((prev) => [...prev, user as IUser]);
+		} else {
+			setSelectedUsers((prev) => prev.filter((u) => u.id !== user.id));
+		}
+	};
+
+	const handleSelectUsers = () => {
+		setSearch("");
+	};
+
+	return (
+		<S.Wrapper>
+			<S.Content>
+				<S.Text>
+					Select the users you want <strong>to be able to edit this page.</strong>
+				</S.Text>
+				<S.SearchWrapper>
+					<SearchField
+						placeholder="Search"
+						value={search}
+						onChange={(value) => setSearch(value)}
+						searchOnEnter={false}
+					/>
+				</S.SearchWrapper>
+				{loading ? (
+					<Loading />
+				) : (
+					<>
+						{!search && (
+							<>
+								<S.Title>ACCESS TO</S.Title>
+								<S.UsersList>
+									{selectedUsers.length === 0 ? (
+										<UserItem user={ALL_USERS_ITEM} isSelected={true} onToggle={handleToggleUser} allUsers />
+									) : (
+										selectedUsers.map((user) => (
+											<UserItem key={user.id} user={user} isSelected={true} onToggle={handleToggleUser} />
+										))
+									)}
+								</S.UsersList>
+							</>
+						)}
+					</>
+				)}
+				<S.Title>{!search ? "AVAILABLE USERS" : "USERS"}</S.Title>
+				<S.UsersList>
+					{selectedUsers.length > 0 && !search && (
+						<UserItem user={ALL_USERS_ITEM} isSelected={false} onToggle={handleToggleUser} allUsers />
+					)}
+					{(search ? options : options.filter((user) => !selectedUsers.some((u) => u.id === user.id))).map((user) => {
+						const isSelected = selectedUsers.some((u) => u.id === user.id);
+						return (
+							<UserItem
+								key={user.id}
+								user={user}
+								isSelected={search ? isSelected : false}
+								onToggle={handleToggleUser}
+							/>
+						);
+					})}
+				</S.UsersList>
+			</S.Content>
+			<S.Actions>
+				{!search ? (
+					<>
+						{selectedUserIds.length > 0 ? (
+							<Button type="button" buttonStyle="line" onClick={handleResetAccess} disabled={isSaving}>
+								Reset Page Access
+							</Button>
+						) : (
+							<Button type="button" buttonStyle="text" onClick={onCancel} disabled={isSaving}>
+								Cancel
+							</Button>
+						)}
+						<Button type="button" onClick={handleApply} disabled={isSaving}>
+							{isSaving ? "Saving" : "Apply"}
+						</Button>
+					</>
+				) : (
+					<Button type="button" onClick={handleSelectUsers}>
+						Select Users
+					</Button>
+				)}
+			</S.Actions>
+		</S.Wrapper>
+	);
+};
+
+interface IUsersListProps {
+	onCancel: () => void;
+	onApply: (userIDs: number[]) => void;
+	selectedUserIds?: number[];
+	isSaving?: boolean;
+	onResetAccess: () => void;
+	users: IUser[];
+}
+
+export default UsersList;

package/src/components/RestrictionsModal/UsersList/style.tsx

@@ -0,0 +1,55 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
+`;
+
+const Text = styled.div`
+  ${(p) => p.theme.textStyle.uiM};
+  margin-bottom: ${(p) => p.theme.spacing.s};
+`;
+
+const Title = styled.div`
+  ${(p) => p.theme.textStyle.headingXS};
+  color: ${(p) => p.theme.colors.textMediumEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
+`;
+
+const UsersList = styled.div`
+  padding-bottom: ${(p) => p.theme.spacing.s};
+`;
+
+const SearchWrapper = styled.div`
+  margin-bottom: ${(p) => p.theme.spacing.s};
+`;
+
+const Content = styled.div`
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
+  padding: ${(p) => `${p.theme.spacing.m} ${p.theme.spacing.m} 0 ${p.theme.spacing.m}`};
+
+  ::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: 4px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: ${(p) => p.theme.colors.iconNonActive};
+  }
+`;
+
+const Actions = styled.div`
+  display: flex;
+  gap: ${(p) => p.theme.spacing.s};
+  justify-content: flex-end;
+  flex-shrink: 0;
+  padding: ${(p) => p.theme.spacing.m};
+  border-top: 1px solid ${(p) => p.theme.colors.uiLine};
+`;
+
+export { Wrapper, Content, Text, Title, UsersList, SearchWrapper, Actions };