Vue Projects

This project will be used to everything that we do that is vue related. We will start by working on a project that will involve us needing to deal with animations, routing, global state management using vuex to name just a few. Where we going from there we will just have to wait and see.
#32 Using Our List View And Tab Components To Display Account Details
#32 Using Our List View And Tab Components To Display Account Details
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.
#31 Using Vuex Getters To Populate The Account Securities And Deposits
#31 Using Vuex Getters To Populate The Account Securities And Deposits
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.
#30 Adding Account Deposits And Securities To The Vuex Store
#30 Adding Account Deposits And Securities To The Vuex Store
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.
#29 Adding A New Accounts Details View For Editing And Creating Accounts
#29 Adding A New Accounts Details View For Editing And Creating Accounts
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.
#28 Refactoring The Accounts Module
#28 Refactoring The Accounts Module
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.
#27 Adding Security Models Using Vuex Actions And Mutations
#27 Adding Security Models Using Vuex Actions And Mutations
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.
#26 Editing Security Models Using Vuex Actions And Mutations
#26 Editing Security Models Using Vuex Actions And Mutations
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.
#25 Updating The Securities Details View To Display Model Properties
#25 Updating The Securities Details View To Display Model Properties
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.
#24 Navigating To The Security Details Page
#24 Navigating To The Security Details Page
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.
#23 Using A Fluent Interface To Validate The Vuex Getters
#23 Using A Fluent Interface To Validate The Vuex Getters
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.
#22 Adding Support To The Routing System For Query Parameters
#22 Adding Support To The Routing System For Query Parameters
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.
#21 Finishing The Tab Component By Programmatically Instantiating Vue Tab Entries
#21 Finishing The Tab Component By Programmatically Instantiating Vue Tab Entries
In this article we will finish up dealing with our tab control. We will start by adding in a new tab entry component that we will use to determine what content should be visible based on which tab is currently active. The way that it will work is that we will require the direct children of the tab container to be an instance of a tab entry and if they are not we will show an error and the control will just not work at all. This is fine and it will work but it is not as easy to use as it could be so we will finish up by allowing the children of the tab container to be whatever we want them to be and we will programmatically wrap them in a tab entry. Along the way we will also provide appropriate animations for the switching between tabs.
#20 Creating A Tab Component Starting With The Tab Header
#20 Creating A Tab Component Starting With The Tab Header
This article will be part one in at least a two part mini-series focusing on creating a tab component. Where we left off in the last article was displaying all of the securities, categories, markets, segments, territories and types on the screen all at the same time. All of these things are related but they are distinct objects all on their own. So in order to make our app more understandable and usable we need to have a way of only showing a particular type information at one time and to do this we will be using tabs. By the end of this article we will have set up the actual tabs themselves in such a way that the active tab is highlighted and notification of which tab has been clicked will be sent to the outside tab container.
#19 Creating A List View Component Using TSX
#19 Creating A List View Component Using TSX
In this article we will focus on creating a new list view component that we can use when we want to display a list of data in our application. Using a new component will make it easier to make sure that we create a unified look and feel throughout our entire application. Now we could already do that using pug and sass but the component will also allow us to handle behavior. At least for now we will just make sure that our component can respond to the user clicking on an item. We will accomplish all of this in a very general way by using TSX and allowing for a render function to be passed into the list view for any item that we wish to display.
#18 Using Vuex Getters To Access The Securities And Categories
#18 Using Vuex Getters To Access The Securities And Categories
In this article we will focus on creating four different vuex getters to facilitate the retrival of the securites and categories from the store. The purpose of using the getters instead of just accessing what we want from the different states is in the case of both the securities and categories they have fields that we wish to have populated whenever we retrieve them. By using getters we be sure that the category and market fields will be populated instead of set to null whenever we access either all of the securities or just an individual one. The same goes for the navigation properties on our security categories class.
#17 Completing Securities Domain Modeling And Updating Our State
#17 Completing Securities Domain Modeling And Updating Our State
In this article we will create the last couple of descriptors that we need before we can create the security category model and the security model itself. Once that is done we will finish up by creating a module for our security states and use it to make adding them to the overall store state very simple.
#16 Start Of Securities Domain Modeling With Markets And Segments
#16 Start Of Securities Domain Modeling With Markets And Segments
In this article we start by eliminating the implicit understanding of the shape of our state by requiring the use of string indexers whenever we want to access a property on that state. Once that is done we will define two new classes that represent the beginning of modeling securities within our application.
#15 Reversing User Navigation With The Back Button
#15 Reversing User Navigation With The Back Button
In this article we add the ability to pop a route off of the route history array and then use that ability to change the way our back button functions. Up until now we have used the parent/child relationship between our route entries to determine where to go when the user presses the back button. Now that we have a route history that we can push and pop entries from we can follow the route changes that the user has performed when navigating backwards. With the basic functionality in place we will finish up by conditionally showing the back button if the history is not empty and update the way our main navigation buttons are set as active so that they are properly highlighted for both forward and backward navigation.
#14 Remembering User Navigation Using A Route History
#14 Remembering User Navigation Using A Route History
In this article we will start by introducing a new constant and a few new types to our store types. The constant will make it so that we will not have to use a magic string when using our state decorator when binding the account state to the corresponding field within the accounts view and the types will make it easier when defining the actions and mutations that operate on our state. After that is done we will create a new route state that will be responsible for maintaining a history of the navigations that the user preforms so that we can modify our approach to providing backward navigation functionality. Instead of using the position of the to and from routes within the routing tree we will just follow the history of route changes until we exhaust them when the user clicks on the back button.
#13 Styling The App Shell And Removing A Model From The Vuex Store
#13 Styling The App Shell And Removing A Model From The Vuex Store
In this article we are going to start out by modifying the look of our app to make it look more app like. We will start by just defining a couple of colors that we can use for the background and foreground of the app bar and then proceed to use them to style the active button on our main nav bar. We will then finish up by adding functionality to our app so that a user can remove an account model by just clicking a button located in the accounts view.
#12 Using Decorators To Bind Vuex States And Actions
#12 Using Decorators To Bind Vuex States And Actions
In this article we will focus on two main topics. The first is we will create decorators that will make it eaiser for us to bind fields in our view components to the vairous properties of our vuex store such as its state and action methods. Once those decorators are in place we will then use them to display our account models and use an add mutation to add new accounts.
#11 Adding Accounts Data To Our Vuex Store
#11 Adding Accounts Data To Our Vuex Store
In this article we take our first step into adding global state to our application by using Vuex. We will start by defining our first model class and using it in the definition of our state. As part of defining that state we will include some test data, if the application is running in development, so that we can have something to work with when we add a new view to display the contents of the state.
#10 Adding An Animated Settings Menu
#10 Adding An Animated Settings Menu
In this article we focus on adding an animated settings menu to our app bar. Initially this settings menu will contain our anchor tag for accessing the about page. We create it such that the menu can be toggled visible and hidden using the cog button on the right hand side of the app bar. We will also add the ability for the menu to be closed if and or when the user navigates to another page while the menu is open. We will then finish up by modifying our navigation service so that if the user tries to navigate to the current page we will just skip the navigation.
#9 Removing Our Dependency On Rxjs From Animatable Item Consumers
#9 Removing Our Dependency On Rxjs From Animatable Item Consumers
In this article we are going to focus on removing the explicit dependency for rxjs from our consumer facing api. This will have two immediate benefits. The first is the fact that we are using rxjs is an implementation detail that we may choose to change in the future and if we did that the way everything sits right now it would break any of the code that is using our animatable item. The second is that it helps with discoverability. What I mean by that is that if you use intellisense to see what properties and methods are available to you on the rxjs subject you will see a whole bunch of stuff of which the only thing we are really expecting to be used is the next method. We will also finish up by adding the ability to be notified when a particular animation has completed which will help simplify the router outlet code.