Nouvelles cases cliquables, sélection en bleu, suppression des bordures de...

Nouvelles cases cliquables, sélection en bleu, suppression des bordures de cases sur Firefox (ctrl+clic)

src/app/components/pab-table/pab-table.component.html

@@ -14,6 +14,7 @@
             <tr>
                 <th *ngFor="let h of headers"
                   (click)="toggleSelection(h, $event)"
+                  (mousedown)="preventCtrlClickBorder($event)"
                   [attr.rowspan]="h.rowspan ? h.rowspan : null" [attr.colspan]="h.colspan ? h.colspan : null"
                   [class.selectable-cell]="isSelectable(h)" [class.selected-cell]="isSelected(h)">
 
@@ -21,7 +22,13 @@
                 </th>
             </tr>
             <tr>
-                <th *ngFor="let col of columns">{{ col.title }}</th>
+                <th *ngFor="let col of columns"
+                  (click)="toggleSelection(col, $event)"
+                  (mousedown)="preventCtrlClickBorder($event)"
+                  [class.selectable-cell]="isSelectable(col)" [class.selected-cell]="isSelected(col)">
+
+                    {{ col.title }}
+                </th>
             </tr>
         </ng-template>
 
@@ -29,6 +36,7 @@
             <tr [class.selected-row]="isSelected(row)">
                 <td *ngFor="let cell of row.cells"
                   (click)="toggleSelection(cell, $event)"
+                  (mousedown)="preventCtrlClickBorder($event)"
                   [ngClass]="cell.class"
                   [class.editable-cell]="hasModel(cell)" [class.readonly-cell]="! hasModel(cell)"
                   [class.selectable-cell]="isSelectable(cell)" [class.selected-cell]="isSelected(cell) && ! isSelected(row)"

src/app/components/pab-table/pab-table.component.scss

@@ -29,22 +29,17 @@ mat-card-content {
 @import "../../../theme.scss";
 
 .editable-cell-bg {
-    // background-color: #e9f5ff;
-    // background-color: yellow;
     @extend .bg-accent-extralight;
 }
 .selected-row-bg {
-    // background-color: green;
     // @extend .bg-warn-extralight;
-    @extend .bg-warn-extralight;
+    @extend .bg-accent-extralight;
 }
 .selected-cell-bg {
-    // background-color: red;
     // @extend .bg-warn-extralight;
-    @extend .bg-warn-extralight;
+    @extend .bg-accent-extralight;
 }
 .selected-editable-cell-bg {
-    // background-color: red;
     @extend .bg-accent-verylight;
 }
 

src/app/components/pab-table/pab-table.component.ts

@@ -221,9 +221,16 @@ export class PabTableComponent implements /* DoCheck, AfterViewInit, */ OnInit {
             }
             this.latestClickedCell = cell;
             // @TODO
-            /* $event.preventDefault();
+            $event.preventDefault();
             $event.stopPropagation();
-            return false; */
+            return false;
+        }
+    }
+
+    // prevents Firefox to display weird cell border when ctrl+clicking
+    public preventCtrlClickBorder($event) {
+        if ($event.ctrlKey) {
+            $event.preventDefault();
         }
     }
 
@@ -342,9 +349,12 @@ export class PabTableComponent implements /* DoCheck, AfterViewInit, */ OnInit {
         // 0. build spanned headers over real columns
         this.headers = [];
         // 1 header for basin
+        let bs: any[] = this.model.children;
+        bs = bs.concat(this.model.downWall);
         this.headers.push({
             title: "Bassin",
-            colspan: 6
+            colspan: 6,
+            selectable: bs
         });
         // 1 header for each device of the wall having the most devices (including downwall)
         for (let i = 0; i < maxNbDevices; i++) {
@@ -360,34 +370,46 @@ export class PabTableComponent implements /* DoCheck, AfterViewInit, */ OnInit {
         this.cols = [];
         // 6 cols for basin
         this.cols.push({
-            title: "N° de bassin"
+            title: "N° de bassin",
+            selectable: bs
         });
         this.cols.push({
-            title: "Longueur"
+            title: "Longueur",
+            selectable: bs
         });
         this.cols.push({
-            title: "Largeur"
+            title: "Largeur",
+            selectable: bs
         });
         this.cols.push({
-            title: "Débit d'attrait"
+            title: "Débit d'attrait",
+            selectable: bs
         });
         this.cols.push({
-            title: "Cote radier mi-bassin"
+            title: "Cote radier mi-bassin",
+            selectable: bs
         });
         this.cols.push({
-            title: "Cote radier amont paroi"
+            title: "Cote radier amont paroi",
+            selectable: bs
         });
         // no col for wall type (defined by rowspan-2 header above)
         // 3 cols for each device of the wall having the most devices (including downwall)
         for (let i = 0; i < maxNbDevices; i++) {
             this.cols.push({
-                title: "Type"
+                title: "Type",
+                selectable: this.model.children.map(c => c.getChildren()[i]).concat(this.model.downWall.getChildren()[i]),
+                selectableColumn: i
             });
             this.cols.push({
-                title: "Paramètres"
+                title: "Paramètres",
+                selectable: this.model.children.map(c => c.getChildren()[i]).concat(this.model.downWall.getChildren()[i]),
+                selectableColumn: i
             });
             this.cols.push({
-                title: "Valeurs"
+                title: "Valeurs",
+                selectable: this.model.children.map(c => c.getChildren()[i]).concat(this.model.downWall.getChildren()[i]),
+                selectableColumn: i
             });
         }
 

src/theme.scss

@@ -193,6 +193,9 @@ $warn: map-get($nghyd-theme, warn);
 .bg-primary-light {
     background-color: mat-color($primary, 300);
 }
+.bg-primary-lighter {
+    background-color: mat-color($primary, 200);
+}
 .bg-primary-verylight {
     background-color: mat-color($primary, 100);
 }
@@ -209,6 +212,9 @@ $warn: map-get($nghyd-theme, warn);
 .bg-accent-light {
     background-color: mat-color($accent, 300);
 }
+.bg-accent-lighter {
+    background-color: mat-color($accent, 200);
+}
 .bg-accent-verylight {
     background-color: mat-color($accent, 100);
 }
@@ -225,6 +231,9 @@ $warn: map-get($nghyd-theme, warn);
 .bg-warn-light {
     background-color: mat-color($warn, 300);
 }
+.bg-warn-lighter {
+    background-color: mat-color($warn, 200);
+}
 .bg-warn-verylight {
     background-color: mat-color($warn, 100);
 }