Make app work again

src/app/app.module.ts

@@ -22,6 +22,7 @@ import { CreateBlockComponent } from './components/modal/modals/create-block/cre
 import { RemoveBlockComponent } from './components/modal/modals/remove-block/remove-block.component';
 import { ToggleComponent } from './components/shared/toggle/toggle.component';
 import { TasksComponent } from './components/pages/page/tower/tasks/tasks.component';
+import { ColorPipe } from './pipes/color.pipe';
 
 @NgModule({
   declarations: [
@@ -41,7 +42,8 @@ import { TasksComponent } from './components/pages/page/tower/tasks/tasks.compon
     CreateBlockComponent,
     RemoveBlockComponent,
     ToggleComponent,
-    TasksComponent
+    TasksComponent,
+    ColorPipe
   ],
   imports: [BrowserModule, AppRoutingModule, FormsModule, BrowserAnimationsModule, DragDropModule],
   providers: [],

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
     );

src/app/interfaces/color.ts

@@ -0,0 +1,5 @@
+export interface IColor {
+  h: number;
+  s: number;
+  l: number;
+}

src/app/interfaces/persistance/block.ts

@@ -1,7 +1,4 @@
-import { Typed } from './typed';
-
-export interface IBlock extends Typed {
-  type: 'Block';
+export interface IBlock {
   created: Date;
   tag: string;
   isDone: boolean;

src/app/interfaces/persistance/color.ts

@@ -1,8 +0,0 @@
-import { Typed } from './typed';
-
-export interface IColor extends Typed {
-  type: 'Color';
-  h: number;
-  s: number;
-  l: number;
-}

src/app/interfaces/persistance/page.ts

@@ -1,8 +1,6 @@
 import { ITower } from './tower';
-import { Typed } from './typed';
 
-export interface IPage extends Typed {
-  type: 'Page';
+export interface IPage {
   name: string;
   towers: ITower[];
 

src/app/interfaces/persistance/tower.ts

@@ -1,9 +1,7 @@
 import { IBlock } from './block';
-import { IColor } from './color';
-import { Typed } from './typed';
+import { IColor } from '../color';
 
-export interface ITower extends Typed {
-  type: 'Tower';
+export interface ITower {
   name: string;
   blocks: IBlock[];
   baseColor: IColor;

src/app/interfaces/persistance/typed.ts

@@ -1,3 +0,0 @@
-export interface Typed {
-  type: string;
-}

src/app/interfaces/vector.ts

@@ -1,4 +0,0 @@
-export interface Vector {
-  x: number;
-  y: number;
-}

src/app/model/block.ts

@@ -1,20 +1,30 @@
 import { Serializable } from './serializable';
 import { IBlock } from '../interfaces/persistance/block';
-import { Node } from '../storage/node';
+import { Node } from '../store/node';
 
 export class Block extends Serializable implements IBlock {
   constructor(parent: Node, props: IBlock) {
     super(parent, props);
+    this.onAfterClone();
+  }
 
+  protected onAfterClone(): void {
     if (this.created.constructor.name !== 'Date') {
       this.created = new Date(this.created);
     }
+
+    // TODO: remove.
+    if (this.isDone === null || this.isDone === undefined) {
+      this.isDone = false;
+    }
+  }
+
+  changeProperties(values: Partial<IBlock>) {
+    this.changeKeys(values);
   }
 
-  // Only here to prevent ts warnings.
-  type: 'Block';
   created: Date;
   isDone: boolean;
-  description: string;
-  tag: string;
+  readonly description: string;
+  readonly tag: string;
 }

src/app/model/page.ts

@@ -1,21 +1,19 @@
 import { Serializable } from './serializable';
 import { IPage } from '../interfaces/persistance/page';
 import { Tower } from './tower';
-import { Node } from '../storage/node';
+import { Node } from '../store/node';
 
 export class Page extends Serializable implements IPage {
   constructor(parent: Node, props: IPage) {
     super(parent, props);
   }
 
-  // Only here to prevent ts warnings.
-  name: string;
+  readonly name: string;
   get towers(): Array<Tower> {
     return this.children as Array<Tower>;
   }
-  type: 'Page';
 
-  userData: {
+  readonly userData: {
     hideCreateTowerButton: boolean;
     defaultDateRange: {
       from: Date;
@@ -38,10 +36,14 @@ export class Page extends Serializable implements IPage {
       return;
     }
 
-    this.map(page => {
-      const tower = page.towers[previousIndex];
-      page.towers.splice(previousIndex, 1);
-      page.towers.splice(currentIndex, 0, tower);
+    const towers = [...this.towers];
+    const tower = towers[previousIndex];
+    towers.splice(previousIndex, 1);
+    towers.splice(currentIndex, 0, tower);
+
+    this.changeValue({
+      oldValue: this.towers,
+      newValue: towers
     });
   }
 
@@ -52,10 +54,9 @@ export class Page extends Serializable implements IPage {
     } while (30 <= hue && hue <= 200);
 
     new Tower(this, {
-      type: 'Tower',
       name,
       blocks: [],
-      baseColor: { h: hue, s: 100, l: 50, type: 'Color' }
+      baseColor: { h: hue, s: 100, l: 50 }
     });
   }