Optional: Feature - Add Due Dates

[obxpete]

use material design's datepicker component to add due dates the task list

[obxpete]

in backend/dbOperations.js

add , taskDueDate to the list of query columns in the getTask() SQL SELECT statement

add , taskDueDate to the parameters in the addTask(task) function

add , taskDueDate to the list of query insert columns in the addTask SQL INSERT statement

replace the entire UpdateTask() function with

async function updateTask(taskObj) 
{
    let pool = await sql.connect(config);
    let result = await pool.request().query(`UPDATE tasks set task = '${taskObj['task']}', taskDueDate = '${new Date(taskObj['taskDueDate']).toDateString()}' where taskID = ${taskObj['taskID']}; `);
    return result // sql just returns the task object it created
}

replace the entire 'deleteTask()' function with

async function deleteTask(taskID) 
{
    let pool = await sql.connect(config);
    let result = await pool.request().query(`delete tasks where taskID = '${taskID}'; `);
    return result // sql just returns the task object it created
}

add the following to the module exports

,
updateTask: updateTask,
deleteTask: deleteTask

[obxpete]

in backend/api.js

add , newTask['taskDueDate'] after newTask['task'] in the add route

add , taskDueDate: task.taskDueDate after task:task.task in the updateTask function call in the update route

[obxpete]

add the following after the '\ insert new date form field `

    <mat-form-field appearance="fill">
      <mat-label>Due </mat-label>
      <input matInput [matDatepicker]="newTaskDatePicker" formControlName="newTaskDueDate"  >
      <mat-hint>MM/DD/YYYY</mat-hint>
      <mat-datepicker-toggle matSuffix [for]="newTaskDatePicker"></mat-datepicker-toggle>
      <mat-datepicker #newTaskDatePicker></mat-datepicker>
    </mat-form-field>

add ({{element.taskDueDate}}) after (to the right of) {{ element.task }}

insert the following after \ insert existing task date picker form field here

    <mat-form-field appearance="fill">
      <mat-label>Due </mat-label>
      <input matInput [matDatepicker]="existingTaskDatePicker" formControlName="existingTaskDueDate"  >
      <mat-hint>MM/DD/YYYY</mat-hint>
      <mat-datepicker-toggle matSuffix [for]="existingTaskDatePicker"></mat-datepicker-toggle>
      <mat-datepicker #existingTaskDatePicker></mat-datepicker>
    </mat-form-field>

[obxpete]

in app.component.ts

replace the ELEMENT_DATA definition with the following

  ELEMENT_DATA: task[] = [{
    'taskID': 0,
    'task': ''
    'task': '',
    'taskDueDate': ''
  }]

add newTaskDueDate: this.formBuilder.control('') to the this.taskForm definition

add existingTaskDueDate: this.formBuilder.control('') to the taskUpdateForm definition

replace the getTasks() with the following

  getTasks() {
    this.http.get<[]>('http://localhost:8090/api/tasks').subscribe(data => {
      this.taskData = data;
      this.ELEMENT_DATA = data['recordset'].map(task => {return {taskID: task.taskID, task: task.task, taskDueDate: task.taskDueDate}})
      this.dataSource = new MatTableDataSource<task>(this.ELEMENT_DATA);
    })  
  }

replace the addNewTask() with the following

  addNewTask() {
    this.http.post<any>('http://localhost:8090/api/add', {task:this.taskForm.get('newTask').value, taskDueDate: new Date(this.taskForm.get('newTaskDueDate').value).toDateString() }).subscribe(data => {
      // insert getTasks() call to update our table
      this.getTasks();
    });

replace the updateTask() with the following

  updateTask() {
     this.http.post<any>('http://localhost:8090/api/update', {taskID: this.taskUpdateForm.controls['existingTaskID'].value ,  task:this.taskUpdateForm.controls['existingTask'].value, taskDueDate: this.taskUpdateForm.controls['existingTaskDueDate'].value}).subscribe(data => {

      this.taskUpdateForm.reset()
      this.getTasks()
    })  
  }

add taskDueDate: string; to the export interface task definition

[obxpete]

in app.module.ts ...

add the following to the import statements at the top

import { MatDatepickerModule , } from '@angular/material/datepicker'
import { MatMomentDateModule } from "@angular/material-moment-adapter";

and add ,MatDatepickerModule,MatMomentDateModule to the imports array

[DLNeuberger]

I did this. There were some errors- I copied directly.