Projecteer Update: User Interface Redesign, Additional Features on the User Dashboard

Repository

https://github.com/olatundeee/projecteer

Introduction

I have made some changes in the design of the user interface of projecteer and also added some additional features to the user dashboard.

In the user dashboard I added two new tabs that will allow the logged in user to view a list of the tasks they applied to and the tasks that have been delegated to them.

I also implemented a sidebar in some of the pages to accommodate the action buttons that were previously located at the topmost part of the page.

About Projecteer

Projecteer is a project/task/content management tool that can be used by creative teams to keep track of projects and various tasks under the project.

The idea behind projecteer is to create a platform for communities and remote teams where they can collaborate, undertake and execute different projects.

Projecteer aims to create an environment where

• team members can be assigned tasks at the discretion of the team lead
• users can join or get invited to teams that are open to accepting new members and collaborate on projects by completing tasks with team members
• team members can communicate and keep themselves updated on the progress of their projects
• users can add, modify and remove projects /tasks
• users can share their thoughts and opinions about projects /brands either personal/ not personal.
• Users will be able to add unlimited number of projects and tasks under each project.

Proposed Features

The proposed features for the first release of projecteer include

• Project management interface where users can add/edit/view/delete projects
• Task management interface where users can add new tasks to a particular project, edit existing tasks, view a task and delete a task
• User management including login, signup, role management, user profile area(includes adding, editing and viewing user profiles)
• Team management area where users can create teams, apply to join team, be accepted into teams, delegate tasks to team members, apply to complete an undelegated task, mark delegated tasks as complete, choose a team lead for the project, view and edit team information
• Community management interface where users can publish task reports to talk about completed tasks, publish project updates to inform community members of progress involving the project, publish and comment on blog posts about projects, brands or any accepted category of topics.
• Integration of the community interface with the steem blockchain so users and team members can get rewarded when they publish project updates, task requests, task reports, blogs, articles and other content.
• Private chat area where users can communicate privately.

Current Updates

Dashboard View Of All Task Applications and Delegations By Logged In User And Dashboard Redesign

In dash-view.component I added a new feature that allows the logged in user to view a list of all tasks that they have previously applied to from the task pool.

As soon as the component loads, the method getUserApplications() runs in task-application.service which sends the unique id of the currently logged in user to the api in order to return an array of application objects containing that id.

In task-application.service, getUserApplications()sends a http request to the api in order to retrieve the required data.

In order to be able to list and display tasks currently delegated to the logged in user, upon initialization of dash-view.component, the method getUserDelegations() in task-delegation.service will run and return an array of tasks that are currently delegated to the logged in user.

In task-delegation.service,getUserDelegations()runs and returns the desired information using the uniqueid` of the currently logged in user as request body.

Additionally, on the main dashboard as well as most of the remaining components I designed and implemented a new layout for their interfaces.

On the main dashboard I removed the panels at the topmost part of the page and moved the previous functionalities on the panels to a right sidebar.

On the right sidebar we can find links to the following pages as well as complementing counters.

• All Projects: Clicking on All Projects will navigate the user to a page where the user can view all the projects added by all users, on the right most side of the listing is total number of available projects by all users.

• All Tasks: Clicking on All Tasks will navigate the user to a page where the user can view all the tasks added by all users, on the right most side of the listing is total number of available tasks by all users.

• All Teams: Clicking on All Teams will navigate the user to a page where the user can view all the teams added by all users, on the right most side of the listing is total number of available teams by all users.

Current View

Previous View

Also in the dashboard, apart from adding a new display view for viewing all user applications and delegations, I also modified the layout for viewing all user tasks, projects and teams all in order to ensure the users experience a slick, appealing and simplistic interface.

All the information are laid out in tabs and is shown in the images below

YOUR PROJECTS

Shows all projects added by currently logged in user

Each project is displayed as a card

YOUR TASKS

Shows all the tasks added by the currently logged in user

Each task is a collection item under a collection list

YOUR TEAMS

Show all the teams added by the currently logged in user

Each team is displayed as a card

The remaining items on the tab include YOUR APPLICATIONS and YOUR DELEGATIONS both of which have been covered earlier.

View Every Project, View Every Task and View Every Team Redesign

In view-every-project.component the logged in user can view a list of all the projects added by all the users in the application.

Initially, in the previous view all projects were outputted as a table row on a table, but presently all projects are displayed as cards in columns.

Current View

Previous View

In view-every-task.component I redesigned the interface such that each task is now being displayed as a single card as opposed to the former layout employing table and table rows.

Current View

Previous View

In view-every-team.componentI changed the layout such that each team is now being displayed as a single card.

Current View

Previous View

Task Detail Redesign, View Applicant List Redesign, View Team Members Redesign

In task-detail.component previously certain action buttons were located at the topmost part of the page giving the page a somewhat distorted look.

Previous View

Currently I have converted those action buttons to links and moved them to a sidebar on the right hand side of the page

Current View

In task-detail.component when a user clicks on Applicants or Team Members they are redirected to a page where they can view a list of applicants/team members that the current task can be delegated to.

Previously both interfaces were being displayed as tables, with each applicant/team member

Previous View

Applicant List/Team Members

Current View

Pull Requests

• https://github.com/olatundeee/projecteer/pull/40

• https://github.com/olatundeee/projecteer/pull/41

You can read earlier updates on Projecteer by visiting the following links

• https://steemit.com/utopian-io/@gotgame/project-introduction-projecteer-an-awesome-project-management-tool-for-remote-teams-and-creatives
• https://steemit.com/utopian-io/@gotgame/projecteer-update-user-registration-authentication-add-new-team-view-team-details
• https://steemit.com/utopian-io/@gotgame/pr
• https://steemit.com/utopian-io/@gotgame/projecteer-update-view-user-list-add-view-edit-user-profile
• https://steemit.com/utopian-io/@gotgame/projecteer-update-admin-view-user-profile-projects-tasks-teams-and-users-view-team-members-list
• https://steemit.com/utopian-io/@gotgame/projecteer-update-apply-for-task-delegation-view-task-applicants-list-view-task-applicant-profile-delegate-task-to-applicants