@griddo/ax 11.14.2-rc.0 → 11.14.2

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

@@ -1,20 +1,19 @@
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 import { connect } from "react-redux";
 
+import { Button, ErrorToast, FieldsBehavior, ProfileImage, SearchField } from "@ax/components";
 import { appActions } from "@ax/containers/App";
-import { Button, ErrorToast, FieldsBehavior, SearchField } from "@ax/components";
-import type { IImage, IRootState, IUser, ISite, IRole, ISiteRoles } from "@ax/types";
-import { useModal } from "@ax/hooks";
 import { RouteLeavingGuard } from "@ax/guards";
+import { useModal } from "@ax/hooks";
+import type { IImage, IRole, IRootState, ISite, ISiteRoles, IUser } from "@ax/types";
 
 import { timezones } from "../../Settings/Globals/constants";
-import { PasswordModal, TypeChangeModal } from "./atoms";
-import { shouldBeSaved } from "./helpers";
-
+import OptionItem from "../UserCreate/OptionItem";
 import SiteItem from "../UserCreate/SiteItem";
 import RolesModal from "../UserCreate/SiteItem/RolesModal";
 import RoleItem from "../UserCreate/SiteItem/RolesModal/RoleItem";
-import OptionItem from "../UserCreate/OptionItem";
+import { PasswordModal, TypeChangeModal } from "./atoms";
+import { shouldBeSaved } from "./helpers";
 
 import * as S from "./style";
 
@@ -32,7 +31,7 @@ const UserForm = (props: IProps) => {
 		site,
 	} = props;
 
-	const { id, username, name, email, image, company, description, timezone, isSuperAdmin } = form;
+	const { id, username, name, email, image, company, position, timezone, isSuperAdmin } = form;
 
 	const getSortedItemsByName = (items: ISite[]) =>
 		items.sort((item1: ISite, item2: ISite) => item1.name.localeCompare(item2.name));
@@ -62,7 +61,7 @@ const UserForm = (props: IProps) => {
 	const handleEmailChange = (value: string) => setForm({ ...form, email: value });
 	const handleUsernameChange = (value: string) => setForm({ ...form, username: value });
 	const handleCompanyChange = (value: string) => setForm({ ...form, company: value });
-	const handleDescriptionChange = (value: string) => setForm({ ...form, description: value });
+	const handlePositionChange = (value: string) => setForm({ ...form, position: value });
 	const handleTimezoneChange = (value: string) => setForm({ ...form, timezone: value });
 
 	const toggleSuperAdmin = () => {
@@ -188,20 +187,17 @@ const UserForm = (props: IProps) => {
 		<>
 			<RouteLeavingGuard when={isDirty} action={action} text={text} allowedRoutes={allowedRoutes} />
 			{!isOpen && <ErrorToast size="l" />}
+
 			<S.Wrapper>
-				<S.SubTitle>USER DATA</S.SubTitle>
-				<S.NameTitle>{user.name}</S.NameTitle>
-				<FieldsBehavior
-					title="Avatar profile"
-					name="image"
-					value={image}
-					fieldType="ImageField"
-					onChange={handleImageChange}
-					helptext="Customize how people see you."
-					disabled={isEditDisabled}
-					site={site}
-					noGallery={true}
-				/>
+				<S.Header>
+					<S.AvatarWrapper>
+						<ProfileImage imageUrl={image?.url} handleImage={handleImageChange} />
+					</S.AvatarWrapper>
+					<S.UserName>
+						<S.SubTitle>USER DATA</S.SubTitle>
+						<S.NameTitle>{user.name}</S.NameTitle>
+					</S.UserName>
+				</S.Header>
 				<FieldsBehavior
 					title="Name"
 					name="name"
@@ -257,12 +253,12 @@ const UserForm = (props: IProps) => {
 					/>
 				)}
 				<FieldsBehavior
-					title="Description"
-					name="description"
+					title="Job title"
+					name="position"
 					fieldType="TextField"
-					placeholder="Type a description"
-					value={description || ""}
-					onChange={handleDescriptionChange}
+					placeholder="Type a job"
+					value={position || ""}
+					onChange={handlePositionChange}
 					disabled={isEditDisabled}
 				/>
 				<FieldsBehavior
@@ -500,7 +496,7 @@ const mapStateToProps = (state: IRootState) => ({
 	isSaving: state.app.isSaving,
 	isLoading: state.app.isLoading,
 	currentUser: state.users.currentUser,
-	sites: state.sites.sites,
+	sites: state.sites.allSites,
 	roles: state.users.roles,
 });
 

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

@@ -6,16 +6,26 @@ const Wrapper = styled.section`
   padding-bottom: calc(${(p) => p.theme.spacing.xl} * 2);
 `;
 
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${(p) => p.theme.spacing.m};
+  margin-bottom: ${(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};
-  margin-bottom: ${(p) => p.theme.spacing.m};
 `;
 
 const SubTitle = styled.div`
   ${(p) => p.theme.textStyle.headingXS};
   color: ${(p) => p.theme.color.textMediumEmphasis};
-  margin-bottom: ${(p) => p.theme.spacing.xs};
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
 `;
 
 const ModalContent = styled.div`
@@ -112,6 +122,9 @@ const HelpText = styled.div`
 
 export {
 	Wrapper,
+	Header,
+	AvatarWrapper,
+	UserName,
 	NameTitle,
 	SubTitle,
 	ModalContent,

package/src/modules/Users/UserList/UserItem/index.tsx

@@ -137,14 +137,14 @@ const UserItem = (props: IUserItemProps): JSX.Element => {
 
 	const rolesString = user.isSuperAdmin
 		? ["Super - admin"]
-		: roles && roles.filter((role: IRole) => rolesIds && rolesIds.includes(role.id)).map((role: IRole) => role.name);
+		: roles?.filter((role: IRole) => rolesIds?.includes(role.id)).map((role: IRole) => role.name);
 
 	const colors = user.isSuperAdmin
 		? { "Super - admin": "#E7CBFE" }
-		: rolesString &&
-			rolesString.reduce((prev, current) => {
+		: rolesString?.reduce((prev: Record<string, string | undefined>, current) => {
 				const color: IRole | undefined = roles.find((role: IRole) => role.name === current);
-				return { ...prev, [current]: color?.hex };
+				prev[current] = color?.hex;
+				return prev;
 			}, {});
 
 	return (

package/src/routes/index.tsx

@@ -23,6 +23,7 @@ export interface IRouter {
 	url?: string;
 	target?: string;
 	permission?: string | string[];
+	avatar?: { image?: string; name?: string };
 }
 
 export { privateRoutes, publicRoutes, routes, history, multisite, site };

package/src/types/index.tsx

@@ -721,6 +721,8 @@ export interface IUser {
 	status?: string;
 	roles: ISiteRoles[];
 	isSuperAdmin: boolean;
+	position?: string | null;
+	profileCreated?: boolean;
 }
 
 export interface IEmptyStateProps {