UI: Move drag icon button to first column of table

ui-ngx/src/app/modules/home/components/calculated-fields/components/geofencing-zone-grups-table/calculated-field-geofencing-zone-groups-table.component.ts

@@ -168,7 +168,7 @@ export class CalculatedFieldGeofencingZoneGroupsTableComponent implements Contro
         renderer: this.renderer,
         componentType: CalculatedFieldGeofencingZoneGroupsPanelComponent,
         hostView: this.viewContainerRef,
-        preferredPlacement: 'right',
+        preferredPlacement: isExists ? ['left', 'leftTop', 'leftBottom'] : ['topRight', 'right', 'rightTop'],
         context: ctx,
         isModal: true
       });

ui-ngx/src/app/modules/home/components/calculated-fields/components/panel/calculated-field-geofencing-zone-groups-panel.component.html

@@ -97,7 +97,8 @@
           <mat-expansion-panel class="tb-settings" expanded>
             <mat-expansion-panel-header>{{ 'calculated-fields.entity-zone-relationship' | translate }}</mat-expansion-panel-header>
             <div class="tb-form-table">
-              <div class="tb-form-table-header no-padding-right">
+              <div class="tb-form-table-header">
+                <div class="tb-form-table-header-cell tb-actions-header"></div>
                 <div class="tb-form-table-header-cell" translate>calculated-fields.level</div>
                 <div class="tb-form-table-header-cell flex-1" translate>calculated-fields.direction-level</div>
                 <div class="tb-form-table-header-cell flex-1 tb-required" translate>calculated-fields.relation-type</div>
@@ -110,6 +111,17 @@
                      (cdkDropListDropped)="keyDrop($event)">
                   @for (keyControl of levelsFormArray().controls; track trackByKey;) {
                     <div cdkDrag [cdkDragDisabled]="!dragEnabled" class="tb-draggable-form-table-row">
+                      <div class="tb-form-table-row-cell-buttons">
+                        <button mat-icon-button
+                                type="button"
+                                cdkDragHandle
+                                class="lt-lg:!hidden"
+                                [class.tb-hidden]="!dragEnabled"
+                                matTooltip="{{ 'action.drag' | translate }}"
+                                matTooltipPosition="above">
+                          <mat-icon>drag_indicator</mat-icon>
+                        </button>
+                      </div>
                       <div class="tb-form-row no-border flex-1" [formGroup]="keyControl">
                         <div class="level-text">{{ $index+1 }}</div>
                         <mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
@@ -137,15 +149,6 @@
                                 matTooltipPosition="above">
                           <mat-icon>delete</mat-icon>
                         </button>
-                        <button mat-icon-button
-                                type="button"
-                                cdkDragHandle
-                                class="lt-lg:!hidden"
-                                [class.tb-hidden]="!dragEnabled"
-                                matTooltip="{{ 'action.drag' | translate }}"
-                                matTooltipPosition="above">
-                          <mat-icon>drag_indicator</mat-icon>
-                        </button>
                       </div>
                     </div>
                   }

ui-ngx/src/app/modules/home/components/calculated-fields/components/panel/calculated-field-geofencing-zone-groups-panel.component.scss

@@ -30,6 +30,8 @@ $panel-width: 520px;
   }
 
   .level-text {
+    display: flex;
+    justify-content: center;
     width: 25px;
     color: rgba(0, 0, 0, 0.54);
   }
@@ -38,14 +40,20 @@ $panel-width: 520px;
     .tb-form-row {
       gap: 12px;
     }
+
     .tb-form-table-body {
       gap: unset;
     }
-  }
-  .tb-form-table-header-cell {
-    &.tb-actions-header {
-      width: 80px;
-      min-width: 80px;
+
+    .tb-form-table-header {
+      padding: 0;
+    }
+
+    .tb-form-table-header-cell {
+      &.tb-actions-header {
+        width: 40px;
+        min-width: 40px;
+      }
     }
   }