Merge pull request #7823 from opf/feature/grid_d_n_d_to_bottom

Feature/grid d n d to bottom

[ci skip]

app/assets/stylesheets/content/_grid.sass

@@ -87,6 +87,9 @@ body.widget-grid-layout
   &.-resize-target
     z-index: 1000
 
+  &.-drop-only
+    display: none
+
 .grid--resizer
   position: absolute
   height: 20px
@@ -135,6 +138,9 @@ body.widget-grid-layout
     border-radius: 3px
     margin: 0
 
+  &.cdk-drag-placeholder
+    visibility: hidden
+
 .grid--widget-content
   height: 100%
   overflow-x: auto

frontend/src/app/modules/grids/grid/area.service.ts

@@ -7,10 +7,8 @@ import {GridResource} from "core-app/modules/hal/resources/grid-resource";
 import {GridWidgetResource} from "core-app/modules/hal/resources/grid-widget-resource";
 import {SchemaResource} from "core-app/modules/hal/resources/schema-resource";
 import {WidgetChangeset} from "core-app/modules/grids/widgets/widget-changeset";
-import * as moment from 'moment';
 import {NotificationsService} from "core-app/modules/common/notifications/notifications.service";
 import {I18nService} from "core-app/modules/common/i18n/i18n.service";
-import {GridDragAndDropService} from "core-app/modules/grids/grid/drag-and-drop.service";
 import { BehaviorSubject } from 'rxjs';
 
 @Injectable()
@@ -90,12 +88,12 @@ export class GridAreaService {
   }
 
   public rebuildAndPersist() {
-    this.buildAreas(false);
     this.persist();
+    this.buildAreas(false);
   }
 
   public persist() {
-    this.resource.rowCount = this.numRows;
+    this.resource.rowCount = this.numRows = (this.widgetAreas.map(area => area.endRow).sort().pop() || 2) - 1;
     this.resource.columnCount = this.numColumns;
 
     this.writeAreaChangesToWidgets();
@@ -176,7 +174,8 @@ export class GridAreaService {
   private buildGridAreas() {
     let cells:GridArea[] = [];
 
-    for (let row = 1; row <= this.numRows; row++) {
+    // the one extra row is added in case the user wants to drag a widget to the very bottom
+    for (let row = 1; row <= this.numRows + 1; row++) {
       cells.push(...this.buildGridAreasRow(row));
     }
 

frontend/src/app/modules/grids/grid/drag-and-drop.service.ts

@@ -1,11 +1,10 @@
-import {Injectable, OnDestroy, OnInit} from '@angular/core';
+import {Injectable, OnDestroy} from '@angular/core';
 import {GridWidgetArea} from "core-app/modules/grids/areas/grid-widget-area";
-import {CdkDragDrop} from '@angular/cdk/drag-drop';
 import {GridArea} from "core-app/modules/grids/areas/grid-area";
 import {GridAreaService} from "core-app/modules/grids/grid/area.service";
 import {GridMoveService} from "core-app/modules/grids/grid/move.service";
-import { Subscription, interval } from 'rxjs';
-import { switchMap, filter, throttle, distinctUntilChanged } from 'rxjs/operators';
+import { Subscription } from 'rxjs';
+import { filter, distinctUntilChanged, throttleTime } from 'rxjs/operators';
 
 @Injectable()
 export class GridDragAndDropService implements OnDestroy {
@@ -29,9 +28,10 @@ export class GridDragAndDropService implements OnDestroy {
       .layout
       .$mousedOverArea
       .pipe(
+        // avoid flickering of widgets as the grid gets resized by the placeholder movement
+        throttleTime(10),
         distinctUntilChanged(),
-        filter((area) => this.currentlyDragging && !!area && !this.layout.isGap(area)),
-        throttle(val => interval(10))
+        filter((area) => this.currentlyDragging && !!area && !this.layout.isGap(area) && (this.placeholderArea!.startRow !== area.startRow || this.placeholderArea!.startColumn !== area.startColumn)),
       ).subscribe(area => {
         this.updateArea(area!);
 
@@ -64,6 +64,10 @@ export class GridDragAndDropService implements OnDestroy {
     return !!this.draggedArea;
   }
 
+  public isDropOnlyArea(area:GridArea) {
+    return !this.currentlyDragging && area.endRow === this.layout.numRows + 2;
+  }
+
   public isDragged(area:GridWidgetArea) {
     return this.currentlyDragging && this.draggedArea!.guid === area.guid;
   }
@@ -77,10 +81,10 @@ export class GridDragAndDropService implements OnDestroy {
   }
 
   public start(area:GridWidgetArea) {
-    this.draggedArea = area;
     this.placeholderArea = new GridWidgetArea(area.widget);
     // TODO find an angular way to do this that ideally does not require passing the element from the grid component
     this.draggedHeight = (document as any).getElementById(area.guid).offsetHeight - 2; // border width * 2
+    this.draggedArea = area;
   }
 
   public abort() {
@@ -109,7 +113,12 @@ export class GridDragAndDropService implements OnDestroy {
 
   private copyPositionButRestrict(source:GridArea, sink:GridWidgetArea) {
     sink.startRow = source.startRow;
-    if (source.startRow + sink.widget.height > this.layout.numRows + 1) {
+
+    // The first condition is aimed at the case when the user drags an element to the very last row
+    // which is not reflected by the numRows.
+    if (source.startRow === this.layout.numRows + 1) {
+      sink.endRow = this.layout.numRows + 2;
+    } else if (source.startRow + sink.widget.height > this.layout.numRows + 1) {
       sink.endRow = this.layout.numRows + 1;
     } else {
       sink.endRow = source.startRow + sink.widget.height;

frontend/src/app/modules/grids/grid/grid.component.html

@@ -19,7 +19,7 @@
     <div class="grid--area-content widget-box"
          cdkDrag
          (cdkDragStarted)="drag.start(area)"
-         (cdkDragDropped)="drag.drop(area)">
+         (cdkDragDropped)="drag.drop()">
 
       <span *ngIf="drag.isDraggable"
             class="grid--area-drag-handle
@@ -27,7 +27,6 @@
                    icon-drag-handle"
             cdkDragHandle></span>
 
-      <div *cdkDragPlaceholder></div>
       <ndc-dynamic [ndcDynamicComponent]="widgetComponent(area)"
                    [ndcDynamicInputs]="widgetComponentInput(area)"
                    [ndcDynamicOutputs]="widgetComponentOutput(area)">
@@ -50,6 +49,7 @@
   <div *ngFor="let area of layout.gridAreas; trackBy: identifyGridArea;"
        class="grid--area"
        [ngClass] = "{'-drop-target': drag.currentlyDragging,
+                     '-drop-only': drag.isDropOnlyArea(area),
                      '-resize-target': resize.isTarget(area),
                      '-addable': add.isAddable(area),
                      '-help-mode': layout.inHelpMode}"
@@ -82,7 +82,7 @@
        (mouseover)="layout.setMousedOverArea(gap)">
     <div class="grid--widget-add -gap hidden-for-mobile"
          [title]="add.addText"
-         (click)="add.widget(gap, layout.schema)">
+         (click)="add.widget(gap)">
     </div>
   </div>