feat: allow updating task title in task summary table

johannesjo · Sep 18, 2019 · 11a06ce · 11a06ce
1 parent 0bc9b52
commit 11a06ce
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 8 deletions.
diff --git a/src/app/features/tasks/task-summary-table/task-summary-table.component.html b/src/app/features/tasks/task-summary-table/task-summary-table.component.html
@@ -14,7 +14,11 @@
           <mat-icon *ngIf="task.repeatCfgId"
                     class="repeat-task-icon">repeat
           </mat-icon>
-          <span *ngIf="task.parentId">–</span> {{task.title}}
+          <span *ngIf="task.parentId">–</span>
+          <inline-input style="display: inline-block"
+                        (changed)="updateTaskTitle(task, $event)"
+                        [value]="task.title">
+          </inline-input>
         </div>
       </td>
     </ng-container>

diff --git a/src/app/features/tasks/task-summary-table/task-summary-table.component.scss b/src/app/features/tasks/task-summary-table/task-summary-table.component.scss
@@ -8,13 +8,6 @@
   }
 
   td {
-    .isDone {
-      text-decoration: line-through;
-    }
-
-    .isSubTask {
-      font-style: italic;
-    }
   }
 
   th {
@@ -92,3 +85,40 @@
   transform: rotate(45deg);
   opacity: 0.7;
 }
+
+.task-title {
+  display: flex;
+  //border: 1px solid orange;
+  text-align: left;
+  align-items: center;
+
+  &.isDone ::ng-deep .value-wrapper {
+    text-decoration: line-through;
+  }
+
+  &.isSubTask {
+    font-style: italic;
+  }
+
+
+  > span {
+    text-decoration: none !important;
+    display: block;
+    padding-left: $s*1;
+  }
+
+  inline-input {
+    flex-grow: 1;
+    text-align: left;
+    display: block;
+  }
+
+  ::ng-deep .inline-input-wrapper {
+    padding: $s;
+
+    input {
+      width: 100%;
+      text-align: left;
+    }
+  }
+}
diff --git a/src/app/features/tasks/task-summary-table/task-summary-table.component.ts b/src/app/features/tasks/task-summary-table/task-summary-table.component.ts
@@ -30,6 +30,12 @@ export class TaskSummaryTableComponent {
     });
   }
 
+  updateTaskTitle(task: Task, newVal: string) {
+    this._taskService.update(task.id, {
+      title: newVal
+    });
+  }
+
   toggleTaskDone(task: Task) {
     task.isDone
       ? this._taskService.setUnDone(task.id)