diff --git a/frontend/app/components/DataManagement/Activity/Page.tsx b/frontend/app/components/DataManagement/Activity/Page.tsx index 12647e97c..cb56599d1 100644 --- a/frontend/app/components/DataManagement/Activity/Page.tsx +++ b/frontend/app/components/DataManagement/Activity/Page.tsx @@ -3,7 +3,6 @@ import { EventsList, FilterList } from 'Shared/Filters/FilterList'; import { Table, Dropdown } from 'antd'; import { MoreOutlined } from '@ant-design/icons'; import { numberWithCommas } from 'App/utils'; -import { Pagination } from 'UI'; import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv'; import ColumnsModal from 'Components/DataManagement/Activity/ColumnsModal'; import Event from './data/Event'; @@ -15,6 +14,7 @@ import { Link } from 'react-router-dom'; import { dataManagement, withSiteId } from 'App/routes' import { observer } from 'mobx-react-lite'; import { useStore } from 'App/mstore'; +import FullPagination from "Shared/FullPagination"; const limit = 100; @@ -280,26 +280,14 @@ function ActivityPage() { pagination={false} columns={shownCols} /> -
-
- {'Showing '} - {(page - 1) * limit + 1} - {' to '} - - {(page - 1) * limit + list.length} - - {' of '} - {numberWithCommas(total)} - {' events.'} -
- -
+ diff --git a/frontend/app/components/DataManagement/Properties/PropertiesPage.tsx b/frontend/app/components/DataManagement/Properties/PropertiesPage.tsx new file mode 100644 index 000000000..5fa7c5de2 --- /dev/null +++ b/frontend/app/components/DataManagement/Properties/PropertiesPage.tsx @@ -0,0 +1,151 @@ +import React from 'react'; +import FullPagination from 'Shared/FullPagination'; +import { Input, Table } from 'antd'; +import Tabs from 'Shared/Tabs'; +import { list } from "../Activity/Page"; + +function PropertiesPage() { + const [query, setQuery] = React.useState(''); + const [activeView, setActiveView] = React.useState('properties'); + const views = [ + { + key: 'user-props', + label:
User Properties
, + }, + { + key: 'events-props', + label:
Event Properties
, + }, + ]; + return ( +
+
+ + setQuery(e.target.value)} + /> +
+ {activeView === 'user-props' ? : } +
+ ); +} + +function UserPropsList() { + 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: 'Example Value', + dataIndex: 'exampleValue', + key: 'exampleValue', + showSorterTooltip: { target: 'full-header' }, + sorter: (a, b) => a.exampleValue.localeCompare(b.exampleValue), + }, + { + title: '# of Queries', + dataIndex: 'monthQuery', + key: 'monthQuery', + showSorterTooltip: { target: 'full-header' }, + sorter: (a, b) => a.monthQuery.localeCompare(b.monthQuery), + }, + ]; + const page = 1; + const total = 100; + const onPageChange = (page: number) => {}; + const limit = 10; + return ( +
+ + + + ); +} + +function EventPropsList() { + 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: 'Example Value', + dataIndex: 'exampleValue', + key: 'exampleValue', + showSorterTooltip: { target: 'full-header' }, + sorter: (a, b) => a.exampleValue.localeCompare(b.exampleValue), + }, + { + title: '# of Events', + dataIndex: 'totalVolume', + key: 'totalVolume', + showSorterTooltip: { target: 'full-header' }, + sorter: (a, b) => a.totalVolume.localeCompare(b.totalVolume), + }, + ]; + const page = 1; + const total = 100; + const onPageChange = (page: number) => {}; + const limit = 10; + return ( +
+
+ + + ); +} \ No newline at end of file diff --git a/frontend/app/components/DataManagement/Properties/UserProperty.tsx b/frontend/app/components/DataManagement/Properties/UserProperty.tsx new file mode 100644 index 000000000..706e4a2a4 --- /dev/null +++ b/frontend/app/components/DataManagement/Properties/UserProperty.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import Event from 'Components/DataManagement/Activity/data/Event' + +function UserProperty() { + const testEv = new Event({ + name: '$broswerthing', + displayName: 'Browser Thing', + description: 'The browser the user is using', + customFields: { + exampleValue: 'Chrome', + type: 'String', + } + }) + return ( +
+ +
+ ) +} \ No newline at end of file diff --git a/frontend/app/components/DataManagement/UsersEvents/ListPage.tsx b/frontend/app/components/DataManagement/UsersEvents/ListPage.tsx index 7872e30f1..40ed25eb3 100644 --- a/frontend/app/components/DataManagement/UsersEvents/ListPage.tsx +++ b/frontend/app/components/DataManagement/UsersEvents/ListPage.tsx @@ -1,56 +1,52 @@ import React from 'react'; -import { numberWithCommas } from 'App/utils'; -import FilterSelection from "Shared/Filters/FilterSelection/FilterSelection"; +import FilterSelection from 'Shared/Filters/FilterSelection/FilterSelection'; import User from './data/User'; -import { Pagination } from 'UI'; -import { Segmented, Input, Table, Button, Dropdown, Tabs, TabsProps } from 'antd'; +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 { 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'; - -const customTabBar: TabsProps['renderTabBar'] = (props, DefaultTabBar) => ( - -); +import FullPagination from 'Shared/FullPagination'; +import Tabs from 'Shared/Tabs' function ListPage() { const { projectsStore } = useStore(); const siteId = projectsStore.activeSiteId; const history = useHistory(); - const toUser = (id: string) => history.push(withSiteId(dataManagement.userPage(id), siteId)); + const toUser = (id: string) => + history.push(withSiteId(dataManagement.userPage(id), siteId)); const [view, setView] = React.useState('users'); const views = [ { key: 'users', label:
Users
, - content:
placeholder
, }, { key: 'events', label:
Events
, - content:
placeholder
, }, ]; return ( -
-
+
+
setView(key)} items={views} - renderTabBar={customTabBar} />
- +
@@ -90,14 +86,30 @@ function EventsList() { sorter: (a, b) => a.monthVolume.localeCompare(b.monthVolume), }, { - title: '30 Day Query', + title: '30 Day Queries', dataIndex: 'monthQuery', key: 'monthQuery', showSorterTooltip: { target: 'full-header' }, sorter: (a, b) => a.monthQuery.localeCompare(b.monthQuery), }, - ] - return
; + ]; + const page = 1; + const total = 100; + const onPageChange = (page: number) => {}; + const limit = 10; + return ( +
+
+ + + ); } function UsersList({ toUser }: { toUser: (id: string) => void }) { @@ -147,8 +159,8 @@ function UsersList({ toUser }: { toUser: (id: string) => void }) { email: 'sad;jsadk', }, updatedAt: Date.now(), - }) - ] + }), + ]; const dropdownItems = [ { @@ -211,8 +223,8 @@ function UsersList({ toUser }: { toUser: (id: string) => void }) { const list = []; const onAddFilter = () => console.log('add filter'); - const excludeFilterKeys = [] - const excludeCategory = [] + const excludeFilterKeys = []; + const excludeCategory = []; const shownCols = columns.map((col) => ({ ...col, @@ -229,8 +241,8 @@ function UsersList({ toUser }: { toUser: (id: string) => void }) { setEditCols(false); }; return ( -
-
+
+
{/* 1.23 -- Show by*/} {/* void }) { icon={} type="default" size={'small'} - className='btn-add-filter' + className="btn-add-filter" > Filters @@ -269,36 +281,24 @@ function UsersList({ toUser }: { toUser: (id: string) => void }) { /> ) : null} -
({ - onClick: () => toUser(record.userId), - })} - pagination={false} - rowClassName={'cursor-pointer'} - dataSource={testUsers} - columns={shownCols} - /> - -
-
- {'Showing '} - {(page - 1) * limit + 1} - {' to '} - - {(page - 1) * limit + list.length} - - {' of '} - {numberWithCommas(total)} - {' users.'} -
- ({ + onClick: () => toUser(record.userId), + })} + pagination={false} + rowClassName={'cursor-pointer'} + dataSource={testUsers} + columns={shownCols} />
+ ); } diff --git a/frontend/app/components/shared/FullPagination.tsx b/frontend/app/components/shared/FullPagination.tsx new file mode 100644 index 000000000..cb3da1478 --- /dev/null +++ b/frontend/app/components/shared/FullPagination.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import { Pagination } from 'UI'; +import { numberWithCommas } from 'App/utils'; + +function FullPagination({ + page, + limit, + total, + listLen, + onPageChange, + entity, +}: { + page: number; + limit: number; + total: number; + listLen: number; + onPageChange: (page: number) => void; + entity?: string; +}) { + return ( +
+
+ {'Showing '} + {(page - 1) * limit + 1} + {' to '} + {(page - 1) * limit + listLen} + {' of '} + {numberWithCommas(total)} + {entity ? ` ${entity}.` : '.'} +
+ +
+ ); +} + +export default FullPagination; diff --git a/frontend/app/components/shared/Tabs.tsx b/frontend/app/components/shared/Tabs.tsx new file mode 100644 index 000000000..fb4602a06 --- /dev/null +++ b/frontend/app/components/shared/Tabs.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import { Tabs, TabsProps } from 'antd'; + +const customTabBar: TabsProps['renderTabBar'] = (props, DefaultTabBar) => ( + +); + +function CustomizedTabs({ + items, + onChange, + activeKey, +}: { + items: { key: string; label: React.ReactNode }[]; + onChange: (key: string) => void; + activeKey: string; +}) { + const customItems = items.map((i) => ({ + ...i, + content:
placeholder
, + })); + + return ( + + ); +} + +export default CustomizedTabs;