spraynard / company-cost Goto Github PK

Issue

To get this issue, you must try and edit any expense group that you want by opening the expense group edit window. Then, save any change you make (even no changes).

Open up the expense group edit window again and you will see that two more items are appended on to the Expense Group values that can be edited, Cost and CostUOM that do absolutely nothing.

Expected Behavior

Only the values that are editable for the expense group should show up in the edit view.

Currently that means that only Title and Description should show up at any point.

There are some UX kinks that need to be ironed out.

1. I feel like there should be a way to save all of your groups by clicking. While it's nice to see that every other group closes when you bring another expense group child up to edit, there is still no way to do this using the mouse.

2. It would probably be helpful to include a help menu in the app so people can see all of the different keybinds that are available.

Issue

On creation of a new expense, our expense is created without any given CostUOM. This is fine because why should we assume what unit of measurement the user is doing? The problem occurs when we finish editing an expense and we try to select a CostUOM.

1. When we edit a group Hour shows up in the CostUOM field. But when we save, the selection of Hour isn't also saved unless we click off hour, and then click back on it.

2. No CostUOM default is being applied when we save and there's no CostUOM field given.

Expected functionality

I think the expected functionality should be that we should display a dropdown with an initial "Select" value. Once the user clicks on it and selects Hour, that selection should then be saved into state.

Another way that we could go with this is that, if a user puts in a monetary amount but doesn't select a CostUOM field, that we assume they are selecting the "Hourly" CostUOM that shows up.

Currently we add a new expense group by clicking on the Add New Expense Group button in the app menu.

While this method does work, it makes the header layout look a little too crowded. To me, there should just be the logo and the totals counter up on the menu (at least for desktop / tablet view).

So, I think that we should remove this button and create a pseudo expense-group element that, when clicked on, adds a real expense group in its place. This pseudo element would always be in the next possible area for an expense group.

There are some issues with safari for this app. Based on testing with the browser, I am seeing the following items:

1. Grid is kind of weird. At least on my screen, if there are more than 6 expense groups, then we go from a 3 column layout to a two column layout.

2. There are some issues with the layout of an expense group child when it is in edit mode. Specifically, if you update any of the values then there's a chance that the layout gets destroyed.

Problem

There is currently no implemented way of onFocus or onBlur commands.

I'm getting away with this right now because I'm using <tr> elements for the Editable component inside Expense_Group_Child.js.

Using a TableRow MUI component doesn't have the same effect as a <tr> on focus because I'm not implementing an onFocus handler to interact with my state.

Solution

Implement a focused parameter in Expense Group Child state. The onFocus and onBlur parameters of the Editable component should call the methods used to handle this this state update.

Just upgrade to Material UI 4.

Problem

The available header cannot fit all of the information on it when we are on phone - tablet sizes.

Solution

Update mobile layout to just have the Company Cost logo as well as a "hamburger" in order to open up a menu that includes all of the total information

Notes

Below is the current mobile layout

The only currency symbol available in the application is $ right now. People live in different areas of the world and they use different currency symbols.

I'm wondering whether I should make a dropdown list of currency that a user can choose from, or if I should just use an input that a person can type into.

When explicitly putting "$" character in the "Cost" field of an expense, we show NaN.

Sanitizing our input better should take care of this.

There is no graphical way to show the relative contribution that different categories (expense groups) contribute to an overall total.

Currently, the only way to know which expense group contributes more is by explicitly looking at the numerical totals that are available on each of the expense groups. This isn't fun to do if you have a lot of expense groups, so it would be better to just have a graphical representation of this.

We can do this in two ways:

1. Pie Chart
2. Bar Chart

What would be really cool is if, on clicking on an expense group, we then reference the context of the targeted expense group and all of its expenses. Effectively creating another bar/pie chart that shows the contributions of all of the specific expenses to the expense group total.