
#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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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.

#2 Defining the CSS Fade Animations
In this article we will define our first set of animations using sass. We will do this in a very
modulare way so that we will have the ability to import either all of the animations that we
will create or just the few that we want to use at a time. Once the animations are defined we will
then import them into our project and modify our splash screen and animatable item so that our
splash screen will fade out after a set amount of time.

#1 Creating an Animatable Splash Screen
In this article we will talk about the settings and configuration that were used when the
project was created and from there we will create a couple of new components for our application.
We will start with creating a splash screen component and then an animatable item component. We
will be using the animatable item as its name suggests to provide the logic for animating other
components. We will finish up by using some facilities form rxjs to allow for communication
between our splash screen and its animatable item.