From fce6a562fd137f99a84f98694e078a8cde90cb20 Mon Sep 17 00:00:00 2001 From: nick-delirium Date: Tue, 18 Feb 2025 09:13:15 +0100 Subject: [PATCH] ui: reorganising side menu and prop/ev lists --- frontend/app/PrivateRoutes.tsx | 35 ++- .../DataManagement/Properties/ListPage.tsx | 232 ++++++++++++++++++ .../DataManagement/UsersEvents/ListPage.tsx | 20 +- .../DataManagement/UsersEvents/UserPage.tsx | 2 +- frontend/app/layout/SideMenu.tsx | 7 +- frontend/app/layout/data.ts | 13 +- frontend/app/routes.ts | 7 +- 7 files changed, 277 insertions(+), 39 deletions(-) create mode 100644 frontend/app/components/DataManagement/Properties/ListPage.tsx diff --git a/frontend/app/PrivateRoutes.tsx b/frontend/app/PrivateRoutes.tsx index d5aed7776..283f1a993 100644 --- a/frontend/app/PrivateRoutes.tsx +++ b/frontend/app/PrivateRoutes.tsx @@ -41,6 +41,7 @@ const components: any = { UserPage: lazy(() => import('Components/DataManagement/UsersEvents/UserPage')), UsersEventsPage: lazy(() => import('Components/DataManagement/UsersEvents/ListPage')), EventPage: lazy(() => import('Components/DataManagement/UsersEvents/EventPage')), + PropertiesList: lazy(() => import('Components/DataManagement/Properties/ListPage')), }; const enhancedComponents: any = { @@ -68,6 +69,7 @@ const enhancedComponents: any = { UserPage: components.UserPage, UsersEventsPage: components.UsersEventsPage, EventPage: components.EventPage, + PropertiesList: components.PropertiesList, }; const withSiteId = routes.withSiteId; @@ -117,13 +119,6 @@ const SCOPE_SETUP = routes.scopeSetup(); const HIGHLIGHTS_PATH = routes.highlights(); -const DATA_MANAGEMENT = { - ACTIVITY: routes.dataManagement.activity(), - USER_PAGE: routes.dataManagement.userPage(), - USERS_EVENTS: routes.dataManagement.usersEvents(), - EVENT_PAGE: routes.dataManagement.eventPage(), -} - function PrivateRoutes() { const { projectsStore, userStore, integrationsStore } = useStore(); const onboarding = userStore.onboarding; @@ -308,26 +303,40 @@ function PrivateRoutes() { + + + + + + {Object.entries(routes.redirects).map(([fr, to]) => ( diff --git a/frontend/app/components/DataManagement/Properties/ListPage.tsx b/frontend/app/components/DataManagement/Properties/ListPage.tsx new file mode 100644 index 000000000..f97a7ca02 --- /dev/null +++ b/frontend/app/components/DataManagement/Properties/ListPage.tsx @@ -0,0 +1,232 @@ +import React from 'react'; +import { Input, Table, Button, Dropdown } from 'antd'; +import { MoreOutlined } from '@ant-design/icons'; +import { useHistory } from 'react-router-dom'; +import { useStore } from 'App/mstore'; +import { observer } from 'mobx-react-lite'; +import { withSiteId, dataManagement } from 'App/routes'; +import { Filter, Album } from 'lucide-react'; +import { list } from '../Activity/Page'; +import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv'; +import ColumnsModal from 'Components/DataManagement/Activity/ColumnsModal'; +import FullPagination from 'Shared/FullPagination'; +import Tabs from 'Shared/Tabs' + +function ListPage() { + const [view, setView] = React.useState('users'); + const views = [ + { + key: 'users', + label:
Users
, + }, + { + key: 'events', + label:
Events
, + }, + ]; + const { projectsStore } = useStore(); + const siteId = projectsStore.activeSiteId; + const history = useHistory(); + const toUser = (id: string) => + history.push(withSiteId(dataManagement.userPage(id), siteId)); + const toEvent = (id: string) => + history.push(withSiteId(dataManagement.eventPage(id), siteId)); + + return ( +
+
+ setView(key)} + items={views} + /> +
+ + +
+
+ {view === 'users' ? : } +
+ ); +} + +function EventPropsList({ toEvent }: { toEvent: (id: string) => void }) { + const columns = [ + { + title: 'Property', + dataIndex: 'name', + key: 'name', + showSorterTooltip: { target: 'full-header' }, + sorter: (a, b) => a.name.localeCompare(b.name), + }, + { + title: 'Display Name', + dataIndex: 'displayName', + key: 'displayName', + showSorterTooltip: { target: 'full-header' }, + sorter: (a, b) => a.displayName.localeCompare(b.displayName), + }, + { + title: 'Description', + dataIndex: 'description', + key: 'description', + showSorterTooltip: { target: 'full-header' }, + sorter: (a, b) => a.description.localeCompare(b.description), + }, + { + title: '30 Day Volume', + dataIndex: 'monthVolume', + key: 'monthVolume', + showSorterTooltip: { target: 'full-header' }, + sorter: (a, b) => a.monthVolume.localeCompare(b.monthVolume), + }, + ]; + const page = 1; + const total = 100; + const onPageChange = (page: number) => {}; + const limit = 10; + return ( +
+ ({ + onClick: () => toEvent(record.eventId), + })} + /> + + + ); +} + +function UserPropsList({ toUser }: { toUser: (id: string) => void }) { + const [editCols, setEditCols] = React.useState(false); + const [hiddenCols, setHiddenCols] = React.useState([]); + + const dropdownItems = [ + { + label: 'Show/Hide Columns', + key: 'edit-columns', + onClick: () => setTimeout(() => setEditCols(true), 1), + }, + ]; + const columns = [ + { + title: 'Name', + dataIndex: 'name', + key: 'name', + showSorterTooltip: { target: 'full-header' }, + sorter: (a, b) => a.name.localeCompare(b.name), + }, + { + title: 'Display Name', + dataIndex: 'displayName', + key: 'displayName', + showSorterTooltip: { target: 'full-header' }, + sorter: (a, b) => a.displayName.localeCompare(b.displayName), + }, + { + title: 'Description', + dataIndex: 'description', + key: 'description', + showSorterTooltip: { target: 'full-header' }, + sorter: (a, b) => a.description.localeCompare(b.description), + }, + { + title: '# Users', + dataIndex: 'users', + key: 'users', + showSorterTooltip: { target: 'full-header' }, + sorter: (a, b) => a.users.localeCompare(b.users), + }, + { + title: ( + +
+ +
+ + ), + dataIndex: '$__opts__$', + key: '$__opts__$', + width: 50, + }, + ]; + + const page = 1; + const total = 10; + const onPageChange = (page: number) => {}; + const limit = 10; + const list = []; + + const onAddFilter = () => console.log('add filter'); + const excludeFilterKeys = []; + const excludeCategory = []; + + const shownCols = columns.map((col) => ({ + ...col, + hidden: hiddenCols.includes(col.key), + })); + const onUpdateVisibleCols = (cols: string[]) => { + setHiddenCols((_) => { + return columns + .map((col) => + cols.includes(col.key) || col.key === '$__opts__$' ? null : col.key + ) + .filter(Boolean); + }); + setEditCols(false); + }; + return ( +
+
+ {editCols ? ( + setEditCols(false)}> + col.key !== '$__opts__$')} + onSelect={onUpdateVisibleCols} + hiddenCols={hiddenCols} + topOffset={'top-24 -mt-4'} + /> + + ) : null} +
({ + onClick: () => toUser(record.userId), + })} + pagination={false} + rowClassName={'cursor-pointer'} + dataSource={[]} + columns={shownCols} + /> + + + + ); +} + +export default observer(ListPage); diff --git a/frontend/app/components/DataManagement/UsersEvents/ListPage.tsx b/frontend/app/components/DataManagement/UsersEvents/ListPage.tsx index a18f1e1c3..88f769eaf 100644 --- a/frontend/app/components/DataManagement/UsersEvents/ListPage.tsx +++ b/frontend/app/components/DataManagement/UsersEvents/ListPage.tsx @@ -12,9 +12,8 @@ import { list } from '../Activity/Page'; import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv'; import ColumnsModal from 'Components/DataManagement/Activity/ColumnsModal'; import FullPagination from 'Shared/FullPagination'; -import Tabs from 'Shared/Tabs' -function ListPage() { +function ListPage({ view }: { view: 'users' | 'events' }) { const { projectsStore } = useStore(); const siteId = projectsStore.activeSiteId; const history = useHistory(); @@ -22,29 +21,14 @@ function ListPage() { history.push(withSiteId(dataManagement.userPage(id), siteId)); const toEvent = (id: string) => history.push(withSiteId(dataManagement.eventPage(id), siteId)); - const [view, setView] = React.useState('users'); - const views = [ - { - key: 'users', - label:
Users
, - }, - { - key: 'events', - label:
Events
, - }, - ]; return (
- setView(key)} - items={views} - /> +
{view}