drag drop styling

src/app/core/data/lookup-relation.service.ts

@@ -51,7 +51,6 @@ export class LookupRelationService {
     if (setSearchConfig) {
       this.searchConfig = newConfig;
     }
-    console.log(newConfig);
     return this.searchService.search(newConfig).pipe(
       /* Make sure to only listen to the first x results, until loading is finished */
       /* TODO: in Rxjs 6.4.0 and up, we can replace this with takeWhile(predicate, true) - see https://stackoverflow.com/a/44644237 */

src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html

@@ -1,7 +1,6 @@
-<div [class.form-group]="(model.type !== 'GROUP' && asBootstrapFormGroup) || getClass('element', 'container').includes('form-group')"
+<div [class.form-group]="asBootstrapFormGroup"
      [formGroup]="group"
      [ngClass]="[getClass('element', 'container'), getClass('grid', 'container')]">
-
     <label *ngIf="!isCheckbox && hasLabel"
            [for]="model.id"
            [innerHTML]="(model.required && model.label) ? (model.label | translate) + ' *' : (model.label | translate)"

src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts

@@ -172,7 +172,7 @@ export class DsDynamicFormControlContainerComponent extends DynamicFormControlCo
   @Input('templates') inputTemplateList: QueryList<DynamicTemplateDirective>;
 
   @Input() formId: string;
-  @Input() asBootstrapFormGroup = true;
+  @Input() asBootstrapFormGroup = false;
   @Input() bindId = true;
   @Input() context: any | null = null;
   @Input() group: FormGroup;

src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form.component.html

@@ -7,6 +7,7 @@
                                    [model]="model"
                                    [ngClass]="[getClass(model, 'element', 'host'), getClass(model, 'grid', 'host')]"
                                    [templates]="templates"
+                                   [asBootstrapFormGroup]="true"
                                    (dfBlur)="onEvent($event, 'blur')"
                                    (dfChange)="onEvent($event, 'change')"
                                    (dfFocus)="onEvent($event, 'focus')"></ds-dynamic-form-control-container>

src/app/shared/form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component.html

@@ -1,6 +1,6 @@
-<div *ngIf="metadataRepresentation" class="mt-2 mb-4 d-flex">
+<div *ngIf="metadataRepresentation" class="d-flex">
-    <span class="d-inline-block align-middle ml-1 mr-auto">
+    <span class="mr-auto text-contents">
-              <ds-metadata-representation-loader [mdRepresentation]="metadataRepresentation"></ds-metadata-representation-loader>
+        <ds-metadata-representation-loader [mdRepresentation]="metadataRepresentation"></ds-metadata-representation-loader>
     </span>
     <button type="button" class="btn btn-secondary"
             (click)="removeSelection()">

src/app/shared/form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component.scss

@@ -0,0 +1,3 @@
+span.text-contents{
+    padding: $btn-padding-y 0;
+}

src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.html

@@ -10,11 +10,9 @@
         </div>
         <div cdkDropList cdkDropListLockAxis="y" (cdkDropListDropped)="moveSelection($event)">
             <div *ngFor="let groupModel of model.groups; let idx = index" role="group"
-                 [formGroupName]="idx" [ngClass]="[getClass('element', 'group'), getClass('grid', 'group')]" cdkDrag>
+                 [formGroupName]="idx" [ngClass]="{'pt-2 pb-2': idx > 0}" cdkDrag cdkDragHandle [class]="getClass('element', 'group') + ' ' + getClass('grid', 'group')">
                 <ng-container *ngIf="idx > 0">
-                    <button type="button" class="close float-left drag-button" cdkDragHandle>
+                    <i class="drag-icon fas fa-grip-vertical fa-fw"></i>
-                        <i class="fas fa-grip-vertical fa-fw"></i>
-                    </button>
                     <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: groupModel"></ng-container>
                     <ng-container *ngTemplateOutlet="controlContainer; context: {$implicit: idx}"></ng-container>
                     <ng-container *ngTemplateOutlet="endTemplate?.templateRef; context: groupModel"></ng-container>

src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.scss

@@ -1,5 +1,45 @@
 @import './../../../../../../../styles/variables';
 
-button.drag-button {
+.cdk-drag {
-    height: $button-height;
+    margin-left: -(1.5 * $spacer);
+    .drag-icon {
+        visibility: hidden;
+        width: (1.5 * $spacer);
+        color: $gray-600;
+        margin: $btn-padding-y 0;
+        line-height: $btn-line-height;
+    }
+
+    &:hover, &:focus {
+        cursor: grab;
+        .drag-icon {
+            visibility: visible;
+        }
+    }
+
+}
+
+.cdk-drop-list-dragging {
+    .cdk-drag {
+        cursor: grabbing;
+        .drag-icon {
+            visibility: hidden;
+        }
+    }
+}
+
+.cdk-drag-preview {
+    background-color: white;
+    border-radius: $border-radius-sm;
+    margin-left: 0;
+    box-shadow: 0 5px 5px 0px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
+    .drag-icon {
+        visibility: visible;
+    }
+}
+
+.cdk-drag-placeholder {
+    opacity: 0;
 }

src/app/shared/form/builder/ds-dynamic-form-ui/models/form-group/dynamic-form-group.component.html

@@ -6,7 +6,6 @@
        [ngClass]="getClass('element','control')">
 
     <ds-dynamic-form-control-container *ngFor="let _model of model.group"
-                                       [asBootstrapFormGroup]="true"
                                        [formId]="formId"
                                        [group]="control"
                                        [hasErrorMessaging]="model.hasErrorMessages"
@@ -20,5 +19,4 @@
                                        (dfFocus)="onFocus($event)"
                                        (ngbEvent)="onCustomEvent($event, null, true)"></ds-dynamic-form-control-container>
   </div>
-
 </ng-container>

src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/search-tab/dynamic-lookup-relation-search-tab.component.html

@@ -56,7 +56,6 @@
             </div>
         </div>
 
-        {{(resultsRD$ | async)?.state}}
         <ds-search-results [searchResults]="(resultsRD$ | async)"
                            [sortConfig]="this.lookupRelationService.searchConfig?.sort"
                            [searchConfig]="this.lookupRelationService.searchConfig"

src/app/shared/form/form.component.html

@@ -17,7 +17,7 @@
                     <div class="btn-group" role="group" aria-label="Add and remove button">
                         <button type="button" class="btn btn-secondary"
                                 [disabled]="isItemReadOnly(context, index)"
-                                (click)="insertItem($event, group.context, group.index + 1)">
+                                (click)="insertItem($event, group.context, group.index)">
                             <i class="fas fa-plus" aria-hidden="true"></i>
                         </button>
                     </div>

src/app/submission/sections/form/section-form-operations.service.ts

@@ -327,7 +327,6 @@ export class SectionFormOperationsService {
           this.operationsBuilder.remove(pathCombiner.getPath(path));
         }
       } else if (hasValue(event.$event) && hasValue(event.$event.previousIndex)) {
-        console.log(event, path);
         this.operationsBuilder.move(
           pathCombiner.getPath(path),
           pathCombiner.getPath(segmentedPath + '/' + event.$event.previousIndex).path