Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Henry/86550/feat/change tabs to dropdown reports #7443

Merged
merged 13 commits into from
Feb 7, 2023
Merged

Henry/86550/feat/change tabs to dropdown reports #7443

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
3b4a0bc
feat: change from tabs to dropdown menu in reports
henry-deriv Jan 25, 2023
efda5e8
fix: changed variable names to contract types instead of trade types
henry-deriv Jan 25, 2023
e71d386
chore: change to more readable classname
henry-deriv Jan 25, 2023
6d32f96
feat: ux improvement
henry-deriv Jan 27, 2023
4bee65c
chore: deleted unneccesary commented out code
henry-deriv Jan 27, 2023
f0c35c8
fix: fixing circleCI error
henry-deriv Jan 27, 2023
360ed0f
fix: CircleCI bug fix
henry-deriv Jan 27, 2023
9f68420
fix: fix CircleCI Issue
henry-deriv Jan 27, 2023
a378e62
fix: circleCI fix
henry-deriv Jan 30, 2023
94d5b15
fix: circleCI fix
henry-deriv Jan 30, 2023
5c05c8d
chore: fix css naming and use convention
henry-deriv Jan 30, 2023
e56caa7
fix: placeholder component was not being shown after closing multipli…
henry-deriv Jan 31, 2023
0c4fe3b
fix: multiplier close button cut off in mobile view
henry-deriv Feb 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/components/src/components/data-table/table-row.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const TableRow = ({
}) => {
const action_columns = getActionColumns && getActionColumns({ row_obj, is_header, is_footer });

const cells = columns.map(({ col_index, renderCellContent, title, key }) => {
const cells = columns?.map(({ col_index, renderCellContent, title, key }) => {
let cell_content = title;
if (!is_header) {
const cell_value = row_obj[col_index] || '';
Expand Down
6 changes: 0 additions & 6 deletions packages/reports/src/Containers/__tests__/open-positions-table.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,6 @@ describe('OpenPositionsTable', () => {
expect(screen.getByTestId('dt_loading_component')).toBeInTheDocument();
});

it('should render "EmptyMessageComponent" when we have no "active_positions"', () => {
render(<OpenPositionsTable currency='USD' active_positions={[]} component_icon='IcUnderlying' />);
expect(screen.getByText(/you have no open positions yet/i)).toBeVisible();
expect(screen.getByTestId('dt_empty_trade_history_icon')).toBeVisible();
});

henry-deriv marked this conversation as resolved.
Show resolved Hide resolved
it('should render "DataTable" component and it\'s properties when "is_loading" property is "false" and the "currency" property is passed in the "desktop" view', () => {
render(<OpenPositionsTable currency='USD' active_positions={[100]} columns={[]} className='test-class' />);
expect(screen.getByTestId('dt_data_table')).toBeInTheDocument();
Expand Down
98 changes: 59 additions & 39 deletions packages/reports/src/Containers/open-positions.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,13 @@ import {
DesktopWrapper,
MobileWrapper,
ProgressBar,
Tabs,
DataList,
DataTable,
ContractCard,
usePrevious,
PositionsDrawerCard,
Dropdown,
SelectNative,
} from '@deriv/components';
import {
urlFor,
Expand Down Expand Up @@ -152,6 +153,7 @@ export const OpenPositionsTable = ({
preloaderCheck,
row_size,
totals,
is_empty,
}) => (
<React.Fragment>
{is_loading ? (
Expand All @@ -165,10 +167,7 @@ export const OpenPositionsTable = ({
currency && (
<div className='reports__content'>
<DesktopWrapper>
<EmptyPlaceholderWrapper
component_icon={component_icon}
is_empty={active_positions.length === 0}
>
<EmptyPlaceholderWrapper component_icon={component_icon} is_empty={is_empty}>
<DataTable
className={className}
columns={columns}
Expand All @@ -184,10 +183,7 @@ export const OpenPositionsTable = ({
</EmptyPlaceholderWrapper>
</DesktopWrapper>
<MobileWrapper>
<EmptyPlaceholderWrapper
component_icon={component_icon}
is_empty={active_positions.length === 0}
>
<EmptyPlaceholderWrapper component_icon={component_icon} is_empty={is_empty}>
<DataList
className={className}
data_source={active_positions}
Expand Down Expand Up @@ -309,10 +305,20 @@ const OpenPositions = ({
server_time,
...props
}) => {
const [active_index, setActiveIndex] = React.useState(is_multiplier ? 1 : 0);
// Tabs should be visible only when there is at least one active multiplier contract
const [has_multiplier_contract, setMultiplierContract] = React.useState(false);
const [contract_type_value, setContractTypeValue] = React.useState(is_multiplier ? 'Multipliers' : 'Options');
const previous_active_positions = usePrevious(active_positions);
const contract_types = [
henry-deriv marked this conversation as resolved.
Show resolved Hide resolved
{
henry-deriv marked this conversation as resolved.
Show resolved Hide resolved
text: localize('Options'),
value: 'Options',
},
{
text: localize('Multipliers'),
value: 'Multipliers',
},
];
henry-deriv marked this conversation as resolved.
Show resolved Hide resolved

React.useEffect(() => {
/*
Expand All @@ -337,11 +343,11 @@ const OpenPositions = ({
}
};

const setActiveTabIndex = index => setActiveIndex(index);

if (error) return <p>{error}</p>;

const is_multiplier_selected = has_multiplier_contract && active_index === 1;
const is_multiplier_selected = has_multiplier_contract && contract_type_value === 'Multipliers';
const is_options_selected = contract_type_value === 'Options';

const active_positions_filtered = active_positions?.filter(p => {
if (p.contract_info) {
return is_multiplier_selected
Expand Down Expand Up @@ -390,42 +396,56 @@ const OpenPositions = ({
totals: active_positions_filtered_totals,
};

const handleChange = e => {
setContractTypeValue(e.target.value);
};
return (
<React.Fragment>
<NotificationMessages />
{has_multiplier_contract ? (
<Tabs
active_index={active_index}
className='open-positions'
onTabItemClick={setActiveTabIndex}
top
header_fit_content={!isMobile()}
>
<div label={localize('Options')}>
<OpenPositionsTable
className='open-positions'
columns={columns}
{...shared_props}
row_size={isMobile() ? 5 : 63}
/>
</div>
<div label={localize('Multipliers')}>
<OpenPositionsTable
className='open-positions-multiplier open-positions'
is_multiplier_tab
columns={columns}
row_size={isMobile() ? 3 : 68}
{...shared_props}
{active_positions.length !== 0 && (
<React.Fragment>
<DesktopWrapper>
<div className='open-positions__contract-types-selector__container'>
<Dropdown
is_align_text_left
name='contract_types'
list={contract_types}
value={contract_type_value}
onChange={handleChange}
/>
</div>
</DesktopWrapper>
<MobileWrapper>
<SelectNative
className='open-positions__contract-types-selector'
list_items={contract_types.map(option => ({
text: option.text,
value: option.value,
}))}
value={contract_type_value}
should_show_empty_option={false}
onChange={handleChange}
/>
</div>
</Tabs>
) : (
</MobileWrapper>
</React.Fragment>
)}

{is_options_selected ? (
<OpenPositionsTable
is_empty={active_positions_filtered.length === 0}
className='open-positions'
columns={columns}
{...shared_props}
row_size={isMobile() ? 5 : 63}
/>
) : (
<OpenPositionsTable
className='open-positions-multiplier open-positions'
columns={columns}
row_size={isMobile() ? 3 : 68}
is_empty={!has_multiplier_contract}
{...shared_props}
/>
)}
</React.Fragment>
);
Expand Down
8 changes: 8 additions & 0 deletions packages/reports/src/sass/app/modules/reports.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -716,6 +716,13 @@ $side-padding: 1.2em;
}
}

&__contract-types-selector {
padding: 0 1.6rem;
}
&__contract-types-selector__container {
max-width: 22.4rem;
}

&__content {
width: fit-content;
max-height: 100%;
Expand Down Expand Up @@ -820,6 +827,7 @@ $side-padding: 1.2em;
minmax(150px, 1.1fr) minmax(120px, 1.1fr) minmax(85px, 1.1fr);
width: 100%;
grid-auto-rows: 100%;
padding-left: 0;

&_wrapper {
display: flex;
Expand Down