perbaikan routing dan penambahan button back pada page monitoring

src/app/content/hemat-app/monitoring/detail/detail.component.ts

@@ -1,4 +1,5 @@
 import { Component } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
 import { BlockUI, NgBlockUI } from "ng-block-ui";
 import { ChartApiService } from "src/app/_services/chart.api";
 interface Sales {
@@ -17,9 +18,14 @@ export class DetailComponent {
   data: any;
   chartOption: any;
   Sales: any;
+  mode: string;
   ExpenseschartOption: any;
   public breadcrumb: any;
-  constructor(private chartApiservice: ChartApiService) {}
+  constructor(
+    private chartApiservice: ChartApiService,
+    private router: Router,
+    private route: ActivatedRoute
+  ) {}
   @BlockUI("totalReceivables") blockUITotalReceivables: NgBlockUI;
   @BlockUI("salesRecieptsDues") blockUISalesRecieptsDues: NgBlockUI;
   getInvoicechart() {
@@ -148,23 +154,47 @@ export class DetailComponent {
     };
   }
   ngOnInit() {
-    this.breadcrumb = {
-      mainlabel: "Detail Monitoring",
-      linkBack: '/monitoring',
-      isLinkBack: true,
-      links: [
-        {
-          name: "Home",
-          isLink: false,
-          link: "",
-        },
-        {
-          name: "Detail Monitoring",
-          isLink: false,
-          link: "",
-        }
-      ],
-    };
+    this.route.data.subscribe((data) => {
+      this.mode = data.mode;
+    });
+    if (this.mode === "room") {
+      this.breadcrumb = {
+        mainlabel: "Detail Monitoring",
+        linkBack: "/monitoring/monitoring-room",
+        isLinkBack: true,
+        links: [
+          {
+            name: "Home",
+            isLink: false,
+            link: "",
+          },
+          {
+            name: "Detail Monitoring",
+            isLink: false,
+            link: "",
+          },
+        ],
+      };
+    } else {
+      this.breadcrumb = {
+        mainlabel: "Detail Monitoring",
+        linkBack: "/monitoring",
+        isLinkBack: true,
+        links: [
+          {
+            name: "Home",
+            isLink: false,
+            link: "",
+          },
+          {
+            name: "Detail Monitoring",
+            isLink: false,
+            link: "",
+          },
+        ],
+      };
+    }
+
     this.chartApiservice.getInvoiceData().subscribe((Response) => {
       this.data = Response;
       this.getInvoicechart();

src/app/content/hemat-app/monitoring/monitoring.module.ts

@@ -55,7 +55,8 @@ import { NgxEchartsModule } from 'ngx-echarts';
       },
       {
         path: 'monitoring-room',
-        component: RoomComponent
+        component: RoomComponent,
+        data: { mode: 'room' }
       },
       {
         path: 'add-new-room',
@@ -77,6 +78,11 @@ import { NgxEchartsModule } from 'ngx-echarts';
         component: DetailComponent,
         data: { mode: 'build' }
       },
+      {
+        path: 'view-new-room/:id',
+        component: DetailComponent,
+        data: { mode: 'room' }
+      },
     ])
   ]
 })

src/app/content/hemat-app/monitoring/room/room.component.html

@@ -73,6 +73,7 @@
                   class="btn btn-icon btn-outline-primary mr-1"
                   triggers="hover:click:hover"
                   ngbTooltip="Edit"
+                  (click)="editRow(data)"
                 >
                   <i class="feather ft-edit"></i>
                 </button>
@@ -81,6 +82,7 @@
                   class="btn btn-icon btn-outline-primary mr-1"
                   triggers="hover:click:hover"
                   ngbTooltip="Detail"
+                  (click)="viewRow(data)"
                 >
                   <i class="la la-building"></i>
                 </button>

src/app/content/hemat-app/monitoring/room/room.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { ActivatedRoute } from "@angular/router";
+import { ActivatedRoute, Router } from "@angular/router";
 import { TableMonitoringService } from "../monitoring.service";
 
 @Component({
@@ -16,7 +16,8 @@ export class RoomComponent implements OnInit {
 
   constructor(
     private route: ActivatedRoute,
-    private monitoringService: TableMonitoringService
+    private monitoringService: TableMonitoringService,
+    private router: Router
   ) {}
 
   ngOnInit() {
@@ -67,4 +68,11 @@ export class RoomComponent implements OnInit {
         value !== null && value.toString().toLowerCase().includes(searchTermLC)
     );
   }
+  viewRow(row) {
+    this.router.navigate(["/monitoring/view-new-room", row.id]);
+  }
+
+  editRow(row) {
+    this.router.navigate(["/monitoring/edit-new-room", row.id]);
+  }
 }