diff --git a/src/app/(main)/dashboard/DashboardEdit.module.css b/src/app/(main)/dashboard/DashboardEdit.module.css index febc551d..cd498982 100644 --- a/src/app/(main)/dashboard/DashboardEdit.module.css +++ b/src/app/(main)/dashboard/DashboardEdit.module.css @@ -7,6 +7,19 @@ .item { padding: 5px 0; + position: relative; +} + +.pinActive { + position: absolute; + top: 10px; + right: 10px; + padding: 5px; +} + +.pin { + width: 20px; + height: 20px; } .item h1 { @@ -26,6 +39,10 @@ background: var(--base50); } +.websiteActive .text { + border: 1px solid var(--base800); +} + .active .text { border-color: var(--base600); box-shadow: 4px 4px 4px var(--base100); diff --git a/src/app/(main)/dashboard/DashboardEdit.tsx b/src/app/(main)/dashboard/DashboardEdit.tsx index d702612f..63cace7d 100644 --- a/src/app/(main)/dashboard/DashboardEdit.tsx +++ b/src/app/(main)/dashboard/DashboardEdit.tsx @@ -2,6 +2,7 @@ import { useState, useMemo } from 'react'; import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd'; import classNames from 'classnames'; import { Button, Loading } from 'react-basics'; +import Icons from 'components/icons'; import { firstBy } from 'thenby'; import useDashboard, { saveDashboard } from 'store/dashboard'; import { useMessages, useWebsites } from 'components/hooks'; @@ -11,9 +12,10 @@ const DRAG_ID = 'dashboard-website-ordering'; export function DashboardEdit({ teamId }: { teamId: string }) { const settings = useDashboard(); - const { websiteOrder } = settings; + const { websiteOrder, websiteActive } = settings; const { formatMessage, labels } = useMessages(); const [order, setOrder] = useState(websiteOrder || []); + const [active, setActive] = useState(websiteActive || []); const { result, query: { isLoading }, @@ -40,19 +42,27 @@ export function DashboardEdit({ teamId }: { teamId: string }) { setOrder(orderedWebsites.map(website => website?.id || 0)); } + function handleActiveWebsites(id: string) { + setActive(prevActive => + prevActive.includes(id) ? prevActive.filter(a => a !== id) : [...prevActive, id], + ); + } + function handleSave() { saveDashboard({ editing: false, websiteOrder: order, + websiteActive: active, }); } function handleCancel() { - saveDashboard({ editing: false, websiteOrder }); + saveDashboard({ editing: false, websiteOrder, websiteActive }); } function handleReset() { setOrder([]); + setActive([]); } if (isLoading) { @@ -88,11 +98,16 @@ export function DashboardEdit({ teamId }: { teamId: string }) { ref={provided.innerRef} className={classNames(styles.item, { [styles.active]: snapshot.isDragging, + [styles.websiteActive]: active.includes(id), })} {...provided.draggableProps} {...provided.dragHandleProps} + onClick={() => handleActiveWebsites(id)} >
+
+ {active.includes(id) ? : null} +

{name}

{domain}

diff --git a/src/app/(main)/websites/[websiteId]/WebsiteChartList.tsx b/src/app/(main)/websites/[websiteId]/WebsiteChartList.tsx index 398fbf8f..e33e948a 100644 --- a/src/app/(main)/websites/[websiteId]/WebsiteChartList.tsx +++ b/src/app/(main)/websites/[websiteId]/WebsiteChartList.tsx @@ -18,17 +18,16 @@ export default function WebsiteChartList({ limit?: number; }) { const { formatMessage, labels } = useMessages(); - const { websiteOrder } = useDashboard(); + const { websiteOrder, websiteActive } = useDashboard(); const { renderTeamUrl } = useTeamUrl(); const { dir } = useLocale(); - const ordered = useMemo( - () => - websites - .map(website => ({ ...website, order: websiteOrder.indexOf(website.id) || 0 })) - .sort(firstBy('order')), - [websites, websiteOrder], - ); + const ordered = useMemo(() => { + return websites + .filter(website => (websiteActive.length ? websiteActive.includes(website.id) : true)) + .map(website => ({ ...website, order: websiteOrder.indexOf(website.id) || 0 })) + .sort(firstBy('order')); + }, [websites, websiteOrder, websiteActive]); return (
diff --git a/src/assets/pushpin.svg b/src/assets/pushpin.svg new file mode 100644 index 00000000..653a552d --- /dev/null +++ b/src/assets/pushpin.svg @@ -0,0 +1,8 @@ + + + \ No newline at end of file diff --git a/src/components/icons.ts b/src/components/icons.ts index 422f042a..1cf26543 100644 --- a/src/components/icons.ts +++ b/src/components/icons.ts @@ -19,6 +19,7 @@ import Moon from 'assets/moon.svg'; import Nodes from 'assets/nodes.svg'; import Overview from 'assets/overview.svg'; import Profile from 'assets/profile.svg'; +import PushPin from 'assets/pushpin.svg'; import Reports from 'assets/reports.svg'; import Sun from 'assets/sun.svg'; import User from 'assets/user.svg'; @@ -47,6 +48,7 @@ const icons = { Nodes, Overview, Profile, + PushPin, Reports, Sun, User, diff --git a/src/store/dashboard.ts b/src/store/dashboard.ts index f6677542..801d53e1 100644 --- a/src/store/dashboard.ts +++ b/src/store/dashboard.ts @@ -6,6 +6,7 @@ export const initialState = { showCharts: true, limit: DEFAULT_WEBSITE_LIMIT, websiteOrder: [], + websiteActive: [], editing: false, };