penambahan UI untuk room building ID

2024-07-18 14:02:57 +07:00 · 2024-07-18 14:02:57 +07:00 · 721d4e9af9
parent 153b47eaaa
commit 721d4e9af9
11 changed files with 198 additions and 270 deletions
--- a/src/app/_layout/settings/menu-settings.config.ts
+++ b/src/app/_layout/settings/menu-settings.config.ts
@ -1018,10 +1018,7 @@ export const MenuSettingsConfig: MenuConfig = {
        page: "null",
        submenu: {
          items: [
-            // {
-            //   title: "Monitoring List",
-            //   page: "/list-monitoring",
-            // },
+            
            {
              title: "Master Category",
              page: "/master/master-category",
@ -1062,6 +1059,10 @@ export const MenuSettingsConfig: MenuConfig = {
              title: "Master Building",
              page: "/master/master-building",
            },
+            {
+              title: "Master Monitoring List",
+              page: "/list-monitoring",
+            },
          ],
        },
      },
--- a/src/app/content/hemat-app/list-monitoring/add-edit-list/add-edit-list.component.html
+++ b/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: #000000 !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,13 +7,13 @@
      <section id="basic-form-layouts">
        <div class="row">
          <div class="col-12" *blockUI="'projectInfo'; message: 'Loading'">
-            <div class="card" style="background-color: #252525 !important">
+            <div class="card" style="background-color: #FBFBFB !important">
              <div class="card-content">
                <div
                  class="card-header"
-                  style="background-color: #252525 !important"
+                  style="background-color: #FBFBFB !important"
                >
-                  <h2 style="color: #ffffff">
+                  <h2 style="color: #242222">
                    {{
                      isEditMode()
                        ? "Edit List Monitoring"
@ -29,14 +29,14 @@
                    (ngSubmit)="onProjectInfoSubmit()"
                  >
                    <div class="form-body">
-                      <h4 class="form-section" style="color: #ffffff">
-                        <i class="feather ft-user" style="color: #ffffff"></i>
+                      <h4 class="form-section" style="color: #242222">
+                        <i class="feather ft-user" style="color: #242222"></i>
                        General Information
                      </h4>
                      <div class="row">
                        <div class="col-md-6">
                          <div class="form-group">
-                            <label for="buildingId" style="color: #ffffff"
+                            <label for="buildingId" style="color: #242222"
                              >Building *</label
                            >
                            <div class="input-group">
@ -69,7 +69,7 @@
                        </div>
                        <div class="col-md-6">
                          <div class="form-group">
-                            <label for="statusId" style="color: #ffffff"
+                            <label for="statusId" style="color: #242222"
                              >Status *</label
                            >
                            <div class="input-group">
@ -118,6 +118,7 @@
                                      id="roomId"
                                      class="form-control"
                                      formControlName="roomId"
+                                      (change)="validateDouble($event, i)"
                                      [ngClass]="{
                                        'is-invalid':
                                          submitted && f.roomId.errors
@ -134,9 +135,9 @@
                                      class="btn btn-danger"
                                      type="button"
                                      style="
-                                        color: #000000 !important;
-                                        border-color: #bef264 !important;
-                                        background-color: #bef264 !important;
+                                        color: #ffffff !important;
+                                        border-color: #37A647 !important;
+                                        background-color: #37A647 !important;
                                      "
                                      (click)="removePhone(i)"
                                    >
@ -149,10 +150,11 @@
                            <button
                              type="button"
                              class="btn btn-primary"
+                              [disabled]="disableButton"
                              style="
-                                color: #000000 !important;
-                                border-color: #bef264 !important;
-                                background-color: #bef264 !important;
+                                color: #ffffff !important;
+                                border-color: #37A647 !important;
+                                background-color: #37A647 !important;
                              "
                              (click)="addPhone()"
                            >
@ -196,9 +198,9 @@
                        type="button"
                        class="btn btn-warning mr-1"
                        style="
-                          color: #bef264 !important;
-                          border-color: #bef264 !important;
-                          background-color: #000000 !important;
+                          color: #242222 !important;
+                          border-color: #242222 !important;
+                          background-color: #FBFBFB !important;
                        "
                        (click)="cancel()"
                      >
@ -207,12 +209,12 @@
                      <button
                        type="submit"
                        class="btn btn-primary"
+                        [disabled]="disableButton"
                        style="
-                          color: #000000 !important;
-                          border-color: #bef264 !important;
-                          background-color: #bef264 !important;
+                          color: #ffffff !important;
+                          border-color: #37A647 !important;
+                          background-color: #37A647 !important;
                        "
-                        *ngIf="mode !== 'view'"
                        (click)="save()"
                      >
                        <i class="la la-check"></i> Save
--- a/src/app/content/hemat-app/list-monitoring/add-edit-list/add-edit-list.component.ts
+++ b/src/app/content/hemat-app/list-monitoring/add-edit-list/add-edit-list.component.ts
@ -4,6 +4,7 @@ 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';

@Component({
  selector: 'app-add-edit-list',
@ -24,6 +25,7 @@ export class AddEditListComponent {
  dataMasterStatus: any;
  roombuildingId: any;
  dataRoomBuilding: any;
+  disableButton: boolean = false;
  // userProfileForm: FormGroup;
  public userList: FormArray;

@ -37,7 +39,8 @@ export class AddEditListComponent {
    private router: Router,
    private route: ActivatedRoute,
    private monitoringApiService: BuildingService,
-    private authService: LoginService
+    private authService: LoginService,
+    private toastr: ToastrService,
  ) {}

  ngOnInit() {
@ -79,59 +82,66 @@ export class AddEditListComponent {

  removePhone(index) {
    this.userList.removeAt(index);
+    this.isRoomDuplicate(index)
+    
+  }
+
+  validateDouble(event: any, index: number) {
+    const selectedRoomId = (event.target as HTMLSelectElement).value;
+    if (this.isRoomDuplicate(index)) {
+      this.disableButton = true
+      this.toastr.error("Room", "Data yang ada masukan double!", {
+        timeOut: 2000,
+        closeButton: true,
+      });
+    } else {
+      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;
+    if (roomOccurrences === 0) {
+      this.disableButton = false
+    }
+    return roomOccurrences > 1;
  }

  setBreadcrumb() {
    if (this.isAddMode()) {
      this.breadcrumb = {
-        mainlabel: "Cost Management",
+        mainlabel: "List Monitoring",
        links: [
          {
            name: "Home",
            isLink: false,
          },
          {
-            name: "Cost Management",
+            name: "List Monitoring",
            isLink: false,
          },
          {
-            name: "Add New Cost Management",
+            name: "Add New List Monitoring",
            isLink: false,
          },
        ],
      };
    } else if (this.isEditMode()) {
      this.breadcrumb = {
-        mainlabel: "Cost Management",
+        mainlabel: "List Monitoring",
        links: [
          {
            name: "Home",
            isLink: false,
          },
          {
-            name: "Cost Management",
+            name: "List Monitoring",
            isLink: false,
          },
          {
-            name: "Edit New Cost Management",
-            isLink: false,
-          },
-        ],
-      };
-    } else if (this.isViewMode()) {
-      this.breadcrumb = {
-        mainlabel: "Cost Management",
-        links: [
-          {
-            name: "Home",
-            isLink: false,
-          },
-          {
-            name: "Cost Management",
-            isLink: false,
-          },
-          {
-            name: "View New Cost Management",
+            name: "Edit New List Monitoring",
            isLink: false,
          },
        ],
@ -197,12 +207,12 @@ export class AddEditListComponent {

  dataListBuilding() {
    this.monitoringApiService.getBuildingList().subscribe(data => {
-      this.dataBuildingList = data.data.filter(item => item.statusId === 2)
+      this.dataBuildingList = data.data.filter(item => item.statusName.toLowerCase() === "aktif" || item.status_id === 71)
    });
  }

  dataListRoom() {
-    this.monitoringApiService.getListRoomData().subscribe(data => {
+    this.monitoringApiService.getListRoomDataUnmap().subscribe(data => {
      this.dataRoomList = data.data
    });
  }
--- a/src/app/content/hemat-app/list-monitoring/list-monitoring.component.css
+++ b/src/app/content/hemat-app/list-monitoring/list-monitoring.component.css
@ -271,19 +271,21 @@
  ul
  li:not(.disabled):hover
  a {
-  background-color: #252525;
+  background-color: #37A647;
  font-weight: bold;
  color: white;
 }

 :host ::ng-deep .ngx-datatable.bootstrap .datatable-footer {
-  background: #252525;
-  color: #ededed;
+  background: #DDE1E6;
+  color: #242222;
  margin-top: -1px;
  overflow: inherit;
 }

 :host ::ng-deep .ngx-datatable.bootstrap .datatable-header {
+  background: #DDE1E6;
+  color: #242222;
  font-weight: bold;
  height: unset !important;
  overflow: inherit;
@ -311,53 +313,38 @@
 }

 :host ::ng-deep .ng-select .ng-select-container {
-  color: #ffffff !important;
-  background-color: #252525 !important;
+  color: #242222 !important;
+  background-color: #FBFBFB !important;
  height: 40px !important;
+  border-radius: 12px !important;
+  box-shadow: 0 2px 4px rgba(36, 34, 34, 0.2) !important; /* Bayangan lebih tipis */
+}
+
+:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input {
+  color: #242222 !important;
 }

 :host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row {
-  background-color: rgba(190, 242, 100, 0.11); /* Black color for table rows */
+  background-color: #FBFBFB; /* Black color for table rows */
 }

 :host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row:hover {
-  background-color: #1a1a1a; /* Darker black for hover effect */
+  background-color: #DDE1E6; /* Darker black for hover effect */
 }

-/* Tambahkan ini ke styles.css atau CSS komponen */
-
-/* Custom styles for Swal buttons */
-.div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
-  background-color: #bef264 !important;
-  color: white !important;
-  border: none !important;
-  padding: 10px 20px !important;
-  border-radius: 5px !important;
-  font-size: 16px !important;
+.text-custom-label{
+  color: #242222 !important;
+  font-family: "Open Sans", sans-serif !important;
+  font-size: 16px;
 }

-.swal2-cancel.btn-cancel {
-  background-color: #dc3545 !important;
-  color: white !important;
-  border: none !important;
-  padding: 10px 20px !important;
-  border-radius: 5px !important;
-  font-size: 16px !important;
+.text-custom-data{
+  color: #242222 !important;
+  font-family: "Open Sans", sans-serif !important;
+  font-size: 24px;
+  font-weight: 700;
 }

-.swal2-confirm.btn-confirm:hover {
-  background-color: #218838 !important;
+.style-custom-label{
+  color: #242222 !important;
 }
-
-.swal2-cancel.btn-cancel:hover {
-  background-color: #c82333 !important;
-}
-
-/* Custom Swal background */
-.swal2-popup.custom-swal-background {
-  background-color: #000000 !important; /* Warna background hitam */
-  color: white !important; /* Warna teks putih */
-}
-
-
-
--- a/src/app/content/hemat-app/list-monitoring/list-monitoring.component.html
+++ b/src/app/content/hemat-app/list-monitoring/list-monitoring.component.html
@ -1,4 +1,4 @@
-<div class="app-content content" style="background-color: #000000 !important">
+<div class="app-content content" style="background-color: #FBFBFB !important">
  <div class="content-wrapper" style="height: 900px !important;">
    <div class="content-header row mb-1">
      <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
@ -7,7 +7,7 @@
      <section id="configuration">
        <div class="row">
          <div class="col-12">
-            <div class="card" style="background-color: #252525 !important">
+            <div class="card" style="background-color: #FBFBFB !important">
              <div class="card-content">
                <div class="card-body">
                  <div class="row mb-2">
@ -26,9 +26,9 @@
                        class="btn btn-secondary"
                        [routerLink]="['/list-monitoring/add-row']"
                        style="
-                          background-color: #bef264 !important;
-                          border-color: #bef264 !important;
-                          color: #000000 !important;
+                          background-color: #37A647 !important;
+                          border-color: #37A647 !important;
+                          color: #ffffff !important;
                        "
                      >
                        <i class="feather ft-plus" style="color: #ffffff"></i
@ -40,7 +40,7 @@
                  <div class="card-dashboard">
                    <ngx-datatable
                      class="bootstrap table-bordered"
-                      [limit]="5"
+                      [limit]="10"
                      [rows]="filteredRows"
                      [columnMode]="'force'"
                      [headerHeight]="50"
@ -58,7 +58,7 @@
                          ngx-datatable-cell-template
                          let-rowIndex="rowIndex"
                        >
-                          <p style="color: #ffffff">{{ rowIndex + 1 }}</p>
+                          <p class="style-custom-label">{{ rowIndex + 1 }}</p>
                        </ng-template>
                      </ngx-datatable-column>

@ -68,13 +68,13 @@
                        [minWidth]="90"
                      >
                        <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff">Building</span>
+                          <span class="style-custom-label">Building</span>
                        </ng-template>
                        <ng-template
                          let-value="value"
                          ngx-datatable-cell-template
                        >
-                          <p style="color: #ffffff">{{ value.name }}</p>
+                          <p class="style-custom-label">{{ value.name }}</p>
                        </ng-template>
                      </ngx-datatable-column>

@ -84,13 +84,13 @@
                        [minWidth]="90"
                      >
                        <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff">Room</span>
+                          <span class="style-custom-label">Room</span>
                        </ng-template>
                        <ng-template
                          ngx-datatable-cell-template
                          let-value="value"
                        >
-                          <p style="color: #ffffff">{{ value.name }}</p>
+                          <p class="style-custom-label">{{ value.name }}</p>
                        </ng-template>
                      </ngx-datatable-column>

@ -100,13 +100,13 @@
                        [minWidth]="90"
                      >
                        <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff">Status</span>
+                          <span class="style-custom-label">Status</span>
                        </ng-template>
                        <ng-template
                          ngx-datatable-cell-template
                          let-value="value"
                        >
-                          <p style="color: #ffffff">{{ value.name }}</p>
+                          <p class="style-custom-label">{{ value.name }}</p>
                        </ng-template>
                      </ngx-datatable-column>

@ -116,33 +116,26 @@
                        [minWidth]="150"
                      >
                        <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff">Actions</span>
+                          <span class="style-custom-label">Actions</span>
                        </ng-template>
                        <ng-template
                          ngx-datatable-cell-template
                          let-rowIndex="rowIndex"
                          let-row="row"
                        >
-                          <button
-                            class="btn btn-sm btn-info mr-1"
-                            style="background-color: #000000 !important; border-color: #BEF264 !important;"
-                            (click)="viewRow(row)"
-                          >
-                            <i class="ficon feather ft-eye" style="color: #BEF264 !important;"></i>
-                          </button>
-                          <button
+                          <!-- <button
                            class="btn btn-sm btn-warning mr-1"
-                            style="background-color: #000000 !important; border-color: #BEF264 !important;"
+                            style="background-color: #FBFBFB !important; border-color: #37A647 !important;"
                            (click)="editRow(row)"
                          >
-                            <i class="ficon feather ft-edit" style="color: #BEF264 !important;"></i>
-                          </button>
+                            <i class="ficon feather ft-edit" style="color: #37A647 !important;"></i>
+                          </button> -->
                          <button
                            class="btn btn-sm btn-danger"
-                            style="background-color: #000000 !important; border-color: #BEF264 !important;"
+                            style="background-color: #FBFBFB !important; border-color: #37A647 !important;"
                            (click)="deleteRow(row)"
                          >
-                            <i class="ficon feather ft-trash-2" style="color: #BEF264 !important;"></i>
+                            <i class="ficon feather ft-trash-2" style="color: #37A647 !important;"></i>
                          </button>
                        </ng-template>
                      </ngx-datatable-column>
--- a/src/app/content/hemat-app/list-monitoring/list-monitoring.component.ts
+++ b/src/app/content/hemat-app/list-monitoring/list-monitoring.component.ts
@ -4,6 +4,7 @@ import { TableApiService } from "src/app/_services/table-api.service";
 import { BuildingService } from "../service/monitoring-api.service";
 import Swal from "sweetalert2";
 import { LoginService } from "../service/login.service";
+import { ToastrService } from "ngx-toastr";

@Component({
  selector: "app-list-monitoring",
@ -18,24 +19,24 @@ export class ListMonitoringComponent {
  rows: any = [];

  constructor(
-    private tableApiservice: TableApiService,
    private router: Router,
    private monitoringApiService: BuildingService,
-    private authService: LoginService
+    private authService: LoginService,
+    private toastr: ToastrService,
  ) {}

  ngOnInit() {
    this.authService.startTokenCheck();
    this.authService.startTrackingActivity();
    this.breadcrumb = {
-      mainlabel: "Cost Management",
+      mainlabel: "List Monitoring",
      links: [
        {
          name: "Home",
          isLink: false,
        },
        {
-          name: "Cost Management",
+          name: "List Monitoring",
          isLink: false,
        },
      ],
@ -52,19 +53,20 @@ export class ListMonitoringComponent {

  filterRows() {
    if (!this.searchTerm) {
-      this.filteredRows = [...this.data.rows];
+      this.filteredRows = [...this.data.results.data];
    } else {
-      this.filteredRows = this.data.rows.filter((row) =>
-        this.rowContainsSearchTerm(row)
+      const searchTermLC = this.searchTerm.toLowerCase();
+      this.filteredRows = this.data.results.data.filter((row) =>
+        this.rowContainsSearchTerm(row, searchTermLC)
      );
    }
  }

-  rowContainsSearchTerm(row: any): boolean {
-    const searchTermLC = this.searchTerm.toLowerCase();
-    return Object.values(row).some(
-      (value) =>
-        value !== null && value.toString().toLowerCase().includes(searchTermLC)
+  rowContainsSearchTerm(row: any, searchTermLC: string): boolean {
+    return (
+      row.buildingEntity.name.toLowerCase().includes(searchTermLC) ||
+      row.roomEntity.name.toLowerCase().includes(searchTermLC) ||
+      row.statusEntity.name.toLowerCase().includes(searchTermLC)
    );
  }

@ -77,59 +79,25 @@ export class ListMonitoringComponent {
  }

  deleteRow(row) {
-    const swalWithBootstrapButtons = Swal.mixin({
-      customClass: {
-        confirmButton: "btn-confirm",
-        cancelButton: "btn-cancel",
-        popup: "custom-swal-background",
-      },
-    });
-    swalWithBootstrapButtons.fire({
-      title: "Are you sure?",
-      text: "Do you want to delete?",
-      icon: "question",
-      showCancelButton: true,
-      confirmButtonText: "Yes",
-      cancelButtonText: "No",
-    }).then((result) => {
-      if (result.isConfirmed) {
-        Swal.fire({
-          title: "Loading...",
-          text: "Please wait",
-          allowOutsideClick: false,
-          customClass: {
-            popup: "custom-swal-background",
-          },
-          didOpen: () => {
-            Swal.showLoading();
-          },
-        });
-        setTimeout(() => {
-          this.monitoringApiService
-            .deleteRoomBuilding(row.id)
-            .subscribe((data) => {
-              Swal.fire({
-                title: "Confirmed!",
-                text: "You clicked Yes.",
-                icon: "success",
-                customClass: {
-                  popup: "custom-swal-background",
-                },
-              });
-              this.fetchData();
-            });
-        }, 2000);
-      } else if (result.isDismissed) {
-        Swal.fire({
-          title: "Cancelled",
-          text: "You clicked No.",
-          icon: "error",
-          customClass: {
-            popup: "custom-swal-background",
-          },
-        });
-      }
-    });
+    const confirmDelete = confirm("Are you sure you want to delete this item?");
+    if (confirmDelete) {
+      this.monitoringApiService.deleteRoomBuilding(row.id).subscribe(
+        (res) => {
+          this.fetchData();
+          this.toastr.success("Success", "Delete Completed.", {
+            timeOut: 2000,
+            closeButton: true,
+          });
+        },
+        (error) => {
+          console.error(error);
+          this.toastr.error("Error", "Data sedang digunakan!", {
+            timeOut: 2000,
+            closeButton: true,
+          });
+        }
+      );
+    }
  }

  onTouchStart(event: Event) {
--- a/src/app/content/hemat-app/master/master-room/add-edit-master-room/add-edit-master-room.component.html
+++ b/src/app/content/hemat-app/master/master-room/add-edit-master-room/add-edit-master-room.component.html
@ -23,7 +23,7 @@
          Name is required.
        </div>
      </div>
-      <div class="form-group col-md-6">
+      <!-- <div class="form-group col-md-6">
        <label for="statusId" style="color: #242222">Building:</label>
        <select
          id="projectinput5"
@ -42,7 +42,7 @@
        >
          Building is required.
        </div>
-      </div>
+      </div> -->
      <div class="form-group col-md-6">
        <label for="description" style="color: #242222">Description:</label>
        <input
@ -56,7 +56,7 @@
          Description is required.
        </div>
      </div>
-      <div class="form-group col-md-6">
+      <!-- <div class="form-group col-md-6">
        <label for="statusId" style="color: #242222">Status:</label>
        <select
          id="projectinput5"
@ -70,7 +70,7 @@
        <div *ngIf="myForm.get('statusId').touched && myForm.get('statusId').invalid" class="text-danger">
          Status is required.
        </div>
-      </div>
+      </div> -->
    </div>
  </form>
 </div>
--- a/src/app/content/hemat-app/master/master-room/add-edit-master-room/add-edit-master-room.component.ts
+++ b/src/app/content/hemat-app/master/master-room/add-edit-master-room/add-edit-master-room.component.ts
@ -35,7 +35,6 @@ export class AddEditMasterRoomComponent {
    this.createForm();
    this.listDataStatus();
    this.listDataBuilding();
-    console.log(this.dataRow);
    if (this.mode === "add") {
      this.labelRoom = "Add New Row"
    } else {
@ -49,20 +48,17 @@ export class AddEditMasterRoomComponent {
  createForm() {
    this.myForm = this.fb.group({
      name: ["", Validators.required],
-      statusId: ["", Validators.required],
-      buildingId: ["", Validators.required],
      description: ["", Validators.required],
    });
  }

  editForm() {
+    console.log(this.dataRow);
+    
    this.myForm = this.fb.group({
      id: this.dataRow.id,
-      roomId: this.dataRow.roomId,
-      name: [this.dataRow.roomEntity.name, Validators.required],
-      statusId: [this.dataRow.statusId, Validators.required],
-      buildingId: [this.dataRow.buildingId, Validators.required],
-      description: [this.dataRow.roomEntity.description, Validators.required],
+      name: [this.dataRow.name, Validators.required],
+      description: [this.dataRow.description, Validators.required],
    });
  }

--- a/src/app/content/hemat-app/master/master-room/master-room.component.html
+++ b/src/app/content/hemat-app/master/master-room/master-room.component.html
@ -42,7 +42,7 @@
                  <div class="card-dashboard">
                    <ngx-datatable
                      class="bootstrap table-bordered"
-                      [limit]="5"
+                      [limit]="10"
                      [rows]="filteredRows"
                      [columnMode]="'force'"
                      [headerHeight]="50"
@ -64,7 +64,7 @@
                        </ng-template>
                      </ngx-datatable-column>
                      <ngx-datatable-column
-                        name="roomEntity"
+                        name="name"
                        [flexGrow]="1"
                        [minWidth]="90"
                      >
@ -75,28 +75,12 @@
                          let-value="value"
                          ngx-datatable-cell-template
                        >
-                        <p class="style-custom-label">{{ value.name }}</p>
+                        <p class="style-custom-label">{{ value }}</p>
                        </ng-template>
                      </ngx-datatable-column>

                      <ngx-datatable-column
-                        name="buildingEntity"
-                        [flexGrow]="1"
-                        [minWidth]="90"
-                      >
-                        <ng-template ngx-datatable-header-template>
-                          <span class="style-custom-label">Building</span>
-                        </ng-template>
-                        <ng-template
-                          let-value="value"
-                          ngx-datatable-cell-template
-                        >
-                        <p class="style-custom-label">{{ value.name }}</p>
-                        </ng-template>
-                      </ngx-datatable-column>
-
-                      <ngx-datatable-column
-                        name="roomEntity"
+                        name="description"
                        [flexGrow]="1"
                        [minWidth]="90"
                      >
@ -104,28 +88,13 @@
                          <span class="style-custom-label">Description</span>
                        </ng-template>
                        <ng-template
-                          ngx-datatable-cell-template
                          let-value="value"
+                          ngx-datatable-cell-template
                        >
-                        <p class="style-custom-label">{{ value.description }}</p>
+                        <p class="style-custom-label">{{ value }}</p>
                        </ng-template>
                      </ngx-datatable-column>

-                      <ngx-datatable-column
-                        name="statusEntity"
-                        [flexGrow]="1"
-                        [minWidth]="90"
-                      >
-                        <ng-template ngx-datatable-header-template>
-                          <span class="style-custom-label">Status</span>
-                        </ng-template>
-                        <ng-template
-                          ngx-datatable-cell-template
-                          let-value="value"
-                        >
-                        <p class="style-custom-label">{{ value.name }}</p>
-                        </ng-template>
-                      </ngx-datatable-column>
                      <ngx-datatable-column
                        name="Actions"
                        [flexGrow]="1"
--- a/src/app/content/hemat-app/master/master-room/master-room.component.ts
+++ b/src/app/content/hemat-app/master/master-room/master-room.component.ts
@ -23,7 +23,7 @@ export class MasterRoomComponent {
    private modalService: NgbModal,
    private monitoringApiService: BuildingService,
    private authService: LoginService,
-    private toastr: ToastrService,
+    private toastr: ToastrService
  ) {}

  ngOnInit() {
@ -46,7 +46,7 @@ export class MasterRoomComponent {
  }

  fetchData() {
-    this.monitoringApiService.getBuildingRoomList().subscribe((res) => {
+    this.monitoringApiService.getMasterRoomData().subscribe((res) => {
      this.data = res;
      this.filteredRows = this.data.results.data.sort((a, b) => b.id - a.id);
      // this.data.results.data.sort((a, b) => b.id - a.id);
@ -67,18 +67,16 @@ export class MasterRoomComponent {

  rowContainsSearchTerm(row: any, searchTermLC: string): boolean {
    return (
-      row.roomEntity.name.toLowerCase().includes(searchTermLC) ||
-      row.roomEntity.description.toLowerCase().includes(searchTermLC) ||
-      row.buildingEntity.name.toLowerCase().includes(searchTermLC) ||
-      row.statusEntity.name.toLowerCase().includes(searchTermLC)
+      row.name.toLowerCase().includes(searchTermLC) ||
+      row.description.toLowerCase().includes(searchTermLC)
    );
  }

  openAddMasterModal() {
    const modalRef = this.modalService.open(AddEditMasterRoomComponent, {
      size: "lg",
-      backdrop: "static", // Add this line
-      keyboard: false, // Add this line
+      backdrop: "static",
+      keyboard: false,
    });

    modalRef.componentInstance.mode = "add";
@ -92,16 +90,7 @@ export class MasterRoomComponent {
          this.monitoringApiService
            .postMasterRoomParam(filteredData)
            .subscribe((res) => {
-              const transformedData = {
-                buildingId: result.buildingId,
-                roomId: [res.data.id],
-                statusId: result.statusId,
-              };
-              this.monitoringApiService
-                .postBatchBuilding(transformedData)
-                .subscribe((res) => {
-                  this.fetchData();
-                });
+              this.fetchData();
            });
        }
      },
@ -129,19 +118,9 @@ export class MasterRoomComponent {
            description: result.description,
          };
          this.monitoringApiService
-            .putMasterRoomParam(filteredData, row.roomId)
+            .putMasterRoomParam(filteredData, row.id)
            .subscribe((res) => {
-              console.log(res);
-              const transformedData = {
-                buildingId: result.buildingId,
-                roomId: res.data.id,
-                statusId: result.statusId,
-              };
-              this.monitoringApiService
-                .puttBuildingRoom(transformedData, row.id)
-                .subscribe((res) => {
-                  this.fetchData();
-                });
+              this.fetchData();
            });
        }
      },
@ -155,14 +134,19 @@ export class MasterRoomComponent {
    const confirmDelete = confirm("Are you sure you want to delete this item?");
    if (confirmDelete) {
      this.monitoringApiService
-        .deleteHeaderDetailParam(row.roomEntity.id)
-        .subscribe((res) => {
-          this.monitoringApiService
-            .deleteRoomBuilding(row.id)
-            .subscribe((res) => {
-              this.fetchData();
+        .deleteRoom(row.id)
+        .subscribe(
+          (res) => {
+            this.fetchData();
+          },
+          (error) => {
+            console.error(error);
+            this.toastr.error("Error", "Data sedang digunakan!", {
+              timeOut: 2000,
+              closeButton: true,
            });
-        });
+          }
+        );
    }
  }
 }
--- a/src/app/content/hemat-app/service/monitoring-api.service.ts
+++ b/src/app/content/hemat-app/service/monitoring-api.service.ts
@ -102,6 +102,15 @@ export class BuildingService {
    return this.http.get<any>(url, { headers });
  }

+  getListRoomDataUnmap(): Observable<any> {
+    const url = `https://kapi.absys.ninja/hemat/room/list/unmap`;
+    const headers = new HttpHeaders({
+      "Content-Type": "application/json",
+      "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
+    });
+    return this.http.get<any>(url, { headers });
+  }
+
  getMasterRoomData(page: number = 1, limit: number = 100): Observable<any> {
    const url = `https://kapi.absys.ninja/hemat/room?page=${page}&limit=${limit}`;
    const headers = new HttpHeaders({
@ -190,6 +199,15 @@ export class BuildingService {
    return this.http.put<any>(url, data, { headers });
  }

+  deleteRoom(id: any): Observable<any> {
+    const url = `https://kapi.absys.ninja/hemat/room/${id}`;
+    const headers = new HttpHeaders({
+      "Content-Type": "application/json",
+      "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
+    });
+    return this.http.delete<any>(url, { headers });
+  }
+
  postBatchBuilding(data: any): Observable<any> {
    const url = `https://kapi.absys.ninja/hemat/room-building/post-batch/room`;
    const headers = new HttpHeaders({