UI Engineers
- Angular Material Themes: https://material.angular.io/
- Angular Material Icons: https://www.angularjswiki.com/angular/angular-material-icons-list-mat-icon-list/
- Getting familiar with Angular:
- Angular Documentation: https://angular.io/
- The Net Ninja YouTube Playlist: https://youtube.com/playlist?list=PL4cUxeGkcC9jqhk5RvBiEwHMKSUXPyng0
- Note: The above playlist is only useful for getting familiar with angular and learning key concepts such as data-binding and how components interact with each other. Also note that the playlist is making use of an older version of angular
- For the first iteration of this mini project, the UI engineers hardly had any work to do for the first sprint. So, if you find yourself in a similar situation do not stress, as there is not really much for you to do during the first sprint.
- What you should at least try to do during the first sprint is draw out a component tree based off of the designs your designer shows you. Component trees are an awesome way of visualizing how you would build your page.
- Another thing you can do during your first sprint is to consult with your designer and see which parts of their design might be too difficult to implement and which parts might need to change.
- Something you should definitely do before sprint 2 starts is take a look at which Angular Material themes you think you might use as well as familiarize yourself with the structure of the repo and where you should committing your files to.
- Remember, testing is probably going to take up 60% of your time, so the sooner you start testing the better. It's recommended that as soon as you write a function, write the test for that function.
- Another useful thing to remember is to work with small commits. If you write a function, make a commit that contains only the new function you just wrote. Also, it is better to keep your PRs small. This will increase the chances of your DevOps member being able to review it faster and recommending it to be merged. A general rule of thumb is one component = one PR
The student-explore page consists of a few components, each performing some sort of basic functionality. Components that you will find on this page are:
- Header (Provided by the UI Kit)
- NavBar (Provided by the UI Kit)
- Filter
- Search Bar
- Student Cards
- Mobile Student Cards
- Footer (Provided by the UI Kit)
- This component was created to replace the desktop version of the Student Cards when the screen size changed to mobile dimensions
- This component was not used in this iteration of the Graduates Portal, but we are hoping that they might be useful for future iterations.
- The student cards were placed in the grid to make it easier for us to make the cards responsive
- An API was used to dynamically populate the information within each card
- This component was created using data retrieved from the API
- This component provides the functionality to filter students by a single field or multiple fields. When the filter functions execute, student cards are dynamically reloaded with the returned data from the API
- This component provides the functionality of retrieving a "Best-Match" list of students from the database using an API call
- Student cards would be dynamically reloaded when the search bar function executes
-
Version 1:
-
Version 2:
Each component that we created for this page underwent a battery of tests to ensure that they performed the way we expected them to perform. These tests can be found in any of the component.spec.ts files under the libs/client/student-explore directory.
These tests include:
- Loading of valid/invalid students for mobile student cards
- Loading of valid/invalid students for desktop student cards
- Loading of the Filter Options for the filter component
- Ensuring that the correct search results are returned from a search query
The routing to the student-explore page was set up in such a way that if anyone navigated to /student-explore, the student-explore page would be shown. This can easily be changed by changing the 'path' key in the app-routing.module.ts file in the client/src/app directory.
If routing has to be done to any sub-pages of the student-explore page, then the sub-page will have to be added to the student-explore-routing.module.ts file in the libs/client/student-explore/.../student-explore-page directory. A new path should be added to the Routes array in this file as well as the component that the path will direct the user to.
- Clicking on the view student button in a student card will take the user to the student-profile page
- The search bar now allows users to press enter to perform a search query
- Users can now search for students by tag names
- The filter icon is now aligned with the search bar
- A display of system status should be implemented. This can take the form of a progress wheel while the API is fetching data from the database in between filter function calls or search bar function calls
- Clicking on the view student button in the student card should take the user to the student-profile of the student-card they clicked on
- Implementing the mobile student cards
- Using local storage to boost loading times of the student-card profile pictures