Web:Components:Add onRemoveUser, roles with users.
This commit is contained in:
parent
ae92476829
commit
4f4c6d7f52
@ -1,4 +1,4 @@
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import FillingRoleSelector from ".";
|
||||
|
||||
export default {
|
||||
@ -6,6 +6,7 @@ export default {
|
||||
component: FillingRoleSelector,
|
||||
argTypes: {
|
||||
onClick: { action: "onClick" },
|
||||
onRemoveUser: { action: "onRemoveUser" },
|
||||
},
|
||||
};
|
||||
|
||||
@ -21,14 +22,15 @@ const mockUsers = [
|
||||
firstName: "Makenna",
|
||||
lastName: "Lipshutz",
|
||||
role: "Accountant",
|
||||
avatar: "",
|
||||
avatar: "/images/user.avatar.example.react.svg",
|
||||
hasAvatar: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
firstName: "Randy",
|
||||
lastName: "Korsgaard",
|
||||
role: "Director",
|
||||
avatar: "",
|
||||
hasAvatar: false,
|
||||
},
|
||||
];
|
||||
|
||||
@ -47,12 +49,26 @@ Default.args = {
|
||||
roles: mockRoles,
|
||||
};
|
||||
|
||||
const TemplateRolesFilledUsers = ({ onClick, ...args }) => {
|
||||
const TemplateRolesFilledUsers = ({
|
||||
users,
|
||||
onClick,
|
||||
onRemoveUser,
|
||||
...args
|
||||
}) => {
|
||||
const [usersAssigned, setUsersAssigned] = useState(mockUsers);
|
||||
|
||||
const onRemoveUserHandler = (id) => {
|
||||
const newUsersAssigned = usersAssigned.filter((item) => item.id !== id);
|
||||
setUsersAssigned(newUsersAssigned);
|
||||
};
|
||||
|
||||
return (
|
||||
<FillingRoleSelector
|
||||
{...args}
|
||||
style={{ width: "480px", padding: "16px" }}
|
||||
onClick={(e) => onClick(e)}
|
||||
// onClick={(e) => onClick(e)}
|
||||
users={usersAssigned}
|
||||
onRemoveUser={onRemoveUserHandler}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@ -60,6 +76,5 @@ const TemplateRolesFilledUsers = ({ onClick, ...args }) => {
|
||||
export const rolesFilledUsers = TemplateRolesFilledUsers.bind({});
|
||||
|
||||
rolesFilledUsers.args = {
|
||||
users: mockUsers,
|
||||
roles: mockRoles,
|
||||
};
|
||||
|
@ -9,10 +9,17 @@ import {
|
||||
StyledRole,
|
||||
StyledEveryoneRoleContainer,
|
||||
StyledTooltip,
|
||||
StyledAssignedRole,
|
||||
StyledAvatar,
|
||||
StyledUserRow,
|
||||
} from "./styled-filling-role-selector";
|
||||
|
||||
import AvatarBaseReactSvgUrl from "PUBLIC_DIR/images/avatar.base.react.svg?url";
|
||||
import RemoveSvgUrl from "PUBLIC_DIR/images/remove.session.svg?url";
|
||||
|
||||
import { ReactSVG } from "react-svg";
|
||||
const FillingRoleSelector = (props) => {
|
||||
const { roles, users, onClick } = props;
|
||||
const { roles, users, onClick, onRemoveUser } = props;
|
||||
|
||||
const cloneRoles = JSON.parse(JSON.stringify(roles));
|
||||
const sortedInOrderRoles = cloneRoles.sort((a, b) =>
|
||||
@ -21,6 +28,8 @@ const FillingRoleSelector = (props) => {
|
||||
const everyoneRole = roles.find((item) => item.everyone == true);
|
||||
|
||||
//TODO: Add correct translations
|
||||
//TODO: Rename item
|
||||
//TODO: Rename onClick
|
||||
return (
|
||||
<StyledFillingRoleSelector {...props}>
|
||||
{everyoneRole && (
|
||||
@ -31,7 +40,7 @@ const FillingRoleSelector = (props) => {
|
||||
<StyledEveryoneRoleContainer>
|
||||
<div className="title">
|
||||
<StyledRole>{everyoneRole.role}</StyledRole>
|
||||
<StyledRole className="comment">(@Everyone)</StyledRole>
|
||||
<StyledAssignedRole>@Everyone</StyledAssignedRole>
|
||||
</div>
|
||||
|
||||
<div className="role-description">
|
||||
@ -47,10 +56,50 @@ const FillingRoleSelector = (props) => {
|
||||
</>
|
||||
)}
|
||||
|
||||
{sortedInOrderRoles.map((item) => {
|
||||
{sortedInOrderRoles.map((item, index) => {
|
||||
if (item.everyone) return;
|
||||
|
||||
if (users) {
|
||||
const roleWithUser = users.find((user) => user.role === item.role);
|
||||
if (roleWithUser) {
|
||||
return (
|
||||
<StyledUserRow key={index}>
|
||||
<div className="content">
|
||||
<StyledNumber>{item.order}</StyledNumber>
|
||||
<StyledAvatar
|
||||
src={
|
||||
roleWithUser.hasAvatar
|
||||
? roleWithUser.avatar
|
||||
: AvatarBaseReactSvgUrl
|
||||
}
|
||||
/>
|
||||
<div className="user-with-role">
|
||||
<StyledRole>
|
||||
{roleWithUser.firstName} {roleWithUser.lastName}
|
||||
</StyledRole>
|
||||
<StyledAssignedRole>{roleWithUser.role}</StyledAssignedRole>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ReactSVG
|
||||
src={RemoveSvgUrl}
|
||||
onClick={() => onRemoveUser(roleWithUser.id)}
|
||||
/>
|
||||
</StyledUserRow>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<StyledRow key={index}>
|
||||
<StyledNumber>{item.order}</StyledNumber>
|
||||
<StyledAddRoleButton onClick={onClick} color={item.color} />
|
||||
<StyledRole>{item.role}</StyledRole>
|
||||
</StyledRow>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<StyledRow>
|
||||
<StyledRow key={index}>
|
||||
<StyledNumber>{item.order}</StyledNumber>
|
||||
<StyledAddRoleButton onClick={onClick} color={item.color} />
|
||||
<StyledRole>{item.role}</StyledRole>
|
||||
@ -65,6 +114,7 @@ FillingRoleSelector.propTypes = {
|
||||
roles: PropTypes.array,
|
||||
users: PropTypes.array,
|
||||
onClick: PropTypes.func,
|
||||
onRemoveUser: PropTypes.func,
|
||||
};
|
||||
|
||||
FillingRoleSelector.defaultProps = {};
|
||||
|
@ -15,6 +15,23 @@ const StyledRow = styled.div`
|
||||
gap: 8px;
|
||||
`;
|
||||
|
||||
const StyledUserRow = styled.div`
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.user-with-role {
|
||||
display: flex;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledNumber = styled.div`
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
@ -22,6 +39,12 @@ const StyledNumber = styled.div`
|
||||
color: #a3a9ae;
|
||||
`;
|
||||
|
||||
const StyledAvatar = styled.img`
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 50%;
|
||||
`;
|
||||
|
||||
const StyledAddRoleButton = styled(AddRoleButton)`
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
@ -46,6 +69,18 @@ const StyledRole = styled.div`
|
||||
line-height: 16px;
|
||||
`;
|
||||
|
||||
const StyledAssignedRole = styled.div`
|
||||
padding-left: 4px;
|
||||
color: rgba(170, 170, 170, 1);
|
||||
|
||||
::before {
|
||||
content: "(";
|
||||
}
|
||||
::after {
|
||||
content: ")";
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledEveryoneRoleContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -54,11 +89,6 @@ const StyledEveryoneRoleContainer = styled.div`
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.comment {
|
||||
padding-left: 4px;
|
||||
color: rgba(170, 170, 170, 1);
|
||||
}
|
||||
|
||||
.role-description {
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
@ -89,4 +119,7 @@ export {
|
||||
StyledRole,
|
||||
StyledEveryoneRoleContainer,
|
||||
StyledTooltip,
|
||||
StyledAssignedRole,
|
||||
StyledAvatar,
|
||||
StyledUserRow,
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user