[CST-3782] Style refinements and qualdrop moves fixed

Author: alemarte

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

@@ -11,16 +11,15 @@
                       'd-none': value?.isVirtual && (model.hasSelectableMetadata || context?.index > 0)}">
         <div [ngClass]="getClass('grid', 'control')">
             <ng-container #componentViewContainer></ng-container>
-            <!-- In case of repeatable fields show hint only for first element -->
-            <small *ngIf="hasHint && (model.repeatable === false || context?.index === 0) && (!showErrorMessages || errorMessages.length === 0)"
-                   class="text-muted" [innerHTML]="model.hint | translate" [ngClass]="getClass('element', 'hint')"></small>
-            <!-- In case of repeatable fields show empty space for all elements except the first -->
-            <div *ngIf="context?.index > 0
+          <small *ngIf="hasHint && (model.repeatable === false || context?.index === context?.context?.groups?.length - 1) && (!showErrorMessages || errorMessages.length === 0)"
+                 class="text-muted ds-hint" [innerHTML]="model.hint | translate" [ngClass]="getClass('element', 'hint')"></small>
+          <!-- In case of repeatable fields show empty space for all elements except the first -->
+          <div *ngIf="context?.index !== null
               && (!showErrorMessages || errorMessages.length === 0)" class="clearfix w-100 mb-2"></div>
 
-            <div *ngIf="showErrorMessages" [ngClass]="[getClass('element', 'errors'), getClass('grid', 'errors')]">
-                <small *ngFor="let message of errorMessages" class="invalid-feedback d-block">{{ message | translate: model.validators }}</small>
-            </div>
+          <div *ngIf="showErrorMessages" [ngClass]="[getClass('element', 'errors'), getClass('grid', 'errors')]">
+            <small *ngFor="let message of errorMessages" class="invalid-feedback d-block">{{ message | translate: model.validators }}</small>
+          </div>
 
         </div>
         <div *ngIf="model.languageCodes && model.languageCodes.length > 0" class="col-xs-2" >

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

@@ -12,6 +12,12 @@
              [ngClass]="[getClass('element', 'group'), getClass('grid', 'group')]"
              cdkDrag cdkDragHandle>
           <!-- Item content -->
+          <div *cdkDragPreview>
+            <div class="alert alert-info">
+              <i class="fas fa-sort"></i> {{ 'form.repeatable.sort.tip' | translate }}
+            </div>
+          </div>
+
           <i class="drag-icon fas fa-grip-vertical fa-fw" [class.invisible]="model.groups.length === 1"></i>
           <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: groupModel"></ng-container>
           <ds-dynamic-form-control-container *ngFor="let _model of groupModel.group"

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

@@ -5,7 +5,7 @@
 }
 
 .cdk-drag {
-    margin-left: -(2 * $spacer);
+    margin-left: -(2.3 * $spacer);
     margin-right: -(0.5 * $spacer);
     padding-right: (0.5 * $spacer);
     .drag-icon {
@@ -37,17 +37,11 @@
 }
 
 .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;
-    }
+    margin: 0px;
+    padding: 0px;
 }
 
+
 .cdk-drag-placeholder {
     opacity: 0;
 }

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

@@ -349,7 +349,8 @@ export class SectionFormOperationsService {
     const segmentedPath = this.getFieldPathSegmentedFromChangeEvent(event);
     const value = this.getFieldValueFromChangeEvent(event);
     // Detect which operation must be dispatched
-    if (this.formBuilder.isQualdropGroup(event.model.parent as DynamicFormControlModel)) {
+    if (this.formBuilder.isQualdropGroup(event.model.parent as DynamicFormControlModel)
+      || this.formBuilder.isQualdropGroup(event.model as DynamicFormControlModel)) {
       // It's a qualdrup model
       this.dispatchOperationsFromMap(this.getQualdropValueMap(event), pathCombiner, event, previousValue);
     } else if (this.formBuilder.isRelationGroup(event.model)) {

src/assets/i18n/en.json5

@@ -1309,6 +1309,7 @@
 
   "form.submit": "Submit",
 
+  "form.repeatable.sort.tip": "Drop the item in the new position",
 
 
   "home.description": "",