Restore table component and website settings page

This commit is contained in:
Chris Walsh 2022-07-24 23:07:56 -07:00
parent 76bdb6b1d6
commit 765add71a9
No known key found for this signature in database
GPG Key ID: 28EE0CCA6032019E
3 changed files with 9 additions and 80 deletions

View File

@ -1,4 +1,3 @@
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classNames from 'classnames'; import classNames from 'classnames';
@ -14,9 +13,6 @@ function Table({
rowKey, rowKey,
showHeader = true, showHeader = true,
children, children,
isDraggable = false,
dragId,
onDragEnd,
}) { }) {
if (empty && rows.length === 0) { if (empty && rows.length === 0) {
return empty; return empty;
@ -40,37 +36,10 @@ function Table({
<div className={classNames(styles.body, bodyClassName)}> <div className={classNames(styles.body, bodyClassName)}>
{rows.length === 0 && <NoData />} {rows.length === 0 && <NoData />}
{!children && {!children &&
(isDraggable ? (
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId={dragId}>
{provided => (
<div {...provided.droppableProps} ref={provided.innerRef}>
{rows.map((row, index) => {
const id = rowKey ? rowKey(row) : index;
return (
<Draggable key={id} draggableId={`${dragId}-${id}`} index={index}>
{provided => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<TableRow columns={columns} row={row} />
</div>
)}
</Draggable>
);
})}
</div>
)}
</Droppable>
</DragDropContext>
) : (
rows.map((row, index) => { rows.map((row, index) => {
const id = rowKey ? rowKey(row) : index; const id = rowKey ? rowKey(row) : index;
return <TableRow key={id} columns={columns} row={row} />; return <TableRow key={id} columns={columns} row={row} />;
}) })}
))}
{children} {children}
</div> </div>
</div> </div>

View File

@ -25,7 +25,7 @@ import LinkIcon from 'assets/link.svg';
import useFetch from 'hooks/useFetch'; import useFetch from 'hooks/useFetch';
import useUser from 'hooks/useUser'; import useUser from 'hooks/useUser';
import { orderByWebsiteMap } from 'lib/format'; import { orderByWebsiteMap } from 'lib/format';
import useStore, { setDashboard } from 'store/app'; import useStore from 'store/app';
import styles from './WebsiteSettings.module.css'; import styles from './WebsiteSettings.module.css';
const selector = state => state.dashboard; const selector = state => state.dashboard;
@ -167,28 +167,6 @@ export default function WebsiteSettings() {
setShowUrl(null); setShowUrl(null);
} }
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);
setDashboard({
...store,
websiteOrdering: orderedWebsites
.map((i, k) => ({ [i.website_uuid]: k }))
.reduce((a, b) => ({ ...a, ...b })),
});
}
function resetWebsiteOrder() {
setDashboard({
...store,
websiteOrdering: {},
});
}
if (!data) { if (!data) {
return null; return null;
} }
@ -214,23 +192,11 @@ export default function WebsiteSettings() {
<div> <div>
<FormattedMessage id="label.websites" defaultMessage="Websites" /> <FormattedMessage id="label.websites" defaultMessage="Websites" />
</div> </div>
<div className={styles.headerButtons}>
<Button size="small" onClick={() => resetWebsiteOrder()}>
<FormattedMessage id="label.reset-order" defaultMessage="Reset order" />
</Button>
<Button icon={<Plus />} size="small" onClick={() => setAddWebsite(true)}> <Button icon={<Plus />} size="small" onClick={() => setAddWebsite(true)}>
<FormattedMessage id="label.add-website" defaultMessage="Add website" /> <FormattedMessage id="label.add-website" defaultMessage="Add website" />
</Button> </Button>
</div>
</PageHeader> </PageHeader>
<Table <Table columns={user.is_admin ? adminColumns : columns} rows={ordered} empty={empty} />
columns={user.is_admin ? adminColumns : columns}
rows={ordered}
empty={empty}
isDraggable
onDragEnd={handleWebsiteDrag}
dragId={'website-settings-list'}
/>
{editWebsite && ( {editWebsite && (
<Modal title={<FormattedMessage id="label.edit-website" defaultMessage="Edit website" />}> <Modal title={<FormattedMessage id="label.edit-website" defaultMessage="Edit website" />}>
<WebsiteEditForm values={editWebsite} onSave={handleSave} onClose={handleClose} /> <WebsiteEditForm values={editWebsite} onSave={handleSave} onClose={handleClose} />

View File

@ -11,9 +11,3 @@
.detailLink { .detailLink {
width: 100%; width: 100%;
} }
.headerButtons {
display: flex;
justify-content: flex-end;
gap: 10px;
}