From d5eada0d8fa265659c895dbb22d23f6cf655da92 Mon Sep 17 00:00:00 2001
From: "mathias.chouet" <mathias.chouet@irstea.fr>
Date: Thu, 22 Aug 2019 10:21:41 +0200
Subject: [PATCH] Fix #206 - drang and drop calculator tabs
---
package-lock.json | 12 ++++++------
package.json | 4 ++--
src/app/app.component.html | 26 +++++++++++++++-----------
src/app/app.component.ts | 11 +++++------
src/app/app.module.ts | 5 ++++-
5 files changed, 32 insertions(+), 26 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 2b8fccc97..fa131b8bf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -267,9 +267,9 @@
}
},
"@angular/cdk": {
- "version": "8.1.1",
- "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-8.1.1.tgz",
- "integrity": "sha512-5hBmhrHf9+WjGVIT8gbhT0Nh37BAjgI2TGRkt1o4qX8cG+1B6gU2MxM+CDJ7PhxSJi9lW93lq2AMuWwnRSllyg==",
+ "version": "8.1.3",
+ "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-8.1.3.tgz",
+ "integrity": "sha512-+DOS6x05/nNdnoRmEi3bgQxKym34PeCRGD6dimdw0l7ZgM57qhlaBWo0dXB7QSyR9E44uVT91e4h8ye+/ne1DQ==",
"requires": {
"parse5": "^5.0.0",
"tslib": "^1.7.1"
@@ -449,9 +449,9 @@
"dev": true
},
"@angular/material": {
- "version": "8.1.1",
- "resolved": "https://registry.npmjs.org/@angular/material/-/material-8.1.1.tgz",
- "integrity": "sha512-45aaxKuLTrthzhAhG2+OY86wafuRBteZcRjDG7rKZ3Cc3KteUp5QwAi+QbhHzs4O3WXLWTAmuLYJelRqRqqw7g==",
+ "version": "8.1.3",
+ "resolved": "https://registry.npmjs.org/@angular/material/-/material-8.1.3.tgz",
+ "integrity": "sha512-qZVWrJ/EO1y0lJCy7pe536RlYiih3p3fQzj7tgus7JdOpspyF+zBLzn8gNrdAFACXpVWwq2kLorieoR3BB47ZQ==",
"requires": {
"tslib": "^1.7.1"
}
diff --git a/package.json b/package.json
index f22045a3d..bba9abdf2 100644
--- a/package.json
+++ b/package.json
@@ -35,13 +35,13 @@
"private": true,
"dependencies": {
"@angular/animations": "^8.1.2",
- "@angular/cdk": "^8.1.1",
+ "@angular/cdk": "^8.1.3",
"@angular/common": "^8.1.2",
"@angular/compiler": "^8.1.2",
"@angular/core": "^8.1.2",
"@angular/flex-layout": "^8.0.0-beta.26",
"@angular/forms": "^8.1.2",
- "@angular/material": "^8.1.1",
+ "@angular/material": "^8.1.3",
"@angular/platform-browser": "^8.1.2",
"@angular/platform-browser-dynamic": "^8.1.2",
"@angular/router": "^8.1.2",
diff --git a/src/app/app.component.html b/src/app/app.component.html
index e482e6042..b735b02bf 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -40,17 +40,21 @@
<!-- calculators list as a tabs bar-->
<div id="tabs-container" [hidden]="! tabsFitInNavbar">
- <button mat-raised-button color="primary" *ngFor="let c of calculators" class="" [title]="c.title"
- [routerLink]="['/calculator/',c.uid]" [color]="c.active ? '' : 'primary'"
- (click)="setActiveCalc(c.uid)" (mouseup)="onMouseUp($event, c.uid)"
- [ngClass]="['calculator-button', 'calculator-uid-' + c.uid, c.active ? 'active' : '' ]">
-
- <span class="calc-name">
- {{ c.title }}
- </span>
- <span class="calc-type" [innerHTML]="'(' + getCalculatorLabel(c.type) + ')'"></span>
- </button>
-
+ <div cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="dropCalcButton($event)">
+
+ <button mat-raised-button color="primary" *ngFor="let c of calculators" class="" [title]="c.title"
+ [routerLink]="['/calculator/',c.uid]" [color]="c.active ? '' : 'primary'"
+ (click)="setActiveCalc(c.uid)" (mouseup)="onMouseUp($event, c.uid)"
+ [ngClass]="['calculator-button', 'calculator-uid-' + c.uid, c.active ? 'active' : '' ]"
+ cdkDragLockAxis="x" cdkDrag>
+
+ <span class="calc-name">
+ {{ c.title }}
+ </span>
+ <span class="calc-type" [innerHTML]="'(' + getCalculatorLabel(c.type) + ')'"></span>
+ </button>
+
+ </div>
</div>
<button *ngIf="currentRoute != '/list'" mat-icon-button id="new-calculator" routerLink="/list"
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 41b91040f..b0dd4500e 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -5,6 +5,7 @@ import { MatIconRegistry } from "@angular/material/icon";
import { MatSidenav } from "@angular/material/sidenav";
import { MatToolbar } from "@angular/material/toolbar";
import { DomSanitizer } from "@angular/platform-browser";
+import { CdkDragDrop, moveItemInArray } from "@angular/cdk/drag-drop";
import { Observer, jalhydDateRev, jalhydVersion, CalculatorType, Session } from "jalhyd";
@@ -425,12 +426,6 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
this.setActiveCalc(id);
}
- private toFirstCalc() {
- if (this.calculators.length > 0) {
- this.toCalc(this.calculators[0].uid);
- }
- }
-
/**
* récupération du composant affiché par le routeur
*/
@@ -595,6 +590,10 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
});
}
+ public dropCalcButton(event: CdkDragDrop<string[]>) {
+ moveItemInArray(this.calculators, event.previousIndex, event.currentIndex);
+ }
+
/**
* détection de la fermeture de la page/navigateur et demande de confirmation
*/
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 9deea03e4..e1fb55a8b 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -27,7 +27,9 @@ import {
} from "@angular/material";
import { MaterialFileInputModule } from "ngx-material-file-input";
-import {TableModule} from "primeng/components/table/table";
+import { DragDropModule } from "@angular/cdk/drag-drop";
+
+import { TableModule } from "primeng/components/table/table";
import { KonamiModule } from "ngx-konami";
import { FlexLayoutModule } from "@angular/flex-layout";
@@ -118,6 +120,7 @@ const appRoutes: Routes = [
BrowserAnimationsModule,
BrowserModule,
ChartModule,
+ DragDropModule,
HttpClientModule,
FlexLayoutModule,
MatBadgeModule,
--
GitLab