Feature: Report builder - allow replace by drop

luzmo-official · Sep 6, 2024 · da782d1 · da782d1
1 parent 103f637
commit da782d1
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 16 deletions.
diff --git a/.../report-builder/chart-panel/chart-config-panel/slots-display/slots-display.component.html b/.../report-builder/chart-panel/chart-config-panel/slots-display/slots-display.component.html
@@ -3,7 +3,11 @@
   <div class="mb-4">
     <div class="mb-1">{{ slot.formattedName }}</div>
     @for (slotContent of slot.content; track slotContent) {
-      <div class="flex items-center border border-violet-300 rounded-md text-violet-700 text-sm p-2 mb-1 bg-violet-50 select-none">
+      <div class="flex items-center border border-violet-300 rounded-md text-violet-700 text-sm p-2 mb-1 bg-violet-50 select-none"
+        id="data-replace-{{slot.name}}-{{$index}}"
+        cdkDropList
+        (cdkDropListDropped)="replace($event, $index)"
+        cdkDropListConnectedTo="column-list">
         <div class="flex items-center grow truncate">
           <mat-icon fontSet="material-symbols-outlined" class="icon-20 mr-2 flex-shrink-0">
             {{ columnTypeIcons[slotContent.type] }}

diff --git a/...pp/report-builder/chart-panel/chart-config-panel/slots-display/slots-display.component.ts b/...pp/report-builder/chart-panel/chart-config-panel/slots-display/slots-display.component.ts
@@ -41,6 +41,28 @@ export class SlotsDisplayComponent {
     }
   }
 
+  replace(event: CdkDragDrop<string[]>, index: number) {
+    const column = event.item.data;
+    const slotNameTemp = event.container.id.replace('data-replace-', '');
+    const slotName = slotNameTemp.substring(0, slotNameTemp.lastIndexOf('-')) as Slot['name'];
+
+    const slotContent: Slot['content'][number] = {
+      label: column.name,
+      set: column.securable_id,
+      column: column.id,
+      type: column.type,
+      subtype: column.subtype,
+      format: column.format
+    };
+
+    const slot = this.chartService.slots().find(slot => slot.name === slotName);
+
+    if (slot?.content?.[index]) {
+      slot.content[index] = slotContent;
+      this.chartService.updateSlots((this.chartService.slots() ?? []));
+    }
+  }
+
   removeColumnFromSlot(slotName: string, indexToRemove: number): void {
     const slot = this.chartService.slots().find(slot => slot.name === slotName);
 

diff --git a/report-builder/src/app/report-builder/data-panel/data-panel.component.ts b/report-builder/src/app/report-builder/data-panel/data-panel.component.ts
@@ -9,8 +9,6 @@ import {
   CdkDrag,
   CdkDropList,
   CdkDropListGroup,
-  moveItemInArray,
-  transferArrayItem,
   CdkDragPlaceholder,
 } from '@angular/cdk/drag-drop';
 import { DataService } from '../shared/services/data.service';
@@ -75,17 +73,6 @@ export class DataPanelComponent implements OnInit {
     },
   ] satisfies Dataset[];
 
-  /*datasets = [
-    {
-      name: 'Team Stats',
-      datasetId: '30ee4df6-b311-4774-bbbd-3bdc52753f4a',
-    },
-    {
-      name: 'Player Stats',
-      datasetId: '97fb82d0-e7aa-4221-8f6e-a410014291b7',
-    }
-  ] satisfies Dataset[];*/
-
   panelOpenState = false;
   collapsed = false;
   columnTypeIcons = COLUMN_TYPE_ICONS;
@@ -107,8 +94,15 @@ export class DataPanelComponent implements OnInit {
   constructor() {
     effect(() => {
       // Update names of CDK drop fields, based on slot names
-      this.cdkDropLists = CHARTS().find((chart) => chart.type === this.chartService.type())?.slots?.map((slot) => `data-drop-${slot.name}`) ?? [];
-      this.cdkDropLists.push('data-drop-filter');
+      this.cdkDropLists = []
+      for (const slot of this.chartService.slots()) {
+        this.cdkDropLists.push(`data-drop-${slot.name}`);
+        if ((slot?.content ?? []).length > 0) {
+          for (let i = 0; i < slot.content.length; i++) {
+            this.cdkDropLists.push(`data-replace-${slot.name}-${i}`);
+          }
+        }
+      }
     });
   }