Added sortablejs package, adding window rearrangement functionality.

Updated tslint configurations. Closes #146.
altair-graphql · Jan 21, 2018 · e2f1842 · e2f1842
1 parent 2ed6422
commit e2f1842
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -53,6 +53,7 @@
     "@ngx-translate/core": "^9.0.2",
     "@ngx-translate/http-loader": "^2.0.1",
     "@webcomponents/custom-elements": "^1.0.6",
+    "angular-sortablejs": "^2.5.1",
     "balloon-css": "^0.5.0",
     "body-parser": "^1.17.1",
     "bootstrap": "4.0.0-alpha.5",
@@ -78,6 +79,7 @@
     "ngrx-store-localstorage": "^0.3.0",
     "ngx-electron": "^1.0.4",
     "rxjs": "^5.5.6",
+    "sortablejs": "^1.7.0",
     "subscriptions-transport-ws": "^0.9.5",
     "to-snake-case": "^1.0.0",
     "uuid": "^3.1.0",

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -17,6 +17,7 @@ import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 
 import { ClarityModule } from 'clarity-angular';
+import { SortablejsModule } from 'angular-sortablejs';
 import { SharedModule } from './shared/shared.module';
 
 import { reducer, metaReducers, reducerToken, reducerProvider } from './reducers';
@@ -71,6 +72,7 @@ const providers = [
     HttpClientModule,
     SharedModule,
     ClarityModule.forRoot(),
+    SortablejsModule.forRoot({ animation: 150 }),
     ComponentModule,
     DocViewerModule,
     StoreModule.forRoot(reducerToken, { metaReducers }),

diff --git a/src/app/components/window-switcher/window-switcher.component.html b/src/app/components/window-switcher/window-switcher.component.html
@@ -1,4 +1,4 @@
-<div class="header-nav window-switcher__container">
+<div class="header-nav window-switcher__container" sortablejs [sortablejsOptions]="sortableOptions">
   <div
     class="nav-link nav-text window-switcher _track_me"
     *ngFor="let windowId of windowIds; let index = index;"

diff --git a/src/app/components/window-switcher/window-switcher.component.spec.ts b/src/app/components/window-switcher/window-switcher.component.spec.ts
@@ -1,6 +1,7 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { TranslateModule } from '@ngx-translate/core';
+import { SortablejsModule } from 'angular-sortablejs';
 import { WindowSwitcherComponent } from './window-switcher.component';
 
 describe('WindowSwitcherComponent', () => {
@@ -11,7 +12,8 @@ describe('WindowSwitcherComponent', () => {
     TestBed.configureTestingModule({
       declarations: [ WindowSwitcherComponent ],
       imports: [
-        TranslateModule.forRoot()
+        TranslateModule.forRoot(),
+        SortablejsModule.forRoot({})
       ]
     })
     .compileComponents();

diff --git a/src/app/components/window-switcher/window-switcher.component.ts b/src/app/components/window-switcher/window-switcher.component.ts
@@ -28,9 +28,16 @@ export class WindowSwitcherComponent implements OnInit {
   windowNameEditing = null;
   maxWindowCount = config.max_windows;
 
-  constructor() { }
+  sortableOptions = {};
+
+  constructor() {}
 
   ngOnInit() {
+    this.sortableOptions = {
+      onUpdate: (event: any) => {
+        this.moveWindow(event.oldIndex, event.newIndex);
+      }
+    };
   }
 
   editWindowNameInput(windowId, wTitle) {

diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
@@ -3,16 +3,19 @@ import { CommonModule } from '@angular/common';
 
 import { TranslateModule } from '@ngx-translate/core';
 import { NgxElectronModule } from 'ngx-electron';
+import { SortablejsModule } from 'angular-sortablejs';
 
 @NgModule({
   imports: [
     CommonModule,
     TranslateModule,
-    NgxElectronModule
+    NgxElectronModule,
+    SortablejsModule
   ],
   exports: [
     TranslateModule,
-    NgxElectronModule
+    NgxElectronModule,
+    SortablejsModule
   ]
 })
 export class SharedModule { }
diff --git a/tslint.json b/tslint.json
@@ -86,7 +86,6 @@
         "variable-declaration": "nospace"
       }
     ],
-    "typeof-compare": true,
     "unified-signatures": true,
     "variable-name": false,
     "whitespace": [
@@ -108,9 +107,6 @@
     "use-life-cycle-interface": true,
     "use-pipe-transform-interface": true,
     "component-class-suffix": true,
-    "directive-class-suffix": true,
-    "no-access-missing-member": true,
-    "templates-use-public": true,
-    "invoke-injectable": true
+    "directive-class-suffix": true
   }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -493,6 +493,10 @@ anchor-markdown-header@^0.5.5:
   dependencies:
     emoji-regex "~6.1.0"
 
+angular-sortablejs@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/angular-sortablejs/-/angular-sortablejs-2.5.1.tgz#e4e83d90598271ae22a99a87e7a3278bde7f7c7f"
+
 ansi-align@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-2.0.0.tgz#c36aeccba563b89ceb556f3690f0b1d9e3547f7f"
@@ -8339,6 +8343,10 @@ sort-keys@^1.0.0:
   dependencies:
     is-plain-obj "^1.0.0"
 
+sortablejs@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.7.0.tgz#80a2b2370abd568e1cec8c271131ef30a904fa28"
+
 source-list-map@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.0.tgz#aaa47403f7b245a92fbc97ea08f250d6087ed085"