mirror of
https://github.com/kremalicious/umami.git
synced 2024-11-15 09:45:04 +01:00
Restore table component and website settings page
This commit is contained in:
parent
76bdb6b1d6
commit
765add71a9
@ -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>
|
||||||
|
@ -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} />
|
||||||
|
@ -11,9 +11,3 @@
|
|||||||
.detailLink {
|
.detailLink {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.headerButtons {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
Loading…
Reference in New Issue
Block a user