feature: add user project count to Admin component
This commit is contained in:
Jordan Knott
@ -1,18 +1,18 @@
|
||||
import React, {useRef} from 'react';
|
||||
import React, { useRef } from 'react';
|
||||
import Admin from '.';
|
||||
import {theme} from 'App/ThemeStyles';
|
||||
import { theme } from 'App/ThemeStyles';
|
||||
import NormalizeStyles from 'App/NormalizeStyles';
|
||||
import BaseStyles from 'App/BaseStyles';
|
||||
import {ThemeProvider} from 'styled-components';
|
||||
import {action} from '@storybook/addon-actions';
|
||||
import { ThemeProvider } from 'styled-components';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
export default {
|
||||
component: Admin,
|
||||
title: 'Admin',
|
||||
parameters: {
|
||||
backgrounds: [
|
||||
{name: 'gray', value: '#f8f8f8', default: true},
|
||||
{name: 'white', value: '#ffffff'},
|
||||
{ name: 'gray', value: '#f8f8f8', default: true },
|
||||
{ name: 'white', value: '#ffffff' },
|
||||
],
|
||||
},
|
||||
};
|
||||
@ -33,13 +33,21 @@ export const Default = () => {
|
||||
id: '1',
|
||||
username: 'jordanthedev',
|
||||
email: 'jordan@jordanthedev.com',
|
||||
role: {code: 'admin', name: 'Admin'},
|
||||
role: { code: 'admin', name: 'Admin' },
|
||||
fullName: 'Jordan Knott',
|
||||
profileIcon: {
|
||||
bgColor: '#fff',
|
||||
initials: 'JK',
|
||||
url: null,
|
||||
},
|
||||
owned: {
|
||||
teams: [{ id: '1', name: 'Team' }],
|
||||
projects: [{ id: '2', name: 'Project' }],
|
||||
},
|
||||
member: {
|
||||
teams: [],
|
||||
projects: [],
|
||||
},
|
||||
},
|
||||
]}
|
||||
onAddUser={action('add user')}
|
||||
|
||||
@ -509,7 +509,7 @@ const ListTable: React.FC<ListTableProps> = ({ users, onDeleteUser }) => {
|
||||
rowSelection="multiple"
|
||||
defaultColDef={data.defaultColDef}
|
||||
columnDefs={data.columnDefs}
|
||||
rowData={users.map(u => ({ ...u, roleName: u.role.name }))}
|
||||
rowData={users.map(u => ({ ...u, roleName: 'member' }))}
|
||||
frameworkComponents={data.frameworkComponents}
|
||||
onFirstDataRendered={params => {
|
||||
params.api.sizeColumnsToFit();
|
||||
@ -717,46 +717,49 @@ const Admin: React.FC<AdminProps> = ({
|
||||
</ListActions>
|
||||
</MemberListHeader>
|
||||
<MemberList>
|
||||
{users.map(member => (
|
||||
<MemberListItem>
|
||||
<MemberProfile showRoleIcons size={32} onMemberProfile={() => {}} member={member} />
|
||||
<MemberListItemDetails>
|
||||
<MemberItemName>{member.fullName}</MemberItemName>
|
||||
<MemberItemUsername>{`@${member.username}`}</MemberItemUsername>
|
||||
</MemberListItemDetails>
|
||||
<MemberItemOptions>
|
||||
<MemberItemOption variant="flat">On 6 projects</MemberItemOption>
|
||||
<MemberItemOption
|
||||
variant="outline"
|
||||
onClick={$target => {
|
||||
showPopup(
|
||||
$target,
|
||||
<TeamRoleManagerPopup
|
||||
user={member}
|
||||
warning={member.role && member.role.code === 'owner' ? warning : null}
|
||||
updateUserPassword={(user, password) => {
|
||||
onUpdateUserPassword(user, password);
|
||||
}}
|
||||
canChangeRole={member.role && member.role.code !== 'owner'}
|
||||
onChangeRole={roleCode => {
|
||||
updateUserRole({ variables: { userID: member.id, roleCode } });
|
||||
}}
|
||||
onRemoveFromTeam={
|
||||
member.role && member.role.code === 'owner'
|
||||
? undefined
|
||||
: () => {
|
||||
hidePopup();
|
||||
}
|
||||
}
|
||||
/>,
|
||||
);
|
||||
}}
|
||||
>
|
||||
Manage
|
||||
</MemberItemOption>
|
||||
</MemberItemOptions>
|
||||
</MemberListItem>
|
||||
))}
|
||||
{users.map(member => {
|
||||
const projectTotal = member.owned.projects.length + member.member.projects.length;
|
||||
return (
|
||||
<MemberListItem>
|
||||
<MemberProfile showRoleIcons size={32} onMemberProfile={() => {}} member={member} />
|
||||
<MemberListItemDetails>
|
||||
<MemberItemName>{member.fullName}</MemberItemName>
|
||||
<MemberItemUsername>{`@${member.username}`}</MemberItemUsername>
|
||||
</MemberListItemDetails>
|
||||
<MemberItemOptions>
|
||||
<MemberItemOption variant="flat">{`On ${projectTotal} projects`}</MemberItemOption>
|
||||
<MemberItemOption
|
||||
variant="outline"
|
||||
onClick={$target => {
|
||||
showPopup(
|
||||
$target,
|
||||
<TeamRoleManagerPopup
|
||||
user={member}
|
||||
warning={member.role && member.role.code === 'owner' ? warning : null}
|
||||
updateUserPassword={(user, password) => {
|
||||
onUpdateUserPassword(user, password);
|
||||
}}
|
||||
canChangeRole={(member.role && member.role.code !== 'owner') ?? false}
|
||||
onChangeRole={roleCode => {
|
||||
updateUserRole({ variables: { userID: member.id, roleCode } });
|
||||
}}
|
||||
onRemoveFromTeam={
|
||||
member.role && member.role.code === 'owner'
|
||||
? undefined
|
||||
: () => {
|
||||
hidePopup();
|
||||
}
|
||||
}
|
||||
/>,
|
||||
);
|
||||
}}
|
||||
>
|
||||
Manage
|
||||
</MemberItemOption>
|
||||
</MemberItemOptions>
|
||||
</MemberListItem>
|
||||
);
|
||||
})}
|
||||
</MemberList>
|
||||
</MemberListWrapper>
|
||||
</TabContent>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import styled, { css } from 'styled-components/macro';
|
||||
|
||||
const InputWrapper = styled.div<{ width: string }>`
|
||||
@ -85,6 +85,8 @@ type InputProps = {
|
||||
icon?: JSX.Element;
|
||||
type?: string;
|
||||
autocomplete?: boolean;
|
||||
autoFocus?: boolean;
|
||||
autoSelect?: boolean;
|
||||
id?: string;
|
||||
name?: string;
|
||||
className?: string;
|
||||
@ -92,12 +94,32 @@ type InputProps = {
|
||||
onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
|
||||
};
|
||||
|
||||
function useCombinedRefs(...refs: any) {
|
||||
const targetRef = React.useRef();
|
||||
|
||||
React.useEffect(() => {
|
||||
refs.forEach((ref: any) => {
|
||||
if (!ref) return;
|
||||
|
||||
if (typeof ref === 'function') {
|
||||
ref(targetRef.current);
|
||||
} else {
|
||||
ref.current = targetRef.current;
|
||||
}
|
||||
});
|
||||
}, [refs]);
|
||||
|
||||
return targetRef;
|
||||
}
|
||||
|
||||
const Input = React.forwardRef(
|
||||
(
|
||||
{
|
||||
width = 'auto',
|
||||
variant = 'normal',
|
||||
type = 'text',
|
||||
autoFocus = false,
|
||||
autoSelect = false,
|
||||
autocomplete,
|
||||
label,
|
||||
placeholder,
|
||||
@ -111,9 +133,25 @@ const Input = React.forwardRef(
|
||||
}: InputProps,
|
||||
$ref: any,
|
||||
) => {
|
||||
const [hasValue, setHasValue] = useState(false);
|
||||
const [hasValue, setHasValue] = useState(defaultValue !== '');
|
||||
const borderColor = variant === 'normal' ? 'rgba(0, 0, 0, 0.2)' : '#414561';
|
||||
const focusBg = variant === 'normal' ? 'rgba(38, 44, 73, )' : 'rgba(16, 22, 58, 1)';
|
||||
|
||||
// Merge forwarded ref and internal ref in order to be able to access the ref in the useEffect
|
||||
// The forwarded ref is not accessible by itself, which is what the innerRef & combined ref is for
|
||||
// TODO(jordanknott): This is super ugly, find a better approach?
|
||||
const $innerRef = React.useRef<HTMLInputElement>(null);
|
||||
const combinedRef: any = useCombinedRefs($ref, $innerRef);
|
||||
useEffect(() => {
|
||||
if (combinedRef && combinedRef.current) {
|
||||
if (autoFocus) {
|
||||
combinedRef.current.focus();
|
||||
}
|
||||
if (autoSelect) {
|
||||
combinedRef.current.select();
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
return (
|
||||
<InputWrapper className={className} width={width}>
|
||||
<InputInput
|
||||
@ -121,7 +159,7 @@ const Input = React.forwardRef(
|
||||
setHasValue((e.currentTarget.value !== '' || floatingLabel) ?? false);
|
||||
}}
|
||||
hasValue={hasValue}
|
||||
ref={$ref}
|
||||
ref={combinedRef}
|
||||
id={id}
|
||||
type={type}
|
||||
name={name}
|
||||
|
||||
Reference in New Issue
Block a user