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)} >