Web:Components:Add onRemoveUser, roles with users.

packages/components/filling-role-selector/filling-role-selector.stories.js

@@ -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,
 };

packages/components/filling-role-selector/index.js

@@ -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 (
-          <StyledRow>
+              <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 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 = {};

packages/components/filling-role-selector/styled-filling-role-selector.js

@@ -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,
 };