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.
#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.
#8 Making Our App Bar Back Button Do Something
#8 Making Our App Bar Back Button Do Something
In this article we will focus on adding some functionality to our app bar by allowing the user to go back by pressing our angle left button. In the current context since we have not set up a mechanism for dealing with global state going back means heading from our current location towards the root view by way of the parent of our routes. Once that is done we will overcome a small unexpected problem of determing whether or not to show the back button through some asynchronous programming by using async/await.
#7 Structuring Our App to Look Like an App
#7 Structuring Our App to Look Like an App
In this article we will start adding support for including some svg icon to our application. While we are doing that we will see how we can include only the icons that we need instead of all of them. With that done we will turn to creating a couple of components that are mainstays of just about any application. Those being an app bar, which will be located at the top of our app and a navigation bar that will be at the bottom.
#6 Animating the Navigation Between Views
#6 Animating the Navigation Between Views
In this article we will convert from specifying our animation css class explicitly to creating them based on a convention. This change will make it much easier to add new animations. Following that change we will create the ability for us to animation elements in and out in the x direction. We use this along with the notion of a parent for our routes to conditionally decide which direction our views should be animated in and out when a user requests a route change.
#5 Using the Fade Animation When a Navigation Request is Made
#5 Using the Fade Animation When a Navigation Request is Made
In this article we will start by making a change to the animatable item that we created previously so that it is easier to be notified when an animation has completed. Once we have finished that we will add the ability for our navigation service to tell us what route we are currently on and to get the route for our destination. We will finish up by adding the ability to perform the fade out and fade in animations in coordination with a route change.
#4 Communicating a Navigation Request to the Router Outlet
#4 Communicating a Navigation Request to the Router Outlet
In this article we will start by creating a route entry object that initially just mimics the route config object from vue router. Once that is in place we will create a routing service that we will be able to inject into any of our views and components that need to make a routing request. This service will be our single point of communication between those views and components and a router outlet component that we will also be creating. The router outlet will be responsible for acting on the navigation request by performing the appropriate animations, such as translating the view in and and out, and actually performing the route change using the vue router.
#3 Performing the Fade Animation Without Magic Strings
#3 Performing the Fade Animation Without Magic Strings
In this article we will start by defining our css animation classes names for our fade animations in a separate file that we will import into our animation mixins. The purpose for doing this is that we will also export those names out so that we will be able to use them within the script tags in our vue files and within our typescript files. This will mean that we will be able to write them down in one place and then use them where ever we need them. Once that is done we will focus on removing our reliance on using magic strings to communicate which animation we want to run and what class names to apply when. We will finish up by adding the ability to notify a consumer as to what stage the animation is currently on.