feat: fix drag issue

phodal · Mar 11, 2020 · b4285c7 · b4285c7
1 parent 6a51778
commit b4285c7
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 9 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -11,7 +11,7 @@ import { AtomDetailsComponent } from './features/atom-details/atom-details.compo
 import { FooterComponent } from './features/footer/footer.component';
 import { AppPhaseComponent } from './features/app-phase/app-phase.component';
 import { AppWikiComponent } from './features/app-wiki/app-wiki.component';
-import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { HttpClientModule } from '@angular/common/http';
 import { HomeComponent } from './presentation/home/home.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { CustomMaterialModule } from './shared/custom-material.module';
@@ -21,7 +21,8 @@ import { DesignComponent } from './presentation/design/design.component';
 import { PractiseComponent } from './presentation/practise/practise.component';
 import { ManualComponent } from './presentation/manual/manual.component';
 import { PathComponent } from './features/path/path.component';
-import {FormsModule} from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { DragulaModule } from 'ng2-dragula';
 
 @NgModule({
   declarations: [
@@ -50,6 +51,7 @@ import {FormsModule} from '@angular/forms';
     BrowserAnimationsModule,
     FormsModule,
     CustomMaterialModule,
+    DragulaModule.forRoot(),
   ],
   providers: [Title],
   bootstrap: [AppComponent]

diff --git a/src/app/features/path/path.component.html b/src/app/features/path/path.component.html
@@ -27,13 +27,15 @@ <h2>{{pipe.title}}</h2>
         <div class='container'
              *ngFor="let pipe of pipeData;let i = index"
              id="{{i}}_pipe"
+             dragula="ITEMS"
+             [(dragulaModel)]="pipe.items"
              [ngStyle]="getContainerStyle(pipe)">
 
           <div
             class="editable"
             #itemElement
             id="pipe{{i}}_child{{j}}"
-            (click)="enableEdit(i, j)"
+            (dblclick)="enableEdit(i, j)"
             [ngStyle]="getEditableStyle()"
             (keydown.enter)="updateItem(i, j, $event)"
             ngDefaultControl

diff --git a/src/app/features/path/path.component.ts b/src/app/features/path/path.component.ts
@@ -176,7 +176,7 @@ export class PathComponent implements OnInit {
     const filterElements = this.itemElements.filter((el) => {
       return el.nativeElement.id === elementId;
     });
-    if (filterElements.length > 0 ) {
+    if (filterElements.length > 0) {
       const element = filterElements[0];
       this.renderer.setProperty(element.nativeElement, 'contentEditable', true);
     }

diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
@@ -5,7 +5,6 @@ import { RouterModule } from '@angular/router';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { MarkdownRenderComponent } from './components/markdown-render/markdown-render.component';
 import { MarkdownModule } from 'ngx-markdown';
-import {DragulaModule} from 'ng2-dragula';
 
 @NgModule({
   imports: [
@@ -14,8 +13,7 @@ import {DragulaModule} from 'ng2-dragula';
     FormsModule,
     HttpClientModule,
     ReactiveFormsModule,
-    MarkdownModule.forRoot({ loader: HttpClient }),
-    DragulaModule.forRoot(),
+    MarkdownModule.forRoot({ loader: HttpClient })
   ],
   declarations: [
     MarkdownRenderComponent,
@@ -26,8 +24,7 @@ import {DragulaModule} from 'ng2-dragula';
     CommonModule,
     FormsModule,
     ReactiveFormsModule,
-    MarkdownRenderComponent,
-    DragulaModule
+    MarkdownRenderComponent
   ],
   entryComponents: []
 })