diff --git a/client/src/components/ContactsListField.js b/client/src/components/ContactsListField.js index 8db5fa0de..39a07d739 100644 --- a/client/src/components/ContactsListField.js +++ b/client/src/components/ContactsListField.js @@ -1,43 +1,51 @@ -import React, { useCallback, useState } from 'react'; -import { - MenuItem, - Button, -} from '@blueprintjs/core'; +import React, { useCallback, useMemo } from 'react'; +import { MenuItem, Button } from '@blueprintjs/core'; import ListSelect from 'components/ListSelect'; import { FormattedMessage as T } from 'react-intl'; export default function ContactsListField({ contacts, onContactSelected, - error, - initialContact, - defautlSelectText = () + selectedContactId, + selectedContactType, + defautlSelectText = , }) { - const [selectedContact, setSelectedContact] = useState( - initialContact || null + // Contact item of select accounts field. + const contactRenderer = useCallback( + (item, { handleClick, modifiers, query }) => ( + + ), + [], ); - // Contact item of select accounts field. - const contactItem = useCallback((item, { handleClick, modifiers, query }) => ( - - ), []); + const onContactSelect = useCallback( + (contact) => { + onContactSelected && onContactSelected(contact); + }, + [onContactSelected], + ); - const onContactSelect = useCallback((contact) => { - setSelectedContact(contact.id); - onContactSelected && onContactSelected(contact); - }, [setSelectedContact, onContactSelected]); + const items = useMemo( + () => + contacts.map((contact) => ({ + ...contact, + _id: `${contact.id}_${contact.contact_type}`, + })), + [contacts], + ); return ( } - itemRenderer={contactItem} + items={items} + noResults={} + itemRenderer={contactRenderer} popoverProps={{ minimal: true }} filterable={true} onItemSelect={onContactSelect} labelProp={'display_name'} - selectedItem={selectedContact} - selectedItemProp={'id'} - defaultText={defautlSelectText} /> + selectedItem={`${selectedContactId}_${selectedContactType}`} + selectedItemProp={'_id'} + defaultText={defautlSelectText} + /> ); -} \ No newline at end of file +} diff --git a/client/src/components/Dashboard/DashboardTopbar.js b/client/src/components/Dashboard/DashboardTopbar.js index a598c06b9..50326792a 100644 --- a/client/src/components/Dashboard/DashboardTopbar.js +++ b/client/src/components/Dashboard/DashboardTopbar.js @@ -110,10 +110,15 @@ function DashboardTopbar({ icon={} text={} /> - } - /> + } + position={Position.BOTTOM} + > + } + /> + } diff --git a/client/src/components/DataTable.js b/client/src/components/DataTable.js index cffcaaba1..7a9134a27 100644 --- a/client/src/components/DataTable.js +++ b/client/src/components/DataTable.js @@ -8,7 +8,13 @@ import { useSortBy, useFlexLayout, } from 'react-table'; -import { Checkbox, Spinner, ContextMenu, Menu, MenuItem } from '@blueprintjs/core'; +import { + Checkbox, + Spinner, + ContextMenu, + Menu, + MenuItem, +} from '@blueprintjs/core'; import classnames from 'classnames'; import { FixedSizeList } from 'react-window'; import { useSticky } from 'react-table-sticky'; @@ -30,7 +36,7 @@ export default function DataTable({ loading, onFetchData, onSelectedRowsChange, - manualSortBy = 'false', + manualSortBy = false, selectionColumn = false, expandSubRows = true, className, @@ -51,7 +57,9 @@ export default function DataTable({ pagesCount: controlledPageCount, initialPageIndex, initialPageSize, - rowContextMenu + rowContextMenu, + + expandColumnSpace = 1.5, }) { const { getTableProps, @@ -91,7 +99,6 @@ export default function DataTable({ manualSortBy, expandSubRows, payload, - autoResetSelectedRows: false, }, useSortBy, useExpanded, @@ -148,7 +155,7 @@ export default function DataTable({ } else { onFetchData && onFetchData({ pageIndex, pageSize, sortBy }); } - }, [pageIndex, pageSize, sortBy, onFetchData]); + }, [pageIndex, pageSize, manualSortBy ? sortBy : null, onFetchData]); useUpdateEffect(() => { onSelectedRowsChange && onSelectedRowsChange(selectedFlatRows); @@ -162,7 +169,7 @@ export default function DataTable({ wrapper={(children) => (