Projecteer Update : Dashboard design, User Joins Team and Other Additions

Since the last update I have been working on new features in projecteer particularly in the dashboard main view and team management for the projects.

On the dashboard UI, I implemented a fixed sidenav and navbar. I also added counters that will help determine the total number of projects, tasks and teams added by all registered users in the app.

The counters were added in order to help users keep tabs on newly added projects by other users in case they might be interested in collaborating with other users on their projects by joining the project team and taking on tasks.

Alongside these counters on the dashboard I added one separate button after each counter so that users can actually access the list of all projects/teams and tasks.

In the interface for viewing all added projects from all users I implemented features that will allow users view the project detail for each project as well as tasks listed under the project and details of the team handling the project.

In the interface for viewing all added tasks from all users I implemented features that will allow users view the task detail for each task. I implemented the same feature for the interface for viewing all added teams from all users.

I also added a feature that allows users to join project teams if they haven't in the interface for viewing team details.

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

https://steemit.com/utopian-io/@gotgame/project-introduction-projecteer-an-awesome-project-management-tool-for-remote-teams-and-creatives

New Features

Dashboard

Project/Task/Team Counter & View User Projects/Task/Teams

On the user dashboard, I have three counters for projects,task and teams respectively.

I made a call to project/tasks/teams service respectively from the dashboard component to return all the documents in each concerned database and record the length of each returned array.

From the services I made the required calls to the api for the needed data.

In the backend, I fetch all the requested data from the set routes and return a response object containing the requested data.

The data returned by the api is displayed on the dashboard in wells.

Also on the dashboard I added tabs that allow the user to view basic details about their projects/task and teams.

I implemented them by sending requests to the backend and displaying the response as a dashboard feed containing a list of projects/tasks and teams added by the currently logged in user as opposed to all users which was implemented earlier.

In the respective services I sent http requests to the backend and retrieved all the data needed relating to the specific user.

View Every Project

On the dashboard if a user clicks on the first button to the left view all projects the view will navigate to a interface where all projects added by every user will be displayed.

In the component I sent data to the service in order to receive a response containing the projects array which will be displayed

In projects service I made a request to the backend with http request which returns all the data needed.

View Every Task

Beside the button used to view all projects I added another button for viewing a list of all tasks added by all registered users.

When a user clicks on view all tasks button the view navigates to the interface for viewing all added tasks

In the dashboard, I added a router link to the button that points at view-every-task component.

Upon initialization of view-every-task component a call is made to the tasks service which will in turn send a http request will fetch all added tasks from the api.

View Every Team

From the dashboard if a user clicks the last button to the right just beside view all tasks button the view will navigate to a interface where the user can view a list of teams added by all registered users.

In view-every-team component, upon initialization, a call is made to the teams service which will in turn send a http request will fetch all added teams from the api.

View Every Project Interface

On the interface for viewing every project added by all users I implemented the following features per project.

• Viewing project details
• Viewing project tasks
• Viewing team details for a project

Viewing project details

By clicking on the details button the user will navigate to a page where they can view view detailed information about the chosen project.

In view-every-project component I implemented this feature by first storing the chosen project information in local storage and redirecting to the project details component and displaying the data there.

Viewing project tasks

On view every project interface if a user clicks on the second button that says view tasks the view will navigate to a page where the user can view a list of tasks added under the chosen project.

In view-every-project component I implemented this feature by storing the project name and project id in local storage and navigating to the tasks list page.

Viewing team details for a project

The last button to the right in view-every-project will navigate the user to a page where they can view the details of the team working on that particular project.

I implemented this feature by storing the project name and project id in local storage and navigating to the team details page.

View Every Task Interface

In view-every-task I added a button that will allow users navigate to the task detail page where they can view all available details on any chosen task.

Clicking on details will redirect the router to task-details component.

In view-every-task component I implemented this feature by storing all the task data in local storage and navigating to the task details page.

View Every Team Interface

In view-every-team I added a button that will allow users navigate to the team detail page where they can view all available details on any chosen team.

Clicking on team details button will navigate the view to teams component where the user can view the details of the chosen team.

In view-every-team component I implemented this feature by storing all the team data in local storage and navigating to the team detail page.

User Joins Team and Team Membership Confirmation

On initialization of the team detail page, some checks are run by the application to determine whether the currently logged in user is a team member of the team being viewed.

In teams component I ran the following checks on page load

• If the currently logged in user is the same person as the team lead the the user is automatically a team member.

• The next check makes a call to team service which in turn makes a http request to the api to check if the currently logged in user is stored as a team member on the database.

If it is determined that the user is a team member a disabled button joined will be displayed showing that user has already joined the team.

If it is determined otherwise that user is not a team member a button join team will be displayed instead while joined will not be displayed.

Clicking join team will change the membership status for the currently logged in user in that team which will prompt joined to be displayed and join teamtaken out of display.

Commits

• https://github.com/olatundeee/projecteer/pull/8
• https://github.com/olatundeee/projecteer/pull/9
• https://github.com/olatundeee/projecteer/pull/10
• https://github.com/olatundeee/projecteer/pull/11
• https://github.com/olatundeee/projecteer/pull/12
• https://github.com/olatundeee/projecteer/pull/13
• https://github.com/olatundeee/projecteer/pull/14
• https://github.com/olatundeee/projecteer/pull/15
• https://github.com/olatundeee/projecteer/pull/16
• https://github.com/olatundeee/projecteer/pull/17
• https://github.com/olatundeee/projecteer/pull/18

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 [email protected].

GitHub Account
https://github.com/olatundeee

---

_{Sponsored ( Powered by dclick )}