Merge pull request #14 from luzmo-official/chore/use-slot-type-from-s…

…chema

Use slot type and slot config from the dashboard-content-schema library

report-builder/package.json

@@ -28,7 +28,8 @@
     "@codemirror/state": "^6.4.0",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.23.0",
-    "@luzmo/ngx-embed": "^6.2.0-beta.2",
+    "@luzmo/dashboard-contents-types": "^1.0.5",
+    "@luzmo/ngx-embed": "6.3.8",
     "@luzmo/nodejs-sdk": "^1.2.2",
     "@ngneat/until-destroy": "^10.0.0",
     "@ngrx/signals": "^18.0.0-rc.1",

report-builder/src/app/report-builder/chart-panel/chart-config-panel/ai-chart-input/ai-chart-input.component.ts

@@ -11,8 +11,8 @@ import { tap } from 'rxjs/operators';
 import { CHARTS } from '../../../shared/constants/charts.constant';
 import { SlotsDisplayComponent } from '../slots-display/slots-display.component';
 import { ChartPickerComponent } from '../chart-picker/chart-picker.component';
-import { Slot } from '../../../shared/models/models';
 import { ItemType } from '@luzmo/ngx-embed';
+import { Slot } from '@luzmo/dashboard-contents-types';
 
 @Component({
   selector: 'app-ai-chart',
@@ -55,9 +55,9 @@ export class AiChartInputComponent {
             generatedChartDef.slots.forEach((slot) => {
               const slotFound = slots.find((s: Slot) => s.name === slot.name);
               if (slotFound) {
-                slotFound.formattedName = slot?.formattedName;
+                slotFound.label = slot?.label;
                 slotFound.type = slot?.type;
-                slotFound.acceptsMultiple = slot?.acceptsMultiple;
+                slotFound.canAcceptMultipleColumns = slot?.canAcceptMultipleColumns;
               }
               else {
                 slots.push(slot);

report-builder/src/app/report-builder/chart-panel/chart-config-panel/slots-display/slots-display.component.html

@@ -1,7 +1,7 @@
 <div>
   @for (slot of chartService.slots(); track slot) {
   <div class="mb-4">
-    <div class="mb-1">{{ slot.formattedName }}</div>
+    <div class="mb-1">{{ slot.label }}</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"
         id="data-replace-{{slot.name}}-{{$index}}"
@@ -14,13 +14,13 @@
           </mat-icon>
           <div class="truncate">{{ slotContent.label['en'] }}</div>
         </div>
-        <mat-icon 
+        <mat-icon
           fontSet="material-symbols-outlined"
           class="cursor-pointer icon-20 flex-shrink-0"
           (click)="removeColumnFromSlot(slot.name, $index)">delete</mat-icon>
       </div>
     }
-    @if (slot.acceptsMultiple || (slot.content.length === 0 && !slot.acceptsMultiple)) {
+    @if (slot.canAcceptMultipleColumns || (slot.content.length === 0 && !slot.canAcceptMultipleColumns)) {
       <div
         class="border border-dashed border-slate-300 rounded-sm bg-slate-100 text-slate-400 py-2 text-sm text-center select-none"
         id="data-drop-{{slot.name}}"
@@ -32,4 +32,4 @@
     }
   </div>
   }
-</div>
+</div>

report-builder/src/app/report-builder/chart-panel/chart-config-panel/slots-display/slots-display.component.ts

@@ -7,8 +7,8 @@ import {
   CdkDropListGroup
 } from '@angular/cdk/drag-drop';
 import { ChartService } from '../../../shared/services/chart.service';
-import { Slot } from '../../../shared/models/models';
 import { COLUMN_TYPE_ICONS } from '../../../shared/constants/charts.constant';
+import { GenericSlotContent, Slot } from '@luzmo/dashboard-contents-types';
 
 @Component({
   selector: 'app-slots-display',
@@ -24,7 +24,7 @@ export class SlotsDisplayComponent {
   drop(event: CdkDragDrop<string[]>) {
     const column = event.item.data;
     const slotName: Slot['name'] = event.container.id.replace('data-drop-', '') as Slot['name'];
-    const slotContent: Slot['content'][number] = {
+    const slotContent: GenericSlotContent = {
       label: column.name,
       set: column.securable_id,
       column: column.id,
@@ -45,7 +45,7 @@ export class SlotsDisplayComponent {
     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,

report-builder/src/app/report-builder/chart-view/chart-view.component.html

@@ -17,14 +17,15 @@
   style="height: 40vh; max-width: 80rem"
   class="flex justify-center w-full p-5"
 >
+  <!-- Remove $any when dashboard-content-schema has correct types for slot.  -->
   <luzmo-viz-item
     #chart
     [class.empty]="chartIsEmpty()"
     [authKey]="authKey"
     [authToken]="authToken"
     [type]="chartService.type()"
     [options]="chartService.options()"
-    [slots]="chartService.slots()"
+    [slots]="$any(chartService.slots())"
     [filters]="chartService.filtersForFlexChart()"
   >
   </luzmo-viz-item>
@@ -45,14 +46,15 @@
     </mat-button-toggle-group>
   </div>
   <div style="height: 40vh" class="p-5">
+    <!-- Remove $any when dashboard-content-schema has correct types for slot.  -->
     <luzmo-viz-item
       [class.empty]="chartIsEmpty()"
       [type]="chartService.tableType()"
       [authKey]="authKey"
       [authToken]="authToken"
       [filters]="chartService.filtersForFlexChart()"
       [options]="tableOptions"
-      [slots]="chartService.tableSlots()"
+      [slots]="$any(chartService.tableSlots())"
     ></luzmo-viz-item>
   </div>
 </div>