feat(edit-dashboard-json): [MTM-61842] Edit dashboard json modal

src/app/dashboard-json-editor/dashboard-json-editor/dashboard-json-editor.component.ts

@@ -0,0 +1,43 @@
+import { ContextDashboard } from '@c8y/ngx-components/context-dashboard/context-dashboard.model';
+import { Component, inject } from '@angular/core';
+import { BsModalRef } from 'ngx-bootstrap/modal';
+import {
+  CommonModule,
+  gettext,
+  ModalLabels,
+  ModalModule,
+} from '@c8y/ngx-components';
+
+@Component({
+  selector: 'c8y-dashboard-json-editor',
+  template: `
+    <c8y-modal
+      [title]="'Edit dashboard JSON'"
+      [headerClasses]="'dialog-header'"
+      [labels]="labels"
+      (onClose)="onDismiss()"
+    >
+      <div>
+        <pre>{{ dashboard | json }}</pre>
+      </div>
+    </c8y-modal>
+  `,
+  standalone: true,
+  imports: [ModalModule, CommonModule],
+})
+export class DashboardJsonEditorComponent {
+  dashboard!: ContextDashboard;
+  labels: ModalLabels = { ok: gettext('Close') };
+
+  result: Promise<boolean> = new Promise((resolve) => {
+    this._close = resolve;
+  });
+
+  private _close: ((value: boolean) => void) | undefined;
+  private modalRef = inject(BsModalRef);
+
+  onDismiss() {
+    this._close!(true);
+    this.modalRef.hide();
+  }
+}

src/app/dashboard-json-editor/edit-dashboard-json-button/edit-dashboard-json-button.component.ts

@@ -1,9 +1,15 @@
-import { Component } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import {
   ActionBarModule,
   C8yTranslatePipe,
+  ContextData,
+  ContextRouteService,
   IconDirective,
 } from '@c8y/ngx-components';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ContextDashboardManagedObject } from '@c8y/ngx-components/context-dashboard';
+import { BsModalService } from 'ngx-bootstrap/modal';
+import { DashboardJsonEditorComponent } from '../dashboard-json-editor/dashboard-json-editor.component';
 
 @Component({
   selector: 'c8y-edit-dashboard-json-button',
@@ -22,8 +28,52 @@ import {
   standalone: true,
   imports: [C8yTranslatePipe, ActionBarModule, IconDirective],
 })
-export class EditDashboardJsonButtonComponent {
-  editDashboardJSON() {
-    console.log('Edit dashboard JSON');
+export class EditDashboardJsonButtonComponent implements OnInit {
+  private dashboardMO: ContextDashboardManagedObject =
+    {} as ContextDashboardManagedObject;
+  private contextData: ContextData = {} as ContextData;
+  private activatedRoute!: ActivatedRoute;
+
+  private router = inject(Router);
+  private contextRouteService = inject(ContextRouteService);
+  private modalService = inject(BsModalService);
+
+  async editDashboardJSON() {
+    try {
+      const modalRef = this.modalService.show(DashboardJsonEditorComponent, {
+        class: 'modal-lg',
+        initialState: {
+          dashboard: this.dashboardMO.c8y_Dashboard,
+        },
+        ariaDescribedby: 'modal-body',
+        ariaLabelledBy: 'modal-title',
+        ignoreBackdropClick: true,
+        keyboard: false,
+      }).content as DashboardJsonEditorComponent;
+      await modalRef.result;
+    } catch (_) {
+      return;
+    }
+  }
+
+  ngOnInit() {
+    this.activatedRoute = this.getActivatedRoute();
+    this.activatedRoute.data.subscribe(({ dashboard }) => {
+      this.dashboardMO = dashboard;
+    });
+    this.contextData = this.contextRouteService.activatedContextData;
+  }
+
+  /**
+   * It is necessary to get the ActivatedRoute from the root of the router tree as
+   * button component is outside router-outlet.
+   * @private
+   */
+  private getActivatedRoute(): ActivatedRoute {
+    let route = this.router.routerState.root;
+    while (route.firstChild) {
+      route = route.firstChild;
+    }
+    return route;
   }
 }