m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2025-02-05 17:05:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats 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 {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
margin-bottom: 20px;
}
.item {
padding: 5px 0;
position: relative;
}
.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 {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 20px;
border-radius: 5px;
border: 1px solid var(--base400);
background: var(--base50);
margin-bottom: 10px;
}
.websiteActive .text {
border: 1px solid var(--base800);
.text {
position: relative;
}
.active .text {
border-color: var(--base600);
box-shadow: 4px 4px 4px var(--base100);
.name {
font-weight: 600;
font-size: 16px;
}
.domain {
font-size: 14px;
color: var(--base700);
}
.dragActive {
@ -50,3 +38,20 @@
.dragActive:active {
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 { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
import classNames from 'classnames';
import { Button, Icon, Loading } from 'react-basics';
import Icons from 'components/icons';
import { Button, Loading, Toggle, SearchField } from 'react-basics';
import { firstBy } from 'thenby';
import useDashboard, { saveDashboard } from 'store/dashboard';
import { useMessages, useWebsites } from 'components/hooks';
@ -18,6 +17,7 @@ export function DashboardEdit({ teamId }: { teamId: string }) {
const [active, setActive] = useState(websiteActive || []);
const [edited, setEdited] = useState(isEdited);
const [websites, setWebsites] = useState([]);
const [search, setSearch] = useState('');
const {
result,
@ -92,16 +92,19 @@ export function DashboardEdit({ teamId }: { teamId: string }) {
return (
<>
<div className={styles.buttons}>
<Button onClick={handleSave} variant="primary" size="sm">
{formatMessage(labels.save)}
</Button>
<Button onClick={handleCancel} size="sm">
{formatMessage(labels.cancel)}
</Button>
<Button onClick={handleReset} size="sm">
{formatMessage(labels.reset)}
</Button>
<div className={styles.header}>
<SearchField className={styles.search} value={search} onSearch={setSearch} />
<div className={styles.buttons}>
<Button onClick={handleSave} variant="primary" size="sm">
{formatMessage(labels.save)}
</Button>
<Button onClick={handleCancel} size="sm">
{formatMessage(labels.cancel)}
</Button>
<Button onClick={handleReset} size="sm">
{formatMessage(labels.reset)}
</Button>
</div>
</div>
<div className={styles.dragActive}>
<DragDropContext onDragEnd={handleWebsiteDrag}>
@ -112,33 +115,38 @@ export function DashboardEdit({ teamId }: { teamId: string }) {
ref={provided.innerRef}
style={{ marginBottom: snapshot.isDraggingOver ? 260 : null }}
>
{ordered.map(({ id, name, domain }, index) => (
<Draggable key={id} draggableId={`${DRAG_ID}-${id}`} index={index}>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
className={classNames(styles.item, {
[styles.active]: snapshot.isDragging,
[styles.websiteActive]: active.includes(id),
})}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<div className={styles.text}>
<div className={styles.pinActive}>
<Button size="sm" onClick={() => handleActiveWebsites(id)}>
<Icon rotate={active.includes(id) ? 0 : 45}>
<Icons.PushPin />
</Icon>
</Button>
{ordered.map(({ id, name, domain }, index) => {
if (
search &&
!`${name.toLowerCase()}${domain.toLowerCase()}`.includes(search.toLowerCase())
) {
return null;
}
return (
<Draggable key={id} draggableId={`${DRAG_ID}-${id}`} index={index}>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
className={classNames(styles.item, {
[styles.active]: snapshot.isDragging,
})}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<div className={styles.text}>
<div className={styles.name}>{name}</div>
<div className={styles.domain}>{domain}</div>
</div>
<h1>{name}</h1>
<h2>{domain}</h2>
<Toggle
checked={active.includes(id)}
onChange={() => handleActiveWebsites(id)}
/>
</div>
</div>
)}
</Draggable>
))}
)}
</Draggable>
);
})}
{provided.placeholder}
</div>
)}