ui(admin): fix users list
This commit is contained in:
Matthew Penner
parent
5063db7d95
commit
4b82ca1042
5 changed files with 126 additions and 92 deletions
|
|
@ -4,7 +4,7 @@ import { useState } from 'react';
|
|||
import Checkbox from '@/components/elements/inputs/Checkbox';
|
||||
import { Dropdown } from '@/components/elements/dropdown';
|
||||
import { Dialog } from '@/components/elements/dialog';
|
||||
import { User } from '@definitions/admin';
|
||||
import type { User } from '@definitions/admin';
|
||||
|
||||
interface Props {
|
||||
user: User;
|
||||
|
|
@ -12,7 +12,7 @@ interface Props {
|
|||
onRowChange: (user: User, selected: boolean) => void;
|
||||
}
|
||||
|
||||
const UserTableRow = ({ user, selected, onRowChange }: Props) => {
|
||||
function UserTableRow({ user, selected, onRowChange }: Props) {
|
||||
const [visible, setVisible] = useState(false);
|
||||
|
||||
return (
|
||||
|
|
@ -56,12 +56,14 @@ const UserTableRow = ({ user, selected, onRowChange }: Props) => {
|
|||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className={'whitespace-nowrap px-6 py-4'}>
|
||||
<td className="whitespace-nowrap px-6 py-4">
|
||||
<Dropdown>
|
||||
<Dropdown.Button className={'px-2'}>
|
||||
<Dropdown.Button className="px-2">
|
||||
<DotsVerticalIcon />
|
||||
</Dropdown.Button>
|
||||
<Dropdown.Item icon={<PencilIcon />}>Edit</Dropdown.Item>
|
||||
<Dropdown.Item to={`/admin/users/${user.id}`} icon={<PencilIcon />}>
|
||||
Edit
|
||||
</Dropdown.Item>
|
||||
<Dropdown.Item icon={<SupportIcon />}>Reset Password</Dropdown.Item>
|
||||
<Dropdown.Item icon={<LockOpenIcon />} disabled={!user.isUsingTwoFactor}>
|
||||
Disable 2-FA
|
||||
|
|
@ -76,6 +78,6 @@ const UserTableRow = ({ user, selected, onRowChange }: Props) => {
|
|||
</tr>
|
||||
</>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default UserTableRow;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { LockOpenIcon, PlusIcon, SupportIcon, TrashIcon } from '@heroicons/react/solid';
|
||||
import { Fragment, useEffect, useState } from 'react';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
|
||||
import { useGetUsers } from '@/api/admin/users';
|
||||
import type { UUID } from '@/api/definitions';
|
||||
|
|
@ -16,7 +17,7 @@ import { Shape } from '@/components/elements/button/types';
|
|||
|
||||
const filters = ['id', 'uuid', 'external_id', 'username', 'email'] as const;
|
||||
|
||||
const UsersContainer = () => {
|
||||
function UsersContainer() {
|
||||
const [search, setSearch] = useDebouncedState('', 500);
|
||||
const [selected, setSelected] = useState<UUID[]>([]);
|
||||
const { data: users } = useGetUsers(
|
||||
|
|
@ -42,13 +43,16 @@ const UsersContainer = () => {
|
|||
|
||||
return (
|
||||
<div>
|
||||
<div className={'mb-4 flex justify-end'}>
|
||||
<Button className={'shadow focus:ring-offset-2 focus:ring-offset-neutral-800'}>
|
||||
Add User <PlusIcon className={'ml-2 h-5 w-5'} />
|
||||
<div className="mb-4 flex justify-end">
|
||||
<NavLink to="/admin/users/new">
|
||||
<Button className="shadow focus:ring-offset-2 focus:ring-offset-neutral-800">
|
||||
Add User <PlusIcon className="ml-2 h-5 w-5" />
|
||||
</Button>
|
||||
</NavLink>
|
||||
</div>
|
||||
<div className={'relative flex items-center rounded-t bg-neutral-700 px-4 py-2'}>
|
||||
<div className={'mr-6'}>
|
||||
|
||||
<div className="relative flex items-center rounded-t bg-neutral-700 px-4 py-2">
|
||||
<div className="mr-6">
|
||||
<Checkbox
|
||||
checked={selectAllChecked}
|
||||
disabled={!users?.items.length}
|
||||
|
|
@ -56,22 +60,18 @@ const UsersContainer = () => {
|
|||
onChange={onSelectAll}
|
||||
/>
|
||||
</div>
|
||||
<div className={'flex-1'}>
|
||||
<div className="flex-1">
|
||||
<InputField
|
||||
type={'text'}
|
||||
name={'filter'}
|
||||
placeholder={'Begin typing to filter...'}
|
||||
className={'w-56 focus:w-96'}
|
||||
type="text"
|
||||
name="filter"
|
||||
placeholder="Begin typing to filter..."
|
||||
className="w-56 focus:w-96"
|
||||
onChange={e => setSearch(e.currentTarget.value)}
|
||||
/>
|
||||
</div>
|
||||
<Transition.Fade as={Fragment} show={selected.length > 0} duration={'duration-75'}>
|
||||
<div
|
||||
className={
|
||||
'absolute top-0 left-0 flex h-full w-full items-center justify-end space-x-4 rounded-t bg-neutral-700 px-4'
|
||||
}
|
||||
>
|
||||
<div className={'flex-1'}>
|
||||
<Transition.Fade as={Fragment} show={selected.length > 0} duration="duration-75">
|
||||
<div className="absolute top-0 left-0 flex h-full w-full items-center justify-end space-x-4 rounded-t bg-neutral-700 px-4">
|
||||
<div className="flex-1">
|
||||
<Checkbox
|
||||
checked={selectAllChecked}
|
||||
indeterminate={selected.length !== users?.items.length}
|
||||
|
|
@ -79,26 +79,26 @@ const UsersContainer = () => {
|
|||
/>
|
||||
</div>
|
||||
<Button.Text shape={Shape.IconSquare}>
|
||||
<SupportIcon className={'h-4 w-4'} />
|
||||
<SupportIcon className="h-4 w-4" />
|
||||
</Button.Text>
|
||||
<Button.Text shape={Shape.IconSquare}>
|
||||
<LockOpenIcon className={'h-4 w-4'} />
|
||||
<LockOpenIcon className="h-4 w-4" />
|
||||
</Button.Text>
|
||||
<Button.Text shape={Shape.IconSquare}>
|
||||
<TrashIcon className={'h-4 w-4'} />
|
||||
<TrashIcon className="h-4 w-4" />
|
||||
</Button.Text>
|
||||
</div>
|
||||
</Transition.Fade>
|
||||
</div>
|
||||
<table className={'min-w-full rounded bg-neutral-700'}>
|
||||
<thead className={'bg-neutral-900'}>
|
||||
<table className="min-w-full rounded bg-neutral-700">
|
||||
<thead className="bg-neutral-900">
|
||||
<tr>
|
||||
<th scope={'col'} className={'w-8'} />
|
||||
<th scope={'col'} className={'w-full px-6 py-2 text-left'}>
|
||||
<th scope="col" className="w-8" />
|
||||
<th scope="col" className="w-full px-6 py-2 text-left">
|
||||
Email
|
||||
</th>
|
||||
<th scope={'col'} />
|
||||
<th scope={'col'} />
|
||||
<th scope="col" />
|
||||
<th scope="col" />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -111,10 +111,10 @@ const UsersContainer = () => {
|
|||
/>
|
||||
))}
|
||||
</tbody>
|
||||
{users && <TFootPaginated span={4} pagination={users.pagination} />}
|
||||
{users ? <TFootPaginated span={4} pagination={users.pagination} /> : null}
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default UsersContainer;
|
||||
|
|
|
|||
|
|
@ -1,27 +1,29 @@
|
|||
import { ElementType, forwardRef, useMemo } from 'react';
|
||||
import * as React from 'react';
|
||||
import { Menu, Transition } from '@headlessui/react';
|
||||
import styles from './style.module.css';
|
||||
import classNames from 'classnames';
|
||||
import DropdownItem from '@/components/elements/dropdown/DropdownItem';
|
||||
import DropdownButton from '@/components/elements/dropdown/DropdownButton';
|
||||
import type { ElementType, ReactNode } from 'react';
|
||||
import { Children as ReactChildren } from 'react';
|
||||
import { forwardRef, useMemo } from 'react';
|
||||
|
||||
import { DropdownButton } from '@/components/elements/dropdown/DropdownButton';
|
||||
import { DropdownItem } from '@/components/elements/dropdown/DropdownItem';
|
||||
import styles from './style.module.css';
|
||||
|
||||
interface Props {
|
||||
as?: ElementType;
|
||||
children: React.ReactNode;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
const DropdownGap = ({ invisible }: { invisible?: boolean }) => (
|
||||
<div className={classNames('m-2 border', { 'border-neutral-700': !invisible, 'border-transparent': invisible })} />
|
||||
);
|
||||
|
||||
type TypedChild = (React.ReactChild | React.ReactFragment | React.ReactPortal) & {
|
||||
type TypedChild = ReactNode & {
|
||||
type?: JSX.Element;
|
||||
};
|
||||
|
||||
const Dropdown = forwardRef<typeof Menu, Props>(({ as, children }, ref) => {
|
||||
const [Button, items] = useMemo(() => {
|
||||
const list = React.Children.toArray(children) as unknown as TypedChild[];
|
||||
const list = ReactChildren.toArray(children) as unknown as TypedChild[];
|
||||
|
||||
return [
|
||||
list.filter(child => child.type === DropdownButton),
|
||||
|
|
@ -34,18 +36,18 @@ const Dropdown = forwardRef<typeof Menu, Props>(({ as, children }, ref) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<Menu as={as || 'div'} className={styles.menu} ref={ref}>
|
||||
<Menu as={as ?? 'div'} className={styles.menu} ref={ref}>
|
||||
{Button}
|
||||
<Transition
|
||||
enter={'transition duration-100 ease-out'}
|
||||
enterFrom={'transition scale-95 opacity-0'}
|
||||
enterTo={'transform scale-100 opacity-100'}
|
||||
leave={'transition duration-75 ease-out'}
|
||||
leaveFrom={'transform scale-100 opacity-100'}
|
||||
leaveTo={'transform scale-95 opacity-0'}
|
||||
enter="transition duration-100 ease-out"
|
||||
enterFrom="transition scale-95 opacity-0"
|
||||
enterTo="transform scale-100 opacity-100"
|
||||
leave="transition duration-75 ease-out"
|
||||
leaveFrom="transform scale-100 opacity-100"
|
||||
leaveTo="transform scale-95 opacity-0"
|
||||
>
|
||||
<Menu.Items className={classNames(styles.items_container, 'w-56')}>
|
||||
<div className={'px-1 py-1'}>{items}</div>
|
||||
<div className="px-1 py-1">{items}</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,29 @@
|
|||
import classNames from 'classnames';
|
||||
import styles from '@/components/elements/dropdown/style.module.css';
|
||||
import { ChevronDownIcon } from '@heroicons/react/solid';
|
||||
import { Menu } from '@headlessui/react';
|
||||
import * as React from 'react';
|
||||
import { ChevronDownIcon } from '@heroicons/react/solid';
|
||||
import classNames from 'classnames';
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
import styles from './style.module.css';
|
||||
|
||||
interface Props {
|
||||
className?: string;
|
||||
animate?: boolean;
|
||||
children: React.ReactNode;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export default ({ className, animate = true, children }: Props) => (
|
||||
<Menu.Button className={classNames(styles.button, className || 'px-4')}>
|
||||
function DropdownButton({ className, animate = true, children }: Props) {
|
||||
return (
|
||||
<Menu.Button className={classNames(styles.button, className ?? 'px-4')}>
|
||||
{typeof children === 'string' ? (
|
||||
<>
|
||||
<span className={'mr-2'}>{children}</span>
|
||||
<ChevronDownIcon aria-hidden={'true'} data-animated={animate.toString()} />
|
||||
<span className="mr-2">{children}</span>
|
||||
<ChevronDownIcon aria-hidden="true" data-animated={animate.toString()} />
|
||||
</>
|
||||
) : (
|
||||
children
|
||||
)}
|
||||
</Menu.Button>
|
||||
);
|
||||
}
|
||||
|
||||
export { DropdownButton };
|
||||
|
|
|
|||
|
|
@ -1,26 +1,32 @@
|
|||
import { forwardRef } from 'react';
|
||||
import * as React from 'react';
|
||||
import { Menu } from '@headlessui/react';
|
||||
import styles from './style.module.css';
|
||||
import classNames from 'classnames';
|
||||
import type { MouseEvent, ReactNode, Ref } from 'react';
|
||||
import { forwardRef } from 'react';
|
||||
import type { NavLinkProps } from 'react-router-dom';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
|
||||
import styles from './style.module.css';
|
||||
|
||||
interface Props {
|
||||
children: React.ReactNode | ((opts: { active: boolean; disabled: boolean }) => JSX.Element);
|
||||
children: ReactNode | ((opts: { active: boolean; disabled: boolean }) => JSX.Element);
|
||||
danger?: boolean;
|
||||
disabled?: boolean;
|
||||
className?: string;
|
||||
icon?: JSX.Element;
|
||||
onClick?: (e: React.MouseEvent) => void;
|
||||
onClick?: (e: MouseEvent) => void;
|
||||
}
|
||||
|
||||
const DropdownItem = forwardRef<HTMLAnchorElement, Props>(
|
||||
({ disabled, danger, className, onClick, children, icon: IconComponent }, ref) => {
|
||||
const DropdownItem = forwardRef<HTMLAnchorElement | HTMLButtonElement, Props & Partial<Omit<NavLinkProps, 'children'>>>(
|
||||
({ disabled, danger, className, onClick, children, icon: IconComponent, ...props }, ref) => {
|
||||
return (
|
||||
<Menu.Item disabled={disabled}>
|
||||
{({ disabled, active }) => (
|
||||
<a
|
||||
ref={ref}
|
||||
href={'#'}
|
||||
<>
|
||||
{'to' in props && props.to !== undefined ? (
|
||||
<NavLink
|
||||
{...props}
|
||||
to={props.to}
|
||||
ref={ref as unknown as Ref<HTMLAnchorElement>}
|
||||
className={classNames(
|
||||
styles.menu_item,
|
||||
{
|
||||
|
|
@ -33,11 +39,30 @@ const DropdownItem = forwardRef<HTMLAnchorElement, Props>(
|
|||
>
|
||||
{IconComponent}
|
||||
{typeof children === 'function' ? children({ disabled, active }) : children}
|
||||
</a>
|
||||
</NavLink>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
ref={ref as unknown as Ref<HTMLButtonElement>}
|
||||
className={classNames(
|
||||
styles.menu_item,
|
||||
{
|
||||
[styles.danger]: danger,
|
||||
[styles.disabled]: disabled,
|
||||
},
|
||||
className,
|
||||
)}
|
||||
onClick={onClick}
|
||||
>
|
||||
{IconComponent}
|
||||
{typeof children === 'function' ? children({ disabled, active }) : children}
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Menu.Item>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
export default DropdownItem;
|
||||
export { DropdownItem };
|
||||
|
|
|
|||
Loading…
Reference in a new issue