@griddo/ax 11.14.1 → 11.14.2-rc.1

package/src/modules/Sites/SitesList/style.tsx

@@ -1,4 +1,4 @@
-import styled, { css, keyframes } from "styled-components";
+import styled, { keyframes } from "styled-components";
 
 const OpacityAnimation = keyframes`
   to {
@@ -12,113 +12,6 @@ const TranslateAnimation = keyframes`
   }
 }`;
 
-const SectionHeader = styled.div<{ isRecentSites?: boolean }>`
-  display: flex;
-  justify-content: space-between;
-  margin: 0 ${(p) => (p.isRecentSites ? p.theme.spacing.s : p.theme.spacing.m)};
-  margin-top: ${(p) => p.theme.spacing.m};
-`;
-
-const Label = styled.span`
-  margin-right: 14px;
-`;
-
-const Title = styled.h1<{ isActive?: boolean }>`
-  margin: 0;
-  margin-right: ${(p) => p.theme.spacing.m};
-  ${(p) => p.theme.textStyle.headingM};
-  color: ${(p) => (p.isActive ? p.theme.colors.textHighEmphasis : p.theme.colors.textMediumEmphasis)};
-`;
-
-const HeaderIconsWrapper = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const FilterSelectLabel = styled.span`
-  color: ${(p) => p.theme.color.interactive01};
-`;
-
-const FilterSelect = styled.div`
-  ${(p) => p.theme.textStyle.uiS};
-  line-height: 32px;
-  display: flex;
-  align-items: center;
-  position: relative;
-  color: ${(p) => p.theme.color.textLowEmphasis};
-`;
-
-const CollapseButton = styled.div`
-  display: flex;
-  align-items: center;
-  ${(p) => p.theme.textStyle.uiS};
-  color: ${(p) => p.theme.colors.textMediumEmphasis};
-  padding: 0;
-  margin: 0;
-  cursor: pointer;
-`;
-
-const RecentSites = styled.div<{ fullWidth: boolean }>`
-  display: ${(p) => (p.fullWidth ? "block" : "inline-block")};
-  padding-bottom: ${(p) => p.theme.spacing.s};
-  border-radius: ${(p) => p.theme.radii.s};
-  background: ${(p) => p.theme.color.uiBackground02};
-  min-height: 56px;
-  overflow: hidden;
-  margin: ${(p) => p.theme.spacing.m};
-  margin-bottom: 0;
-  flex-shrink: 0;
-
-  h1 {
-    padding-left: 0;
-  }
-`;
-
-const RecentSitesItemsWrapper = styled.div<{ isHidden: boolean }>`
-  display: grid;
-  grid-auto-flow: column;
-  overflow: auto;
-  grid-gap: ${(p) => p.theme.spacing.m};
-  padding: ${(p) => p.theme.spacing.s} ${(p) => p.theme.spacing.s} 0px ${(p) => p.theme.spacing.s};
-  overflow: hidden;
-
-  div {
-    min-width: 100%;
-  }
-
-  ${(props) =>
-		props.isHidden &&
-		css`
-      height: 0;
-      padding: 0;
-      padding-left: ${(p) => p.theme.spacing.s};
-      padding-top: ${(p) => p.theme.spacing.xs};
-    `};
-
-  @media (min-width: 1200px) {
-    div:nth-child(6),
-    div:nth-child(7) {
-      display: none;
-    }
-  }
-
-  @media (min-width: 1600px) {
-    div:nth-child(6) {
-      display: block;
-    }
-    div:nth-child(7) {
-      display: none;
-    }
-  }
-
-  @media (min-width: 1750px) {
-    div:nth-child(6),
-    div:nth-child(7) {
-      display: block;
-    }
-  }
-`;
-
 const SitesListWrapper = styled.div`
   max-width: calc(100vw - calc(24px * 3));
   height: 100%;
@@ -205,15 +98,6 @@ const SearchTagsGrid = styled.div`
 `;
 
 export {
-	SectionHeader,
-	CollapseButton,
-	Label,
-	Title,
-	HeaderIconsWrapper,
-	FilterSelect,
-	FilterSelectLabel,
-	RecentSites,
-	RecentSitesItemsWrapper,
 	SitesListWrapper,
 	GridList,
 	EmptyStateWrapper,

package/src/modules/Sites/SitesList/utils.tsx

@@ -1,6 +1,13 @@
-import { ISite } from "@ax/types";
+import type { ISite } from "@ax/types";
 
-const getSortedListStatus = (orderPointer: string, isAscending: boolean): any => {
+export interface ISortedListStatus {
+	isAscending: boolean;
+	sortedByTitle: boolean;
+	sortedByLastAccess: boolean;
+	sortedByDateCreated: boolean;
+}
+
+const getSortedListStatus = (orderPointer: string, isAscending: boolean): ISortedListStatus => {
 	const sortedListStatus = {
 		isAscending,
 		sortedByTitle: orderPointer === "name",

package/src/modules/Sites/index.tsx

@@ -24,9 +24,9 @@ const Sites = (props: ISitesProps): JSX.Element => {
 		resetCurrentData,
 		setIsLoading,
 		getUserCurrentPermissions,
+		getAllSites,
 	} = props;
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useLayoutEffect(() => {
 		const fetchInitialData = async () => {
 			setIsLoading(true);
@@ -37,22 +37,31 @@ const Sites = (props: ISitesProps): JSX.Element => {
 			await getUserCurrentPermissions();
 			await getStructuredData(token, null);
 			await getAllDataPacks();
+			getAllSites();
 
 			const defaultLanguage = globalLangs.find((language) => language.isDefault);
 			if (defaultLanguage) {
 				const { locale, id } = defaultLanguage;
-				const lang = {
-					locale,
-					id,
-				};
-
-				setLanguage(lang);
+				setLanguage({ locale, id });
 			}
 			setIsLoading(false);
 		};
 
 		fetchInitialData();
-	}, [token]);
+	}, [
+		token,
+		globalLangs,
+		setIsLoading,
+		setCurrentSiteInfo,
+		updateCurrentSearch,
+		resetCurrentData,
+		getRoles,
+		getUserCurrentPermissions,
+		getStructuredData,
+		getAllDataPacks,
+		setLanguage,
+		getAllSites,
+	]);
 
 	return <SitesList />;
 };
@@ -77,6 +86,7 @@ interface IDispatchProps {
 	resetCurrentData(): Promise<void>;
 	setIsLoading(isLoading: boolean): void;
 	getUserCurrentPermissions(): Promise<void>;
+	getAllSites: () => Promise<void>;
 }
 
 export type ISitesProps = IStateProps & IDispatchProps & RouteComponentProps;
@@ -91,6 +101,7 @@ const mapDispatchToProps = {
 	resetCurrentData: structuredDataActions.resetCurrentData,
 	setIsLoading: appActions.setIsLoading,
 	getUserCurrentPermissions: usersActions.getUserCurrentPermissions,
+	getAllSites: sitesActions.getAllSites,
 };
 
 export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Sites));

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

@@ -1,43 +1,68 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { connect } from "react-redux";
 
+import {
+	ErrorToast,
+	FieldsBehavior,
+	FloatingNote,
+	Loading,
+	MainWrapper,
+	ProfileImage,
+	Tabs,
+	UserRolesAndSites,
+} from "@ax/components";
 import { appActions } from "@ax/containers/App";
-import { usersActions } from "@ax/containers/Users";
 import { sitesActions } from "@ax/containers/Sites";
-import { Loading, MainWrapper } from "@ax/components";
-import type { IRootState, ISite, IUser } from "@ax/types";
+import { usersActions } from "@ax/containers/Users";
+import { RouteLeavingGuard } from "@ax/guards";
 import { useModal, useShouldBeSaved, useURLSearchParam } from "@ax/hooks";
+import type { IImage, IRole, IRootState, ISite, IUser } from "@ax/types";
 
-import UserForm from "../UserForm";
+import { timezones } from "../../Settings/Globals/constants";
 import { LinkDeviceModal } from "./atoms";
 
+import * as S from "./style";
+
+const PROFILE_TABS = {
+	PROFILE: "Profile",
+	PERMISSIONS: "Your permissions",
+} as const;
+
+const PROFILE_TAB_LIST = [PROFILE_TABS.PROFILE, PROFILE_TABS.PERMISSIONS] as const;
+
 const Profile = (props: IProps) => {
-	const { user, updateUser, isSaving, isLoading, getSites, currentSiteInfo, token } = props;
+	const { user, updateUser, isSaving, isLoading, getSites, token, roles, sites, setHistoryPush } = props;
 
 	if (!user) {
 		throw new Error(`ERROR: User reached Profile with null user`);
 	}
 
 	const isUserInit = useURLSearchParam("init");
+	const initForm = {
+		...user,
+		timezone: user.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone ?? "",
+	};
 
-	const [form, setForm] = useState<IUser>({ ...user });
+	const [form, setForm] = useState<IUser>(initForm);
+	const [activeTab, setActiveTab] = useState<(typeof PROFILE_TABS)[keyof typeof PROFILE_TABS]>(PROFILE_TABS.PROFILE);
 	const { isOpen, toggleModal } = useModal();
 	const { isDirty, setIsDirty } = useShouldBeSaved(form);
 
-	const isSiteView = !!currentSiteInfo;
-
-	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
-		const getUserData = async () => await getSites();
-		isUserInit && getUserData();
-	}, []);
+		if (isUserInit) {
+			getSites();
+		}
+	}, [isUserInit, getSites]);
 
-	useEffect(() => {
-		const { timezone } = user;
-		const newForm = { ...user };
-		if (!timezone) newForm.timezone = "Europe/Madrid";
-		setForm(newForm);
-	}, [user]);
+	const { username, name, email, image, company, position, timezone, isSuperAdmin } = form;
+
+	const handleNameChange = useCallback((value: string) => setForm((prev) => ({ ...prev, name: value })), []);
+	const handleEmailChange = useCallback((value: string) => setForm((prev) => ({ ...prev, email: value })), []);
+	const handleUsernameChange = useCallback((value: string) => setForm((prev) => ({ ...prev, username: value })), []);
+	const handleCompanyChange = useCallback((value: string) => setForm((prev) => ({ ...prev, company: value })), []);
+	const handlePositionChange = useCallback((value: string) => setForm((prev) => ({ ...prev, position: value })), []);
+	const handleTimezoneChange = useCallback((value: string) => setForm((prev) => ({ ...prev, timezone: value })), []);
+	const handleImageChange = useCallback((value: IImage) => setForm((prev) => ({ ...prev, image: value })), []);
 
 	const handleSave = async () => {
 		const isUpdated = form.id ? await updateUser(form.id, form, true, false) : false;
@@ -58,29 +83,141 @@ const Profile = (props: IProps) => {
 			}
 		: undefined;
 
+	const guardProps = {
+		action: (path: string) => setHistoryPush(path),
+		text: (
+			<>
+				Some changes <strong>are not saved</strong>.
+			</>
+		),
+	};
+
 	if (isLoading) return <Loading />;
 
 	return (
 		<MainWrapper title="My Profile" rightLineButton={lineButtonProps} rightButton={rightButtonProps}>
-			<UserForm
-				form={form}
-				setForm={setForm}
-				user={user}
-				readOnlySites={true}
-				site={currentSiteInfo}
-				isSiteView={isSiteView}
-			/>
-			{isOpen && <LinkDeviceModal isOpen={isOpen} toggleModal={toggleModal} token={token} />}
+			<RouteLeavingGuard when={isDirty} {...guardProps} />
+			<ErrorToast size="l" />
+			<S.ProfileWrapper>
+				<S.Header>
+					<S.HeaderContent>
+						<S.AvatarWrapper>
+							<ProfileImage imageUrl={image?.url} handleImage={handleImageChange} />
+						</S.AvatarWrapper>
+						<S.UserName>
+							<S.SubTitle>USER DATA</S.SubTitle>
+							<S.NameTitle>{form.name}</S.NameTitle>
+						</S.UserName>
+					</S.HeaderContent>
+				</S.Header>
+				<S.TabsWrapper>
+					<Tabs tabs={Array.from(PROFILE_TAB_LIST)} active={activeTab} setSelectedTab={setActiveTab} />
+				</S.TabsWrapper>
+				<S.Content>
+					{activeTab === PROFILE_TABS.PROFILE && (
+						<S.UserForm>
+							<S.FormColumn>
+								<FieldsBehavior
+									title="Name"
+									name="name"
+									fieldType="TextField"
+									placeholder="Type a name"
+									mandatory
+									value={name}
+									onChange={handleNameChange}
+								/>
+								<FieldsBehavior
+									title="Alias"
+									name="username"
+									fieldType="TextField"
+									placeholder="Type an alias"
+									mandatory
+									value={username}
+									onChange={handleUsernameChange}
+									prefix="@"
+								/>
+								<FieldsBehavior
+									title="Email"
+									name="email"
+									fieldType="TextField"
+									placeholder="Type an email"
+									mandatory
+									value={email}
+									onChange={handleEmailChange}
+									disabled={true}
+								/>
+								<FieldsBehavior
+									title="Password"
+									name="password"
+									fieldType="TextField"
+									inputType="password"
+									placeholder="Type a password"
+									mandatory
+									readonly
+									value="********"
+									icon="edit"
+									onClickIcon={toggleModal}
+								/>
+							</S.FormColumn>
+							<S.FormColumn>
+								<FieldsBehavior
+									title="Job Title"
+									name="position"
+									fieldType="TextField"
+									placeholder="Type your job title"
+									value={position || ""}
+									onChange={handlePositionChange}
+								/>
+								<FieldsBehavior
+									title="Company"
+									name="company"
+									fieldType="TextField"
+									placeholder="Type a company"
+									value={company || ""}
+									onChange={handleCompanyChange}
+								/>
+								<FieldsBehavior
+									title="Time zone"
+									name="timezone"
+									fieldType="Select"
+									value={timezone}
+									options={timezones}
+									onChange={handleTimezoneChange}
+									mandatory={true}
+									helptext="Used to display time in emails and ensure accurate scheduling."
+								/>
+							</S.FormColumn>
+						</S.UserForm>
+					)}
+					{activeTab === PROFILE_TABS.PERMISSIONS && (
+						<S.UserPermissions>
+							<FloatingNote
+								icon="info"
+								message="This information is not editable. Changes require appropriate permissions and must be made in the user list."
+							/>
+							<UserRolesAndSites
+								isSuperAdmin={isSuperAdmin}
+								userRoles={user.roles}
+								sites={sites}
+								roles={roles}
+								showRows={false}
+							/>
+						</S.UserPermissions>
+					)}
+				</S.Content>
+			</S.ProfileWrapper>
+			<LinkDeviceModal isOpen={isOpen} toggleModal={toggleModal} token={token} />
 		</MainWrapper>
 	);
 };
 
 const mapStateToProps = (state: IRootState) => ({
-	user: state.users.currentUser,
+	user: state.users.currentUser!,
 	isSaving: state.app.isSaving,
 	isLoading: state.app.isLoading,
 	token: state.app.token,
-	currentSiteInfo: state.sites.currentSiteInfo,
+	roles: state.users.roles,
+	sites: state.sites.allSites,
 });
 
 interface IDispatchProps {
@@ -100,7 +237,8 @@ interface IProfileProps {
 	isSaving: boolean;
 	isLoading: boolean;
 	token: string;
-	currentSiteInfo: ISite | null;
+	roles: IRole[];
+	sites: ISite[];
 }
 
 type IProps = IProfileProps & IDispatchProps;

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

@@ -14,4 +14,84 @@ const QRWrapper = styled.div`
   margin: auto;
 `;
 
-export { ModalContent, QRWrapper };
+const ProfileWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const Header = styled.div`
+  height: 160px;
+  width: 100%;
+`;
+
+const HeaderContent = styled.div`
+  max-width: 720px;
+  margin: auto;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  gap: ${(p) => p.theme.spacing.m};
+`;
+
+const AvatarWrapper = styled.div``;
+
+const UserName = styled.div``;
+
+const NameTitle = styled.div`
+  ${(p) => p.theme.textStyle.headingM};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+`;
+
+const SubTitle = styled.div`
+  ${(p) => p.theme.textStyle.headingXS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
+`;
+
+const TabsWrapper = styled.div`
+  background-color: ${(p) => p.theme.color.uiBackground02};
+  border-top: ${(p) => `1px solid ${p.theme.color.uiLine}`};
+  border-bottom: ${(p) => `1px solid ${p.theme.color.uiLine}`};
+  div {
+    max-width: 720px;
+    margin: 0 auto;
+    border-bottom: none;
+  }
+`;
+
+const Content = styled.div`
+  max-width: 720px;
+  margin: auto;
+  width: 100%;
+`;
+
+const UserForm = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: ${(p) => `calc(${p.theme.spacing.m} + ${p.theme.spacing.xs})`};
+  align-items: start;
+  padding-top: ${(p) => `calc(${p.theme.spacing.m} + ${p.theme.spacing.xs})`};
+`;
+
+const FormColumn = styled.div``;
+
+const UserPermissions = styled.div`
+  padding-top: ${(p) => p.theme.spacing.s};
+`;
+
+export {
+	ModalContent,
+	QRWrapper,
+	ProfileWrapper,
+	Header,
+	HeaderContent,
+	TabsWrapper,
+	Content,
+	NameTitle,
+	SubTitle,
+	AvatarWrapper,
+	UserName,
+	UserForm,
+	FormColumn,
+	UserPermissions,
+};

package/src/modules/Users/Roles/RoleItem/index.tsx

@@ -20,7 +20,7 @@ const RoleItem = (props: IRoleItemProps): JSX.Element => {
 	const avatarList =
 		isSiteView && roleUsers.length
 			? roleUsers.map(
-					(user: IUser, i: number) => i < 5 && <Avatar image={user.image?.thumb} name={user.name} size="s" key={i} />,
+					(user: IUser, i: number) => i < 5 && <Avatar image={user.image?.thumb} name={user.name} size={24} key={i} />,
 				)
 			: [];
 
@@ -28,7 +28,7 @@ const RoleItem = (props: IRoleItemProps): JSX.Element => {
 		isSiteView && roleUsers.length
 			? roleUsers.map((user: IUser) => (
 					<S.AvatarContainer addSpacing={true} key={user.id}>
-						<Avatar image={user.image?.thumb} name={user.name} size="s" key={user.id} />
+						<Avatar image={user.image?.thumb} name={user.name} size={24} key={user.id} />
 					</S.AvatarContainer>
 				))
 			: [];

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

@@ -1,9 +1,7 @@
-import React from "react";
-
 import { CheckField, Button, ElementsTooltip } from "@ax/components";
 import { useModal } from "@ax/hooks";
 
-import { IRole } from "@ax/types";
+import type { IRole } from "@ax/types";
 import RolesModal from "./RolesModal";
 
 import * as S from "./style";
@@ -24,19 +22,18 @@ const SiteItem = (props: ISiteItemProps): JSX.Element => {
 
 	const handleChange = () => onChange(id);
 
-	const handleAddRoles = (roles: number[]) => addRoles && addRoles({ siteId: id, roles });
+	const handleAddRoles = (roles: number[]) => addRoles?.({ siteId: id, roles });
+
+	const rolesString = roles?.filter((role: IRole) => selected?.includes(role.id)).map((role: IRole) => role.name);
 
-	const rolesString =
-		roles && roles.filter((role: IRole) => selected && selected.includes(role.id)).map((role: IRole) => role.name);
-	const colors =
-		rolesString &&
-		rolesString.reduce((prev, current) => {
-			const color: IRole | undefined = roles.find((role: IRole) => role.name === current);
-			return { ...prev, [current]: color?.hex };
-		}, {});
+	const colors = rolesString?.reduce((prev: Record<string, string | undefined>, current) => {
+		const color: IRole | undefined = roles?.find((role: IRole) => role.name === current);
+		prev[current] = color?.hex;
+		return prev;
+	}, {});
 
-	const textButton = selected && selected.length ? "Edit Roles" : "Add Roles";
-	const iconButton = selected && selected.length ? "edit" : undefined;
+	const textButton = selected?.length ? "Edit Roles" : "Add Roles";
+	const iconButton = selected?.length ? "edit" : undefined;
 
 	return (
 		<>

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

@@ -1,9 +1,9 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { connect } from "react-redux";
 
 import { ErrorToast, FieldsBehavior, Modal } from "@ax/components";
 import { usersActions } from "@ax/containers/Users";
-import { IModal, IRootState } from "@ax/types";
+import type { IModal, IRootState } from "@ax/types";
 
 import * as S from "./style";
 
@@ -63,7 +63,7 @@ const PasswordForm = (props: IPasswordFormProps) => {
 	};
 
 	return (
-		<Modal isOpen={isOpen} hide={toggleModal} size="M" {...modalProps}>
+		<Modal isOpen={isOpen} hide={toggleModal} height={470} size="M" {...modalProps}>
 			<ErrorToast size="l" />
 			<S.ModalContent>
 				<FieldsBehavior