From 70c6211e2ce632a2ed9bfc72a305c3b0b363b9fa Mon Sep 17 00:00:00 2001 From: Chris Walsh Date: Sat, 23 Jul 2022 22:56:13 -0700 Subject: [PATCH 1/9] Add draggable rows to table component --- components/common/Table.js | 39 +++++++++++++++++-- package.json | 1 + yarn.lock | 80 +++++++++++++++++++++++++++++++++++++- 3 files changed, 114 insertions(+), 6 deletions(-) diff --git a/components/common/Table.js b/components/common/Table.js index 77a07712..acd4f160 100644 --- a/components/common/Table.js +++ b/components/common/Table.js @@ -1,3 +1,4 @@ +import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd'; import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; @@ -13,6 +14,9 @@ function Table({ rowKey, showHeader = true, children, + isDraggable = false, + dragId, + onDragEnd, }) { if (empty && rows.length === 0) { return empty; @@ -36,10 +40,37 @@ function Table({
{rows.length === 0 && } {!children && - rows.map((row, index) => { - const id = rowKey ? rowKey(row) : index; - return ; - })} + (isDraggable ? ( + + + {provided => ( +
+ {rows.map((row, index) => { + const id = rowKey ? rowKey(row) : index; + return ( + + {provided => ( +
+ +
+ )} + + ); + })} +
+ )} + + + ) : ( + rows.map((row, index) => { + const id = rowKey ? rowKey(row) : index; + return ; + }) + ))} {children}
diff --git a/package.json b/package.json index d37ba99b..53e3ca7d 100644 --- a/package.json +++ b/package.json @@ -85,6 +85,7 @@ "npm-run-all": "^4.1.5", "prop-types": "^15.7.2", "react": "^17.0.0", + "react-beautiful-dnd": "^13.1.0", "react-dom": "^17.0.0", "react-intl": "^5.24.7", "react-simple-maps": "^2.3.0", diff --git a/yarn.lock b/yarn.lock index 144118b7..fe3bab24 100644 --- a/yarn.lock +++ b/yarn.lock @@ -989,6 +989,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.15.4", "@babel/runtime@^7.9.2": + version "7.18.9" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a" + integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/runtime@^7.8.4": version "7.17.2" resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz" @@ -1725,7 +1732,7 @@ dependencies: "@types/node" "*" -"@types/hoist-non-react-statics@^3.3.1": +"@types/hoist-non-react-statics@^3.3.0", "@types/hoist-non-react-statics@^3.3.1": version "3.3.1" resolved "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz" integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA== @@ -1778,6 +1785,16 @@ resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz" integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w== +"@types/react-redux@^7.1.20": + version "7.1.24" + resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.24.tgz#6caaff1603aba17b27d20f8ad073e4c077e975c0" + integrity sha512-7FkurKcS1k0FHZEtdbbgN8Oc6b+stGSfZYjQGicofJ0j4U0qIn/jaSvnP2pLwZKiai3/17xqqxkkrxTgN8UNbQ== + dependencies: + "@types/hoist-non-react-statics" "^3.3.0" + "@types/react" "*" + hoist-non-react-statics "^3.3.0" + redux "^4.0.0" + "@types/react@*", "@types/react@16 || 17 || 18": version "18.0.10" resolved "https://registry.npmjs.org/@types/react/-/react-18.0.10.tgz" @@ -2617,6 +2634,13 @@ css-blank-pseudo@^3.0.3: dependencies: postcss-selector-parser "^6.0.9" +css-box-model@^1.2.0: + version "1.2.1" + resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.1.tgz#59951d3b81fd6b2074a62d49444415b0d2b4d7c1" + integrity sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw== + dependencies: + tiny-invariant "^1.0.6" + css-functions-list@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/css-functions-list/-/css-functions-list-3.1.0.tgz#cf5b09f835ad91a00e5959bcfc627cd498e1321b" @@ -4474,7 +4498,7 @@ mdn-data@2.0.14: resolved "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz" integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow== -"memoize-one@>=3.1.1 <6": +"memoize-one@>=3.1.1 <6", memoize-one@^5.1.1: version "5.2.1" resolved "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz" integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q== @@ -5400,6 +5424,11 @@ quick-lru@^4.0.1: resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f" integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g== +raf-schd@^4.0.2: + version "4.0.3" + resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a" + integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ== + randombytes@^2.1.0: version "2.1.0" resolved "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz" @@ -5407,6 +5436,19 @@ randombytes@^2.1.0: dependencies: safe-buffer "^5.1.0" +react-beautiful-dnd@^13.1.0: + version "13.1.0" + resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz#ec97c81093593526454b0de69852ae433783844d" + integrity sha512-aGvblPZTJowOWUNiwd6tNfEpgkX5OxmpqxHKNW/4VmvZTNTbeiq7bA3bn5T+QSF2uibXB0D1DmJsb1aC/+3cUA== + dependencies: + "@babel/runtime" "^7.9.2" + css-box-model "^1.2.0" + memoize-one "^5.1.1" + raf-schd "^4.0.2" + react-redux "^7.2.0" + redux "^4.0.4" + use-memo-one "^1.1.1" + react-dom@^17.0.0: version "17.0.2" resolved "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz" @@ -5442,6 +5484,23 @@ react-is@^16.13.1, react-is@^16.7.0: resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +react-is@^17.0.2: + version "17.0.2" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" + integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== + +react-redux@^7.2.0: + version "7.2.8" + resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.8.tgz#a894068315e65de5b1b68899f9c6ee0923dd28de" + integrity sha512-6+uDjhs3PSIclqoCk0kd6iX74gzrGc3W5zcAjbrFgEdIjRSQObdIwfx80unTkVUYvbQ95Y8Av3OvFHq1w5EOUw== + dependencies: + "@babel/runtime" "^7.15.4" + "@types/react-redux" "^7.1.20" + hoist-non-react-statics "^3.3.2" + loose-envify "^1.4.0" + prop-types "^15.7.2" + react-is "^17.0.2" + react-simple-maps@^2.3.0: version "2.3.0" resolved "https://registry.npmjs.org/react-simple-maps/-/react-simple-maps-2.3.0.tgz" @@ -5546,6 +5605,13 @@ redent@^3.0.0: indent-string "^4.0.0" strip-indent "^3.0.0" +redux@^4.0.0, redux@^4.0.4: + version "4.2.0" + resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.0.tgz#46f10d6e29b6666df758780437651eeb2b969f13" + integrity sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA== + dependencies: + "@babel/runtime" "^7.9.2" + regenerate-unicode-properties@^10.0.1: version "10.0.1" resolved "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.0.1.tgz" @@ -6319,6 +6385,11 @@ timezone-support@^2.0.2: dependencies: commander "2.20.0" +tiny-invariant@^1.0.6: + version "1.2.0" + resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.2.0.tgz#a1141f86b672a9148c72e978a19a73b9b94a15a9" + integrity sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg== + tiny-lru@8.0.2: version "8.0.2" resolved "https://registry.npmjs.org/tiny-lru/-/tiny-lru-8.0.2.tgz" @@ -6527,6 +6598,11 @@ uri-js@^4.2.2: dependencies: punycode "^2.1.0" +use-memo-one@^1.1.1: + version "1.1.2" + resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.2.tgz#0c8203a329f76e040047a35a1197defe342fab20" + integrity sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ== + use-sync-external-store@1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.1.0.tgz#3343c3fe7f7e404db70f8c687adf5c1652d34e82" From 3926d3fe93fc850fab8bea80ac3b78fd93f0532a Mon Sep 17 00:00:00 2001 From: Chris Walsh Date: Sat, 23 Jul 2022 23:01:59 -0700 Subject: [PATCH 2/9] Add website ordering to state and settings page --- components/settings/WebsiteSettings.js | 36 ++++++++++++++++++++++++-- lib/format.js | 11 ++++++++ store/app.js | 1 + 3 files changed, 46 insertions(+), 2 deletions(-) diff --git a/components/settings/WebsiteSettings.js b/components/settings/WebsiteSettings.js index 257876be..4c39cf0c 100644 --- a/components/settings/WebsiteSettings.js +++ b/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, { setDashboard } 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 => ( {row.share_id && ( @@ -157,6 +167,21 @@ export default function WebsiteSettings() { setShowUrl(null); } + 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 (!data) { return null; } @@ -186,7 +211,14 @@ export default function WebsiteSettings() { - +
{editWebsite && ( }> diff --git a/lib/format.js b/lib/format.js index a336c1c4..26f02f3b 100644 --- a/lib/format.js +++ b/lib/format.js @@ -78,3 +78,14 @@ export function stringToColor(str) { } return color; } + +export function orderByWebsiteMap(websites, orderMap) { + if (!websites) return []; + + let ordered = [...websites]; + for (let website of websites) { + ordered[orderMap[website.website_uuid]] = website; + } + + return ordered; +} diff --git a/store/app.js b/store/app.js index 65295fd0..0b2abd47 100644 --- a/store/app.js +++ b/store/app.js @@ -12,6 +12,7 @@ import { getItem, setItem } from 'lib/web'; export const defaultDashboardConfig = { showCharts: true, limit: DEFAULT_WEBSITE_LIMIT, + websiteOrdering: {}, }; const initialState = { From 5bd83b8127e12bcb2e6e4ce93cb7a52d46a5ce9a Mon Sep 17 00:00:00 2001 From: Chris Walsh Date: Sat, 23 Jul 2022 23:02:47 -0700 Subject: [PATCH 3/9] Change dashboard websites to use ordered list --- components/pages/WebsiteList.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/components/pages/WebsiteList.js b/components/pages/WebsiteList.js index e2cba6b2..9e3c641a 100644 --- a/components/pages/WebsiteList.js +++ b/components/pages/WebsiteList.js @@ -5,8 +5,21 @@ 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 from 'store/app'; + +const selector = state => state.dashboard; export default function WebsiteList({ websites, showCharts, limit }) { + const store = useStore(selector); + const { websiteOrdering } = store; + + const ordered = useMemo( + () => orderByWebsiteMap(websites, websiteOrdering), + [websites, websiteOrdering], + ); + if (websites.length === 0) { return ( @@ -28,7 +41,7 @@ export default function WebsiteList({ websites, showCharts, limit }) { return (
- {websites.map(({ website_id, name, domain }, index) => + {ordered.map(({ website_id, name, domain }, index) => index < limit ? (
Date: Sat, 23 Jul 2022 23:04:07 -0700 Subject: [PATCH 4/9] Fix bug where toggle charts would reset ordering --- components/settings/DashboardSettingsButton.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/settings/DashboardSettingsButton.js b/components/settings/DashboardSettingsButton.js index 8c04aa00..8bdaf311 100644 --- a/components/settings/DashboardSettingsButton.js +++ b/components/settings/DashboardSettingsButton.js @@ -2,7 +2,7 @@ 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'; const selector = state => state.dashboard; @@ -18,7 +18,7 @@ export default function DashboardSettingsButton() { function handleSelect(value) { if (value === 'charts') { - setDashboard({ ...defaultDashboardConfig, showCharts: !settings.showCharts }); + setDashboard({ ...settings, showCharts: !settings.showCharts }); } //setDashboard(value); } From 76bdb6b1d61db7e03ada042f69b8678cce41270b Mon Sep 17 00:00:00 2001 From: Chris Walsh Date: Sat, 23 Jul 2022 23:07:53 -0700 Subject: [PATCH 5/9] Add reset order button to website settings --- components/settings/WebsiteSettings.js | 18 +++++++++++++++--- components/settings/WebsiteSettings.module.css | 6 ++++++ lang/en-US.json | 1 + 3 files changed, 22 insertions(+), 3 deletions(-) diff --git a/components/settings/WebsiteSettings.js b/components/settings/WebsiteSettings.js index 4c39cf0c..46f953d3 100644 --- a/components/settings/WebsiteSettings.js +++ b/components/settings/WebsiteSettings.js @@ -182,6 +182,13 @@ export default function WebsiteSettings() { }); } + function resetWebsiteOrder() { + setDashboard({ + ...store, + websiteOrdering: {}, + }); + } + if (!data) { return null; } @@ -207,9 +214,14 @@ export default function WebsiteSettings() {
- +
+ + +
Date: Sun, 24 Jul 2022 23:07:56 -0700 Subject: [PATCH 6/9] Restore table component and website settings page --- components/common/Table.js | 39 ++-------------- components/settings/WebsiteSettings.js | 44 +++---------------- .../settings/WebsiteSettings.module.css | 6 --- 3 files changed, 9 insertions(+), 80 deletions(-) diff --git a/components/common/Table.js b/components/common/Table.js index acd4f160..77a07712 100644 --- a/components/common/Table.js +++ b/components/common/Table.js @@ -1,4 +1,3 @@ -import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd'; import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; @@ -14,9 +13,6 @@ function Table({ rowKey, showHeader = true, children, - isDraggable = false, - dragId, - onDragEnd, }) { if (empty && rows.length === 0) { return empty; @@ -40,37 +36,10 @@ function Table({
{rows.length === 0 && } {!children && - (isDraggable ? ( - - - {provided => ( -
- {rows.map((row, index) => { - const id = rowKey ? rowKey(row) : index; - return ( - - {provided => ( -
- -
- )} - - ); - })} -
- )} - - - ) : ( - rows.map((row, index) => { - const id = rowKey ? rowKey(row) : index; - return ; - }) - ))} + rows.map((row, index) => { + const id = rowKey ? rowKey(row) : index; + return ; + })} {children}
diff --git a/components/settings/WebsiteSettings.js b/components/settings/WebsiteSettings.js index 46f953d3..f5cd31e6 100644 --- a/components/settings/WebsiteSettings.js +++ b/components/settings/WebsiteSettings.js @@ -25,7 +25,7 @@ import LinkIcon from 'assets/link.svg'; import useFetch from 'hooks/useFetch'; import useUser from 'hooks/useUser'; import { orderByWebsiteMap } from 'lib/format'; -import useStore, { setDashboard } from 'store/app'; +import useStore from 'store/app'; import styles from './WebsiteSettings.module.css'; const selector = state => state.dashboard; @@ -167,28 +167,6 @@ export default function WebsiteSettings() { setShowUrl(null); } - 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 })), - }); - } - - function resetWebsiteOrder() { - setDashboard({ - ...store, - websiteOrdering: {}, - }); - } - if (!data) { return null; } @@ -214,23 +192,11 @@ export default function WebsiteSettings() {
-
- - -
+ -
+
{editWebsite && ( }> diff --git a/components/settings/WebsiteSettings.module.css b/components/settings/WebsiteSettings.module.css index dbb04eb8..a69d4101 100644 --- a/components/settings/WebsiteSettings.module.css +++ b/components/settings/WebsiteSettings.module.css @@ -11,9 +11,3 @@ .detailLink { width: 100%; } - -.headerButtons { - display: flex; - justify-content: flex-end; - gap: 10px; -} From 137ff97c072b3d6db199f51581d75dc14722526b Mon Sep 17 00:00:00 2001 From: Chris Walsh Date: Sun, 24 Jul 2022 23:25:04 -0700 Subject: [PATCH 7/9] Move reordering of websites onto dashboard --- components/pages/WebsiteList.js | 86 +++++++++++++++---- components/pages/WebsiteList.module.css | 9 ++ .../settings/DashboardSettingsButton.js | 30 +++++++ .../DashboardSettingsButton.module.css | 5 ++ lang/en-US.json | 2 + store/app.js | 1 + 6 files changed, 118 insertions(+), 15 deletions(-) create mode 100644 components/settings/DashboardSettingsButton.module.css diff --git a/components/pages/WebsiteList.js b/components/pages/WebsiteList.js index 9e3c641a..07cc4107 100644 --- a/components/pages/WebsiteList.js +++ b/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'; @@ -7,19 +8,36 @@ import Arrow from 'assets/arrow-right.svg'; import styles from './WebsiteList.module.css'; import { orderByWebsiteMap } from 'lib/format'; import { useMemo } from 'react'; -import useStore from 'store/app'; +import useStore, { setDashboard } from 'store/app'; const selector = state => state.dashboard; export default function WebsiteList({ websites, showCharts, limit }) { const store = useStore(selector); - const { websiteOrdering } = store; + 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 ( @@ -40,19 +58,57 @@ export default function WebsiteList({ websites, showCharts, limit }) { } return ( -
- {ordered.map(({ website_id, name, domain }, index) => - index < limit ? ( -
- -
- ) : null, +
+ {changeOrderMode ? ( + + + {provided => ( +
+ {ordered.map(({ website_id, name, domain }, index) => + index < limit ? ( +
+ + {provided => ( +
+ +
+ )} + +
+ ) : null, + )} +
+ )} + + + ) : ( + ordered.map(({ website_id, name, domain }, index) => + index < limit ? ( +
+ +
+ ) : null, + ) )}
); diff --git a/components/pages/WebsiteList.module.css b/components/pages/WebsiteList.module.css index fc6a94c2..9b5e6968 100644 --- a/components/pages/WebsiteList.module.css +++ b/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; +} diff --git a/components/settings/DashboardSettingsButton.js b/components/settings/DashboardSettingsButton.js index 8bdaf311..1c4b98c7 100644 --- a/components/settings/DashboardSettingsButton.js +++ b/components/settings/DashboardSettingsButton.js @@ -3,6 +3,9 @@ import { FormattedMessage } from 'react-intl'; import MenuButton from 'components/common/MenuButton'; import Gear from 'assets/gear.svg'; 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: , value: 'charts', }, + { + label: , + value: 'order', + }, ]; function handleSelect(value) { if (value === 'charts') { 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 ( +
+ + +
+ ); + return } options={menuOptions} onSelect={handleSelect} hideLabel />; } diff --git a/components/settings/DashboardSettingsButton.module.css b/components/settings/DashboardSettingsButton.module.css new file mode 100644 index 00000000..6e0d19c2 --- /dev/null +++ b/components/settings/DashboardSettingsButton.module.css @@ -0,0 +1,5 @@ +.buttonGroup { + display: flex; + place-items: center; + gap: 10px; +} diff --git a/lang/en-US.json b/lang/en-US.json index 69a68980..0687e553 100644 --- a/lang/en-US.json +++ b/lang/en-US.json @@ -10,6 +10,7 @@ "label.back": "Back", "label.cancel": "Cancel", "label.change-password": "Change password", + "label.change-order": "Change order", "label.confirm-password": "Confirm password", "label.copy-to-clipboard": "Copy to clipboard", "label.current-password": "Current password", @@ -22,6 +23,7 @@ "label.delete-website": "Delete website", "label.dismiss": "Dismiss", "label.domain": "Domain", + "label.done": "Done", "label.edit": "Edit", "label.edit-account": "Edit account", "label.edit-website": "Edit website", diff --git a/store/app.js b/store/app.js index 0b2abd47..fd84b975 100644 --- a/store/app.js +++ b/store/app.js @@ -13,6 +13,7 @@ export const defaultDashboardConfig = { showCharts: true, limit: DEFAULT_WEBSITE_LIMIT, websiteOrdering: {}, + changeOrderMode: false, }; const initialState = { From 934d569bb23a27203f47c8f6f511fbd2e33b8ca8 Mon Sep 17 00:00:00 2001 From: Chris Walsh Date: Thu, 28 Jul 2022 16:59:44 -0700 Subject: [PATCH 8/9] Rename "change order" to "edit dashboard" --- components/settings/DashboardSettingsButton.js | 2 +- lang/en-US.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/settings/DashboardSettingsButton.js b/components/settings/DashboardSettingsButton.js index 1c4b98c7..5425bca5 100644 --- a/components/settings/DashboardSettingsButton.js +++ b/components/settings/DashboardSettingsButton.js @@ -18,7 +18,7 @@ export default function DashboardSettingsButton() { value: 'charts', }, { - label: , + label: , value: 'order', }, ]; diff --git a/lang/en-US.json b/lang/en-US.json index 0687e553..f35005ad 100644 --- a/lang/en-US.json +++ b/lang/en-US.json @@ -10,7 +10,6 @@ "label.back": "Back", "label.cancel": "Cancel", "label.change-password": "Change password", - "label.change-order": "Change order", "label.confirm-password": "Confirm password", "label.copy-to-clipboard": "Copy to clipboard", "label.current-password": "Current password", @@ -26,6 +25,7 @@ "label.done": "Done", "label.edit": "Edit", "label.edit-account": "Edit account", + "label.edit-dashboard": "Edit dashboard", "label.edit-website": "Edit website", "label.enable-share-url": "Enable share URL", "label.invalid": "Invalid", From 88d1c194549b90654f1aa988ddee11794a776b6b Mon Sep 17 00:00:00 2001 From: Chris Walsh Date: Thu, 28 Jul 2022 17:16:03 -0700 Subject: [PATCH 9/9] Fix graphical bugs when dragging --- components/pages/WebsiteList.js | 53 +++++++++++++++++---------------- 1 file changed, 28 insertions(+), 25 deletions(-) diff --git a/components/pages/WebsiteList.js b/components/pages/WebsiteList.js index 07cc4107..12e2f7d9 100644 --- a/components/pages/WebsiteList.js +++ b/components/pages/WebsiteList.js @@ -62,33 +62,36 @@ export default function WebsiteList({ websites, showCharts, limit }) { {changeOrderMode ? ( - {provided => ( -
+ {(provided, snapshot) => ( +
{ordered.map(({ website_id, name, domain }, index) => index < limit ? ( -
- - {provided => ( -
- -
- )} - -
+ + {provided => ( +
+ +
+ )} + ) : null, )}