From 89203b99845041512e9b5ee30a4c70a46ebb013f Mon Sep 17 00:00:00 2001
From: Fuzi_fauzia <fuzi.fauzia@allbestsistem.com>
Date: Tue, 25 Jun 2024 21:54:12 +0700
Subject: [PATCH] penambahan icon pada master category

---
 .../select-icon/select-icon.component.html    |  1 +
 .../select-icon/select-icon.component.ts      | 14 ++++--
 .../add-edit-master.component.html            |  5 ++-
 .../add-edit-master.component.ts              | 30 ++++++++++---
 .../master-category.component.html            | 15 +++++++
 .../master-category.component.ts              |  4 ++
 .../add-edit-master-room.component.html       | 18 ++++++--
 .../add-edit-master-room.component.ts         | 29 ++++++++-----
 .../master-room/master-room.component.html    | 42 +++++++++++++++---
 .../master-room/master-room.component.ts      | 43 ++++++++++++-------
 src/assets/data/hemat/remixicons.json         |  8 ++++
 11 files changed, 164 insertions(+), 45 deletions(-)

diff --git a/src/app/content/hemat-app/component/select-icon/select-icon.component.html b/src/app/content/hemat-app/component/select-icon/select-icon.component.html
index aa758b8..c7d0e26 100644
--- a/src/app/content/hemat-app/component/select-icon/select-icon.component.html
+++ b/src/app/content/hemat-app/component/select-icon/select-icon.component.html
@@ -2,6 +2,7 @@
   [items]="icons"
   bindLabel="name"
   (change)="onSelect($event)"
+  [(ngModel)]="selectedIcon"
   bindValue="icon"
   placeholder="Select an icon"
 >
diff --git a/src/app/content/hemat-app/component/select-icon/select-icon.component.ts b/src/app/content/hemat-app/component/select-icon/select-icon.component.ts
index 0ec2297..f6980ad 100644
--- a/src/app/content/hemat-app/component/select-icon/select-icon.component.ts
+++ b/src/app/content/hemat-app/component/select-icon/select-icon.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Output } from "@angular/core";
+import { Component, EventEmitter, Input, Output } from "@angular/core";
 import { MasterService } from "../../service/master-api.service";
 interface Icon {
   name: string;
@@ -10,7 +10,9 @@ interface Icon {
   styleUrls: ["./select-icon.component.css"],
 })
 export class SelectIconComponent {
-  @Output() iconSelected: EventEmitter<string> = new EventEmitter<string>();
+  // @Output() iconSelected: EventEmitter<string> = new EventEmitter<string>();
+  @Output() iconSelected = new EventEmitter<string>();
+  @Input() selectedIcon: string;
   icons: any[] = [];
   constructor(private masterService: MasterService) {}
   ngOnInit(): void {
@@ -20,6 +22,12 @@ export class SelectIconComponent {
   }
 
   onSelect(icon: Icon): void {
-    this.iconSelected.emit(icon.icon);
+    console.log(icon);
+    if (icon) {
+      this.iconSelected.emit(icon.icon);
+    } else {
+      this.iconSelected.emit(undefined);
+    }
+    
   }
 }
diff --git a/src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.html b/src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.html
index 9d959a0..7610773 100644
--- a/src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.html
+++ b/src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.html
@@ -16,9 +16,10 @@
           formControlName="name"
         />
       </div>
-      <div class="form-group col-md-6">
+      <div class="form-group col-md-6" *ngIf="category">
         <label for="status" style="color: #ffffff">Icon:</label>
-        <app-select-icon (iconSelected)="onIconSelected($event)"></app-select-icon>
+        <app-select-icon [selectedIcon]="selectedIcon" (iconSelected)="onIconSelected($event)"></app-select-icon>
+        <!-- <input type="hidden" formControlName="icon"> -->
       </div>
       
       <div class="form-group col-md-6">
diff --git a/src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.ts b/src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.ts
index 4bb34b6..b6ba8aa 100644
--- a/src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.ts
+++ b/src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.ts
@@ -12,6 +12,7 @@ export class AddEditMasterComponent implements OnInit {
   @Input() headerId: number;
   @Input() dataRow: any;
   @Input() mode: any;
+  @Input() category: boolean = false;
   myForm: FormGroup;
   dataMasterStatus: any;
   selectedIcon: string = '';
@@ -25,26 +26,41 @@ export class AddEditMasterComponent implements OnInit {
   ngOnInit() {
     this.createForm();
     this.dataListMaster();
+    console.log(this.dataRow);
+    
     if (this.dataRow) {
       this.editForm();
     }
   }
 
   createForm() {
-    this.myForm = this.fb.group({
+    const formControls = {
       name: ["", Validators.required],
       status: [2, Validators.required],
-      headerId: this.headerId,
-    });
+      headerId: this.headerId
+    };
+
+    if (this.category) {
+      formControls['icon'] = [undefined, Validators.required];
+    }
+
+    this.myForm = this.fb.group(formControls);
   }
 
   editForm() {
-    this.myForm = this.fb.group({
+    const formControls = {
       id: this.dataRow.id,
       name: this.dataRow.name,
       status: this.dataRow.status,
       headerId: this.dataRow.headerId,
-    });
+    };
+
+    if (this.category) {
+      formControls['icon'] = this.dataRow.icon || "";
+      this.selectedIcon = this.dataRow.icon || "";
+    }
+
+    this.myForm = this.fb.group(formControls);
   }
 
   dataListMaster() {
@@ -70,7 +86,9 @@ export class AddEditMasterComponent implements OnInit {
   }
 
   onIconSelected(icon: string): void {
+    console.log(icon);
+    
     this.selectedIcon = icon;
-    this.myForm.get('selectedIcon').setValue(icon);  // Set nilai selectedIcon ke dalam form
+    this.myForm.get('icon').setValue(icon);  // Set nilai icon ke dalam form
   }
 }
diff --git a/src/app/content/hemat-app/master/master-category/master-category.component.html b/src/app/content/hemat-app/master/master-category/master-category.component.html
index 2decda7..030697e 100644
--- a/src/app/content/hemat-app/master/master-category/master-category.component.html
+++ b/src/app/content/hemat-app/master/master-category/master-category.component.html
@@ -78,6 +78,21 @@
                         <p style="color: #ffffff">{{ value }}</p>
                         </ng-template>
                       </ngx-datatable-column>
+                      <ngx-datatable-column
+                        name="icon"
+                        [flexGrow]="1"
+                        [minWidth]="90"
+                      >
+                        <ng-template ngx-datatable-header-template>
+                          <span style="color: #ffffff">Icon</span>
+                        </ng-template>
+                        <ng-template
+                          let-value="value"
+                          ngx-datatable-cell-template
+                        >
+                        <p style="color: #ffffff">{{ value }}</p>
+                        </ng-template>
+                      </ngx-datatable-column>
                       <ngx-datatable-column
                         name="Status"
                         [flexGrow]="1"
diff --git a/src/app/content/hemat-app/master/master-category/master-category.component.ts b/src/app/content/hemat-app/master/master-category/master-category.component.ts
index 346821f..662ea79 100644
--- a/src/app/content/hemat-app/master/master-category/master-category.component.ts
+++ b/src/app/content/hemat-app/master/master-category/master-category.component.ts
@@ -54,6 +54,8 @@ export class MasterCategoryComponent implements OnInit {
         (item) => item.name === "master_category"
       );
       this.filteredRows = this.dataMasterCategori.headerDetailParam;
+      console.log(this.filteredRows);
+      
     });
   }
 
@@ -85,6 +87,7 @@ export class MasterCategoryComponent implements OnInit {
 
     modalRef.componentInstance.headerId = this.dataMasterCategori.id;
     modalRef.componentInstance.mode = "add";
+    modalRef.componentInstance.category = true;
     modalRef.result.then(
       (result) => {
         console.log(result);
@@ -121,6 +124,7 @@ export class MasterCategoryComponent implements OnInit {
     modalRef.componentInstance.headerId = this.dataMasterCategori.id;
     modalRef.componentInstance.dataRow = row;
     modalRef.componentInstance.mode = "edit";
+    modalRef.componentInstance.category = true;
     modalRef.result.then(
       (result) => {
         console.log(result);
diff --git 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
index d028ad3..4f22560 100644
--- 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
@@ -16,6 +16,18 @@
           formControlName="name"
         />
       </div>
+      <div class="form-group col-md-6">
+        <label for="statusId" style="color: #ffffff">Building:</label>
+        <select
+          id="projectinput5"
+          class="form-control"
+          formControlName="buildingId"
+        >
+          <option *ngFor="let data of filteredDataBuilding" [value]="data.id">
+            {{ data.name }}
+          </option>
+        </select>
+      </div>
       <div class="form-group col-md-6">
         <label for="description" style="color: #ffffff">Description:</label>
         <input
@@ -25,8 +37,8 @@
           formControlName="description"
         />
       </div>
-      <!-- <div class="form-group col-md-6">
-          <label for="statusId">Status:</label>
+      <div class="form-group col-md-6">
+          <label for="statusId" style="color: #ffffff">Status:</label>
           <select
             id="projectinput5"
             class="form-control"
@@ -36,7 +48,7 @@
               {{ data.name }}
             </option>
           </select>
-        </div> -->
+        </div>
     </div>
   </form>
 </div>
diff --git 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
index 7876901..2ace44e 100644
--- 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
@@ -15,7 +15,9 @@ export class AddEditMasterRoomComponent {
 
   data: any;
   dataStatus: any[];
+  dataBuilding: any[];
   filteredDataStatus: any[];
+  filteredDataBuilding: any[];
   dataMasterStatus: any;
 
   constructor(
@@ -27,6 +29,7 @@ export class AddEditMasterRoomComponent {
   ngOnInit() {
     this.createForm();
     this.listDataStatus();
+    this.listDataBuilding();
 
     if (this.dataRow) {
       this.editForm();
@@ -36,7 +39,8 @@ export class AddEditMasterRoomComponent {
   createForm() {
     this.myForm = this.fb.group({
       name: ["", Validators.required],
-      // statusId: [0, Validators.required],
+      statusId: [0, Validators.required],
+      buildingId: [0, Validators.required],
       description: ["", Validators.required],
     });
   }
@@ -45,7 +49,8 @@ export class AddEditMasterRoomComponent {
     this.myForm = this.fb.group({
       id: this.dataRow.id,
       name: this.dataRow.name,
-      // statusId: this.dataRow.statusId,
+      statusId: this.dataRow.statusId,
+      buildingId: this.dataRow.buildingId,
       description: this.dataRow.description,
     });
   }
@@ -58,8 +63,19 @@ export class AddEditMasterRoomComponent {
       );
       this.dataStatus = this.dataMasterStatus.headerDetailParam;
       this.filteredDataStatus = this.dataStatus.filter(
-        (item) => item.status === "1"
+        (item) => item.status === "2"
       );
+      
+    });
+  }
+
+  listDataBuilding(){
+    this.monitoringApiService.getMasterBuildingData().subscribe((res) => {
+      this.dataBuilding = res.results.data;
+      this.filteredDataBuilding = this.dataBuilding.filter(
+        (item) => item.statusId === 2
+      );
+      
     });
   }
 
@@ -68,11 +84,4 @@ export class AddEditMasterRoomComponent {
       this.activeModal.close(this.myForm.value);
     }
   }
-
-  addDepartment() {
-    let newDept = prompt("Enter new department name:");
-    if (newDept) {
-      alert(`Department ${newDept} added! (simulated)`);
-    }
-  }
 }
diff --git 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
index 2bfdb19..2e74cb7 100644
--- 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
@@ -64,23 +64,55 @@
                         </ng-template>
                       </ngx-datatable-column>
                       <ngx-datatable-column
-                        name="Name"
+                        name="roomEntity"
                         [flexGrow]="1"
                         [minWidth]="90"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span style="color: #ffffff">Room Name</span>
+                          <span style="color: #ffffff">Room</span>
                         </ng-template>
                         <ng-template
                           let-value="value"
                           ngx-datatable-cell-template
                         >
-                        <p style="color: #ffffff">{{ value }}</p>
+                        <p style="color: #ffffff">{{ value.name }}</p>
                         </ng-template>
                       </ngx-datatable-column>
 
                       <ngx-datatable-column
-                        name="statusId"
+                        name="buildingEntity"
+                        [flexGrow]="1"
+                        [minWidth]="90"
+                      >
+                        <ng-template ngx-datatable-header-template>
+                          <span style="color: #ffffff">Building</span>
+                        </ng-template>
+                        <ng-template
+                          let-value="value"
+                          ngx-datatable-cell-template
+                        >
+                        <p style="color: #ffffff">{{ value.name }}</p>
+                        </ng-template>
+                      </ngx-datatable-column>
+
+                      <ngx-datatable-column
+                        name="roomEntity"
+                        [flexGrow]="1"
+                        [minWidth]="90"
+                      >
+                        <ng-template ngx-datatable-header-template>
+                          <span style="color: #ffffff">Description</span>
+                        </ng-template>
+                        <ng-template
+                          ngx-datatable-cell-template
+                          let-value="value"
+                        >
+                        <p style="color: #ffffff">{{ value.description }}</p>
+                        </ng-template>
+                      </ngx-datatable-column>
+
+                      <ngx-datatable-column
+                        name="statusEntity"
                         [flexGrow]="1"
                         [minWidth]="90"
                       >
@@ -91,7 +123,7 @@
                           ngx-datatable-cell-template
                           let-value="value"
                         >
-                        <p style="color: #ffffff">{{ value === 2 ? "Aktif" : "Tidak Aktif" }}</p>
+                        <p style="color: #ffffff">{{ value.name }}</p>
                         </ng-template>
                       </ngx-datatable-column>
                       <ngx-datatable-column
diff --git 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
index f12b5e8..d056392 100644
--- 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
@@ -1,14 +1,14 @@
-import { Component } from '@angular/core';
-import { AddEditMasterRoomComponent } from './add-edit-master-room/add-edit-master-room.component';
-import { TableApiService } from 'src/app/_services/table-api.service';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { Router } from '@angular/router';
-import { BuildingService } from '../../service/monitoring-api.service';
+import { Component } from "@angular/core";
+import { AddEditMasterRoomComponent } from "./add-edit-master-room/add-edit-master-room.component";
+import { TableApiService } from "src/app/_services/table-api.service";
+import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
+import { Router } from "@angular/router";
+import { BuildingService } from "../../service/monitoring-api.service";
 
 @Component({
-  selector: 'app-master-room',
-  templateUrl: './master-room.component.html',
-  styleUrls: ['./master-room.component.css']
+  selector: "app-master-room",
+  templateUrl: "./master-room.component.html",
+  styleUrls: ["./master-room.component.css"],
 })
 export class MasterRoomComponent {
   data: any;
@@ -18,9 +18,7 @@ export class MasterRoomComponent {
   public breadcrumb: any;
 
   constructor(
-    private tableApiservice: TableApiService,
     private modalService: NgbModal,
-    private router: Router,
     private monitoringApiService: BuildingService
   ) {}
 
@@ -42,9 +40,9 @@ export class MasterRoomComponent {
   }
 
   fetchData() {
-    this.monitoringApiService.getMasterRoomData().subscribe((res) => {
-      this.data = res.results.data;
-      this.filteredRows = this.data;
+    this.monitoringApiService.getBuildingRoomList().subscribe((res) => {
+      this.data = res;
+      this.filteredRows = this.data.results.data;
     });
   }
 
@@ -75,10 +73,23 @@ export class MasterRoomComponent {
     modalRef.result.then(
       (result) => {
         if (result) {
+          const filteredData = {
+            name: result.name,
+            description: result.description,
+          };
           this.monitoringApiService
-            .postMasterRoomParam(result)
+            .postMasterRoomParam(filteredData)
             .subscribe((res) => {
-              this.fetchData();
+              const transformedData = {
+                buildingId: result.buildingId,
+                roomId: res.data.id,
+                statusId: result.statusId,
+              };
+              this.monitoringApiService
+                .postBatchBuilding(transformedData)
+                .subscribe((res) => {
+                  this.fetchData();
+                });
             });
         }
       },
diff --git a/src/assets/data/hemat/remixicons.json b/src/assets/data/hemat/remixicons.json
index ec6d8ed..963c06e 100644
--- a/src/assets/data/hemat/remixicons.json
+++ b/src/assets/data/hemat/remixicons.json
@@ -16,6 +16,14 @@
       "name": "Plug Line",
       "icon": "ri-plug-2-line"
     },
+    {
+      "name": "Camera Line",
+      "icon": "ri-dv-line"
+    },
+    {
+      "name": "Camera Fill",
+      "icon": "ri-dv-fill"
+    },
     {
       "name": "Airplay Fill",
       "icon": "ri-airplay-fill"