In this video we will create the necessary javascript for us to be able to add a tag to our html, with the appropriate css classes, and have that tag replaced with the corresponding Font Awesome icon.

This video will be the first of several videos where we explore how to add Font Awesome icons to a project. We will start off by including the entire package which while very convenient will massively increase the size of our javascript file. For a web project this increase in size is completely unacceptable so we will quickly come up with a solution that will minimize the impact on the page weight while still allowing us to utilize the icons that we would like to use.

In this video we discuss how to handle component communication between a parent and one or more children. We will start off by simply passing data from the parent to the child and move on to handling events emitted from the child which the parent can then listen for and respond to. Both of these interactions can be handled very easily by just using the normal tools provided by Vue itself. We will then finish up by discussing a couple of different ways of handling events that take place within the scope of the parent component as using those to trigger actions within the children.

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.