Add Feature: Update a Task

[obxpete]

Insert the following // update imports here section in app.module.ts

import { MatSelectModule } from '@angular/material/select'
import { MatButtonModule } from '@angular/material/button'

and add the following the following to the // and here (imports array) section

MatSelectModule,
MatFormFieldModule, 
MatInputModule, MatButtonModule,

[obxpete]

Add the following under the // update imports here section in app.components.ts

import { MatSelect } from '@angular/material/select'

Insert the following under Initialize taskUpdate form here section

taskUpdateForm : FormGroup;

Insert the following //Insert updateTask form here section

  this.taskUpdateForm = this.formBuilder.group({
    existingTaskID: this.formBuilder.control(0),
    existingTask: this.formBuilder.control(''),
  })

Add the following under the // add updateTask function here section

updateTask() {
     this.http.post<any>('http://localhost:8090/api/update', {taskID: this.taskUpdateForm.controls['existingTaskID'].value ,  task:this.taskUpdateForm.controls['existingTask'].value }).subscribe(data => {
      // insert getTasks() call to update our table
      this.getTasks();
      this.taskUpdateForm.reset()
    });
}

[obxpete]

Add the following under the // Insert Update Route Here section of backend/api.js

router.route('/update/').post((request, response) =>{
    let task = {... request.body};
    dbOperations.updateTask({taskID: task.taskID,  task:task.task }).then(result => {
        response.status(201).json(result)
    }) 
})

[obxpete]

Add the following under the <!-- Insert Update Task Form Here --> section near the bottom of app.module.html

<hr>
<h4>Update a task</h4>
<div class="matform-container">
  <form [formGroup]="taskUpdateForm" autocomplete="off">
    <mat-form-field appearance="fill">
      <mat-label>Select a task</mat-label>
      <mat-select matInput #existingTaskID formControlName="existingTaskID" (selectionChange)="taskUpdateForm.controls['existingTask'].patchValue($event.source.triggerValue);">
        <mat-option *ngFor="let task of ELEMENT_DATA" [value]="task.taskID">
          {{task.task}}
        </mat-option>
      </mat-select>
    </mat-form-field> &nbsp; &nbsp;
    <mat-form-field >
      <input matInput #updateTaskInput maxlength="40" placeholder="Ex. set the light timers" formControlName="existingTask" aria-label="Edit task label">
    </mat-form-field>
    <button  mat-raised-button color="primary" (click)="updateTask();">Submit</button> 
  </form> 
</div>

[obxpete]

Add the following /* update css here */ section in app.component.css

.matform-container  {
  margin-left: 18px;
}

[obxpete]

Add the following // Insert UPDATE A TASK section in backend/dbOperations.ts

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

add this to the module exports

    ,updateTask: updateTask

[DLNeuberger]

I did this!

[RAlyeshmerni]

Done!!

[meiralevi]

Did it!

[lowychana]

I did this!