In this update I have added a few new features to projecteer, these new features covered in this post are centered around user and user information management in the application.
I implemented a new page for users with the role administrator where the admin users can view a list of all registered users in the application.
I added another feature that allows all users to add/edit and view their profile information from the dashboard.
I added two new items to the sidenav list collection that allows users to easily navigate to pages displaying earlier added features.
Repository
https://github.com/olatundeee/projecteer
About Projecteer
To know more about what projecteer is about you can check out the introduction post for more information
New Features
Sidenav
On the sidenav, I added two new list items in order to expand the navigation reach to newly added features.
The first item added is the Users list item which redirect to a user list page when clicked. Users list item on the sidenav is a feature that's limited to the the admin users of the application exclusively.
In sidenav.component.ts, I implemented a check that firstly gets the role of the currently logged in user from local storage.
If the role returned is Administrator then Users list will be displayed, otherwise it won't be displayed
In sidenav.component.html, I used *ngIf with the Users list item ensuring that the list item is not displayed initially unless the condition for displaying it has been met.
Sidenav Users list item displayed during administrator Login
Sidenav Users list item displayed during other users Login
Additionally on the sidenav, I also added a minor feature that outputs the name of the currently logged in user, I did this by getting the username of the currently logged in user from local storage
And output in sidenav.component.html
Instances of the just described feature can be seen in the dashboard images above.
Profile
Every user needs a profile, in light of that I added a feature that allows users to add/view and edit their profiles from the dashboard.
View Profile
For viewing profile, I implemented a feature that searches the database for the profile information of the currently logged in user and returns the data if found.
In profile.component.ts I made a call to user.service to run a method getProfileDetails() which sends http request that returns the profile details.
On the interface for viewing the user profile details, I added a clause which helps decide if add bio button will be displayed or not.
Upon initialization, when the code runs and makes a request to the backend for profile details, if the response body contains profile data add bio will not be displayed. Otherwise, it means the user has not updated their profile data so add bio will be displayed for the user to be able to update their data.
In user.service.ts, getProfileDetails() will send a http post request to the backend with the request body containing the username and user id of the currently logged in user which will be used as parameters for searching the database.
Interface for users with updated profile information
Interface for users without updated profile information
You will notice a distinction between the two picture groups above, the first one does not display add bio while the second one displays add bio.
Add Profile
When updating profile data as a user, the user is expected to supply the following information.
- Full name
- Address
- Phone Number
- Skills
- Links to their social media handles
In add-profile.component.html and add-profile.component.ts I implemented a form that accepts all the data mentioned above and sends it to user.service so it can be sent to the api.
In user.service the method addProfile() gets the profile data sent over and also gets the username and Id of the currently logged in user and sends all to the backend to be updated as the profile data for the logged in user
Add user profile interface
In order to navigate to add-profile interface the user should click add bio button in profile view interface.
Edit Profile
Just like add profile, edit profile implements a form which is initially populated with the logged in user profile data. Each form field can then be updated with preferred values by the user.
On view profile interface, when a user clicks on edit bio button, all profile details of the currently logged in user will be stored in local storage to be retrieved in edit-profile.component.ts
In profile.component.ts
In edit-profile.component.ts I retrieve the stored profile information from local storage and and use it to poulate the form in the view.
Then I grab the edited form data and send it to user.service to be sent to the api for update
In user.service the method editProfile() will help send the updated data to the backend through a http post request.
Edit Profile Interface
User List
Admin users need to have an interface where they can view a list of all registered users on the platform, which why I added the user list feature.
In user-list.component.ts, upon initialization I made a call to user.service to run getAllUsers which will send a http request to retrieve a list of all registered users from the database.
In user.service getAllUsers() makes a call to the backend and returns the list of all registered users to be displayed in user-list.component
** Interface for viewing user list**
Commits
- https://github.com/olatundeee/projecteer/pull/19
- https://github.com/olatundeee/projecteer/pull/20
- https://github.com/olatundeee/projecteer/pull/21
- https://github.com/olatundeee/projecteer/pull/22
- https://github.com/olatundeee/projecteer/pull/23
- https://github.com/olatundeee/projecteer/pull/24
- https://github.com/olatundeee/projecteer/pull/25
How to contribute?
You can contribute to the project by forking and cloning the github repo(link shared at the top), running npm install in the project root directory(backend) and client directory to install all dependencies.
To start the backend server navigate to the root directory and run the following command
SET DEBUG=projecteer:* & npm start
To start the frontend server navigate to the client directory in the project folder and run the following command
npm start
Before working on the project kindly contact me by sending an email to olatundeoladunni019@gmail.com.