Updated dashboard edit.

umami-software · Nov 21, 2024 · 620a838 · 620a838
1 parent bb7e8fd
commit 620a838
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 61 deletions.
diff --git a/src/app/(main)/dashboard/DashboardEdit.module.css b/src/app/(main)/dashboard/DashboardEdit.module.css
@@ -1,52 +1,57 @@
 .buttons {
   display: flex;
+  align-items: center;
   justify-content: flex-end;
   gap: 10px;
-  margin-bottom: 20px;
 }
 
 .item {
-  padding: 5px 0;
-  position: relative;
+  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;
 }
 
-.pinActive {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  padding: 5px;
+.text {
+  position: relative;
 }
 
-.item h1 {
+.name {
   font-weight: 600;
   font-size: 16px;
 }
 
-.item h2 {
+.domain {
   font-size: 14px;
   color: var(--base700);
 }
 
-.text {
-  padding: 20px;
-  border-radius: 5px;
-  border: 1px solid var(--base400);
-  background: var(--base50);
+.dragActive {
+  cursor: grab;
 }
 
-.websiteActive .text {
-  border: 1px solid var(--base800);
+.dragActive:active {
+  cursor: grabbing;
 }
 
-.active .text {
-  border-color: var(--base600);
-  box-shadow: 4px 4px 4px var(--base100);
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+  gap: 20px;
 }
 
-.dragActive {
-  cursor: grab;
+.search {
+  max-width: 360px;
 }
 
-.dragActive:active {
-  cursor: grabbing;
+.active {
+  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
@@ -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>
             )}