diff --git a/src/app/(main)/dashboard/DashboardEdit.module.css b/src/app/(main)/dashboard/DashboardEdit.module.css index cd498982..071dd6a4 100644 --- a/src/app/(main)/dashboard/DashboardEdit.module.css +++ b/src/app/(main)/dashboard/DashboardEdit.module.css @@ -17,11 +17,6 @@ padding: 5px; } -.pin { - width: 20px; - height: 20px; -} - .item h1 { font-weight: 600; font-size: 16px; diff --git a/src/app/(main)/dashboard/DashboardEdit.tsx b/src/app/(main)/dashboard/DashboardEdit.tsx index 84c5fdc5..b599b840 100644 --- a/src/app/(main)/dashboard/DashboardEdit.tsx +++ b/src/app/(main)/dashboard/DashboardEdit.tsx @@ -1,7 +1,7 @@ import { useState, useMemo, useEffect } from 'react'; import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd'; import classNames from 'classnames'; -import { Button, Loading } from 'react-basics'; +import { Button, Icon, Loading } from 'react-basics'; import Icons from 'components/icons'; import { firstBy } from 'thenby'; import useDashboard, { saveDashboard } from 'store/dashboard'; @@ -12,10 +12,11 @@ const DRAG_ID = 'dashboard-website-ordering'; export function DashboardEdit({ teamId }: { teamId: string }) { const settings = useDashboard(); - const { websiteOrder, websiteActive } = settings; + const { websiteOrder, websiteActive, isEdited } = settings; const { formatMessage, labels } = useMessages(); const [order, setOrder] = useState(websiteOrder || []); const [active, setActive] = useState(websiteActive || []); + const [edited, setEdited] = useState(isEdited); const [websites, setWebsites] = useState([]); const { @@ -39,7 +40,10 @@ export function DashboardEdit({ teamId }: { teamId: string }) { const ordered = useMemo(() => { if (websites) { return websites - .map((website: { id: any }) => ({ ...website, order: order.indexOf(website.id) })) + .map((website: { id: any; name: string; domain: string }) => ({ + ...website, + order: order.indexOf(website.id), + })) .sort(firstBy('order')); } return []; @@ -53,29 +57,33 @@ export function DashboardEdit({ teamId }: { teamId: string }) { orderedWebsites.splice(destination.index, 0, removed); setOrder(orderedWebsites.map(website => website?.id || 0)); + setEdited(true); } function handleActiveWebsites(id: string) { setActive(prevActive => prevActive.includes(id) ? prevActive.filter(a => a !== id) : [...prevActive, id], ); + setEdited(true); } function handleSave() { saveDashboard({ editing: false, + isEdited: edited, websiteOrder: order, websiteActive: active, }); } function handleCancel() { - saveDashboard({ editing: false, websiteOrder, websiteActive }); + saveDashboard({ editing: false, websiteOrder, websiteActive, isEdited }); } function handleReset() { setOrder([]); setActive([]); + setEdited(false); } if (isLoading) { @@ -115,11 +123,14 @@ export function DashboardEdit({ teamId }: { teamId: string }) { })} {...provided.draggableProps} {...provided.dragHandleProps} - onClick={() => handleActiveWebsites(id)} >
- {active.includes(id) ? : null} +

{name}

{domain}

diff --git a/src/app/(main)/dashboard/DashboardPage.tsx b/src/app/(main)/dashboard/DashboardPage.tsx index 60bf1799..2a4bb916 100644 --- a/src/app/(main)/dashboard/DashboardPage.tsx +++ b/src/app/(main)/dashboard/DashboardPage.tsx @@ -13,9 +13,9 @@ import LinkButton from 'components/common/LinkButton'; export function DashboardPage() { const { formatMessage, labels, messages } = useMessages(); const { teamId, renderTeamUrl } = useTeamUrl(); - const { showCharts, editing } = useDashboard(); + const { showCharts, editing, isEdited } = useDashboard(); const { dir } = useLocale(); - const pageSize = 10; + const pageSize = isEdited ? 200 : 10; const { result, query, params, setParams } = useWebsites({ teamId }, { pageSize }); const { page } = params; diff --git a/src/store/dashboard.ts b/src/store/dashboard.ts index 801d53e1..0cfc78b9 100644 --- a/src/store/dashboard.ts +++ b/src/store/dashboard.ts @@ -8,6 +8,7 @@ export const initialState = { websiteOrder: [], websiteActive: [], editing: false, + isEdited: false, }; const store = create(() => ({ ...initialState, ...getItem(DASHBOARD_CONFIG) }));