refactor: change path to design to textare for #84

phodal · Apr 23, 2020 · 82b3fff · 82b3fff
1 parent 474b7bf
commit 82b3fff
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 51 deletions.
diff --git a/src/app/presentation/design/design.component.spec.ts b/src/app/presentation/design/design.component.spec.ts
@@ -6,6 +6,7 @@ import { DesignModule } from './design.module';
 import { CustomMaterialModule } from '../../shared/custom-material.module';
 import { LedgeRenderModule } from '@ledge-framework/render';
 import { RouterTestingModule } from '@angular/router/testing';
+import { FormsModule } from '@angular/forms';
 
 describe('DesignComponent', () => {
   let component: DesignComponent;
@@ -14,6 +15,7 @@ describe('DesignComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [
+        FormsModule,
         SharedModule,
         CustomMaterialModule,
         DesignModule,

diff --git a/src/app/presentation/design/design.module.ts b/src/app/presentation/design/design.module.ts
@@ -7,11 +7,13 @@ import { SharedModule } from '../../shared/shared.module';
 import { DesignComponent } from './design.component';
 import { PathComponent } from './path/path.component';
 import { CustomMaterialModule } from '../../shared/custom-material.module';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [DesignComponent, PathComponent],
   imports: [
     CommonModule,
+    FormsModule,
     SharedModule,
     CustomMaterialModule,
     DragulaModule.forRoot(),

diff --git a/src/app/presentation/design/path/path.component.html b/src/app/presentation/design/path/path.component.html
@@ -33,17 +33,16 @@ <h2>{{pipe.title}}</h2>
              [(dragulaModel)]="pipe.items"
              [ngStyle]="getContainerStyle(pipe)">
 
-          <div
+          <textarea
             class="editable"
             #itemElement
             id="pipe{{i}}_child{{j}}"
-            (dblclick)="enableEdit(i, j)"
             [ngStyle]="getEditableStyle()"
-            (keydown.enter)="updateItem(i, j, $event)"
-            ngDefaultControl
+            (change)="updateItem(i, j, $event)"
+            autocomplete="off"
             *ngFor="let item of pipe.items;let j = index">
             {{item}}
-          </div>
+          </textarea>
         </div>
       </div>
     </div>

diff --git a/src/app/presentation/design/path/path.component.scss b/src/app/presentation/design/path/path.component.scss
@@ -11,7 +11,7 @@
   }
 
   .header {
-    margin-top: 1em;
+    top: 1em;
 
     h3 {
       text-align: center;
@@ -20,21 +20,24 @@
 
   .path-container {
     padding: 0;
-    margin-right: 6px;
-    margin-top: 12px;
-    background-color: rgba(255, 255, 255, 0.2);
     max-width: 100%;
     max-height: 180px;
     width: 100%;
     color: #fff;
     line-height: 1.3em;
     border: 1px dashed #fff;
     border-radius: 6px;
-    font-weight: normal;
+    display: flex;
 
-    div {
+    textarea {
+      resize: none;
       height: 150px;
       max-height: 150px;
+      display: block;
+      background-color: rgba(255, 255, 255, 0.3);
+      color: #fff;
+      border: none;
+      margin: 5px;
       width: 10%;
       max-width: 10%;
     }
@@ -44,37 +47,10 @@
     background-color: rgba(0, 0, 0, 0.2);
   }
 
-  /*
-   * note that styling gu-mirror directly is a bad practice because it's too generic.
-   * you're better off giving the draggable elements a unique class and styling that directly!
-   */
-  .path-container > div,
-  .gu-mirror {
-    margin: 10px;
-    padding: 5px;
-    background-color: rgba(0, 0, 0, 0.2);
-    transition: opacity 0.4s ease-in-out;
-  }
-
   .path-container > div.empty {
     background-color: rgba(0, 0, 0, 0.05);
   }
 
-  .path-container > div {
-    display: inline-block;
-    overflow-y: auto;
-    cursor: move;
-    cursor: grab;
-    cursor: -moz-grab;
-    cursor: -webkit-grab;
-  }
-
-  .gu-mirror {
-    cursor: grabbing;
-    cursor: -moz-grabbing;
-    cursor: -webkit-grabbing;
-  }
-
   #header {
     height: 80px;
     text-align: center;

diff --git a/src/app/presentation/design/path/path.component.spec.ts b/src/app/presentation/design/path/path.component.spec.ts
@@ -3,14 +3,15 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { PathComponent } from './path.component';
 import { SharedModule } from '../../../shared/shared.module';
 import { DesignModule } from '../design.module';
+import { FormsModule } from '@angular/forms';
 
 describe('PathComponent', () => {
   let component: PathComponent;
   let fixture: ComponentFixture<PathComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [SharedModule, DesignModule],
+      imports: [FormsModule, SharedModule, DesignModule],
       declarations: [PathComponent],
     }).compileComponents();
   }));

diff --git a/src/app/presentation/design/path/path.component.ts b/src/app/presentation/design/path/path.component.ts
@@ -125,6 +125,7 @@ export class PathComponent implements OnInit {
     }
 
     const that = this;
+
     function removeLastItem(items) {
       // tslint:disable-next-line:prefer-for-of
       for (let i = 0; i < items.length; i++) {
@@ -201,22 +202,11 @@ export class PathComponent implements OnInit {
   }
 
   updateItem(i: number, j: number, $event: Event) {
-    const value = ($event.target as any).innerText;
+    const value = ($event.target as any).value;
     this.pipeData[i].items[j] = value;
     this.storage.set('ledge.path', this.pipeData).subscribe(() => {});
   }
 
-  enableEdit(i: number, j: number) {
-    const elementId = `pipe${i}_child${j}`;
-    const filterElements = this.itemElements.filter((el) => {
-      return el.nativeElement.id === elementId;
-    });
-    if (filterElements.length > 0) {
-      const element = filterElements[0];
-      this.renderer.setProperty(element.nativeElement, 'contentEditable', true);
-    }
-  }
-
   resetAll() {
     this.pipeData = JSON.parse(JSON.stringify(originPipeLine));
     this.maxLength = this.getMaxLength(originPipeLine);