integrasi table device dan table master category

src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.html

@@ -36,19 +36,19 @@
                             type="text"
                             id="projectinput1"
                             class="form-control"
-                            formControlName="firstName"
-                            placeholder="First Name"
+                            formControlName="name"
+                            placeholder="Device Name"
                             [ngClass]="{
-                              'is-invalid': submitted && f.firstName.errors
+                              'is-invalid': submitted && f.name.errors
                             }"
                           />
                           <small
                             class="form-text text-muted danger"
-                            *ngIf="submitted && f.firstName.errors"
+                            *ngIf="submitted && f.name.errors"
                             class="invalid-feedback"
                           >
-                            <div *ngIf="f.firstName.errors.required">
-                              First Name is required
+                            <div *ngIf="f.name.errors.required">
+                              Device Name is required
                             </div>
                           </small>
                         </div>
@@ -430,7 +430,7 @@
                     >
                       <i class="feather ft-x"></i> Cancel
                     </button>
-                    <button type="submit" class="btn btn-primary">
+                    <button type="submit" class="btn btn-primary" (click)="saveEdit()">
                       <i class="la la-check"></i> Save
                     </button>
                   </div>

src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, ViewChild } from "@angular/core";
 import { FormBuilder, FormGroup, NgForm, Validators } from "@angular/forms";
 import { ActivatedRoute, Router } from "@angular/router";
 import { BlockUI, NgBlockUI } from "ng-block-ui";
+import { BuildingService } from "../../service/monitoring-api.service";
 
 @Component({
   selector: "app-add-edit-device",
@@ -53,17 +54,32 @@ export class AddEditDeviceComponent implements OnInit{
   constructor(
     private formBuilder: FormBuilder,
     private router: Router,
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
+    private monitoringApiService: BuildingService,
   ) {}
 
   ngOnInit() {
     this.route.data.subscribe((data) => {
+      console.log(data);
+      
       this.mode = data.mode;
+      console.log(this.mode);
+      
+    });
+    this.route.params.subscribe(params => {
+      console.log(params);
+      
+      const deviceId = params['id'];
+      console.log(deviceId);
+      
+      if (deviceId) {
+        this.loadDevice(deviceId);
+      }
     });
     this.setBreadcrumb()
 
     this.projectInfo = this.formBuilder.group({
-      firstName: ["", Validators.required],
+      name: ["", Validators.required],
       lastName: ["", Validators.required],
       email: ["", [Validators.required, Validators.email]],
       phone: ["", Validators.required],
@@ -75,6 +91,15 @@ export class AddEditDeviceComponent implements OnInit{
     });
   }
 
+  loadDevice(deviceId: string) {
+    this.monitoringApiService.getDeviceById(deviceId).subscribe(data => {
+      console.log(data);
+      this.projectInfo = this.formBuilder.group({
+        name: data.name,
+      });
+    });
+  }
+
   setBreadcrumb() {
     if (this.isAddMode()) {
       this.breadcrumb = {
@@ -164,7 +189,11 @@ export class AddEditDeviceComponent implements OnInit{
     }
   }
 
-  addData() {}
+  
+
+  saveEdit() {
+    
+  }
 
   cancel() {
     this.router.navigate(["/device"]);