mirror of
https://github.com/umami-software/umami.git
synced 2026-02-18 11:35:37 +01:00
Updated profile menu. Fixed dashboard.
This commit is contained in:
parent
a91b9c9716
commit
400657d59e
12 changed files with 73 additions and 70 deletions
|
|
@ -2,31 +2,30 @@
|
|||
import { useState, useMemo } from 'react';
|
||||
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
|
||||
import classNames from 'classnames';
|
||||
import { Button } from 'react-basics';
|
||||
import { Button, Loading } from 'react-basics';
|
||||
import { firstBy } from 'thenby';
|
||||
import useDashboard, { saveDashboard } from 'store/dashboard';
|
||||
import { useMessages } from 'components/hooks';
|
||||
import { useApi } from 'components/hooks';
|
||||
import { useMessages, useWebsites } from 'components/hooks';
|
||||
import styles from './DashboardEdit.module.css';
|
||||
|
||||
const dragId = 'dashboard-website-ordering';
|
||||
const DRAG_ID = 'dashboard-website-ordering';
|
||||
|
||||
export function DashboardEdit() {
|
||||
export function DashboardEdit({ teamId }: { teamId: string }) {
|
||||
const settings = useDashboard();
|
||||
const { websiteOrder } = settings;
|
||||
const { formatMessage, labels } = useMessages();
|
||||
const [order, setOrder] = useState(websiteOrder || []);
|
||||
const { get, useQuery } = useApi();
|
||||
const { data: result } = useQuery({
|
||||
queryKey: ['websites'],
|
||||
queryFn: () => get('/websites'),
|
||||
});
|
||||
const { data: websites } = result || {};
|
||||
const {
|
||||
result,
|
||||
query: { isLoading },
|
||||
} = useWebsites({ teamId });
|
||||
|
||||
const websites = result?.data;
|
||||
|
||||
const ordered = useMemo(() => {
|
||||
if (websites) {
|
||||
return websites
|
||||
.map(website => ({ ...website, order: order.indexOf(website.id) }))
|
||||
.map((website: { id: any }) => ({ ...website, order: order.indexOf(website.id) }))
|
||||
.sort(firstBy('order'));
|
||||
}
|
||||
return [];
|
||||
|
|
@ -57,6 +56,10 @@ export function DashboardEdit() {
|
|||
setOrder([]);
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return <Loading />;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={styles.buttons}>
|
||||
|
|
@ -72,7 +75,7 @@ export function DashboardEdit() {
|
|||
</div>
|
||||
<div className={styles.dragActive}>
|
||||
<DragDropContext onDragEnd={handleWebsiteDrag}>
|
||||
<Droppable droppableId={dragId}>
|
||||
<Droppable droppableId={DRAG_ID}>
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
{...provided.droppableProps}
|
||||
|
|
@ -80,7 +83,7 @@ export function DashboardEdit() {
|
|||
style={{ marginBottom: snapshot.isDraggingOver ? 260 : null }}
|
||||
>
|
||||
{ordered.map(({ id, name, domain }, index) => (
|
||||
<Draggable key={id} draggableId={`${dragId}-${id}`} index={index}>
|
||||
<Draggable key={id} draggableId={`${DRAG_ID}-${id}`} index={index}>
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
ref={provided.innerRef}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue