Make app work again

src/app/components/modal/modals/create-block/create-block.component.html

@@ -24,7 +24,7 @@
   <app-toggle
     [beforeText]="'This task hasn\'t been finished yet'"
     [afterText]="'Goal already accomplished'"
-    [default]="!modalService.active.input.isTask"
+    [default]="isDone"
     (value)="isDone = $event"
   ></app-toggle>
 </div>

src/app/components/modal/modals/create-block/create-block.component.ts

@@ -9,7 +9,7 @@ import { ModalService } from '../../../../services/modal.service';
 export class CreateBlockComponent {
   selected: string;
   description: string = null;
-  isDone: boolean;
+  isDone: boolean = !this.modalService.active.input.isTask;
 
   constructor(public modalService: ModalService) {}
 

src/app/components/modal/modals/edit-block/edit-block.component.html

@@ -8,7 +8,7 @@
   <app-select-add
     class="select"
     [options]="modalService.active.input.options"
-    [default]="modalService.active.input.options[0]"
+    [default]="modalService.active.input.default"
     [alwaysDropShadow]="true"
     [onlyShadowBorder]="true"
     [placeholder]="'Tag this item…'"

src/app/components/modal/modals/remove-tower/remove-tower.component.html

@@ -6,7 +6,7 @@
 
   <p>
     You are trying to remove
-    <span [ngStyle]="{ color: modalService.active.input.baseColor.toString() }">{{
+    <span [ngStyle]="{ color: modalService.active.input.baseColor | color }">{{
       modalService.active.input.name ? modalService.active.input.name : 'an unnamed tower'
     }}</span
     >.

src/app/components/pages/page/tower/block/block.component.html

@@ -1 +1 @@
-<div [ngStyle]="{ 'background-color': block.color }" (click)="handleClick()"></div>
+<div [ngStyle]="{ 'background-color': block.color | color }" (click)="handleClick()"></div>

src/app/components/pages/page/tower/block/block.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input } from '@angular/core';
 import { Block } from '../../../../../model/block';
 import { ModalService } from '../../../../../services/modal.service';
-import { Tower } from '../../../../../model/tower';
+import { ColoredBlock, Tower } from '../../../../../model/tower';
 
 @Component({
   selector: 'app-block',
@@ -9,7 +9,7 @@ import { Tower } from '../../../../../model/tower';
   styleUrls: ['./block.component.scss']
 })
 export class BlockComponent {
-  @Input() block: Block;
+  @Input() block: ColoredBlock;
   @Input() tower: Tower;
 
   constructor(private modalService: ModalService) {}
@@ -22,9 +22,12 @@ export class BlockComponent {
         description: this.block.description,
         isDone: this.block.isDone
       });
-      this.block.tag = selected;
-      this.block.description = description;
-      this.block.isDone = isDone;
+      console.log(description);
+      this.block.changeProperties({
+        tag: selected,
+        description,
+        isDone
+      });
     } catch {
       // pass
     }

src/app/components/pages/page/tower/tasks/tasks.component.html

@@ -6,8 +6,8 @@
     {{ tasks.length == 0 ? '​' : tasks.length == 1 ? 'task' : 'tasks' }}
   </p>
   <div class="all-task" #allTask [ngStyle]="{ height: (isOpen ? allTask?.scrollHeight : 0) + 'px' }">
-    <div class="task-container" *ngFor="let task of tasks" [ngStyle]="{ color: toHslString(task.color) }">
-      <div [ngStyle]="{ 'background-color': toHslString(task.color) }"></div>
+    <div class="task-container" *ngFor="let task of tasks" [ngStyle]="{ color: task.color | color }">
+      <div [ngStyle]="{ 'background-color': task.color | color }"></div>
       <p (click)="handleClick(task)" [innerText]="task.description ? task.description : 'unknown'"></p>
     </div>
   </div>

src/app/components/pages/page/tower/tasks/tasks.component.ts

@@ -3,8 +3,8 @@ import { Block } from '../../../../../model/block';
 import { Tower } from '../../../../../model/tower';
 import { ModalService } from '../../../../../services/modal.service';
 import { CancelService } from '../../../../../services/cancel.service';
-import { toHslString } from '../../../../../utils/color';
-import { IColor } from '../../../../../interfaces/persistance/color';
+import { IColor } from '../../../../../interfaces/color';
+import { IBlock } from '../../../../../interfaces/persistance/block';
 
 @Component({
   selector: 'app-tasks',
@@ -12,8 +12,6 @@ import { IColor } from '../../../../../interfaces/persistance/color';
   styleUrls: ['./tasks.component.scss']
 })
 export class TasksComponent implements OnInit {
-  readonly toHslString = toHslString;
-
   @Input() tasks: Array<Block & { color: IColor }>;
   @Input() tower: Tower;
 
@@ -48,12 +46,16 @@ export class TasksComponent implements OnInit {
         isDone: block.isDone
       });
 
-      block.tag = selected;
-      block.description = description;
+      const change: Partial<IBlock> = {
+        tag: selected,
+        description,
+        isDone
+      };
       if (!block.isDone && isDone) {
-        block.created = new Date();
+        change.created = new Date();
       }
-      block.isDone = isDone;
+
+      block.changeProperties(change);
     } catch {
       // pass
     }

src/app/components/pages/page/tower/tower.component.html

@@ -18,7 +18,7 @@
     id="tower-name"
     type="text"
     placeholder="name…"
-    [(ngModel)]="tower.name"
-    [ngStyle]="{ color: toHslString(tower?.baseColor) }"
+    [(ngModel)]="towerName"
+    [ngStyle]="{ color: tower?.baseColor | color }"
   />
 </div>

src/app/components/pages/page/tower/tower.component.ts

@@ -1,9 +1,6 @@
 import { Component, Input } from '@angular/core';
-import { Tower } from '../../../../model/tower';
+import { ColoredBlock, Tower } from '../../../../model/tower';
 import { ModalService } from '../../../../services/modal.service';
-import { Block } from '../../../../model/block';
-import { IColor } from '../../../../interfaces/persistance/color';
-import { toHslString } from '../../../../utils/color';
 
 @Component({
   selector: 'app-tower',
@@ -11,7 +8,13 @@ import { toHslString } from '../../../../utils/color';
   styleUrls: ['./tower.component.scss']
 })
 export class TowerComponent {
-  readonly toHslString = toHslString;
+  get towerName(): string {
+    return this.tower.name;
+  }
+
+  set towerName(value: string) {
+    this.tower.changeName(value);
+  }
 
   @Input() set dateRange(value: { from: Date; to: Date }) {
     if (this.dateRange !== undefined && this.dateRange.from === value.from && this.dateRange.to === value.to) {
@@ -26,13 +29,13 @@ export class TowerComponent {
 
   public constructor(private modalService: ModalService) {}
 
-  get drawableBlocks(): Array<Block & { color: IColor }> {
+  get drawableBlocks(): Array<ColoredBlock> {
     return this.tower.coloredBlocks.filter(
       block => this.dateRange.from <= block.created && block.created <= this.dateRange.to && block.isDone
     );
   }
 
-  get tasks(): Array<Block & { color: IColor }> {
+  get tasks(): Array<ColoredBlock> {
     return this.tower.coloredBlocks.filter(
       block => this.dateRange.from <= block.created && block.created <= this.dateRange.to && !block.isDone
     );