디자이너 컴포넌트 - 보고서 구성요소(Parts)

import { AfterViewInit, Component, ViewChild } from "@angular/core";
import {
  ViewerComponent,
  DesignerComponent,
  AR_EXPORTS,
  PdfExportService,
  HtmlExportService,
  TabularDataExportService,
} from "@mescius/activereportsjs-angular";

@Component({
  selector: "app-root",
  templateUrl: "src/app.component.html",
  styleUrls: ["src/app.component.css"],
  providers: [
    {
      provide: AR_EXPORTS,
      useClass: PdfExportService,
      multi: true,
    },
    {
      provide: AR_EXPORTS,
      useClass: HtmlExportService,
      multi: true,
    },
    {
      provide: AR_EXPORTS,
      useClass: TabularDataExportService,
      multi: true,
    },
  ],
})
export class AppComponent implements AfterViewInit {
  designerHidden = false;
  initialReport = { id: "reports/init-template.rdlx-json" };


  @ViewChild(ViewerComponent, { static: false }) reportViewer: ViewerComponent;
  @ViewChild(DesignerComponent, { static: false })
  reportDesigner: DesignerComponent;

  ngAfterViewInit() {
    if(this.reportDesigner){
      this.reportDesigner.getPanelsAPI().then(function(panelsApi:any){
        panelsApi.menu.open("libraries-list");
      })      
    }
  }

  onDesignerOpen() {
    this.designerHidden = false;
  }

  onReportPreview = (report: any) => {
    this.designerHidden = true;
    this.reportViewer.open(report.definition);
    return Promise.resolve();
  };
  onDesignerInit = function onDesignerInit() {
    const appBarSettings = {
      visible: true, // Show the app bar
      homeTab: {
        visible: true, // Show the home tab
      },
      contextActionsTab: {
        visible: false, // Hide the context actions tab
      },
      parametersTab: {
        visible: false, // Hide the parameters tab
      },
    };
    const toolBarSettings = {
      visible: true, // Show the toolbar
    };
    const menuSettings = {
      visible: true, // Show the main menu
      toolBox: {
        visible: false, // Hide the Tool Box
      },
      documentExplorer: {
        visible: true, // Show the Document Explorer
      },
      groupEditor: {
        visible: false, // Hide the Group Editor
      },
      layerEditor: {
        visible: false, // Hide the Layer Editor
      },
      logo: {
        visible: false, // Hide the logo
      },
    };
    const dataTabSettings = {
      dataTab: {
        visible: false, // Hide the Data tab
      },
    };
    const propertyGridSettings = {
      propertiesTab: {
        visible: true, // Show the Properties tab
      },
      mode: "Basic", // Set the Property Grid mode to "Advanced" or "Basic"
    };
    const statusBarSettings = {
      visible: false, // Hide the status bar
    };
    const themeConfig = {
      initialTheme: "ActiveReports",
      themeSelector: {
        isEnabled: false,
      }      
    };
    const libraries = [
      {
        id: 'reports/ReportLib.rdlx-json',
        name: 'ReportLib',
        displayName: "Sales Data Visualizers"
      }
    ];    
    return {      
      appBar: appBarSettings,
      toolBar: toolBarSettings,
      menu: menuSettings,
      data: dataTabSettings,
      propertyGrid: propertyGridSettings,
      statusBar: statusBarSettings,
      themeConfig: themeConfig,
      reportPartsLibraries: libraries,
    };
  };

}