Merge pull request #1338 from cywio/reorder-websites

Add ability to reorder websites on dashboard

components/pages/WebsiteList.js

@@ -1,3 +1,4 @@
+import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 import { FormattedMessage } from 'react-intl';
 import Link from 'components/common/Link';
 import WebsiteChart from 'components/metrics/WebsiteChart';
@@ -5,8 +6,38 @@ import Page from 'components/layout/Page';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 import Arrow from 'assets/arrow-right.svg';
 import styles from './WebsiteList.module.css';
+import { orderByWebsiteMap } from 'lib/format';
+import { useMemo } from 'react';
+import useStore, { setDashboard } from 'store/app';
+
+const selector = state => state.dashboard;
 
 export default function WebsiteList({ websites, showCharts, limit }) {
+  const store = useStore(selector);
+  const { websiteOrdering, changeOrderMode } = store;
+
+  const ordered = useMemo(
+    () => orderByWebsiteMap(websites, websiteOrdering),
+    [websites, websiteOrdering],
+  );
+
+  const dragId = 'dashboard-website-ordering';
+
+  function handleWebsiteDrag({ destination, source }) {
+    if (!destination || destination.index === source.index) return;
+
+    const orderedWebsites = [...ordered];
+    const [removed] = orderedWebsites.splice(source.index, 1);
+    orderedWebsites.splice(destination.index, 0, removed);
+
+    setDashboard({
+      ...store,
+      websiteOrdering: orderedWebsites
+        .map((i, k) => ({ [i.website_uuid]: k }))
+        .reduce((a, b) => ({ ...a, ...b })),
+    });
+  }
+
   if (websites.length === 0) {
     return (
       <Page>
@@ -27,19 +58,60 @@ export default function WebsiteList({ websites, showCharts, limit }) {
   }
 
   return (
-    <div>
-      {websites.map(({ website_id, name, domain }, index) =>
-        index < limit ? (
-          <div key={website_id} className={styles.website}>
-            <WebsiteChart
-              websiteId={website_id}
-              title={name}
-              domain={domain}
-              showChart={showCharts}
-              showLink
-            />
-          </div>
-        ) : null,
+    <div className={changeOrderMode && styles.websiteDragActive}>
+      {changeOrderMode ? (
+        <DragDropContext onDragEnd={handleWebsiteDrag}>
+          <Droppable droppableId={dragId}>
+            {(provided, snapshot) => (
+              <div
+                {...provided.droppableProps}
+                ref={provided.innerRef}
+                style={{ marginBottom: snapshot.isDraggingOver ? 260 : null }}
+              >
+                {ordered.map(({ website_id, name, domain }, index) =>
+                  index < limit ? (
+                    <Draggable
+                      key={website_id}
+                      draggableId={`${dragId}-${website_id}`}
+                      index={index}
+                    >
+                      {provided => (
+                        <div
+                          ref={provided.innerRef}
+                          {...provided.draggableProps}
+                          {...provided.dragHandleProps}
+                          className={styles.website}
+                        >
+                          <WebsiteChart
+                            websiteId={website_id}
+                            title={name}
+                            domain={domain}
+                            showChart={changeOrderMode ? false : showCharts}
+                            showLink
+                          />
+                        </div>
+                      )}
+                    </Draggable>
+                  ) : null,
+                )}
+              </div>
+            )}
+          </Droppable>
+        </DragDropContext>
+      ) : (
+        ordered.map(({ website_id, name, domain }, index) =>
+          index < limit ? (
+            <div key={website_id} className={styles.website}>
+              <WebsiteChart
+                websiteId={website_id}
+                title={name}
+                domain={domain}
+                showChart={showCharts}
+                showLink
+              />
+            </div>
+          ) : null,
+        )
       )}
     </div>
   );

components/pages/WebsiteList.module.css

@@ -9,3 +9,12 @@
   border-bottom: 0;
   margin-bottom: 20px;
 }
+
+.websiteDragActive {
+  opacity: 0.6;
+  cursor: grab;
+}
+
+.websiteDragActive:active {
+  cursor: grabbing;
+}

components/settings/DashboardSettingsButton.js

@@ -2,7 +2,10 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import MenuButton from 'components/common/MenuButton';
 import Gear from 'assets/gear.svg';
-import useStore, { setDashboard, defaultDashboardConfig } from 'store/app';
+import useStore, { setDashboard } from 'store/app';
+import Button from 'components/common/Button';
+import Check from 'assets/check.svg';
+import styles from './DashboardSettingsButton.module.css';
 
 const selector = state => state.dashboard;
 
@@ -14,14 +17,41 @@ export default function DashboardSettingsButton() {
       label: <FormattedMessage id="message.toggle-charts" defaultMessage="Toggle charts" />,
       value: 'charts',
     },
+    {
+      label: <FormattedMessage id="message.edit-dashboard" defaultMessage="Edit dashboard" />,
+      value: 'order',
+    },
   ];
 
   function handleSelect(value) {
     if (value === 'charts') {
-      setDashboard({ ...defaultDashboardConfig, showCharts: !settings.showCharts });
+      setDashboard({ ...settings, showCharts: !settings.showCharts });
+    }
+    if (value === 'order') {
+      setDashboard({ ...settings, changeOrderMode: !settings.changeOrderMode });
     }
     //setDashboard(value);
   }
 
+  function handleExitChangeOrderMode() {
+    setDashboard({ ...settings, changeOrderMode: !settings.changeOrderMode });
+  }
+
+  function resetWebsiteOrder() {
+    setDashboard({ ...settings, websiteOrdering: {} });
+  }
+
+  if (settings.changeOrderMode)
+    return (
+      <div className={styles.buttonGroup}>
+        <Button onClick={resetWebsiteOrder} size="small">
+          <FormattedMessage id="label.reset-order" defaultMessage="Reset order" />
+        </Button>
+        <Button onClick={handleExitChangeOrderMode} size="small" icon={<Check />}>
+          <FormattedMessage id="label.done" defaultMessage="Done" />
+        </Button>
+      </div>
+    );
+
   return <MenuButton icon={<Gear />} options={menuOptions} onSelect={handleSelect} hideLabel />;
 }

components/settings/DashboardSettingsButton.module.css

@@ -0,0 +1,5 @@
+.buttonGroup {
+  display: flex;
+  place-items: center;
+  gap: 10px;
+}

components/settings/WebsiteSettings.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import Link from 'components/common/Link';
@@ -24,8 +24,12 @@ import Code from 'assets/code.svg';
 import LinkIcon from 'assets/link.svg';
 import useFetch from 'hooks/useFetch';
 import useUser from 'hooks/useUser';
+import { orderByWebsiteMap } from 'lib/format';
+import useStore from 'store/app';
 import styles from './WebsiteSettings.module.css';
 
+const selector = state => state.dashboard;
+
 export default function WebsiteSettings() {
   const { user } = useUser();
   const [editWebsite, setEditWebsite] = useState();
@@ -36,8 +40,14 @@ export default function WebsiteSettings() {
   const [showUrl, setShowUrl] = useState();
   const [saved, setSaved] = useState(0);
   const [message, setMessage] = useState();
+
+  const store = useStore(selector);
+  const { websiteOrdering } = store;
+
   const { data } = useFetch('/websites', { params: { include_all: !!user?.is_admin } }, [saved]);
 
+  const ordered = useMemo(() => orderByWebsiteMap(data, websiteOrdering), [data, websiteOrdering]);
+
   const Buttons = row => (
     <ButtonLayout align="right">
       {row.share_id && (
@@ -186,7 +196,7 @@ export default function WebsiteSettings() {
           <FormattedMessage id="label.add-website" defaultMessage="Add website" />
         </Button>
       </PageHeader>
-      <Table columns={user.is_admin ? adminColumns : columns} rows={data} empty={empty} />
+      <Table columns={user.is_admin ? adminColumns : columns} rows={ordered} empty={empty} />
       {editWebsite && (
         <Modal title={<FormattedMessage id="label.edit-website" defaultMessage="Edit website" />}>
           <WebsiteEditForm values={editWebsite} onSave={handleSave} onClose={handleClose} />