From 3d2e1f1e72969f267784c177edbccb774aa37579 Mon Sep 17 00:00:00 2001
From: Phodal Huang <h@phodal.com>
Date: Wed, 11 Mar 2020 11:32:52 +0800
Subject: [PATCH] feat: add default pipe line

---
 src/app/app.module.ts                     |  3 ++-
 src/app/features/path/path.component.html | 12 +++++++--
 src/app/features/path/path.component.ts   | 32 ++++++++++++++++++++++-
 3 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 173ce0cb..4bd22dde 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -20,8 +20,8 @@ import { PatternComponent } from './presentation/pattern/pattern.component';
 import { DesignComponent } from './presentation/design/design.component';
 import { PractiseComponent } from './presentation/practise/practise.component';
 import { ManualComponent } from './presentation/manual/manual.component';
-import { MarkdownModule } from 'ngx-markdown';
 import { PathComponent } from './features/path/path.component';
+import {FormsModule} from '@angular/forms';
 
 @NgModule({
   declarations: [
@@ -48,6 +48,7 @@ import { PathComponent } from './features/path/path.component';
     AppRoutingModule,
     HttpClientModule,
     BrowserAnimationsModule,
+    FormsModule,
     CustomMaterialModule,
   ],
   providers: [Title],
diff --git a/src/app/features/path/path.component.html b/src/app/features/path/path.component.html
index f0955704..b396c98d 100644
--- a/src/app/features/path/path.component.html
+++ b/src/app/features/path/path.component.html
@@ -18,7 +18,8 @@ <h2>Path to Production</h2>
   <div class="page">
     <div class="path">
       <div id="pipe-header">
-        <div class="pipe-header" *ngFor="let pipe of pipeData;let i = index" id="{{i}}_header" [ngStyle]="getHeaderHeight()">
+        <div class="pipe-header" *ngFor="let pipe of pipeData;let i = index" id="{{i}}_header"
+             [ngStyle]="getHeaderHeight()">
           <h2>{{pipe.title}}</h2>
         </div>
       </div>
@@ -27,7 +28,14 @@ <h2>{{pipe.title}}</h2>
              id="{{i}}_pipe"
              [ngStyle]="getContainerStyle(pipe)">
 
-          <div class="editable"  [ngStyle]="getEditableStyle()" *ngFor="let item of pipe.items;let j = index" id="{{i}}_pipe_child{{j}}">
+          <div
+            class="editable"
+            contenteditable="true"
+            [ngStyle]="getEditableStyle()"
+            (change)="changeItem()"
+            [ngModel]="pipeData[i][j]"
+            ngDefaultControl
+            *ngFor="let item of pipe.items;let j = index" id="{{i}}_pipe_child{{j}}">
             {{item}}
           </div>
         </div>
diff --git a/src/app/features/path/path.component.ts b/src/app/features/path/path.component.ts
index a288542b..7d52b4d6 100644
--- a/src/app/features/path/path.component.ts
+++ b/src/app/features/path/path.component.ts
@@ -79,6 +79,32 @@ export class PathComponent implements OnInit {
 
   ngOnInit(): void {
     this.maxLength = this.getMaxLength(this.pipeData);
+    this.storage.get('ledge.path').subscribe((value: Item[]) => {
+      if (!!value) {
+        this.pipeData = value;
+        this.fillDefaultValue();
+      }
+    });
+
+    this.fillDefaultValue();
+  }
+
+  private fillDefaultValue() {
+    this.pipeData = this.fillArrayWithEmpty(this.pipeData);
+  }
+
+  fillArrayWithEmpty(items: Item[]) {
+    // tslint:disable-next-line:prefer-for-of
+    for (let i = 0; i < items.length; i++) {
+      const itemLength = items[i].items.length;
+      for (let j = 0; j <= this.maxLength; j++) {
+        if (j > itemLength) {
+          items[i].items[j - 1] = '';
+        }
+      }
+    }
+
+    return items;
   }
 
   addColumn() {
@@ -116,7 +142,6 @@ export class PathComponent implements OnInit {
     };
   }
 
-
   getHeaderHeight() {
     return {
       height: this.getContainerHeightWidth().itemWidth + 20 + 12 + 'px'
@@ -135,4 +160,9 @@ export class PathComponent implements OnInit {
 
     return maxLength;
   }
+
+  changeItem() {
+    this.storage.set('ledge.path', this.pipeData).subscribe(() => {
+    });
+  }
 }