spraynard / company-cost Goto Github PK
View Code? Open in Web Editor NEWRealize the true cost of your company and help save your budget.
Home Page: https://spraynard.github.io/Company-Cost/
License: MIT License
Realize the true cost of your company and help save your budget.
Home Page: https://spraynard.github.io/Company-Cost/
License: MIT License
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.
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.
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.
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.
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.
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.
No CostUOM default is being applied when we save and there's no CostUOM field given.
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:
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.
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.
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.
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:
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.