Vue Projects

In our quest to increase the usability of our app we will follow up of the adding of some color to our home page by also increasing the font weight of the category row that corresponds to the security that the user is hovering over. With that done we will add a couple of buttons so that we can adjust the number of shares of a particular security. As a result of the way we have wired everything up when the number of shares is adjusted the new percentage of that category is recaculated along with the difference. To make it easier to adjust the shares we will also make use of the modifier keys 'Shift', 'Control', and 'Alt'.

In this article we will start by displaying the components of the selected portfolio plan by showing the percentages that the plan calls for based on category as well as calculating the difference in percentages between the plan percentage and the actual percentages. We will also start to address some usability issues by making it a little bit easier to determing what category a give security belonged to using a dynamically set background color.

In this video we are going to start by implementing a fix for the problem of editing the percentage of a portfolio category and having that change be persisted in our store even if it is cancelled. This fix could then be extended to cover similar problems with other objects being saved in our store. Once that is done we will proceed to modifying our home screen to display a select input for our different plans as well as all of the securities contained in each of our accounts.

In this article we will go through the process of updating our vuex store so that we will have the ability to add and update portfolio plans. The will give us the ability to add new plans as well as modify the name and category percentages of existing plans.

In this article we will use the list view component that we created previously and some JSX to display the names of the portfolio plans that are saved within our vuex store. Once that is done we will proceed to add the capability to view and edit the details of a plan including its name and the percentages of the categories of that plan.

In this article we will create several new vuex getters that we can use to retrieve the portfolio categories and plans from our store. Using these getters will allow us to populate the navigation properties of our models automatically anytime we retrieve them from the store.

Following up on our previous article were we created the portfolio category class we now need to create the portfolio plan class. This new class will be responsible for containing the grouping of categories that represent what a portfolio plan is. Once both classes are in place we can then create an initial portfolio state and add it to our overall vuex state.

In order for our application to be able to provide the ability for us to rebalance the holds of our various accounts we need to be able to specify the target amount for each of the categories of our securities. In order to add this ability the first thing we are going to do is introduce the concept of a portfolio by creating portfolio categories.

In this article we will implement the ability to add, update and transfer account securities from one account to another. Along the way we will need to change the way we get the account securities to account for wanting them to be sorted alphabetically by the symbol of the security. We will also need to handle a few complications related to transferring an account security from one account to another.

In this article we will encapsulate the ability to transfer elements from one account to another that we have previous created in order to transfer deposits. This encapsulation will give us the ability to transfer other elements in a DRY way which we will immediately make use of for the account securities.

In this article we will start by correcting a mistake that we made in a previous article. As it stands right now if we attempt to add a deposit to an account the system does not know by default which account we are adding it to and that is due to how we are currently determing the account number in the account deposit view. Once we have corrected that we will move on to being able to display the properties of an account security in preparation for being able to create and edit them.

In this article we will add the ability to create and edit deposits. In addition to being able to change the date and amount of a deposit we will also allow transferring a deposit between accounts.

In this article we will pick up where we left off from the last article. In the last article we added a lot of additional information to our account details page. One of the components that we added to the details was a list showing the deposits that have already been made as well as the ability to add a new deposit. For the moment though when you click to view a deposit or create one we just print information to the console. By the time we are done with this article we will have created a new view that we can use to edit an existing deposit as well as add a new one.

In this article we will finally start displaying some useful information on our account details page. Along with displaying the cash, which is a new property, associated with the account we will also show the securities and deposits. We will leverage the tabs and list view components that we created in previous videos to give us a more polished and compact way of displaying both the deposits and the securities.

In this article we will create several different vuex getters that we can use when we access an account that will automatically populate the deposits and securities that are associated with the account.

In this article we will start the process of making our accounts more useful in that we will expand the amount of information that is associated with them in our vuex store. Up until this point an account has solely consisted of a name but once we are done with this article each account will also be associated with any deposits made and the number and identifier for securities that have been purchased.

In this article we will focus on creating a new accounts details page which will allow us to create and edit accounts. We will start by adding the ability to route to the new page using our routing system. Along the way we will make a few updates to a couple of our previously created types so that their names will be inline with the conventions we have developed. We will then finish up by using the infrastructure that we have developed along the way to quickly add some basic functionality to our newly created details view.

In this article we return to the first module that we created which was our accounts module. Our focus is to refactor the code that we have written previously to use the additional functionality and conventions that we created when working on our securities module.

In this article we focus on adding the vuex actions and mutations that will allow us to add new security models to our store. We of course start by adding in the constants that we need in order to specify which action and mutation should be run as well as the required payload type. With those things in place we will create a couple of new fuctions, the first of which will help us add items to the store and the other will be used to sort those items. The last modification we will need to make is to update our security details view so that we invoke our new add actions when appropriate.

In this article we will add the vuex actions and mutations that we need in order to edit all of our security models and have those changes persisted to our store. Once they are in place we will create a new vue component that we can use to add cancel and save buttons to any details page that we add to our application. These buttons will encapsulate common functionality such as navigating to the previous view when the user presses the save or cancel buttons. We will of course finish by adding these buttons to our security details page.

In this article we will focus on displaying all of the properties of our various securities related models on our security details view in anticipation of allowing the user to edit them. In order to do this we will make use of the majority of our vuex getters, both for getting a model by its id and getting an array containing all of them by type. Once we have used the getters we can then display the appropriate control for editing the properties which range from simple html inputs to select controls.

In this article we will start off by unifying our approach to binding the required properties for the list views that we are using in our securities view. What this means is that we will use a factory method to create the on click handlers for all of the list views instead of special methods for the securities and categories. While we are at it we will also create a factory method for creating new items and we will also bind the results of invoking that method to our list views so that we have the ability to create new items to add to our vuex store. We will then finish up by making a few changes to our securities details view. The first up is a small tweek that will make sure that our routing history always has it's top entry pointing to the securities view page if we are on the details page even if the user refreshes and therefore clears the history. Lastly we will use the getters that we created in a previous article to retrieve the appropriate item from the store when the user clicks on and existing item.

In this article we will start by adding a couple of new functions that we can use to find individual items within our store by their id as well as all of the items in a particular state. These new functions will just make finding items within our vuex store just a little bit cleaner. We will then turn our attention to creating a new class, that implements a fluent interface, that we can use to validate the actions that we perform on our store. In particular we will see how to throw an error if we attempt to use a vuex getter to retrieve an item by id and the result of that retrieval is undefined.

In this article we will add the ability for our routing system to handle query parameters. As it stands now all of the routing that we have wanted to perform can be controlled by simply passing a single enum value around. There are at least two different ways that we can approach the problem of adding CRUD operations to our application. One being transmitting the data that we need between views via the store and the other by transmitting the data through query parameters. We are going to opt for using query parameters. So by the time we are done we will no longer use a single enum value for routing but instead we will use a route object that will contain the enum value and query parameters, as well as a couple of other properties. We will finish up by adding a method for extracting query parameters from the query string in a type safe manner.