From e7c62965e0df3ef9457993e3ee506bf02f03ec00 Mon Sep 17 00:00:00 2001
From: Kevin <70131533+kevinw-binary@users.noreply.github.com>
Date: Thu, 18 Mar 2021 17:39:49 +0800
Subject: [PATCH] Revert "Kevin/crit-path: profit table , open position,
 statement (#6425)"

This reverts commit 88ca2d9e6c9a8c069014a8a767b0345331675e45.
---
 src/javascript/app/base/clock.js              |  5 ++-
 .../user/account/portfolio/portfolio.init.js  | 16 ++++-----
 .../account/profit_table/profit_table.init.js |  3 +-
 .../user/account/profit_table/profit_table.js |  4 +--
 .../account/profit_table/profit_table.ui.js   | 27 +++++++--------
 .../user/account/statement/statement.init.js  |  4 +--
 .../pages/user/account/statement/statement.js |  2 +-
 .../user/account/statement/statement.ui.js    | 33 ++++++++++---------
 src/sass/_common/base/mixin.scss              |  4 ---
 src/sass/_common/table.scss                   |  7 ++--
 src/sass/app/portfolio.scss                   |  5 ---
 src/templates/_common/_layout/header.jsx      |  2 +-
 src/templates/_common/_layout/mobile_menu.jsx |  2 +-
 src/templates/app/user/portfolio.jsx          | 20 +++++------
 14 files changed, 57 insertions(+), 77 deletions(-)

diff --git a/src/javascript/app/base/clock.js b/src/javascript/app/base/clock.js
index 8ee1dd0aa16dd..aa7b5924468c0 100644
--- a/src/javascript/app/base/clock.js
+++ b/src/javascript/app/base/clock.js
@@ -28,11 +28,10 @@ const Clock = (() => {
         }
     };
 
-    const showLocalTimeOnHover = (selector, is_table) => {
+    const showLocalTimeOnHover = (selector) => {
         document.querySelectorAll(selector || '.date').forEach((el) => {
             const gmt_time_str = el.textContent.replace('\n', ' ');
-
-            const local_time   = !is_table ? moment.utc(gmt_time_str, 'YYYY-MM-DD HH:mm:ss').local() : moment.utc(gmt_time_str, 'DD MMM YYYY HH:mm:ss').local() ;
+            const local_time   = moment.utc(gmt_time_str, 'YYYY-MM-DD HH:mm:ss').local();
             if (local_time.isValid()) {
                 el.setAttribute('data-balloon', local_time.format('YYYY-MM-DD HH:mm:ss Z'));
             }
diff --git a/src/javascript/app/pages/user/account/portfolio/portfolio.init.js b/src/javascript/app/pages/user/account/portfolio/portfolio.init.js
index bc05d45547f74..034bf68c80918 100644
--- a/src/javascript/app/pages/user/account/portfolio/portfolio.init.js
+++ b/src/javascript/app/pages/user/account/portfolio/portfolio.init.js
@@ -48,15 +48,13 @@ const PortfolioInit = (() => {
     };
 
     const createPortfolioRow = (data, is_first) => {
-        const exclude_currency = true;
         const new_class = is_first ? '' : 'new';
         const $div      = $('<div/>');
         $div.append($('<tr/>', { class: `tr-first ${new_class} ${data.contract_id}`, id: data.contract_id })
-            .append($('<td/>', { class: 'contract', text: data.longcode }))
             .append($('<td/>', { class: 'ref' }).append($(`<span ${GetAppDetails.showTooltip(data.app_id, oauth_apps[data.app_id])} data-balloon-position="right">${data.transaction_id}</span>`)))
-            .append($('<td/>', { class: 'currency', text: data.currency }))
-            .append($('<td/>', { class: 'purchase' }).append($('<strong/>', { html: formatMoney(data.currency, data.buy_price, exclude_currency) })))
-            .append($('<td/>', { class: 'payout' }).append($('<strong/>', { html: +data.payout ? formatMoney(data.currency, data.payout, exclude_currency) : '-' })))
+            .append($('<td/>', { class: 'payout' }).append($('<strong/>', { html: +data.payout ? formatMoney(data.currency, data.payout) : '-' })))
+            .append($('<td/>', { class: 'details', text: data.longcode }))
+            .append($('<td/>', { class: 'purchase' }).append($('<strong/>', { html: formatMoney(data.currency, data.buy_price) })))
             .append($('<td/>', { class: 'indicative' }).append($('<strong/>', { class: 'indicative_price', text: '--.--' })))
             .append($('<td/>', { class: 'button' }).append($('<button/>', { class: 'button open_contract_details nowrap', contract_id: data.contract_id, text: localize('View') }))))
             .append($('<tr/>', { class: `tr-desc ${new_class} ${data.contract_id}` }).append($('<td/>', { colspan: '6', text: data.longcode })));
@@ -152,7 +150,6 @@ const PortfolioInit = (() => {
         const old_indicative = values[proposal.contract_id].indicative || 0.00;
         values[proposal.contract_id].indicative = proposal.bid_price;
 
-        const exclude_currency = true;
         let status_class   = '';
         let no_resale_html = '';
         if (+proposal.is_sold === 1) {
@@ -167,7 +164,7 @@ const PortfolioInit = (() => {
                 }
                 $td.removeClass('no_resale');
             }
-            $td.html($('<strong/>', { class: `indicative_price ${status_class}`, html: formatMoney(proposal.currency, values[proposal.contract_id].indicative, exclude_currency) })
+            $td.html($('<strong/>', { class: `indicative_price ${status_class}`, html: formatMoney(proposal.currency, values[proposal.contract_id].indicative) })
                 .append(no_resale_html));
         }
 
@@ -196,9 +193,8 @@ const PortfolioInit = (() => {
     };
 
     const updateFooter = () => {
-        const exclude_currency = true;
-        $('#cost-of-open-positions').html(formatMoney(currency, Portfolio.getSumPurchase(values), exclude_currency));
-        $('#value-of-open-positions').html(formatMoney(currency, Portfolio.getIndicativeSum(values), exclude_currency));
+        $('#cost-of-open-positions').html(formatMoney(currency, Portfolio.getSumPurchase(values)));
+        $('#value-of-open-positions').html(formatMoney(currency, Portfolio.getIndicativeSum(values)));
     };
 
     const errorMessage = (msg) => {
diff --git a/src/javascript/app/pages/user/account/profit_table/profit_table.init.js b/src/javascript/app/pages/user/account/profit_table/profit_table.init.js
index f76886068d29e..6bd33094afee1 100644
--- a/src/javascript/app/pages/user/account/profit_table/profit_table.init.js
+++ b/src/javascript/app/pages/user/account/profit_table/profit_table.init.js
@@ -109,8 +109,7 @@ const ProfitTableInit = (() => {
 
         BinarySocket.send(req).then((response) => {
             profitTableHandler(response);
-            const tableTimeTooltip = true;
-            showLocalTimeOnHover('td.buy-time,td.sell-time', tableTimeTooltip);
+            showLocalTimeOnHover('td.buy-date,td.sell-date');
             $('.barspinner').setVisibility(0);
         });
     };
diff --git a/src/javascript/app/pages/user/account/profit_table/profit_table.js b/src/javascript/app/pages/user/account/profit_table/profit_table.js
index 349888419ddd5..b4ae40f19e958 100644
--- a/src/javascript/app/pages/user/account/profit_table/profit_table.js
+++ b/src/javascript/app/pages/user/account/profit_table/profit_table.js
@@ -11,11 +11,11 @@ const ProfitTable = (() => {
         const sell_price   = parseFloat(transaction.sell_price);
 
         return {
-            buyDate  : `${buy_moment.format('DD MMM YYYY')}\n${buy_moment.format('HH:mm:ss')} GMT`,
+            buyDate  : `${buy_moment.format('YYYY-MM-DD')}\n${buy_moment.format('HH:mm:ss')} GMT`,
             ref      : transaction.transaction_id,
             payout   : +transaction.payout ? formatMoney(currency, parseFloat(transaction.payout), true) : '-',
             buyPrice : formatMoney(currency, buy_price, true),
-            sellDate : `${sell_moment.format('DD MMM YYYY')}\n${sell_moment.format('HH:mm:ss')} GMT`,
+            sellDate : `${sell_moment.format('YYYY-MM-DD')}\n${sell_moment.format('HH:mm:ss')} GMT`,
             sellPrice: formatMoney(currency, sell_price, true),
             pl       : formatMoney(currency, Number(sell_price - buy_price), true),
             desc     : transaction.longcode,
diff --git a/src/javascript/app/pages/user/account/profit_table/profit_table.ui.js b/src/javascript/app/pages/user/account/profit_table/profit_table.ui.js
index 816878cd499f8..d466baa177b33 100644
--- a/src/javascript/app/pages/user/account/profit_table/profit_table.ui.js
+++ b/src/javascript/app/pages/user/account/profit_table/profit_table.ui.js
@@ -12,23 +12,25 @@ const ProfitTableUI = (() => {
     let currency;
 
     const profit_table_id = 'profit-table';
-    const cols            = ['contract', 'ref', 'currency', 'buy-time', 'buy-price', 'sell-time', 'sell-price', 'pl', 'details'];
+    const cols            = ['buy-date', 'ref', 'payout', 'contract', 'buy-price', 'sell-date', 'sell-price', 'pl', 'details'];
 
     const createEmptyTable = () => {
         const header = [
-            localize('Contract details'),
-            localize('Ref. ID'),
-            localize('Currency'),
-            localize('Buy time'),
-            localize('Buy price'),
-            localize('Sell time'),
-            localize('Sell price'),
+            localize('Date'),
+            localize('Ref.'),
+            localize('Potential Payout'),
+            localize('Contract'),
+            localize('Purchase Price'),
+            localize('Sale Date'),
+            localize('Sale Price'),
             localize('Profit/Loss'),
             localize('Details'),
         ];
 
         currency = Client.get('currency');
 
+        header[7] += currency ? ` (${Currency.getCurrencyDisplayCode(currency)})` : '';
+
         const footer = [localize('Total Profit/Loss'), '', '', '', '', '', '', '', ''];
 
         const data     = [];
@@ -67,10 +69,10 @@ const ProfitTableUI = (() => {
         const pl_type           = Number(transaction.sell_price - transaction.buy_price) >= 0 ? 'profit' : 'loss';
 
         const data = [
-            '',
-            `<span ${showTooltip(profit_table_data.app_id, oauth_apps[profit_table_data.app_id])}>${profit_table_data.ref}</span>`,
-            currency,
             profit_table_data.buyDate,
+            `<span ${showTooltip(profit_table_data.app_id, oauth_apps[profit_table_data.app_id])}>${profit_table_data.ref}</span>`,
+            /binaryico/i.test(profit_table_data.shortcode) ? '-' : profit_table_data.payout, // TODO: remove ico exception when all ico contracts are removed
+            '',
             profit_table_data.buyPrice,
             profit_table_data.sellDate,
             profit_table_data.sellPrice,
@@ -81,8 +83,7 @@ const ProfitTableUI = (() => {
 
         $row.children('.pl').addClass(pl_type);
         $row.children('.contract').html(`${profit_table_data.desc}<br>`);
-        $row.children('.contract').css('width','200px');
-        $row.children('.buy-time, .sell-time').each(function () {
+        $row.children('.buy-date, .sell-date').each(function () {
             $(this).wrapInner('<div class="new-width"></div>');
         });
 
diff --git a/src/javascript/app/pages/user/account/statement/statement.init.js b/src/javascript/app/pages/user/account/statement/statement.init.js
index b0b4fc41d52e4..a733c4c23f418 100644
--- a/src/javascript/app/pages/user/account/statement/statement.init.js
+++ b/src/javascript/app/pages/user/account/statement/statement.init.js
@@ -104,9 +104,7 @@ const StatementInit = (() => {
                 //     .on('click', () => { StatementUI.exportCSV(); });
             }
         }
-
-        const tableTimeTooltip = true;
-        showLocalTimeOnHover('td.transaction-time',tableTimeTooltip);
+        showLocalTimeOnHover('td.date');
     };
 
     const loadStatementChunkWhenScroll = () => {
diff --git a/src/javascript/app/pages/user/account/statement/statement.js b/src/javascript/app/pages/user/account/statement/statement.js
index 07d2e697270cd..4cda8f2d14c3c 100644
--- a/src/javascript/app/pages/user/account/statement/statement.js
+++ b/src/javascript/app/pages/user/account/statement/statement.js
@@ -8,7 +8,7 @@ const Statement = (() => {
     const getStatementData = (statement, currency) => {
         const date_obj   = new Date(statement.transaction_time * 1000);
         const moment_obj = moment.utc(date_obj);
-        const date_str   = moment_obj.format('DD MMM YYYY');
+        const date_str   = moment_obj.format('YYYY-MM-DD');
         const time_str   = `${moment_obj.format('HH:mm:ss')} GMT`;
         const payout     = parseFloat(statement.payout);
         const amount     = parseFloat(statement.amount);
diff --git a/src/javascript/app/pages/user/account/statement/statement.ui.js b/src/javascript/app/pages/user/account/statement/statement.ui.js
index 1eae62a4f6b53..ef520dba6e0af 100644
--- a/src/javascript/app/pages/user/account/statement/statement.ui.js
+++ b/src/javascript/app/pages/user/account/statement/statement.ui.js
@@ -11,20 +11,24 @@ const StatementUI = (() => {
     let oauth_apps = {};
 
     const table_id = 'statement-table';
-    const columns  = ['contract','ref', 'currency', 'transaction-time', 'transaction', 'credit', 'bal', 'details'];
+    const columns  = ['date', 'ref', 'payout', 'act', 'desc', 'credit', 'bal', 'details'];
 
     const createEmptyStatementTable = () => {
         const header = [
-            localize('Contract details'),
-            localize('Ref. ID'),
-            localize('Currency'),
-            localize('Transaction time'),
-            localize('Transaction'),
+            localize('Date'),
+            localize('Ref.'),
+            localize('Potential Payout'),
+            localize('Action'),
+            localize('Description'),
             localize('Credit/Debit'),
             localize('Balance'),
             localize('Details'),
         ];
 
+        const currency = Client.get('currency');
+
+        header[6] += currency ? ` (${Currency.getCurrencyDisplayCode(currency)})` : '';
+
         const metadata = {
             id  : table_id,
             cols: columns,
@@ -47,32 +51,29 @@ const StatementUI = (() => {
         }));
         const credit_debit_type = (parseFloat(transaction.amount) >= 0) ? 'profit' : 'loss';
 
-        const currency = Client.get('currency');
-
         const $statement_row = Table.createFlexTableRow([
-            '',
-            `<span ${showTooltip(statement_data.app_id, oauth_apps[statement_data.app_id])}>${statement_data.ref}</span>`,
-            currency,
             statement_data.date,
+            `<span ${showTooltip(statement_data.app_id, oauth_apps[statement_data.app_id])}>${statement_data.ref}</span>`,
+            statement_data.payout,
             statement_data.localized_action,
+            '',
             statement_data.amount,
             statement_data.balance,
             '',
         ], columns, 'data');
         $statement_row.children('.credit').addClass(credit_debit_type);
-        $statement_row.children('.transaction-time').addClass('pre');
-        $statement_row.children('.contract').html(`${statement_data.desc}<br>`);
-        $statement_row.children('.contract').css('width','200px');
+        $statement_row.children('.date').addClass('pre');
+        $statement_row.children('.desc').html(`<span>${statement_data.desc}</span>`);
 
         // add processing time tooltip for withdrawal
         if (transaction.action_type === 'withdrawal') {
-            $statement_row.children('.contract').find('span').attr('data-balloon', transaction.withdrawal_details);
+            $statement_row.children('.desc').find('span').attr('data-balloon', transaction.withdrawal_details);
         }
 
         // create view button and append
         if (/^(buy|sell)$/i.test(statement_data.action_type)) {
             const $view_button = $('<button/>', { class: 'button open_contract_details', text: localize('View'), contract_id: statement_data.id });
-            $statement_row.children('.contract,.details').append($view_button);
+            $statement_row.children('.desc,.details').append($view_button);
         }
 
         return $statement_row[0];        // return DOM instead of jquery object
diff --git a/src/sass/_common/base/mixin.scss b/src/sass/_common/base/mixin.scss
index ab92ec7a6577e..24228e378051a 100644
--- a/src/sass/_common/base/mixin.scss
+++ b/src/sass/_common/base/mixin.scss
@@ -75,10 +75,6 @@
 }
 
 @mixin portfolio_second_row_description {
-    .contract {
-        display: none;
-        width: 0 !important;
-    }
     .details {
         display: table-column;
         width: 0 !important;
diff --git a/src/sass/_common/table.scss b/src/sass/_common/table.scss
index da3097224046f..6e0cb32c78043 100644
--- a/src/sass/_common/table.scss
+++ b/src/sass/_common/table.scss
@@ -108,7 +108,7 @@ table {
             td {
                 overflow: initial;
             }
-            td.desc, td.contract {
+            td.desc {
                 max-width: 30em;
                 overflow-wrap: break-word;
             }
@@ -120,9 +120,6 @@ table {
                         padding: 8px 15px;
                     }
                 }
-                & > th.contract, & > td.contract {
-                    display: none !important;
-                }
                 th, td {
                     font-size: $FONT_SIZE_XS;
                 }
@@ -139,7 +136,7 @@ table {
             table-layout: auto;
         }
         #statement-table tr {
-            > th.desc, > td.desc, > th.contract > td.contract {
+            > th.desc, > td.desc {
                 display: none !important;
             }
         }
diff --git a/src/sass/app/portfolio.scss b/src/sass/app/portfolio.scss
index 008d24c9f3895..9497b275b0031 100644
--- a/src/sass/app/portfolio.scss
+++ b/src/sass/app/portfolio.scss
@@ -20,11 +20,6 @@
         }
     }
     th {
-        &.temp-column {
-            @media ( max-width: 600px ) {
-                display: none;
-            }
-        }
         padding: 10px;
         @include BIDIR_VALUE(text-align, left, right);
 
diff --git a/src/templates/_common/_layout/header.jsx b/src/templates/_common/_layout/header.jsx
index 96a94bd9c2820..01a347568be99 100644
--- a/src/templates/_common/_layout/header.jsx
+++ b/src/templates/_common/_layout/header.jsx
@@ -107,7 +107,7 @@ const Header = () => (
                                             ],
                                         },
                                         { text: it.L('Trade'),        href: it.url_for('user/metatrader'),     className: 'ico-only-hide client_logged_in invisible', dataShow: 'maltainvest' },
-                                        { text: it.L('Open Positions'),    href: it.url_for('user/portfoliows'),    className: 'ico-only-hide client_logged_in invisible' },
+                                        { text: it.L('Portfolio'),    href: it.url_for('user/portfoliows'),    className: 'ico-only-hide client_logged_in invisible' },
                                         { text: it.L('Profit Table'), href: it.url_for('user/profit_tablews'), className: 'ico-only-hide client_logged_in invisible wordwrap' },
                                         { text: it.L('Statement'),    href: it.url_for('user/statementws'),    className: 'client_logged_in invisible' },
                                         { text: it.L('Cashier'),      href: it.url_for('cashier'),             className: 'client_logged_in invisible', id: 'topMenuCashier' },
diff --git a/src/templates/_common/_layout/mobile_menu.jsx b/src/templates/_common/_layout/mobile_menu.jsx
index 908636b2c0f52..34836d768250f 100644
--- a/src/templates/_common/_layout/mobile_menu.jsx
+++ b/src/templates/_common/_layout/mobile_menu.jsx
@@ -24,7 +24,7 @@ const MobileMenu = () => (
                     ]}
                 />
                 <Li text={it.L('Trade')}        href={it.url_for('user/metatrader')}     className={'ico-only-hide client_logged_in invisible'} dataShow='maltainvest' />
-                <Li text={it.L('Open Positions')}    href={it.url_for('user/portfoliows')}    className='ico-only-hide client_logged_in invisible' />
+                <Li text={it.L('Portfolio')}    href={it.url_for('user/portfoliows')}    className='ico-only-hide client_logged_in invisible' />
                 <Li text={it.L('Profit Table')} href={it.url_for('user/profit_tablews')} className='ico-only-hide client_logged_in invisible' />
                 <Li text={it.L('Statement')}    href={it.url_for('user/statementws')}    className='client_logged_in invisible' />
                 <Li text={it.L('Cashier')}      href={it.url_for('cashier')}             className='client_logged_in invisible' id='topMenuCashier' />
diff --git a/src/templates/app/user/portfolio.jsx b/src/templates/app/user/portfolio.jsx
index 21648359509dd..0c1cf179eb9a0 100644
--- a/src/templates/app/user/portfolio.jsx
+++ b/src/templates/app/user/portfolio.jsx
@@ -3,7 +3,7 @@ import { Table } from '../../_common/components/elements.jsx';
 
 const Portfolio = () => (
     <div id='portfolio'>
-        <h1 className='portfolio-header-margin'>{it.L('Open Positions')}</h1>
+        <h1 className='portfolio-header-margin'>{it.L('Portfolio')}</h1>
 
         <p className='notice-msg center-text invisible' id='error-msg' />
 
@@ -34,21 +34,19 @@ const Portfolio = () => (
                 data={{
                     thead: [
                         [
-                            { className: 'contract',                          text: it.L('Contract details') },
-                            { className: 'ref',                              text: it.L('Ref. ID') },
-                            { className: 'currency',                         text: it.L('Currency') },
-                            { className: 'purchase',                         text: it.L('Buy price') },
-                            { className: 'payout nowrap',                    text: it.L('Payout limit') },
-                            { className: 'indicative nowrap',                text: it.L('Indicative price') },
-                            { className: 'button',                           text: it.L('Details') },
+                            { className: 'ref',                              text: it.L('Ref.') },
+                            { className: 'payout nowrap',                    text: it.L('Potential Payout') },
+                            { className: 'details',                          text: it.L('Contract Details') },
+                            { className: 'purchase',                         text: it.L('Purchase') },
+                            { className: 'indicative nowrap',                text: it.L('Indicative') },
+                            { className: 'button',                           text: '' },
                         ],
                     ],
                     tfoot: [
                         [
                             { text: it.L('Total') },
-                            { className: 'ref'                                                                              },
-                            { className: 'temp-column'                                                                      },
-                            { className: 'cost',                  id: 'cost-of-open-positions', attributes: { colSpan: 2 } },
+                            { className: 'ref',                   attributes: { colSpan: 2 } },
+                            { className: 'cost',                  id: 'cost-of-open-positions' },
                             { className: 'value',                 id: 'value-of-open-positions', attributes: { colSpan: 2 } },
                         ],
                     ],