archfirst / bullsfirst-jquery-backbone Goto Github PK

Refresh the transactions page so that the latest transaction is showed. See previous implementation of Bullsfirst.

Orders do not expand to show executions. See Positions page implementation to see how TreeTable works.

Why?

Although we are using push state, the server has to be configured to redirect deep URLs to the client. Without this we get 404's from the server.

After a trade is submitted through the Order Preview dialog, the Trade dialog should go away and the main application should switch to the Orders page showing the submitted order. Please see previous implementation.

The grunt job is not copying the image files as part of the build process. The grunt copy section has the required entries.

The app does not seem to be compatible with IE8. Throws a JavaScript error on the landing page ( after login )

Array.forEach is the method which is failing ( not natively supported in IE8 )

        positionArray.forEach(function(rawPosition) {
            if (typeof rawPosition.children !== 'undefined') {
                rawPosition.children = this.positionArrayToCollection(rawPosition.children);
            };
            positionCollection.add(new Position(rawPosition));
        }, this);

Are we looking for IE8 support ?

See previous implementation of Bullsfirst.

When closing out of the transfer modal window, any error handling message that were open stay open (or sometimes fly away to the top left with the transfers div). You need to click them to get rid of the messages. They should go away when the transfer modal is hidden.

The html is referring to these css files. However, in the new folder structure, the CSS files are not available.

<link rel="stylesheet" href="css/aller.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/jquery-ui-1.8.23.custom.css">
<link rel="stylesheet" href="css/jquery.treeTable-20121109.css">
<link rel="stylesheet" href="css/validationEngine.jquery-2.5.2.css">
<link rel="stylesheet" href="css/bullsfirst.css">

Have run the grunt to see if the build process is making any changes to the folder structure. It didn't

The current validation engine settings allows spaces in first/last names, but this is not allowed on the server (javaee returns a 400 error).

_setupElements() should be called only once when the view is initialized. Currently BaseView.render() calls it, so it is called everytime a view is rendered.

If the symbol is fully typed in to the field (i.e. not picked from the drop down list), it is not taken in.

Since both views need accounts to be sorted in the decreasing order of market value, we should do the sorting during fetch and assume that the collections are sorted at the view level.

Sometimes account chart gets confused about which account is selected. Either multiple accounts are selected or selection does not go away when cursor is out of the chart area.

The Cash / Securities toggle should act the same way the Trade modal has buy / sell. The div is resized upon toggling, which shifts the text down. There is also a hover fade when moving the cursor off of the button.

In OrdersTableView.js 3 fiels are being custom formatted:

order.attributes.creationTimeFormatted = Formatter.formatDateTime( moment(order.attributes.creationTime) );
order.attributes.limitPriceFormatted = Formatter.formatMoney(order.attributes.limitPrice);
order.attributes.executionPriceFormatted = Formatter.formatMoney(order.attributes.executions.price);

This is not necessary. Use Handlebar helpers instead. See PositionTemplate.html.

This causes index page to come up visually blank when the app is installed at some other appRoot.

Currently, pages in urls are being capitalized with 'Page' appended. This leads to a problem with multi-word pages that we expect to be camel-cased in the filesystem.

For example:

http://bullsfirst/openaccount

Under the current code:

// Derive page name from route, e.g. `home` becomes `HomePage`
var pageName = page[0].toUpperCase() + page.slice(1) + 'Page';

This now looks for /src/js/app/pages/openaccount/OpenaccountPage.js.

If we name our page file OpenAccountPage.js, that will work on OSX and Windows, but break on Linux.

Our options appear to be:

1. force camelcase in the url ( http://bullsfirst/openAccount )
2. hyphenate the url ( http://bullsfirst/open-account )
3. not camel-case the filename and leave it as-is

I suggest route 2. The parsing can be then be re-written so that the file path can still be /src/js/app/pages/openaccount/OpenAccountPage.js.

The /openaccount/ could either be hyphenated or not.

After entering all fields, go back to the quantity field and change it. Now immediately click the preview button - in the preview dialog you will see the old value. Thus values are not transferred correctly on blur. See old implementation of the dialog. It did not have this problem.

I guess we will need something like http://benalman.com/projects/jquery-misc-plugins/#serializeobject or http://lostechies.com/derickbailey/2012/05/17/backbone-syphon-serialize-form-inputs-to-javascript-objects/ or something custom.

Please point to me if we already have a helper to convert successful form controls to js objects for passing over to backbone fetch.

See Transactions page, which implements these.

When an instrument position is opened on the Positions page, it shows lot positions. These do not meet the visual design requirements.

Visual Design

Actual Implementation

This is because of the new approach adopted by the framework, i.e. to repaint the page from scratch every time the page is changed. We have to come up with some solution for this. Recommend storing filterCriteria created in FilterView.js in repository and restoring it on creation of the view. (similar to issue #32 for Orders page)

The reset button should reset all filters AND refresh the page. Currently, it only resets the filters and you have to refresh the page yourself to update the data.

Filters code is spread in 3 widget folders:

filter
order-filter
transaction-filter

The idea was that common filter code would reside in filter and specific filter code will reside in order-filter and transaction-filter folders. Unfortunately, filter folder has transaction code bleeding into it. Also the two files FilterView and FilterWidget are almost duplicate of each other - probably need only FilterWidget.

In any case, the entire filter code needs to be refactored and cleaned up for better reuse. Should consider how filters settings will be saved in the repository.

Please think through and write up an approach before implementing.

For alert boxes, we should change the light theme to a dark theme, picking colors from the Trade / Transfer modals. See Fay for details if you have any questions. Alert boxes can be seen after making transfers, and a confirmation message shows up.

Make sure all form fields listed have the same text padding inside. Follow the example from the trade modal account selection drop down. It has 7px padding on the left. However, the options once you select it are tabbed an additional 3px (10px in total). This should not happen.

When the orders page is rendered initially, all orders for the user are displayed. This is a big issue - in a real systems the user could have placed thousands of orders in the past and we do not want to download and paint all these orders when the page is initially displayed. The defaults have been set up to only display today's orders.

In addition, calling this.render() in the initialize() method is not correct - the view is not ready for rendering at this point. render() is called by the framework as part of the initialization sequence. Always let the framework do it.

Please model this page based on the Positions page which is doing something very similar things (including the creation of nested child views.

When the symbol or quantity changes, order estimates are fetched from the server twice. Analyze why.

You can click "Preview Order" without filling any fields and no errors appear. Please try the same on the Transfer dialog and see how errors appear.

The table is stretched to make all rows occupy 2 lines, starting with shifting the AM / PM in the order time column breaking to the next line.

See the following account / password for an example:
jdoes / jdoes

Buy a ridiculous amout of AAPL shares (say 1,000,000,000). The application ignores compliance error from the server and does not show any error. See previos implementation of this dialog.

This is because of the new approach adopted by the framework, i.e. to repaint the page from scratch every time the page is changed. We have to come up with some solution for this. Recommend storing filterCriteria that is created in OrderFilterWidget.UpdateOrders in the repository and restore it when filter is created.

This is because the entire page is repainted when changing tabs. We need to come up with a way to only repain the tabs.

TransactionsTableView is calling this.render() in the initialize() method. This is not correct - the view is not ready for rendering at this point. render() is called by the framework as part of the initialization sequence. Always let the framework do it.

Please model this class based on AccountTableBodyView.

Also you should not need creationTimeFormatted and amountFormatted in renderTransaction(). Use Handlebars helper functions to get this effect directly in the template. See AccountTemplate.html as an example.

The max that can be displayed in that space is $9,999.99. We should allow for at least $9,999,999,999.99 (i.e. billions). Please make the dialog box a bit wider.

All the titles within the tabs (Accounts, Positions, Orders, Transaction History) should be moved down by 1px. They look too high right now.

• The chart should sort in sync with the account table.
• We will need sort icons on the table header.

See Transfers modal window for styling examples.

The styling should follow the drop down seen in the filters area for the transaction history page exactly.

When a row in the Accounts table is clicked, it transitions correctly to the account details page, but the detail page is not yet implemented. Ditto for the Account chart view.

The date picker stays open until you select a new date. You cannot click outside to close it without making changes. If you move to a different screen within the application, it stills stays on top.

Ability to close the date picker is especially important when you want to clear the date filter. As a side note, pressing enter does close the date picker but it is non-intuitive.

Please analyze why.

Edit: After further inspection, if I simply click on "Apply Filter", the application goes twice to the server. So the problem is mire fundamental then described above.