fuzi_fauzia
/
hemat_solution
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

penambahan UI untuk room building ID

This commit is contained in:
Fuzi_fauzia 2024-07-18 14:02:57 +07:00
parent 153b47eaaa
commit 721d4e9af9
11 changed files with 198 additions and 270 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/_layout/settings/menu-settings.config.ts
View File

@ -1018,10 +1018,7 @@ export const MenuSettingsConfig: MenuConfig = {
page: "null", page: "null",
submenu: { submenu: {
items: [ items: [
// {
// title: "Monitoring List",
// page: "/list-monitoring",
// },
{ {
title: "Master Category", title: "Master Category",
page: "/master/master-category", page: "/master/master-category",
@ -1062,6 +1059,10 @@ export const MenuSettingsConfig: MenuConfig = {
title: "Master Building", title: "Master Building",
page: "/master/master-building", page: "/master/master-building",
}, },
{
title: "Master Monitoring List",
page: "/list-monitoring",
},
], ],
}, },
}, },

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

@ -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-wrapper">
<div class="content-header row mb-1"> <div class="content-header row mb-1">
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb> <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
@ -7,13 +7,13 @@
<section id="basic-form-layouts"> <section id="basic-form-layouts">
<div class="row"> <div class="row">
<div class="col-12" *blockUI="'projectInfo'; message: 'Loading'"> <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-content">
<div <div
class="card-header" class="card-header"
style="background-color: #252525 !important" style="background-color: #FBFBFB !important"
> >
<h2 style="color: #ffffff"> <h2 style="color: #242222">
{{ {{
isEditMode() isEditMode()
? "Edit List Monitoring" ? "Edit List Monitoring"
@ -29,14 +29,14 @@
(ngSubmit)="onProjectInfoSubmit()" (ngSubmit)="onProjectInfoSubmit()"
> >
<div class="form-body"> <div class="form-body">
<h4 class="form-section" style="color: #ffffff"> <h4 class="form-section" style="color: #242222">
<i class="feather ft-user" style="color: #ffffff"></i> <i class="feather ft-user" style="color: #242222"></i>
General Information General Information
</h4> </h4>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<div class="form-group"> <div class="form-group">
<label for="buildingId" style="color: #ffffff" <label for="buildingId" style="color: #242222"
>Building *</label >Building *</label
> >
<div class="input-group"> <div class="input-group">
@ -69,7 +69,7 @@
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="form-group"> <div class="form-group">
<label for="statusId" style="color: #ffffff" <label for="statusId" style="color: #242222"
>Status *</label >Status *</label
> >
<div class="input-group"> <div class="input-group">
@ -118,6 +118,7 @@
id="roomId" id="roomId"
class="form-control" class="form-control"
formControlName="roomId" formControlName="roomId"
(change)="validateDouble($event, i)"
[ngClass]="{ [ngClass]="{
'is-invalid': 'is-invalid':
submitted && f.roomId.errors submitted && f.roomId.errors
@ -134,9 +135,9 @@
class="btn btn-danger" class="btn btn-danger"
type="button" type="button"
style=" style="
color: #000000 !important; color: #ffffff !important;
border-color: #bef264 !important; border-color: #37A647 !important;
background-color: #bef264 !important; background-color: #37A647 !important;
" "
(click)="removePhone(i)" (click)="removePhone(i)"
> >
@ -149,10 +150,11 @@
<button <button
type="button" type="button"
class="btn btn-primary" class="btn btn-primary"
[disabled]="disableButton"
style=" style="
color: #000000 !important; color: #ffffff !important;
border-color: #bef264 !important; border-color: #37A647 !important;
background-color: #bef264 !important; background-color: #37A647 !important;
" "
(click)="addPhone()" (click)="addPhone()"
> >
@ -196,9 +198,9 @@
type="button" type="button"
class="btn btn-warning mr-1" class="btn btn-warning mr-1"
style=" style="
color: #bef264 !important; color: #242222 !important;
border-color: #bef264 !important; border-color: #242222 !important;
background-color: #000000 !important; background-color: #FBFBFB !important;
" "
(click)="cancel()" (click)="cancel()"
> >
@ -207,12 +209,12 @@
<button <button
type="submit" type="submit"
class="btn btn-primary" class="btn btn-primary"
[disabled]="disableButton"
style=" style="
color: #000000 !important; color: #ffffff !important;
border-color: #bef264 !important; border-color: #37A647 !important;
background-color: #bef264 !important; background-color: #37A647 !important;
" "
*ngIf="mode !== 'view'"
(click)="save()" (click)="save()"
> >
<i class="la la-check"></i> Save <i class="la la-check"></i> Save

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

@ -4,6 +4,7 @@ import { ActivatedRoute, Router } from '@angular/router';
import { BlockUI, NgBlockUI } from 'ng-block-ui'; import { BlockUI, NgBlockUI } from 'ng-block-ui';
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';
@Component({ @Component({
selector: 'app-add-edit-list', selector: 'app-add-edit-list',
@ -24,6 +25,7 @@ export class AddEditListComponent {
dataMasterStatus: any; dataMasterStatus: any;
roombuildingId: any; roombuildingId: any;
dataRoomBuilding: any; dataRoomBuilding: any;
disableButton: boolean = false;
// userProfileForm: FormGroup; // userProfileForm: FormGroup;
public userList: FormArray; public userList: FormArray;
@ -37,7 +39,8 @@ export class AddEditListComponent {
private router: Router, private router: Router,
private route: ActivatedRoute, private route: ActivatedRoute,
private monitoringApiService: BuildingService, private monitoringApiService: BuildingService,
private authService: LoginService private authService: LoginService,
private toastr: ToastrService,
) {} ) {}
ngOnInit() { ngOnInit() {
@ -79,59 +82,66 @@ export class AddEditListComponent {
removePhone(index) { removePhone(index) {
this.userList.removeAt(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() { setBreadcrumb() {
if (this.isAddMode()) { if (this.isAddMode()) {
this.breadcrumb = { this.breadcrumb = {
mainlabel: "Cost Management", mainlabel: "List Monitoring",
links: [ links: [
{ {
name: "Home", name: "Home",
isLink: false, isLink: false,
}, },
{ {
name: "Cost Management", name: "List Monitoring",
isLink: false, isLink: false,
}, },
{ {
name: "Add New Cost Management", name: "Add New List Monitoring",
isLink: false, isLink: false,
}, },
], ],
}; };
} else if (this.isEditMode()) { } else if (this.isEditMode()) {
this.breadcrumb = { this.breadcrumb = {
mainlabel: "Cost Management", mainlabel: "List Monitoring",
links: [ links: [
{ {
name: "Home", name: "Home",
isLink: false, isLink: false,
}, },
{ {
name: "Cost Management", name: "List Monitoring",
isLink: false, isLink: false,
}, },
{ {
name: "Edit New Cost Management", name: "Edit New List Monitoring",
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",
isLink: false, isLink: false,
}, },
], ],
@ -197,12 +207,12 @@ export class AddEditListComponent {
dataListBuilding() { dataListBuilding() {
this.monitoringApiService.getBuildingList().subscribe(data => { 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() { dataListRoom() {
this.monitoringApiService.getListRoomData().subscribe(data => { this.monitoringApiService.getListRoomDataUnmap().subscribe(data => {
this.dataRoomList = data.data this.dataRoomList = data.data
}); });
} }

67
src/app/content/hemat-app/list-monitoring/list-monitoring.component.css
View File

@ -271,19 +271,21 @@
ul ul
li:not(.disabled):hover li:not(.disabled):hover
a { a {
background-color: #252525; background-color: #37A647;
font-weight: bold; font-weight: bold;
color: white; color: white;
} }
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer { :host ::ng-deep .ngx-datatable.bootstrap .datatable-footer {
background: #252525; background: #DDE1E6;
color: #ededed; color: #242222;
margin-top: -1px; margin-top: -1px;
overflow: inherit; overflow: inherit;
} }
:host ::ng-deep .ngx-datatable.bootstrap .datatable-header { :host ::ng-deep .ngx-datatable.bootstrap .datatable-header {
background: #DDE1E6;
color: #242222;
font-weight: bold; font-weight: bold;
height: unset !important; height: unset !important;
overflow: inherit; overflow: inherit;
@ -311,53 +313,38 @@
} }
:host ::ng-deep .ng-select .ng-select-container { :host ::ng-deep .ng-select .ng-select-container {
color: #ffffff !important; color: #242222 !important;
background-color: #252525 !important; background-color: #FBFBFB !important;
height: 40px !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 { :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 { :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 */ .text-custom-label{
color: #242222 !important;
/* Custom styles for Swal buttons */ font-family: "Open Sans", sans-serif !important;
.div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm { font-size: 16px;
background-color: #bef264 !important;
color: white !important;
border: none !important;
padding: 10px 20px !important;
border-radius: 5px !important;
font-size: 16px !important;
} }
.swal2-cancel.btn-cancel { .text-custom-data{
background-color: #dc3545 !important; color: #242222 !important;
color: white !important; font-family: "Open Sans", sans-serif !important;
border: none !important; font-size: 24px;
padding: 10px 20px !important; font-weight: 700;
border-radius: 5px !important;
font-size: 16px !important;
} }
.swal2-confirm.btn-confirm:hover { .style-custom-label{
background-color: #218838 !important; 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 */
}

47
src/app/content/hemat-app/list-monitoring/list-monitoring.component.html
View File

@ -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-wrapper" style="height: 900px !important;">
<div class="content-header row mb-1"> <div class="content-header row mb-1">
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb> <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
@ -7,7 +7,7 @@
<section id="configuration"> <section id="configuration">
<div class="row"> <div class="row">
<div class="col-12"> <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-content">
<div class="card-body"> <div class="card-body">
<div class="row mb-2"> <div class="row mb-2">
@ -26,9 +26,9 @@
class="btn btn-secondary" class="btn btn-secondary"
[routerLink]="['/list-monitoring/add-row']" [routerLink]="['/list-monitoring/add-row']"
style=" style="
background-color: #bef264 !important; background-color: #37A647 !important;
border-color: #bef264 !important; border-color: #37A647 !important;
color: #000000 !important; color: #ffffff !important;
" "
> >
<i class="feather ft-plus" style="color: #ffffff"></i <i class="feather ft-plus" style="color: #ffffff"></i
@ -40,7 +40,7 @@
<div class="card-dashboard"> <div class="card-dashboard">
<ngx-datatable <ngx-datatable
class="bootstrap table-bordered" class="bootstrap table-bordered"
[limit]="5" [limit]="10"
[rows]="filteredRows" [rows]="filteredRows"
[columnMode]="'force'" [columnMode]="'force'"
[headerHeight]="50" [headerHeight]="50"
@ -58,7 +58,7 @@
ngx-datatable-cell-template ngx-datatable-cell-template
let-rowIndex="rowIndex" let-rowIndex="rowIndex"
> >
<p style="color: #ffffff">{{ rowIndex + 1 }}</p> <p class="style-custom-label">{{ rowIndex + 1 }}</p>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
@ -68,13 +68,13 @@
[minWidth]="90" [minWidth]="90"
> >
<ng-template ngx-datatable-header-template> <ng-template ngx-datatable-header-template>
<span style="color: #ffffff">Building</span> <span class="style-custom-label">Building</span>
</ng-template> </ng-template>
<ng-template <ng-template
let-value="value" let-value="value"
ngx-datatable-cell-template ngx-datatable-cell-template
> >
<p style="color: #ffffff">{{ value.name }}</p> <p class="style-custom-label">{{ value.name }}</p>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
@ -84,13 +84,13 @@
[minWidth]="90" [minWidth]="90"
> >
<ng-template ngx-datatable-header-template> <ng-template ngx-datatable-header-template>
<span style="color: #ffffff">Room</span> <span class="style-custom-label">Room</span>
</ng-template> </ng-template>
<ng-template <ng-template
ngx-datatable-cell-template ngx-datatable-cell-template
let-value="value" let-value="value"
> >
<p style="color: #ffffff">{{ value.name }}</p> <p class="style-custom-label">{{ value.name }}</p>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
@ -100,13 +100,13 @@
[minWidth]="90" [minWidth]="90"
> >
<ng-template ngx-datatable-header-template> <ng-template ngx-datatable-header-template>
<span style="color: #ffffff">Status</span> <span class="style-custom-label">Status</span>
</ng-template> </ng-template>
<ng-template <ng-template
ngx-datatable-cell-template ngx-datatable-cell-template
let-value="value" let-value="value"
> >
<p style="color: #ffffff">{{ value.name }}</p> <p class="style-custom-label">{{ value.name }}</p>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
@ -116,33 +116,26 @@
[minWidth]="150" [minWidth]="150"
> >
<ng-template ngx-datatable-header-template> <ng-template ngx-datatable-header-template>
<span style="color: #ffffff">Actions</span> <span class="style-custom-label">Actions</span>
</ng-template> </ng-template>
<ng-template <ng-template
ngx-datatable-cell-template ngx-datatable-cell-template
let-rowIndex="rowIndex" let-rowIndex="rowIndex"
let-row="row" let-row="row"
> >
<button <!-- <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
class="btn btn-sm btn-warning mr-1" 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)" (click)="editRow(row)"
> >
<i class="ficon feather ft-edit" style="color: #BEF264 !important;"></i> <i class="ficon feather ft-edit" style="color: #37A647 !important;"></i>
</button> </button> -->
<button <button
class="btn btn-sm btn-danger" 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)" (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> </button>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>

98
src/app/content/hemat-app/list-monitoring/list-monitoring.component.ts
View File

@ -4,6 +4,7 @@ import { TableApiService } from "src/app/_services/table-api.service";
import { BuildingService } from "../service/monitoring-api.service"; import { BuildingService } from "../service/monitoring-api.service";
import Swal from "sweetalert2"; import Swal from "sweetalert2";
import { LoginService } from "../service/login.service"; import { LoginService } from "../service/login.service";
import { ToastrService } from "ngx-toastr";
@Component({ @Component({
selector: "app-list-monitoring", selector: "app-list-monitoring",
@ -18,24 +19,24 @@ export class ListMonitoringComponent {
rows: any = []; rows: any = [];
constructor( constructor(
private tableApiservice: TableApiService,
private router: Router, private router: Router,
private monitoringApiService: BuildingService, private monitoringApiService: BuildingService,
private authService: LoginService private authService: LoginService,
private toastr: ToastrService,
) {} ) {}
ngOnInit() { ngOnInit() {
this.authService.startTokenCheck(); this.authService.startTokenCheck();
this.authService.startTrackingActivity(); this.authService.startTrackingActivity();
this.breadcrumb = { this.breadcrumb = {
mainlabel: "Cost Management", mainlabel: "List Monitoring",
links: [ links: [
{ {
name: "Home", name: "Home",
isLink: false, isLink: false,
}, },
{ {
name: "Cost Management", name: "List Monitoring",
isLink: false, isLink: false,
}, },
], ],
@ -52,19 +53,20 @@ export class ListMonitoringComponent {
filterRows() { filterRows() {
if (!this.searchTerm) { if (!this.searchTerm) {
this.filteredRows = [...this.data.rows]; this.filteredRows = [...this.data.results.data];
} else { } else {
this.filteredRows = this.data.rows.filter((row) => const searchTermLC = this.searchTerm.toLowerCase();
this.rowContainsSearchTerm(row) this.filteredRows = this.data.results.data.filter((row) =>
this.rowContainsSearchTerm(row, searchTermLC)
); );
} }
} }
rowContainsSearchTerm(row: any): boolean { rowContainsSearchTerm(row: any, searchTermLC: string): boolean {
const searchTermLC = this.searchTerm.toLowerCase(); return (
return Object.values(row).some( row.buildingEntity.name.toLowerCase().includes(searchTermLC) ||
(value) => row.roomEntity.name.toLowerCase().includes(searchTermLC) ||
value !== null && value.toString().toLowerCase().includes(searchTermLC) row.statusEntity.name.toLowerCase().includes(searchTermLC)
); );
} }
@ -77,59 +79,25 @@ export class ListMonitoringComponent {
} }
deleteRow(row) { deleteRow(row) {
const swalWithBootstrapButtons = Swal.mixin({ const confirmDelete = confirm("Are you sure you want to delete this item?");
customClass: { if (confirmDelete) {
confirmButton: "btn-confirm", this.monitoringApiService.deleteRoomBuilding(row.id).subscribe(
cancelButton: "btn-cancel", (res) => {
popup: "custom-swal-background", this.fetchData();
}, this.toastr.success("Success", "Delete Completed.", {
}); timeOut: 2000,
swalWithBootstrapButtons.fire({ closeButton: true,
title: "Are you sure?", });
text: "Do you want to delete?", },
icon: "question", (error) => {
showCancelButton: true, console.error(error);
confirmButtonText: "Yes", this.toastr.error("Error", "Data sedang digunakan!", {
cancelButtonText: "No", timeOut: 2000,
}).then((result) => { closeButton: true,
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",
},
});
}
});
} }
onTouchStart(event: Event) { onTouchStart(event: Event) {

8
src/app/content/hemat-app/master/master-room/add-edit-master-room/add-edit-master-room.component.html
View File

@ -23,7 +23,7 @@
Name is required. Name is required.
</div> </div>
</div> </div>
<div class="form-group col-md-6"> <!-- <div class="form-group col-md-6">
<label for="statusId" style="color: #242222">Building:</label> <label for="statusId" style="color: #242222">Building:</label>
<select <select
id="projectinput5" id="projectinput5"
@ -42,7 +42,7 @@
> >
Building is required. Building is required.
</div> </div>
</div> </div> -->
<div class="form-group col-md-6"> <div class="form-group col-md-6">
<label for="description" style="color: #242222">Description:</label> <label for="description" style="color: #242222">Description:</label>
<input <input
@ -56,7 +56,7 @@
Description is required. Description is required.
</div> </div>
</div> </div>
<div class="form-group col-md-6"> <!-- <div class="form-group col-md-6">
<label for="statusId" style="color: #242222">Status:</label> <label for="statusId" style="color: #242222">Status:</label>
<select <select
id="projectinput5" id="projectinput5"
@ -70,7 +70,7 @@
<div *ngIf="myForm.get('statusId').touched && myForm.get('statusId').invalid" class="text-danger"> <div *ngIf="myForm.get('statusId').touched && myForm.get('statusId').invalid" class="text-danger">
Status is required. Status is required.
</div> </div>
</div> </div> -->
</div> </div>
</form> </form>
</div> </div>

12
src/app/content/hemat-app/master/master-room/add-edit-master-room/add-edit-master-room.component.ts
View File

@ -35,7 +35,6 @@ export class AddEditMasterRoomComponent {
this.createForm(); this.createForm();
this.listDataStatus(); this.listDataStatus();
this.listDataBuilding(); this.listDataBuilding();
console.log(this.dataRow);
if (this.mode === "add") { if (this.mode === "add") {
this.labelRoom = "Add New Row" this.labelRoom = "Add New Row"
} else { } else {
@ -49,20 +48,17 @@ export class AddEditMasterRoomComponent {
createForm() { createForm() {
this.myForm = this.fb.group({ this.myForm = this.fb.group({
name: ["", Validators.required], name: ["", Validators.required],
statusId: ["", Validators.required],
buildingId: ["", Validators.required],
description: ["", Validators.required], description: ["", Validators.required],
}); });
} }
editForm() { editForm() {
console.log(this.dataRow);
this.myForm = this.fb.group({ this.myForm = this.fb.group({
id: this.dataRow.id, id: this.dataRow.id,
roomId: this.dataRow.roomId, name: [this.dataRow.name, Validators.required],
name: [this.dataRow.roomEntity.name, Validators.required], description: [this.dataRow.description, Validators.required],
statusId: [this.dataRow.statusId, Validators.required],
buildingId: [this.dataRow.buildingId, Validators.required],
description: [this.dataRow.roomEntity.description, Validators.required],
}); });
} }

43
src/app/content/hemat-app/master/master-room/master-room.component.html
View File

@ -42,7 +42,7 @@
<div class="card-dashboard"> <div class="card-dashboard">
<ngx-datatable <ngx-datatable
class="bootstrap table-bordered" class="bootstrap table-bordered"
[limit]="5" [limit]="10"
[rows]="filteredRows" [rows]="filteredRows"
[columnMode]="'force'" [columnMode]="'force'"
[headerHeight]="50" [headerHeight]="50"
@ -64,7 +64,7 @@
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column <ngx-datatable-column
name="roomEntity" name="name"
[flexGrow]="1" [flexGrow]="1"
[minWidth]="90" [minWidth]="90"
> >
@ -75,28 +75,12 @@
let-value="value" let-value="value"
ngx-datatable-cell-template ngx-datatable-cell-template
> >
<p class="style-custom-label">{{ value.name }}</p> <p class="style-custom-label">{{ value }}</p>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column <ngx-datatable-column
name="buildingEntity" name="description"
[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"
[flexGrow]="1" [flexGrow]="1"
[minWidth]="90" [minWidth]="90"
> >
@ -104,28 +88,13 @@
<span class="style-custom-label">Description</span> <span class="style-custom-label">Description</span>
</ng-template> </ng-template>
<ng-template <ng-template
ngx-datatable-cell-template
let-value="value" let-value="value"
ngx-datatable-cell-template
> >
<p class="style-custom-label">{{ value.description }}</p> <p class="style-custom-label">{{ value }}</p>
</ng-template> </ng-template>
</ngx-datatable-column> </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 <ngx-datatable-column
name="Actions" name="Actions"
[flexGrow]="1" [flexGrow]="1"

58
src/app/content/hemat-app/master/master-room/master-room.component.ts
View File

@ -23,7 +23,7 @@ export class MasterRoomComponent {
private modalService: NgbModal, private modalService: NgbModal,
private monitoringApiService: BuildingService, private monitoringApiService: BuildingService,
private authService: LoginService, private authService: LoginService,
private toastr: ToastrService, private toastr: ToastrService
) {} ) {}
ngOnInit() { ngOnInit() {
@ -46,7 +46,7 @@ export class MasterRoomComponent {
} }
fetchData() { fetchData() {
this.monitoringApiService.getBuildingRoomList().subscribe((res) => { this.monitoringApiService.getMasterRoomData().subscribe((res) => {
this.data = res; this.data = res;
this.filteredRows = this.data.results.data.sort((a, b) => b.id - a.id); this.filteredRows = this.data.results.data.sort((a, b) => b.id - a.id);
// 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 { rowContainsSearchTerm(row: any, searchTermLC: string): boolean {
return ( return (
row.roomEntity.name.toLowerCase().includes(searchTermLC) || row.name.toLowerCase().includes(searchTermLC) ||
row.roomEntity.description.toLowerCase().includes(searchTermLC) || row.description.toLowerCase().includes(searchTermLC)
row.buildingEntity.name.toLowerCase().includes(searchTermLC) ||
row.statusEntity.name.toLowerCase().includes(searchTermLC)
); );
} }
openAddMasterModal() { openAddMasterModal() {
const modalRef = this.modalService.open(AddEditMasterRoomComponent, { const modalRef = this.modalService.open(AddEditMasterRoomComponent, {
size: "lg", size: "lg",
backdrop: "static", // Add this line backdrop: "static",
keyboard: false, // Add this line keyboard: false,
}); });
modalRef.componentInstance.mode = "add"; modalRef.componentInstance.mode = "add";
@ -92,16 +90,7 @@ export class MasterRoomComponent {
this.monitoringApiService this.monitoringApiService
.postMasterRoomParam(filteredData) .postMasterRoomParam(filteredData)
.subscribe((res) => { .subscribe((res) => {
const transformedData = { this.fetchData();
buildingId: result.buildingId,
roomId: [res.data.id],
statusId: result.statusId,
};
this.monitoringApiService
.postBatchBuilding(transformedData)
.subscribe((res) => {
this.fetchData();
});
}); });
} }
}, },
@ -129,19 +118,9 @@ export class MasterRoomComponent {
description: result.description, description: result.description,
}; };
this.monitoringApiService this.monitoringApiService
.putMasterRoomParam(filteredData, row.roomId) .putMasterRoomParam(filteredData, row.id)
.subscribe((res) => { .subscribe((res) => {
console.log(res); this.fetchData();
const transformedData = {
buildingId: result.buildingId,
roomId: res.data.id,
statusId: result.statusId,
};
this.monitoringApiService
.puttBuildingRoom(transformedData, row.id)
.subscribe((res) => {
this.fetchData();
});
}); });
} }
}, },
@ -155,14 +134,19 @@ export class MasterRoomComponent {
const confirmDelete = confirm("Are you sure you want to delete this item?"); const confirmDelete = confirm("Are you sure you want to delete this item?");
if (confirmDelete) { if (confirmDelete) {
this.monitoringApiService this.monitoringApiService
.deleteHeaderDetailParam(row.roomEntity.id) .deleteRoom(row.id)
.subscribe((res) => { .subscribe(
this.monitoringApiService (res) => {
.deleteRoomBuilding(row.id) this.fetchData();
.subscribe((res) => { },
this.fetchData(); (error) => {
console.error(error);
this.toastr.error("Error", "Data sedang digunakan!", {
timeOut: 2000,
closeButton: true,
}); });
}); }
);
} }
} }
} }

18
src/app/content/hemat-app/service/monitoring-api.service.ts
View File

@ -102,6 +102,15 @@ export class BuildingService {
return this.http.get<any>(url, { headers }); 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> { getMasterRoomData(page: number = 1, limit: number = 100): Observable<any> {
const url = `https://kapi.absys.ninja/hemat/room?page=${page}&limit=${limit}`; const url = `https://kapi.absys.ninja/hemat/room?page=${page}&limit=${limit}`;
const headers = new HttpHeaders({ const headers = new HttpHeaders({
@ -190,6 +199,15 @@ export class BuildingService {
return this.http.put<any>(url, data, { headers }); 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> { postBatchBuilding(data: any): Observable<any> {
const url = `https://kapi.absys.ninja/hemat/room-building/post-batch/room`; const url = `https://kapi.absys.ninja/hemat/room-building/post-batch/room`;
const headers = new HttpHeaders({ const headers = new HttpHeaders({