Add basic activity log view

This commit is contained in:
DaneEveritt 2022-06-05 18:35:53 -04:00
parent d1da46c5aa
commit c6e8b893c8
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
9 changed files with 267 additions and 17 deletions

View file

@ -19,10 +19,18 @@
@apply p-1;
}
}
&:disabled {
@apply cursor-not-allowed;
}
}
.text {
@apply bg-transparent focus:ring-neutral-300 focus:ring-opacity-50 hover:bg-neutral-500 active:bg-neutral-500;
@apply text-gray-50 bg-transparent focus:ring-neutral-300 focus:ring-opacity-50 hover:bg-neutral-500 active:bg-neutral-500;
&:disabled {
@apply hover:bg-transparent text-gray-300;
}
}
.danger {

View file

@ -0,0 +1,64 @@
import React from 'react';
import { PaginationDataSet } from '@/api/http';
import classNames from 'classnames';
import { Button } from '@/components/elements/button/index';
import { ChevronDoubleLeftIcon, ChevronDoubleRightIcon } from '@heroicons/react/solid';
interface Props {
className?: string;
pagination: PaginationDataSet;
onPageSelect: (page: number) => void;
}
const PaginationFooter = ({ pagination, className, onPageSelect }: Props) => {
const start = (pagination.currentPage - 1) * pagination.perPage;
const end = ((pagination.currentPage - 1) * pagination.perPage) + pagination.count;
const { currentPage: current, totalPages: total } = pagination;
const pages = { previous: [] as number[], next: [] as number[] };
for (let i = 1; i <= 2; i++) {
if (current - i >= 1) {
pages.previous.push(current - i);
}
if (current + i <= total) {
pages.next.push(current + i);
}
}
return (
<div className={classNames('flex items-center justify-between my-2', className)}>
<p className={'text-sm text-neutral-500'}>
Showing&nbsp;
<span className={'font-semibold text-neutral-400'}>
{Math.max(start, Math.min(pagination.total, 1))}
</span>&nbsp;to&nbsp;
<span className={'font-semibold text-neutral-400'}>{end}</span> of&nbsp;
<span className={'font-semibold text-neutral-400'}>{pagination.total}</span> results.
</p>
{pagination.totalPages > 1 &&
<div className={'flex space-x-1'}>
<Button.Text small disabled={pages.previous.length !== 2} onClick={() => onPageSelect(1)}>
<ChevronDoubleLeftIcon className={'w-3 h-3'}/>
</Button.Text>
{pages.previous.reverse().map((value) => (
<Button.Text small key={`previous-${value}`} onClick={() => onPageSelect(value)}>
{value}
</Button.Text>
))}
<Button small disabled>{current}</Button>
{pages.next.map((value) => (
<Button.Text small key={`next-${value}`} onClick={() => onPageSelect(value)}>
{value}
</Button.Text>
))}
<Button.Text small disabled={pages.next.length !== 2} onClick={() => onPageSelect(total)}>
<ChevronDoubleRightIcon className={'w-3 h-3'}/>
</Button.Text>
</div>
}
</div>
);
};
export default PaginationFooter;

View file

@ -19,6 +19,7 @@ import { AnimatePresence, motion } from 'framer-motion';
interface Props {
content: string | React.ReactChild;
disabled?: boolean;
arrow?: boolean;
placement?: Placement;
strategy?: Strategy;
@ -33,8 +34,8 @@ const arrowSides: Record<Side, Side> = {
right: 'left',
};
export default ({ content, children, ...props }: Props) => {
const arrowEl = useRef<HTMLSpanElement>(null);
export default ({ content, children, disabled = false, ...props }: Props) => {
const arrowEl = useRef<HTMLDivElement>(null);
const [ open, setOpen ] = useState(false);
const { x, y, reference, floating, middlewareData, strategy, context } = useFloating({
@ -56,12 +57,16 @@ export default ({ content, children, ...props }: Props) => {
const side = arrowSides[(props.placement || 'top').split('-')[0] as Side];
const { x: ax, y: ay } = middlewareData.arrow || {};
if (disabled) {
return children;
}
return (
<>
{cloneElement(children, getReferenceProps({ ref: reference, ...children.props }))}
<AnimatePresence>
{open &&
<motion.span
<motion.div
initial={{ opacity: 0, scale: 0.85 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0 }}
@ -78,7 +83,7 @@ export default ({ content, children, ...props }: Props) => {
>
{content}
{props.arrow &&
<span
<div
ref={arrowEl}
style={{
transform: `translate(${Math.round(ax || 0)}px, ${Math.round(ay || 0)}px)`,
@ -87,7 +92,7 @@ export default ({ content, children, ...props }: Props) => {
className={'absolute top-0 left-0 bg-gray-900 w-3 h-3 rotate-45'}
/>
}
</motion.span>
</motion.div>
}
</AnimatePresence>
</>