watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-04 04:37:11 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Updated dashboard edit.

Browse source
This commit is contained in:
Mike Cao 2024-11-21 15:39:50 -08:00
parent bb7e8fdbaf
commit 620a838173
2 changed files with 78 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

61
src/app/(main)/dashboard/DashboardEdit.module.css
View file

@ -1,46 +1,34 @@
.buttons { .buttons {
display: flex; display: flex;
align-items: center;
justify-content: flex-end; justify-content: flex-end;
gap: 10px; gap: 10px;
margin-bottom: 20px;
} }
.item { .item {
padding: 5px 0; display: flex;
position: relative; align-items: center;
} justify-content: space-between;
width: 100%;
.pinActive {
position: absolute;
top: 10px;
right: 10px;
padding: 5px;
}
.item h1 {
font-weight: 600;
font-size: 16px;
}
.item h2 {
font-size: 14px;
color: var(--base700);
}
.text {
padding: 20px; padding: 20px;
border-radius: 5px; border-radius: 5px;
border: 1px solid var(--base400); border: 1px solid var(--base400);
background: var(--base50); background: var(--base50);
margin-bottom: 10px;
} }
.websiteActive .text { .text {
border: 1px solid var(--base800); position: relative;
} }
.active .text { .name {
border-color: var(--base600); font-weight: 600;
box-shadow: 4px 4px 4px var(--base100); font-size: 16px;
}
.domain {
font-size: 14px;
color: var(--base700);
} }
.dragActive { .dragActive {
@ -50,3 +38,20 @@
.dragActive:active { .dragActive:active {
cursor: grabbing; cursor: grabbing;
} }
.header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
gap: 20px;
}
.search {
max-width: 360px;
}
.active {
border-color: var(--base600);
box-shadow: 4px 4px 4px var(--base100);
}

82
src/app/(main)/dashboard/DashboardEdit.tsx
View file

@ -1,8 +1,7 @@
import { useState, useMemo, useEffect } from 'react'; import { useState, useMemo, useEffect } from 'react';
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd'; import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
import classNames from 'classnames'; import classNames from 'classnames';
import { Button, Icon, Loading } from 'react-basics'; import { Button, Loading, Toggle, SearchField } from 'react-basics';
import Icons from 'components/icons';
import { firstBy } from 'thenby'; import { firstBy } from 'thenby';
import useDashboard, { saveDashboard } from 'store/dashboard'; import useDashboard, { saveDashboard } from 'store/dashboard';
import { useMessages, useWebsites } from 'components/hooks'; import { useMessages, useWebsites } from 'components/hooks';
@ -18,6 +17,7 @@ export function DashboardEdit({ teamId }: { teamId: string }) {
const [active, setActive] = useState(websiteActive || []); const [active, setActive] = useState(websiteActive || []);
const [edited, setEdited] = useState(isEdited); const [edited, setEdited] = useState(isEdited);
const [websites, setWebsites] = useState([]); const [websites, setWebsites] = useState([]);
const [search, setSearch] = useState('');
const { const {
result, result,
@ -92,16 +92,19 @@ export function DashboardEdit({ teamId }: { teamId: string }) {
return ( return (
<> <>
<div className={styles.buttons}> <div className={styles.header}>
<Button onClick={handleSave} variant="primary" size="sm"> <SearchField className={styles.search} value={search} onSearch={setSearch} />
{formatMessage(labels.save)} <div className={styles.buttons}>
</Button> <Button onClick={handleSave} variant="primary" size="sm">
<Button onClick={handleCancel} size="sm"> {formatMessage(labels.save)}
{formatMessage(labels.cancel)} </Button>
</Button> <Button onClick={handleCancel} size="sm">
<Button onClick={handleReset} size="sm"> {formatMessage(labels.cancel)}
{formatMessage(labels.reset)} </Button>
</Button> <Button onClick={handleReset} size="sm">
{formatMessage(labels.reset)}
</Button>
</div>
</div> </div>
<div className={styles.dragActive}> <div className={styles.dragActive}>
<DragDropContext onDragEnd={handleWebsiteDrag}> <DragDropContext onDragEnd={handleWebsiteDrag}>
@ -112,33 +115,38 @@ export function DashboardEdit({ teamId }: { teamId: string }) {
ref={provided.innerRef} ref={provided.innerRef}
style={{ marginBottom: snapshot.isDraggingOver ? 260 : null }} style={{ marginBottom: snapshot.isDraggingOver ? 260 : null }}
> >
{ordered.map(({ id, name, domain }, index) => ( {ordered.map(({ id, name, domain }, index) => {
<Draggable key={id} draggableId={`${DRAG_ID}-${id}`} index={index}> if (
{(provided, snapshot) => ( search &&
<div !`${name.toLowerCase()}${domain.toLowerCase()}`.includes(search.toLowerCase())
ref={provided.innerRef} ) {
className={classNames(styles.item, { return null;
[styles.active]: snapshot.isDragging, }
[styles.websiteActive]: active.includes(id),
})} return (
{...provided.draggableProps} <Draggable key={id} draggableId={`${DRAG_ID}-${id}`} index={index}>
{...provided.dragHandleProps} {(provided, snapshot) => (
> <div
<div className={styles.text}> ref={provided.innerRef}
<div className={styles.pinActive}> className={classNames(styles.item, {
<Button size="sm" onClick={() => handleActiveWebsites(id)}> [styles.active]: snapshot.isDragging,
<Icon rotate={active.includes(id) ? 0 : 45}> })}
<Icons.PushPin /> {...provided.draggableProps}
</Icon> {...provided.dragHandleProps}
</Button> >
<div className={styles.text}>
<div className={styles.name}>{name}</div>
<div className={styles.domain}>{domain}</div>
</div> </div>
<h1>{name}</h1> <Toggle
<h2>{domain}</h2> checked={active.includes(id)}
onChange={() => handleActiveWebsites(id)}
/>
</div> </div>
</div> )}
)} </Draggable>
</Draggable> );
))} })}
{provided.placeholder} {provided.placeholder}
</div> </div>
)} )}