umami/components/pages/DashboardEdit.js

107 lines
3.4 KiB
JavaScript
Raw Normal View History

2022-08-05 06:37:18 +02:00
import { useState, useMemo } from 'react';
2022-08-04 12:56:30 +02:00
import { defineMessages, useIntl } from 'react-intl';
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
2022-08-05 06:37:18 +02:00
import classNames from 'classnames';
2022-08-04 12:56:30 +02:00
import Button from 'components/common/Button';
import { firstBy } from 'thenby';
2022-08-05 06:37:18 +02:00
import useDashboard, { saveDashboard } from 'store/dashboard';
2022-08-04 12:56:30 +02:00
import styles from './DashboardEdit.module.css';
const messages = defineMessages({
save: { id: 'label.save', defaultMessage: 'Save' },
reset: { id: 'label.reset', defaultMessage: 'Reset' },
cancel: { id: 'label.cancel', defaultMessage: 'Cancel' },
});
const dragId = 'dashboard-website-ordering';
2022-08-05 06:37:18 +02:00
export default function DashboardEdit({ websites }) {
2022-08-04 12:56:30 +02:00
const settings = useDashboard();
const { websiteOrder } = settings;
const { formatMessage } = useIntl();
2022-08-05 06:37:18 +02:00
const [order, setOrder] = useState(websiteOrder || []);
2022-08-04 12:56:30 +02:00
const ordered = useMemo(
() =>
websites
.map(website => ({ ...website, order: order.indexOf(website.websiteId) }))
.sort(firstBy('order')),
[websites, order],
);
2022-08-04 12:56:30 +02:00
function handleWebsiteDrag({ destination, source }) {
if (!destination || destination.index === source.index) return;
const orderedWebsites = [...ordered];
const [removed] = orderedWebsites.splice(source.index, 1);
orderedWebsites.splice(destination.index, 0, removed);
setOrder(orderedWebsites.map(website => website?.websiteId || 0));
2022-08-04 12:56:30 +02:00
}
function handleSave() {
saveDashboard({
editing: false,
websiteOrder: order,
});
}
function handleCancel() {
2022-08-04 23:30:09 +02:00
saveDashboard({ editing: false, websiteOrder });
2022-08-04 12:56:30 +02:00
}
function handleReset() {
2022-08-05 06:37:18 +02:00
setOrder([]);
2022-08-04 12:56:30 +02:00
}
return (
<>
<div className={styles.buttons}>
2022-08-04 23:30:09 +02:00
<Button onClick={handleSave} variant="action" size="small">
2022-08-04 12:56:30 +02:00
{formatMessage(messages.save)}
</Button>
<Button onClick={handleCancel} size="small">
{formatMessage(messages.cancel)}
</Button>
<Button onClick={handleReset} size="small">
{formatMessage(messages.reset)}
</Button>
</div>
<div className={styles.dragActive}>
<DragDropContext onDragEnd={handleWebsiteDrag}>
<Droppable droppableId={dragId}>
{(provided, snapshot) => (
<div
{...provided.droppableProps}
ref={provided.innerRef}
style={{ marginBottom: snapshot.isDraggingOver ? 260 : null }}
>
{ordered.map(({ websiteId, name, domain }, index) => (
<Draggable key={websiteId} draggableId={`${dragId}-${websiteId}`} index={index}>
2022-08-04 23:30:09 +02:00
{(provided, snapshot) => (
2022-08-04 12:56:30 +02:00
<div
ref={provided.innerRef}
2022-08-04 23:30:09 +02:00
className={classNames(styles.item, {
[styles.active]: snapshot.isDragging,
})}
2022-08-04 12:56:30 +02:00
{...provided.draggableProps}
{...provided.dragHandleProps}
>
2022-08-04 23:30:09 +02:00
<div className={styles.text}>
<h1>{name}</h1>
<h2>{domain}</h2>
</div>
2022-08-04 12:56:30 +02:00
</div>
)}
</Draggable>
))}
2022-08-05 06:37:18 +02:00
{provided.placeholder}
2022-08-04 12:56:30 +02:00
</div>
)}
</Droppable>
</DragDropContext>
</div>
</>
);
}