update task model, update reactive form for task

Author: Manuela Paula Ritter

src/app/matrix/canvas/canvas.component.html

@@ -5,7 +5,7 @@
     <app-task-dot
       *ngFor="let task of tasks[topic.id]"
       [style.top]="task.importance | yPosition"
-      [style.left]="task.dueDate | xPosition: maxDate"
+      [style.left]="task.dueDay | xPosition: task.dueMonth:task.dueYear:maxDate"
       [task]="task"
       [topic]="topic"
       (selectTask)="onSelectTask($event)"

src/app/matrix/detail/detail.component.html

@@ -4,7 +4,7 @@ <h2>Settings</h2>
     <app-task-card
       [task]="task"
       [position]="i"
-      [topic]="topics[task.topic]"
+      [topicsForSelect]="topics"
       (changeTask)="changeTask($event)"
     ></app-task-card>
   </p>

src/app/matrix/detail/detail.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { map } from 'rxjs/operators';
-import { Task, Topic } from '../matrix.interfaces';
+import { Task, TopicDictionary } from '../matrix.interfaces';
 import { MatrixService } from '../matrix.service';
 
 @Component({
@@ -10,7 +10,7 @@ import { MatrixService } from '../matrix.service';
 })
 export class DetailComponent implements OnInit {
   taskHistory: Task[] = [];
-  topics: { [key: number]: Topic } = {};
+  topics: TopicDictionary = {};
 
   constructor(private readonly matrixService: MatrixService) {}
 

src/app/matrix/matrix.effects.ts

@@ -9,6 +9,10 @@ import {
   GetMatrixData,
   GetMatrixDataFailed,
   GetMatrixDataSuccess,
+  UPDATE_TASK,
+  UpdateTask,
+  UpdateTaskFailed,
+  UpdateTaskSuccess,
 } from './matrix.actions';
 import { MatrixData, Task, Topic } from './matrix.interfaces';
 
@@ -20,22 +24,15 @@ export class MatrixEffects {
     new Topic(3, 'LongName Topic', Color.orange, true, false),
   ];
   private tasks: Task[] = [
-    new Task(1, 'Tast', 1, 60, new Date('2020-12-01T12:00:00.000Z')),
-    new Task(2, 'Tast 2', 2, 20),
-    new Task(3, 'Tast 3', 1, 33),
-    new Task(4, 'Tast 4', 2, 99),
-    new Task(5, 'Long Name Task', 3, 44),
-    new Task(6, 'tttttt anen', 3, 55, new Date('2020-12-02T12:00:00.000Z')),
-    new Task(7, 'Tast 2930', 1, 1, new Date('2020-11-20T12:00:00.000Z')),
-    new Task(8, 'nenene', 2, 2, new Date('2020-11-28T12:00:00.000Z')),
-    new Task(
-      9,
-      'nnn',
-      3,
-      90,
-      new Date('2020-12-10T12:00:00.000Z'),
-      'test description',
-    ),
+    new Task(1, 'Tast', 1, 60, 1, 12, 20),
+    new Task(2, 'Tast 2', 2, 20, 10, 12, 20),
+    new Task(3, 'Tast 3', 1, 33, 30, 11, 20),
+    new Task(4, 'Tast 4', 2, 99, 5, 12, 20),
+    new Task(5, 'Long Name Task', 3, 44, 7, 12, 20),
+    new Task(6, 'tttttt anen', 3, 55, 2, 12, 20),
+    new Task(7, 'Tast 2930', 1, 1, 20, 11, 20),
+    new Task(8, 'nenene', 2, 2, 28, 11, 20),
+    new Task(9, 'nnn', 3, 90, 10, 12, 20, 'test description'),
   ];
   private data: MatrixData = {
     topics: this.topics,
@@ -49,12 +46,20 @@ export class MatrixEffects {
     ofType<GetMatrixData>(GET_MATRIX_DATA),
     mergeMap(() =>
       of(this.data).pipe(
-        map((data: MatrixData) => {
-          console.log(data);
-          return new GetMatrixDataSuccess(data);
-        }),
+        map((data: MatrixData) => new GetMatrixDataSuccess(data)),
         catchError((message) => of(new GetMatrixDataFailed(message))),
       ),
     ),
   );
+
+  @Effect()
+  updateTask$: Observable<Action> = this.actions$.pipe(
+    ofType<UpdateTask>(UPDATE_TASK),
+    mergeMap((action) =>
+      of(action.task).pipe(
+        map((task: Task) => new UpdateTaskSuccess(task)),
+        catchError((message) => of(new UpdateTaskFailed(message))),
+      ),
+    ),
+  );
 }

src/app/matrix/matrix.interfaces.ts

@@ -21,7 +21,9 @@ export class Task {
     public name: string,
     public topic: number,
     public importance: number,
-    public dueDate: Date = new Date(),
+    public dueDay: number,
+    public dueMonth: number,
+    public dueYear: number,
     public description: string = '',
     public done: boolean = false,
     public deleted: boolean = false,

src/app/matrix/matrix.reducers.spec.ts

@@ -50,7 +50,9 @@ describe('MatrixReducers', () => {
     });
 
     it('should set loading on UPDATE_TASK', () => {
-      const action: MatrixAction = new UpdateTask(new Task(1, 'test', 1, 1));
+      const action: MatrixAction = new UpdateTask(
+        new Task(1, 'test', 1, 1, 1, 12, 2020),
+      );
       const newState = matrixReducer(defaultState, action);
       expect(newState).toEqual(loadingState);
     });
@@ -143,7 +145,7 @@ describe('MatrixReducers', () => {
 
     it('should set unloading on UPDATE_TASK_SUCCESS', () => {
       const action: MatrixAction = new UpdateTaskSuccess(
-        new Task(1, 'test', 1, 1),
+        new Task(1, 'test', 1, 1, 1, 12, 2020),
       );
       const newState = matrixReducer(defaultState, action);
       expect(newState.isLoading).toEqual(false);
@@ -201,9 +203,9 @@ describe('MatrixReducers', () => {
     it('should update task on UPDATE_TASK_SUCCESS', () => {
       defaultState = {
         ...defaultState,
-        tasks: { [1]: [new Task(1, 'test', 1, 1)] },
+        tasks: [new Task(1, 'test', 1, 1, 1, 12, 2020)],
       };
-      const updatedTask = new Task(1, 'test', 7, 1);
+      const updatedTask = new Task(1, 'test', 7, 1, 1, 12, 2020);
       const action: MatrixAction = new UpdateTaskSuccess(updatedTask);
       const newState = matrixReducer(defaultState, action);
       expect(newState.tasks[1]).toContain(updatedTask);

src/app/matrix/matrix.service.mock.ts

@@ -11,7 +11,7 @@ import {
 @Injectable()
 export class MatrixMockService implements MatrixService {
   testTopic = new Topic(1, 'Test', Color.orange, true, false);
-  testTask = new Task(1, 'Test Task', 1, 23);
+  testTask = new Task(1, 'Test Task', 1, 23, 1, 12, 20);
 
   getData(): void {}
   updateTask(task: Task): void {}

src/app/matrix/task-card/task-card.component.html

@@ -1,46 +1,29 @@
-<div [class]="topic.color">
+<div [class]="topicsForSelect[task.topic].color">
   <div *ngIf="position <= 1" class="card-container">
-    <label *ngIf="task.name === ''" class="name-label" for="name"
-      >task name</label
-    >
-    <input
-      type="text"
-      class="name-input"
-      id="name"
-      required
-      value="{{ task.name }}"
-    />
-    <label for="description">description</label>
-    <textarea id="description" value="{{ task.description }}"></textarea>
-    <div class="row imp-due-date">
-      <input
-        type="number"
-        id="importance"
-        required
-        value="{{ task.importance }}"
-      />
-      <span class="separator">imp.</span>
-      <input type="number" id="day" value="{{ task.dueDate.getDay() + 1 }}" />
-      <span>.</span>
-      <input
-        type="number"
-        id="month"
-        value="{{ task.dueDate.getMonth() + 1 }}"
-      />
-      <span>.</span>
-      <span>20</span>
-      <input
-        type="number"
-        id="year"
-        value="{{ task.dueDate.getFullYear() - 2000 }}"
-      />
-    </div>
-    <div class="row topic-done">
-      <p>{{ task.topic }}</p>
-      <button class="done-btn">
-        {{ task.done ? 'mark undone' : 'mark done' }}
-      </button>
-    </div>
+    <form [formGroup]="taskForm">
+      <input formControlName="name" class="name-input" type="text" />
+      <textarea formControlName="description"></textarea>
+      <div class="row imp-due-date">
+        <input type="number" required formControlName="importance" />
+        <span class="separator">imp.</span>
+        <input type="number" formControlName="dueDay" />
+        <span>.</span>
+        <input type="number" formControlName="dueMonth" />
+        <span>.</span>
+        <span>20</span>
+        <input type="number" formControlName="dueYear" />
+      </div>
+      <div class="row topic-done">
+        <select formControlName="topic">
+          <option *ngFor="let t of topicsForSelect | keyvalue" [ngValue]="t.value.id">
+            {{ t.value.name }}
+          </option>
+        </select>
+        <button class="done-btn">
+          {{ task.done ? 'mark undone' : 'mark done' }}
+        </button>
+      </div>
+    </form>
   </div>
 
   <div *ngIf="position >= 2" class="card-small-container">

src/app/matrix/task-card/task-card.component.scss

@@ -4,9 +4,27 @@
   padding: 1rem;
   background-color: green;
   border-radius: 20px;
-  display: flex;
-  flex-direction: column;
   color: #f3f3f3;
+
+  form {
+    display: flex;
+    flex-direction: column;
+  }
+
+  input,
+  textarea {
+    color: #f3f3f3;
+    border: none;
+    background-color: transparent;
+  }
+
+  input[type='text'] {
+    font-size: 2rem;
+  }
+
+  textarea {
+    font-size: 1rem;
+  }
 }
 
 .separator {
@@ -54,16 +72,8 @@
       $color-secondary 83.94%
     );
 
-    input,
-    textarea {
-      color: #f3f3f3;
-      border: none;
-      background-color: transparent;
-    }
-
     input[type='text'],
     textarea {
-      font-size: 2rem;
       font-family: Nunito;
       border-bottom: 1px solid $color-lighter;
     }

src/app/matrix/task-card/task-card.component.ts

@@ -1,29 +1,37 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
-import { Task, Topic } from '../matrix.interfaces';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { debounceTime, map, switchMap } from 'rxjs/operators';
+import { Task, TopicDictionary } from '../matrix.interfaces';
 
 @Component({
   selector: 'app-task-card',
   templateUrl: './task-card.component.html',
   styleUrls: ['./task-card.component.scss'],
 })
-export class TaskCardComponent {
+export class TaskCardComponent implements OnInit {
   @Input() task!: Task;
-  @Input() topic!: Topic;
+  @Input() topicsForSelect: TopicDictionary = {};
   @Input() position = 0;
   @Output() changeTask = new EventEmitter<Task>();
-  taskForm = new FormGroup({
-    name: new FormControl(''),
-    description: new FormControl(''),
-    importance: new FormControl(''),
-    dueDate: new FormGroup({
-      day: new FormControl(''),
-      month: new FormControl(''),
-      year: new FormControl(''),
-    }),
-    topic: new FormControl(''),
-    done: new FormControl(''),
-  });
+  taskForm!: FormGroup;
+
+  constructor(private fb: FormBuilder) {}
+
+  ngOnInit(): void {
+    this.taskForm = this.fb.group(this.task);
+    this.taskForm.valueChanges
+      .pipe(
+        debounceTime(500),
+        map((change: Task) => {
+          console.log(change);
+          if (change) {
+            this.changeTask.emit(change);
+            return change;
+          }
+        }),
+      )
+      .subscribe();
+  }
 
   onChange(task: Task): void {
     this.changeTask.emit(task);