jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change(ui) - preferences - userlist

Browse source
This commit is contained in:
Shekar Siri 2022-08-08 11:43:09 +02:00
parent 29d1b1aedc
commit 784d4f1eca
2 changed files with 21 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
frontend/app/components/Client/Users/components/UserList/UserList.tsx
View file

@ -65,8 +65,14 @@ function UserList(props: Props) {
<UserListItem
user={user}
editHandler={() => editHandler(user)}
generateInvite={() => userStore.generateInviteCode(user.userId)}
copyInviteCode={() => userStore.copyInviteCode(user.userId)}
generateInvite={(e: any) => {
e.stopPropagation();
userStore.generateInviteCode(user.userId);
}}
copyInviteCode={(e) => {
e.stopPropagation();
userStore.copyInviteCode(user.userId);
}}
isEnterprise={isEnterprise}
isOnboarding={isOnboarding}
/>

52
frontend/app/components/Client/Users/components/UserListItem/UserListItem.tsx
View file

@ -1,6 +1,6 @@
//@ts-nocheck
import React from 'react';
import { Icon, Popup } from 'UI';
import { Button, Popup } from 'UI';
import { checkForRecent } from 'App/date';
import cn from 'classnames';
@ -10,8 +10,8 @@ const AdminPrivilegeLabel = ({ user }) => {
{user.isAdmin && <span className="px-2 py-1 bg-gray-lightest rounded border text-sm capitalize">Admin</span>}
{user.isSuperAdmin && <span className="px-2 py-1 bg-gray-lightest rounded border text-sm capitalize">Owner</span>}
</>
)
}
);
};
interface Props {
isOnboarding?: boolean;
user: any;
@ -21,27 +21,16 @@ interface Props {
isEnterprise?: boolean;
}
function UserListItem(props: Props) {
const {
user,
editHandler = () => {},
generateInvite = () => {},
copyInviteCode = () => {},
isEnterprise = false,
isOnboarding = false
} = props;
const { user, editHandler = () => {}, generateInvite = () => {}, copyInviteCode = () => {}, isEnterprise = false, isOnboarding = false } = props;
return (
<div className="grid grid-cols-12 p-3 py-4 border-b items-center select-none hover:bg-active-blue group">
<div className="grid grid-cols-12 p-3 py-4 border-b items-center select-none hover:bg-active-blue group cursor-pointer" onClick={editHandler}>
<div className="col-span-5">
<span className="mr-2">{user.name}</span>
{isEnterprise && <AdminPrivilegeLabel user={user} />}
</div>
<div className="col-span-3">
{!isEnterprise && <AdminPrivilegeLabel user={user} />}
{isEnterprise && (
<span className="px-2 py-1 bg-gray-lightest rounded border text-sm capitalize">
{user.roleName}
</span>
)}
{isEnterprise && <span className="px-2 py-1 bg-gray-lightest rounded border text-sm capitalize">{user.roleName}</span>}
</div>
{!isOnboarding && (
<div className="col-span-2">
@ -49,41 +38,26 @@ function UserListItem(props: Props) {
</div>
)}
<div className={cn("justify-self-end invisible group-hover:visible", { 'col-span-2' : !isOnboarding, 'col-span-4' : isOnboarding})}>
<div className={cn('justify-self-end invisible group-hover:visible', { 'col-span-2': !isOnboarding, 'col-span-4': isOnboarding })}>
<div className="grid grid-cols-2 gap-3 items-center justify-end">
<div>
{!user.isJoined && user.invitationLink && !user.isExpiredInvite && (
<Popup
delay={500}
content="Copy Invite Code"
hideOnClick={true}
>
<button className='' onClick={copyInviteCode}>
<Icon name="link-45deg" size="16" color="teal"/>
</button>
<Popup delay={500} content="Copy Invite Code" hideOnClick={true}>
<Button variant="text-primary" icon="link-45deg" className="" onClick={copyInviteCode} />
</Popup>
)}
{!user.isJoined && user.isExpiredInvite && (
<Popup
delay={500}
arrow
content="Generate Invite"
hideOnClick={true}
>
<button className='' onClick={generateInvite}>
<Icon name="link-45deg" size="16" color="red"/>
</button>
<Popup delay={500} arrow content="Generate Invite" hideOnClick={true}>
<Button icon="link-45deg" variant="text-primary" className="" onClick={generateInvite} />
</Popup>
)}
</div>
<button className='' onClick={editHandler}>
<Icon name="pencil" color="teal" size="16" />
</button>
<Button variant="text-primary" icon="pencil" />
</div>
</div>
</div>
);
}
export default UserListItem;
export default UserListItem;