Fix SHIFT+select functionality on the first selection

AlmToolkit/AlmToolkit/html-resources/src/app/grid/grid.component.html

@@ -13,41 +13,47 @@
         <td class='grid-header-column action-icon-column' id='header-selected-action' (click)='onSelect(null, $event)' data-column-type='selected-action'></td>
         <td class='grid-header-column grid-column action-options' id='header-action-dropdown' (click)='onSelect(null, $event)' data-column-type='action-dropdown'>Action</td>
       </tr>
-      <tr *ngFor='let dataObject of comparisonDataToDisplay; let first = first; let index = index;' class='grid-data-row object-level-{{dataObject.Level}}'
-        [class.hide-row]='!dataObject.ShowNode' [class.selected-row]='first' id='node-{{dataObject.Id}}' [attr.data-row-number]='index'
-        (contextmenu)='showTreeControlContextMenu($event)'>
-        <td class='grid-column node-type-column' [style.padding-left]='getIndentLevel(dataObject.Level)' (click)='onSelect(dataObject, $event)'
-          title='{{dataObject.NodeType}}' tabindex='{{index*10}}' (keydown)='onKeydown($event)' (keyup)='onKeyup($event)' id='node-{{dataObject.Id}}-node-type'
-          [class.first-column]='first' data-column-type='node-type'>
-          <span>
-            <img [src]='getImage(dataObject,1)' class='node-images' />
-          </span>
-          <span class='node-type'>{{dataObject.NodeType}}</span>
-        </td>
-        <td class='grid-column source-name-column' [style.padding-left]='getIndentLevel(dataObject.Level)' (click)='onSelect(dataObject, $event)'
-          [class.greyed-out-cell]='!dataObject.SourceName' [class.transparent-cell]='first' title='{{dataObject.SourceName}}'
-          tabindex='{{index*10+1}}' (keydown)='onKeydown($event)' (keyup)='onKeyup($event)' id='node-{{dataObject.Id}}-source-name'
-          data-column-type='source-name'>{{dataObject.SourceName}} </td>
-        <td class='grid-column status-column' (click)='onSelect(dataObject, $event)' title='{{dataObject.Status}}' id='node-{{dataObject.Id}}-status'
-          data-column-type='status' tabindex='{{index*10+2}}' (keydown)='onKeydown($event)' (keyup)='onKeyup($event)'>{{dataObject.Status}}</td>
-        <td class='grid-column target-name-column' [style.padding-left]='getIndentLevel(dataObject.Level)' (click)='onSelect(dataObject, $event)'
-          [class.greyed-out-cell]='!dataObject.TargetName' [class.transparent-cell]='first' title='{{dataObject.TargetName}}'
-          id='node-{{dataObject.Id}}-target-name' data-column-type='target-name' tabindex='{{index*10+3}}' (keydown)='onKeydown($event)'
-          (keyup)='onKeyup($event)'>{{dataObject.TargetName}}</td>
-        <td class='grid-column action-icon-column' (click)='onSelect(dataObject, $event)' tabindex='{{index*10+4}}' (keydown)='onKeydown($event)'
-          (keyup)='onKeyup($event)' id='node-{{dataObject.Id}}-selected-action' data-column-type='selected-action'>
-          <span>
-            <img [src]='getImage(dataObject,2)' class='node-images' />
-          </span>
-        </td>
-        <td class='grid-column action-options' (click)='onSelect(dataObject, $event)' tabindex='{{index*10+5}}' (keydown)='onKeydown($event)'
-          (keyup)='onKeyup($event)' id='node-{{dataObject.Id}}-action-dropdown' data-column-type='action-dropdown'>
-          <select class='action-dropdown' (change)='optionChange(dataObject.Id, $event)' [class.dropdown-disabled]='dataObject.DropdownDisabled ? true : false'
-            [disabled]='dataObject.DropdownDisabled ? true : null' id='node-{{dataObject.Id}}-select'>
-            <option *ngFor='let option of dataObject.AvailableActions; let index = index' [selected]='option == dataObject.MergeAction ? true : null'
-              id='node-{{dataObject.Id}}-option-{{index}}'>{{option}}</option>
-          </select>
-        </td>
+      <tr #firstRow *ngFor='let dataObject of comparisonDataToDisplay; let first = first; let index = index;' class='grid-data-row object-level-{{dataObject.Level}}'
+          [class.hide-row]='!dataObject.ShowNode' [class.selected-row]='first' id='node-{{dataObject.Id}}' [attr.data-row-number]='index'
+          (contextmenu)='showTreeControlContextMenu($event)'>
+          <td class='grid-column node-type-column' [style.padding-left]='getIndentLevel(dataObject.Level)' (click)='onSelect(dataObject, $event)'
+              title='{{dataObject.NodeType}}' tabindex='{{index*10}}' (keydown)='onKeydown($event)' (keyup)='onKeyup($event)' id='node-{{dataObject.Id}}-node-type'
+              [class.first-column]='first' data-column-type='node-type'>
+              <span>
+                  <img [src]='getImage(dataObject,1)' class='node-images' />
+              </span>
+              <span class='node-type'>{{dataObject.NodeType}}</span>
+          </td>
+          <td class='grid-column source-name-column' [style.padding-left]='getIndentLevel(dataObject.Level)' (click)='onSelect(dataObject, $event)'
+              [class.greyed-out-cell]='!dataObject.SourceName' [class.transparent-cell]='first' title='{{dataObject.SourceName}}'
+              tabindex='{{index*10+1}}' (keydown)='onKeydown($event)' (keyup)='onKeyup($event)' id='node-{{dataObject.Id}}-source-name'
+              data-column-type='source-name'>
+              {{dataObject.SourceName}}
+          </td>
+          <td class='grid-column status-column' (click)='onSelect(dataObject, $event)' title='{{dataObject.Status}}' id='node-{{dataObject.Id}}-status'
+              data-column-type='status' tabindex='{{index*10+2}}' (keydown)='onKeydown($event)' (keyup)='onKeyup($event)'>
+              {{dataObject.Status}}
+          </td>
+          <td class='grid-column target-name-column' [style.padding-left]='getIndentLevel(dataObject.Level)' (click)='onSelect(dataObject, $event)'
+              [class.greyed-out-cell]='!dataObject.TargetName' [class.transparent-cell]='first' title='{{dataObject.TargetName}}'
+              id='node-{{dataObject.Id}}-target-name' data-column-type='target-name' tabindex='{{index*10+3}}' (keydown)='onKeydown($event)'
+              (keyup)='onKeyup($event)'>
+              {{dataObject.TargetName}}
+          </td>
+          <td class='grid-column action-icon-column' (click)='onSelect(dataObject, $event)' tabindex='{{index*10+4}}' (keydown)='onKeydown($event)'
+              (keyup)='onKeyup($event)' id='node-{{dataObject.Id}}-selected-action' data-column-type='selected-action'>
+              <span>
+                  <img [src]='getImage(dataObject,2)' class='node-images' />
+              </span>
+          </td>
+          <td class='grid-column action-options' (click)='onSelect(dataObject, $event)' tabindex='{{index*10+5}}' (keydown)='onKeydown($event)'
+              (keyup)='onKeyup($event)' id='node-{{dataObject.Id}}-action-dropdown' data-column-type='action-dropdown'>
+              <select class='action-dropdown' (change)='optionChange(dataObject.Id, $event)' [class.dropdown-disabled]='dataObject.DropdownDisabled ? true : false'
+                      [disabled]='dataObject.DropdownDisabled ? true : null' id='node-{{dataObject.Id}}-select'>
+                  <option *ngFor='let option of dataObject.AvailableActions; let index = index' [selected]='option == dataObject.MergeAction ? true : null'
+                          id='node-{{dataObject.Id}}-option-{{index}}'>{{option}}</option>
+              </select>
+          </td>
       </tr>
     </table>
   </div>
@@ -55,4 +61,4 @@
   <div id='code-editor-resizable' *ngIf='comparisonDataToDisplay.length > 0' (contextmenu)='showTreeControlContextMenu($event)'>
     <app-codeeditor [comparisonData]='selectedObject'></app-codeeditor>
   </div>
-</div>
+</div>

AlmToolkit/AlmToolkit/html-resources/src/app/grid/grid.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, NgZone, HostListener } from '@angular/core';
+import { Component, OnInit, NgZone, HostListener,ViewChild, ElementRef } from '@angular/core';
 import { GridDataService } from '../service/grid-data.service';
 import { ComparisonNode } from '../shared/model/comparison-node';
 import { CodeeditorComponent as codeeditor } from '../codeeditor/codeeditor.component';
@@ -37,6 +37,7 @@ export class GridComponent implements OnInit {
   mouseDragged = false;
   maxGridHeight: number;
 
+  @ViewChild('firstRow', { static: false }) firstRow!: ElementRef;
   constructor(private gridService: GridDataService, private appLog: AppLogService, private zone: NgZone) {
     const customWindow = window as WindowWithAngularComponentRef;
     customWindow.angularComponentRef = {
@@ -296,7 +297,13 @@ export class GridComponent implements OnInit {
       }
     } else {
       let prev;
-      let startRow = document.getElementById(this.lastSelectedRow!.id);
+      let startRow;
+      if (this.lastSelectedRow) {
+        startRow = document.getElementById(this.lastSelectedRow!.id);
+      }
+      else {
+        startRow = this.firstRow.nativeElement;
+      }
       let endRow;
       let columnType;
       endRow = document.getElementById(event.target.id)!.parentElement;