Sample Task Management Application using Angular 4

---

Project Configuration:

• Clone or Download the project.
• cd AngularProject
• npm install
• ng serve --open
• Configuration of Laravel API Project is necessary to run the project. (https://github.com/UbaidUrRehmanKhan/Laravel_APIs_for_AngularProject.git)

NOTE :

• As same component is used at different places, so their description will vary depending upon the data is provided from backend.
• Laravel APIs name is different from what is wirtten actually on backend, so to build a clear understanding over here, I have used a descriptive sort of naming convention for APIs.
• I have discussed each and every page, components which are used in it and the backend Laravel API calls.

Project Brief Description:

This project is all about creating various tasks and assigning those tasks to users. Admin will be responsible to Perform CRUD related operations for users and tasks. He will also be responsible to assign/deassign task to user and view the user's feedback for that task. On the other hand, user will be responsible to update the task status, add the feedback and delete the feedbacks.

Following is the detail description of project:

User Panel

1- Assigned Tasks Listing Page

Description: This is the starter page after successful login for a simple user and it is used to display the list of all tasks that are assigned to the user.

Following Attributes will be shown:

• Task ID
• Task Name
• Task Status (Completed/Ongoing)
• Task Detail Link

Following Backend Laravel API is used:

• GetUserTasks()

2- Assigned Task Detail Page

Description: It is used to display the details among one of the tasks that are assigned to the user and the button to update the status of task to be completed. It has also the option to give feedback and viewing all the previously added feedbacks.

Following components with their attributes and widgets are as follows:

• Task Detail Component
  • Task ID
  • Task Name
  • Task Description
  • Mark as Completed Button
• Feedback box component
  • Feedback Description
• List of Feedbacks
  • Feedback Description
  • Created At
  • Delete Comment Button

Following Backend Laravel APIs are used:

• GetTaskDetail()
• NewFeedback()
• FeedbackLists()
• DeleteFeedback()
• UpdateTaskStatus()

Admin Panel

1- Users Listing Page

Description: It is used to display the list of all users and the option to change the status of users. This page also contains 'Add New User' Button.

Following components with their attributes and widgets are as follows:

• Users List Component
  • User ID
  • User Name
  • User Status Button (Active/Inactive)
  • User Detail Link
• New User Button

Following Backend Laravel APIs are used:

• GetUsersList()
• changeUserStatus()

2- Adding New User Page (Edit User Page)

Description: This page is used to save a new user and it is also used to update the datials of a user, if we come from a different route with query parameters.

Following attributes will be used:

• User ID (for updating)
• User Name
• User Status
• User Role
• User Email
• User Password (for updating)

Following Backend Laravel APIs are used:

• GetUserDetail()
• saveNewUser()
• updateExistingUser()

3- User Detail Page

Description: It is used to display the details of a user and the button to update the user data (This button leads to new user Page with the user ID in query Parameter. We have just recently discussed it). It has the table of all assigned tasks to the user with a link in every row of table to display the details with user progress to that task and a remove button to detach that task from user.

Following components with their attributes and widgets are as follows:

• User Detail Component
  • User ID
  • User Name
  • User Status
  • User Role
  • User Email
• Tasks List Component
  • Task ID
  • Task Name
  • Assigned Task Details Link
  • Task Remove Button (to detach the task from user)

Following Backend Laravel APIs are used:

• GetUserDetail()
• GetTasksList()
• TaskDetachmentFromUser()

4- Assigned Task Detail Page

Description: It is used to display the details among one of the tasks that are assigned to the user with delete and edit buttons. It has also the option of viewing all the previously feedbacks.

Following components with their attributes and widgets are as follows:

• Task Detail Component
  • Task ID
  • Task Name
  • Task Description
  • Mark as Completed Button
• List of Feedbacks
  • Feedback Description
  • Created At

Following Backend Laravel APIs are used:

• GetTaskDetail()
• FeedbackLists()
• DeleteTask()

NOTE : Keeping in mind the perspective of SPA, I have introduced the options of task delete and task update in this page.

5- Tasks Listing Page

Description: It is used to display the list of all tasks of application. This page also contains 'Add New Task' Button.

Following components with their attributes and widgets are as follows:

• Tasks List Component
  • Task ID
  • Task Name
  • Task Detail Link
• New Task Button

Following Backend Laravel API is used:

• GetTasksList()

6- Adding New Task Page (Edit Task Page)

Description: This page is used to create a new task and it is also used to update the datials of a task, if we come from a different route with query parameters.

Following attributes will be used:

• Task ID (for updating)
• Task Name
• Task Description

Following Backend Laravel APIs are used:

• GetTaskDetail()
• saveNewTask()
• updateExistingTaskr()

7- Task Detail Page

Description: It is used to display the details of a task and the button to update the task data (This button leads to create task Page with the user ID in query Parameter. We have just recently discussed it). It has the list of all users from which we can select the required users and assign this task to them.

Following components with their attributes and widgets are as follows:

• Task Detail Component
  • Task ID
  • Task Name
  • Task Description
  • Task Removal Button
  • Task Updation Button
• Tasks Assigning to Users Component
  • Task ID
  • User ID (array of User IDs)
  • Assigned Task Button

Following Backend Laravel APIs are used:

• GetTaskDetail()
• deleteTask()
• getUsersList()
• AssigningTaskToUsers()