penambahan UI pada setiap inputan monitoring list

src/app/content/hemat-app/list-monitoring/add-edit-list/add-edit-list.component.html

@@ -1,4 +1,4 @@
-<div class="app-content content" style="background-color: #FBFBFB !important">
+<div class="app-content content" style="background-color: #fbfbfb !important">
   <div class="content-wrapper">
     <div class="content-header row mb-1">
       <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
@@ -7,11 +7,11 @@
       <section id="basic-form-layouts">
         <div class="row">
           <div class="col-12" *blockUI="'projectInfo'; message: 'Loading'">
-            <div class="card" style="background-color: #FBFBFB !important">
+            <div class="card" style="background-color: #fbfbfb !important">
               <div class="card-content">
                 <div
                   class="card-header"
-                  style="background-color: #FBFBFB !important"
+                  style="background-color: #fbfbfb !important"
                 >
                   <h2 style="color: #242222">
                     {{
@@ -55,6 +55,18 @@
                                   {{ data.name }}
                                 </option>
                               </select>
+                              <button
+                                class="btn btn-danger ml-2"
+                                type="button"
+                                style="
+                                  color: #ffffff !important;
+                                  border-color: #37a647 !important;
+                                  background-color: #37a647 !important;
+                                "
+                                (click)="modalAddBuilding()"
+                              >
+                                <i class="feather ft-plus"> New Building</i>
+                              </button>
                             </div>
                             <small
                               class="form-text text-muted danger"
@@ -86,6 +98,18 @@
                                   {{ data.name }}
                                 </option>
                               </select>
+                              <button
+                                class="btn btn-danger ml-2"
+                                type="button"
+                                style="
+                                  color: #ffffff !important;
+                                  border-color: #37a647 !important;
+                                  background-color: #37a647 !important;
+                                "
+                                (click)="modalAddFloor()"
+                              >
+                                <i class="feather ft-plus"> New Floor</i>
+                              </button>
                             </div>
                             <small
                               class="form-text text-muted danger"
@@ -134,8 +158,8 @@
                                       type="button"
                                       style="
                                         color: #ffffff !important;
-                                        border-color: #37A647 !important;
+                                        border-color: #a64f37 !important;
-                                        background-color: #37A647 !important;
+                                        background-color: #a64f37 !important;
                                       "
                                       (click)="removePhone(i)"
                                     >
@@ -151,13 +175,25 @@
                               [disabled]="disableButton"
                               style="
                                 color: #ffffff !important;
-                                border-color: #37A647 !important;
+                                border-color: #37a647 !important;
-                                background-color: #37A647 !important;
+                                background-color: #37a647 !important;
                               "
                               (click)="addPhone()"
                             >
                               <i class="feather ft-plus"></i> Add Room
                             </button>
+                            <button
+                              type="button"
+                              class="btn btn-primary ml-2"
+                              style="
+                                color: #ffffff !important;
+                                border-color: #37a647 !important;
+                                background-color: #37a647 !important;
+                              "
+                              (click)="modalAddNewRoom()"
+                            >
+                              New Room
+                            </button>
                           </div>
                           <div class="form-group" *ngIf="mode !== 'add'">
                             <label for="roomId">Room *</label>
@@ -230,7 +266,7 @@
                         style="
                           color: #242222 !important;
                           border-color: #242222 !important;
-                          background-color: #FBFBFB !important;
+                          background-color: #fbfbfb !important;
                         "
                         (click)="cancel()"
                       >
@@ -242,8 +278,8 @@
                         [disabled]="disableButton"
                         style="
                           color: #ffffff !important;
-                          border-color: #37A647 !important;
+                          border-color: #37a647 !important;
-                          background-color: #37A647 !important;
+                          background-color: #37a647 !important;
                         "
                         (click)="save()"
                       >

src/app/content/hemat-app/list-monitoring/add-edit-list/add-edit-list.component.ts

@@ -1,15 +1,25 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild } from "@angular/core";
-import { FormArray, FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
+import {
-import { ActivatedRoute, Router } from '@angular/router';
+  FormArray,
-import { BlockUI, NgBlockUI } from 'ng-block-ui';
+  FormBuilder,
-import { BuildingService } from '../../service/monitoring-api.service';
+  FormGroup,
-import { LoginService } from '../../service/login.service';
+  NgForm,
-import { ToastrService } from 'ngx-toastr';
+  Validators,
+} from "@angular/forms";
+import { ActivatedRoute, Router } from "@angular/router";
+import { BlockUI, NgBlockUI } from "ng-block-ui";
+import { BuildingService } from "../../service/monitoring-api.service";
+import { LoginService } from "../../service/login.service";
+import { ToastrService } from "ngx-toastr";
+import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
+import { AddEditMasterBuildingComponent } from "../../master/master-building/add-edit-master-building/add-edit-master-building.component";
+import { AddEditMasterComponent } from "../../master/add-edit-master/add-edit-master.component";
+import { AddEditMasterRoomComponent } from "../../master/master-room/add-edit-master-room/add-edit-master-room.component";
 
 @Component({
-  selector: 'app-add-edit-list',
+  selector: "app-add-edit-list",
-  templateUrl: './add-edit-list.component.html',
+  templateUrl: "./add-edit-list.component.html",
-  styleUrls: ['./add-edit-list.component.css']
+  styleUrls: ["./add-edit-list.component.css"],
 })
 export class AddEditListComponent {
   // @ViewChild("f", { read: true }) userProfileForm: NgForm;
@@ -22,17 +32,19 @@ export class AddEditListComponent {
 
   dataBuildingList: any;
   dataRoomList: any;
+  dataRoomListSementara: any;
   dataFloorList: any;
   dataMasterStatus: any;
   roombuildingId: any;
   dataRoomBuilding: any;
   disableButton: boolean = true;
+  lewatModal: boolean = false;
   // userProfileForm: FormGroup;
   public userList: FormArray;
 
   @BlockUI("projectInfo") blockUIProjectInfo: NgBlockUI;
   get userFormGroup() {
-    return this.projectInfo.get('userArray') as FormArray;
+    return this.projectInfo.get("userArray") as FormArray;
   }
 
   constructor(
@@ -42,6 +54,7 @@ export class AddEditListComponent {
     private monitoringApiService: BuildingService,
     private authService: LoginService,
     private toastr: ToastrService,
+    private modalService: NgbModal
   ) {}
 
   ngOnInit() {
@@ -50,18 +63,15 @@ export class AddEditListComponent {
     this.route.data.subscribe((data) => {
       this.mode = data.mode;
     });
-    this.route.params.subscribe(params => {
+    this.route.params.subscribe((params) => {
-      const id = params['id'];
+      const id = params["id"];
       this.roombuildingId = id;
       if (id) {
         this.loadRoomBuilding(id);
       }
     });
     this.setBreadcrumb();
-    this.dataListBuilding();
+    
-    this.dataListRoom();
-    this.dataListMaster();
-    this.dataListFloor();
 
     this.projectInfo = this.formBuilder.group({
       buildingId: ["", Validators.required],
@@ -70,44 +80,54 @@ export class AddEditListComponent {
       floorId: ["", Validators.required],
       userArray: this.formBuilder.array([this.createRoom()]),
     });
-    this.userList = this.projectInfo.get('userArray') as FormArray;
+    this.userList = this.projectInfo.get("userArray") as FormArray;
+
+    this.dataListBuilding();
+    this.dataListRoom();
+    this.dataListMaster();
+    this.dataListFloor();
   }
 
   createRoom(): FormGroup {
     return this.formBuilder.group({
-      roomId: ['', Validators.required]
+      roomId: ["", Validators.required],
     });
   }
 
   addPhone() {
     this.userList.push(this.createRoom());
-    this.disableButton = true
+    this.disableButton = true;
   }
 
   removePhone(index) {
     this.userList.removeAt(index);
-    this.isRoomDuplicate(index)
+    this.isRoomDuplicate(index);
   }
 
   validateDouble(event: any, index: number) {
+    console.log(event);
+    
     const selectedRoomId = (event.target as HTMLSelectElement).value;
     if (this.isRoomDuplicate(index)) {
-      this.disableButton = true
+      this.disableButton = true;
       this.toastr.error("Room", "Data yang ada masukan double!", {
         timeOut: 2000,
         closeButton: true,
       });
     } else {
-      this.disableButton = false
+      this.disableButton = false;
     }
+    
   }
 
   isRoomDuplicate(index: number): boolean {
     const selectedRooms = this.userFormGroup.value.map((room) => room.roomId);
     const currentRoomId = selectedRooms[index];
-    const roomOccurrences = selectedRooms.filter(roomId => roomId === currentRoomId).length;
+    const roomOccurrences = selectedRooms.filter(
+      (roomId) => roomId === currentRoomId
+    ).length;
     if (roomOccurrences === 0) {
-      this.disableButton = false
+      this.disableButton = false;
     }
     return roomOccurrences > 1;
   }
@@ -153,28 +173,31 @@ export class AddEditListComponent {
   }
 
   loadRoomBuilding(deviceId: string) {
-    this.monitoringApiService.getRoomBuildingById(deviceId).subscribe(data => {
+    this.monitoringApiService
-      this.dataRoomBuilding = data;
+      .getRoomBuildingById(deviceId)
-      this.formGetDevice(data)
+      .subscribe((data) => {
-    });
+        this.dataRoomBuilding = data;
+        this.formGetDevice(data);
+      });
   }
 
-  formGetDevice(data){
+  formGetDevice(data) {
     this.projectInfo.patchValue({
       buildingId: data.data.buildingId,
       roomId: data.data.roomId,
+      floorId: data.data.floorId,
       statusId: data.data.statusId,
     });
 
-    if (this.mode === 'view') {
+    if (this.mode === "view") {
       this.formDisable();
     }
   }
 
-  formDisable(){
+  formDisable() {
-    this.projectInfo.get('buildingId').disable()
+    this.projectInfo.get("buildingId").disable();
-    this.projectInfo.get('roomId').disable()
+    this.projectInfo.get("roomId").disable();
-    this.projectInfo.get('statusId').disable()
+    this.projectInfo.get("statusId").disable();
   }
 
   isEditMode() {
@@ -209,66 +232,198 @@ export class AddEditListComponent {
   }
 
   dataListBuilding() {
-    this.monitoringApiService.getBuildingList().subscribe(data => {
+    this.monitoringApiService.getBuildingList().subscribe((data) => {
-      this.dataBuildingList = data.data.filter(item => item.statusName.toLowerCase() === "aktif" || item.status_id === 71)
+      this.dataBuildingList = data.data
+        .filter(
+          (item) =>
+            item.statusName.toLowerCase() === "aktif" || item.status_id === 71
+        )
+        .sort((a, b) => b.id - a.id);
+
+      if (this.lewatModal) {
+        this.projectInfo.patchValue({
+          buildingId: this.dataBuildingList[0],
+        });
+        this.lewatModal = false;
+      }
     });
   }
 
   dataListRoom() {
-    this.monitoringApiService.getListRoomDataUnmap().subscribe(data => {
+    this.monitoringApiService.getListRoomDataUnmap().subscribe((data) => {
-      const newArray = data.data.map(item => ({
+      console.log(data);
+      
+      const newArray = data.data.map((item) => ({
         id: item.id,
-        name: `${item.name} (${item.code})`
+        name: `${item.name} (${item.code})`,
-      }));
+      })).sort((a, b) => b.id - a.id);
-      this.dataRoomList = newArray
+      this.dataRoomList = newArray;
     });
   }
 
   dataListFloor() {
-    this.monitoringApiService.getListFloorDataUnmap(6).subscribe(data => {
+    this.monitoringApiService.getListFloorDataUnmap(6).subscribe((data) => {
-      console.log(data);
+      const newArray = data.data.map((item) => ({
-      
-      const newArray = data.data.map(item => ({
         id: item.id,
-        name: `${item.name} (${item.code})`
+        name: `${item.name} (${item.code})`,
-      }));
+      })).sort((a, b) => b.id - a.id);
-      this.dataFloorList = newArray
+      this.dataFloorList = newArray;
+
+      if (this.lewatModal) {
+        this.projectInfo.patchValue({
+          floorId: this.dataFloorList[0],
+        });
+        this.lewatModal = false;
+      }
     });
   }
 
   dataListMaster() {
-    this.monitoringApiService.getMasterListData().subscribe(data => {
+    this.monitoringApiService.getMasterListData().subscribe((data) => {
       const dataStatus = data.data.find(
         (item) => item.name === "master_status"
       ).headerDetailParam;
-      this.dataMasterStatus = dataStatus.filter(item => item.statusName.toLowerCase() === "aktif" || item.status.toLowerCase() === "71")
+      this.dataMasterStatus = dataStatus.filter(
+        (item) =>
+          item.statusName.toLowerCase() === "aktif" ||
+          item.status.toLowerCase() === "71"
+      );
     });
   }
 
   save() {
-    if (this.mode === 'add') {
+    if (this.mode === "add") {
       if (this.projectInfo.invalid) {
         return;
       }
       const formData = this.projectInfo.value;
       const transformedData = {
         buildingId: formData.buildingId,
-        roomId: formData.userArray.map(room => room.roomId),
+        roomId: formData.userArray.map((room) => room.roomId),
         statusId: formData.statusId,
-        floorId: formData.floorId
+        floorId: formData.floorId,
       };
-      this.monitoringApiService.postBatchBuilding(transformedData).subscribe((res) => {
+      this.monitoringApiService
-        this.router.navigate(["/list-monitoring"]);
+        .postBatchBuilding(transformedData)
-      });
+        .subscribe((res) => {
+          this.router.navigate(["/list-monitoring"]);
+        });
     } else {
       delete this.projectInfo.value.userArray;
-      this.monitoringApiService.puttBuildingRoom(this.projectInfo.value, this.roombuildingId).subscribe(data => {
+      this.monitoringApiService
-        this.router.navigate(["/list-monitoring"]);
+        .puttBuildingRoom(this.projectInfo.value, this.roombuildingId)
-      });
+        .subscribe((data) => {
+          this.router.navigate(["/list-monitoring"]);
+        });
     }
   }
 
   cancel() {
     this.router.navigate(["/list-monitoring"]);
   }
+
+  modalAddBuilding() {
+    const modalRef = this.modalService.open(AddEditMasterBuildingComponent, {
+      size: "lg",
+      backdrop: "static",
+      keyboard: false,
+    });
+
+    modalRef.componentInstance.mode = "add";
+    modalRef.result.then(
+      (result) => {
+        if (result) {
+          if (
+            this.dataBuildingList.some(
+              (value) =>
+                value.name.trim().toLowerCase() ===
+                result.name.trim().toLowerCase()
+            )
+          ) {
+            this.toastr.error("Warning", "Data yang anda masukan double.", {
+              timeOut: 5000,
+              closeButton: true,
+            });
+          } else {
+            this.monitoringApiService
+              .postMasterBuildingParam(result)
+              .subscribe((res) => {
+                this.dataListBuilding();
+                this.lewatModal = true;
+              });
+          }
+        }
+      },
+      (reason) => {
+        console.log(`Dismissed: ${reason}`);
+      }
+    );
+  }
+
+  modalAddFloor() {
+    const modalRef = this.modalService.open(AddEditMasterComponent, {
+      size: "lg",
+      backdrop: "static", 
+      keyboard: false, 
+    });
+
+    modalRef.componentInstance.headerId = 6;
+    modalRef.componentInstance.mode = "add";
+    modalRef.componentInstance.floor = true;
+    modalRef.result.then(
+      (result) => {
+        if (result) {
+          this.monitoringApiService
+            .postHeaderDetailParam(result)
+            .subscribe((res) => {
+              this.dataListFloor();
+              this.lewatModal = true;
+              if (res.status === 400) {
+                this.toastr.error("Warning", "Data yang anda masukan double.", {
+                  timeOut: 5000,
+                  closeButton: true,
+                });
+              }
+            });
+        }
+      },
+      (reason) => {
+        console.log(`Dismissed: ${reason}`);
+      }
+    );
+  }
+
+  modalAddNewRoom(){
+    const modalRef = this.modalService.open(AddEditMasterRoomComponent, {
+      size: "lg",
+      backdrop: "static",
+      keyboard: false,
+    });
+
+    modalRef.componentInstance.mode = "add";
+    modalRef.result.then(
+      (result) => {
+        if (result) {
+          const filteredData = {
+            name: result.name,
+            code: result.code.trim(),
+            description: result.description,
+          };
+          this.monitoringApiService
+            .postMasterRoomParam(filteredData)
+            .subscribe((res) => {
+              this.dataListRoom();
+            }, (error) => {
+              this.toastr.error("Error", error.error.message, {
+                timeOut: 2000,
+                closeButton: true,
+              });
+            });
+        }
+      },
+      (reason) => {
+        console.log(`Dismissed: ${reason}`);
+      }
+    );
+  }
 }

src/app/content/hemat-app/master/master-floor/master-floor.component.ts

@@ -1,16 +1,16 @@
-import { Component } from '@angular/core';
+import { Component } from "@angular/core";
-import { AddEditMasterComponent } from '../add-edit-master/add-edit-master.component';
+import { AddEditMasterComponent } from "../add-edit-master/add-edit-master.component";
-import { TableApiService } from 'src/app/_services/table-api.service';
+import { TableApiService } from "src/app/_services/table-api.service";
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
-import { Router } from '@angular/router';
+import { Router } from "@angular/router";
-import { BuildingService } from '../../service/monitoring-api.service';
+import { BuildingService } from "../../service/monitoring-api.service";
-import { LoginService } from '../../service/login.service';
+import { LoginService } from "../../service/login.service";
-import { ToastrService } from 'ngx-toastr';
+import { ToastrService } from "ngx-toastr";
 
 @Component({
-  selector: 'app-master-floor',
+  selector: "app-master-floor",
-  templateUrl: './master-floor.component.html',
+  templateUrl: "./master-floor.component.html",
-  styleUrls: ['./master-floor.component.css']
+  styleUrls: ["./master-floor.component.css"],
 })
 export class MasterFloorComponent {
   data: any;
@@ -26,7 +26,7 @@ export class MasterFloorComponent {
     private router: Router,
     private monitoringApiService: BuildingService,
     private authService: LoginService,
-    private toastr: ToastrService,
+    private toastr: ToastrService
   ) {}
 
   ngOnInit() {
@@ -55,7 +55,9 @@ export class MasterFloorComponent {
         (item) => item.name === "master_floor"
       );
       // this.filteredRows = this.dataMasterCategori.headerDetailParam;
-      this.filteredRows = this.dataMasterCategori.headerDetailParam.sort((a, b) => b.id - a.id);
+      this.filteredRows = this.dataMasterCategori.headerDetailParam.sort(
+        (a, b) => b.id - a.id
+      );
     });
   }
 
@@ -83,8 +85,8 @@ export class MasterFloorComponent {
   openAddMasterModal() {
     const modalRef = this.modalService.open(AddEditMasterComponent, {
       size: "lg",
-      backdrop: 'static',  // Add this line
+      backdrop: "static", // Add this line
-      keyboard: false  // Add this line
+      keyboard: false, // Add this line
     });
 
     modalRef.componentInstance.headerId = this.dataMasterCategori.id;
@@ -94,16 +96,9 @@ export class MasterFloorComponent {
       (result) => {
         console.log(result);
         if (result) {
-          if (this.filteredRows.some(value => value.name.trim().toLowerCase() === result.name.trim().toLowerCase())) {
+          this.monitoringApiService
-            this.toastr.error("Warning", "Data yang anda masukan double.", {
-              timeOut: 5000,
-              closeButton: true,
-            });
-          } else {
-            this.monitoringApiService
             .postHeaderDetailParam(result)
             .subscribe((res) => {
-              console.log(res);
               this.fetchData();
               if (res.status === 400) {
                 this.toastr.error("Warning", "Data yang anda masukan double.", {
@@ -112,7 +107,6 @@ export class MasterFloorComponent {
                 });
               }
             });
-          }
         }
         // if (result) {
         //   this.monitoringApiService
@@ -132,8 +126,8 @@ export class MasterFloorComponent {
   editRow(row) {
     const modalRef = this.modalService.open(AddEditMasterComponent, {
       size: "lg",
-      backdrop: 'static',  // Add this line
+      backdrop: "static", // Add this line
-      keyboard: false  // Add this line
+      keyboard: false, // Add this line
     });
 
     modalRef.componentInstance.headerId = this.dataMasterCategori.id;
@@ -145,10 +139,14 @@ export class MasterFloorComponent {
         if (result) {
           if (
             this.filteredRows.some(
-              (value) => value.name.trim().toLowerCase() === result.name.trim().toLowerCase()
+              (value) =>
+                value.name.trim().toLowerCase() ===
+                result.name.trim().toLowerCase()
             )
           ) {
-            if (row.name.trim().toLowerCase() === result.name.trim().toLowerCase()) {
+            if (
+              row.name.trim().toLowerCase() === result.name.trim().toLowerCase()
+            ) {
               this.monitoringApiService
                 .putHeaderDetailParam(result, row.id)
                 .subscribe((res) => {
@@ -156,17 +154,22 @@ export class MasterFloorComponent {
                   console.log(res);
 
                   if (res.status === 400) {
-                    this.toastr.error("Warning", "Data yang anda masukan double.", {
+                    this.toastr.error(
-                      timeOut: 5000,
+                      "Warning",
-                      closeButton: true,
+                      "Data yang anda masukan double.",
-                    });
+                      {
+                        timeOut: 5000,
+                        closeButton: true,
+                      }
+                    );
                   }
                 });
             } else {
               if (
                 this.filteredRows.some(
                   (value) =>
-                    value.name.trim().toLowerCase() === result.name.trim().toLowerCase()
+                    value.name.trim().toLowerCase() ===
+                    result.name.trim().toLowerCase()
                 )
               ) {
                 this.toastr.error("Warning", "Data yang anda masukan double.", {