TGIMBA .NET Core Upgrade – Part 6 – Adding TGIMBA User Interface Placeholders

Git  Code

In the segment, I will create placeholders with unit tests for any of the views I anticipate needing for TGIMBA. Before I begin, I do want to point out three things:

  • To break with the current TGIMBA, I am going to modify the dashboard to be available on both the mobile and desktop versions.
  • I hope to be able to use the same views for both mobile and desktop and distinguish them by using Cascading Style Sheets (CSS) only.
  • Two git commits because the list of files was getting large and I wanted to make sure everything got added correctly.

Git  Code 1

Git  Code 2

After taking an inventory of the current TGIMBA’s views, I added placeholders under app/components for the following – Dashboard, Static Display, Login, Registration, Add/Edit, Search Entry, Search Results, Item List, Desktop Category Panel, Menu (generic for each menu needed), Header and Footer.

one

Each one was a carbon copy of each other, so to demonstrate, I will explain the details of the Dashboard:

  • I updated the TGIMBA component I created last time.

two

  • I added a unit test looking for a hidden <div> I placed on the page (a way I am going to verify a page exists). I was reading up on what the Angular TestBed fixture objects expose and I was pleased to find out that the good ol’ standard document.getElementById() works.

four

  • It works by looking for this hidden <div> inside dashboard.component.html.

five

  • I added a .css file with the <div> id to hide it from view. I also noticed that global .css seems to be missing. I found references to a styles.css, but that file does not appear to be part of the application I have. I would like to have the .css entry to hide the componentIdentifier <div> I am using in a global file instead of each component. If I discover how, I will update the project. For now though, it will go in each component’s .css file.

six

  • The controller is empty at this point.

asefae

Something interesting I noticed. VS 2017’s solution explorer started losing track of the git file status again. However, when I added and commited from the command line, everything was there as expected.

Ok, next time I will start with putting in the dashboard text and status display based on the database.

Stay tuned!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s