Web Task Management System (WTMS)

WTMS is a web based task management application that a team of developers could utilize to create, edit, track the completion of, and delete tasks as part of a workgroup.

• Web Task Management System (WTMS)
  • Project Motivation
  • Project setup
  • Running the Application (local environment)
  • Working with the MongoDB Database
  • Navigation and Use
  • Registration and Login
  • Tasks View
  • Task Creation
  • Task Edit and Completion
  • Task Deletion
  • Development Notes
  • MongoDB
  • Incorporating Bootstrap
  • Adding styles.css

Project Motivation

WTMS is the project chosen for use as a means of applying the concepts learned in the East Carolina University (ECU) CSCI 6600 Database Management System course.

Project setup

Running the Application (local environment)

Start MongoDB:

mongod --dbpath=/System/Volumes/Data/data/db

Notes:

• Addressed mongo's data/db error via the steps in Tolumide's answer on this StackOverflow discussion.
• The Address already in use error can be corrected by running:

  ps aux | grep -v grep | grep mongod

  to find the PID followed by:

  kill -9 <PID>

  to end the running process at the address.

Start the server:

npm run dev

Start the client:

npm run serve

Working with the MongoDB Database

To access the MongoDB database:

sudo mongo

Show MongoDB databases:

show dbs

Switch to the database:

use wtms-db

List the current database users:

db.users.find().pretty()

Navigation and Use

Registration and Login

New users can register via the Register link. Form inputs for first and last name, username, and password are presented. Once registered, user is directed back to the homepage.

Existing users can login via the Login link. Form inputs for username and password are presented. Once registered, user is directed back to the homepage.

Tasks View

Authenticated users can view tasks, and the Create Task button allows a user to create a new task by taking them to the create task form.

Task Creation

Form inputs for title, body, and due date are presented. Selecting the Create Task button creates the new task in the database and shows it in the Tasks view page.

Task Edit and Completion

Form inputs for updating the title, body, and due date are presented. Selecting the Update Task button updates the task in the database and on the Tasks view page.

The task’s Completed check box can be selected to indicate completion. If the task is past due, the date will format to a red color indicating that it’s late.

Task Deletion

If a user selects a task’s Delete button a modal is displayed for confirmation. Selecting the modal’s Delete Task button removes it from the database and the Tasks view page.

Development Notes

MongoDB

Start MongoDB with:

brew services start mongodb-community@4.4

Verify that MongoDB is running with:

brew services list

Stop MongoDB with:

brew services stop mongodb-community@4.4

Once MongoDB is running, enter MongoDB shell with (in a new terminal window):

mongo

Incorporating Bootstrap

Incorporate bootstrap css via:

npm install bootstrap --save

and then installed peer dependencies via (after referencing this StackOverflow discussion):

npm install --save "jquery@1.9.1 - 3"

npm install --save "popper.js@^1.16.1"

Finally, incorporated them into main.js by (after referencing this StackOverflow discussion):

import 'bootstrap/dist/css/bootstrap.min.css'
import 'jquery/src/jquery.js'
import 'bootstrap/dist/js/bootstrap.min.js'

Adding styles.css

Incorporated the self created styles.css by adding

@import './assets/css/style.css'; 

to App.vue (after referencing this StackOverflow discussion.