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

penambahan UI pada setiap inputan monitoring list

This commit is contained in:
Fuzi_fauzia 2024-08-12 13:54:40 +07:00
parent 9b4ac3b992
commit 124f3eef4c
3 changed files with 299 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
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: #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;
background-color: #37A647 !important;
border-color: #a64f37 !important;
background-color: #a64f37 !important;
"
(click)="removePhone(i)"
>
@ -151,13 +175,25 @@
[disabled]="disableButton"
style="
color: #ffffff !important;
border-color: #37A647 !important;
background-color: #37A647 !important;
border-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;
background-color: #37A647 !important;
border-color: #37a647 !important;
background-color: #37a647 !important;
"
(click)="save()"
>

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

@ -1,15 +1,25 @@
import { Component, ViewChild } from '@angular/core';
import { FormArray, FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { BlockUI, NgBlockUI } from 'ng-block-ui';
import { BuildingService } from '../../service/monitoring-api.service';
import { LoginService } from '../../service/login.service';
import { ToastrService } from 'ngx-toastr';
import { Component, ViewChild } from "@angular/core";
import {
FormArray,
FormBuilder,
FormGroup,
NgForm,
Validators,
} from "@angular/forms";
import { ActivatedRoute, Router } from "@angular/router";
import { BlockUI, NgBlockUI } from "ng-block-ui";
import { BuildingService } from "../../service/monitoring-api.service";
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',
templateUrl: './add-edit-list.component.html',
styleUrls: ['./add-edit-list.component.css']
selector: "app-add-edit-list",
templateUrl: "./add-edit-list.component.html",
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 => {
const id = params['id'];
this.route.params.subscribe((params) => {
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.dataRoomBuilding = data;
this.formGetDevice(data)
});
this.monitoringApiService
.getRoomBuildingById(deviceId)
.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(){
this.projectInfo.get('buildingId').disable()
this.projectInfo.get('roomId').disable()
this.projectInfo.get('statusId').disable()
formDisable() {
this.projectInfo.get("buildingId").disable();
this.projectInfo.get("roomId").disable();
this.projectInfo.get("statusId").disable();
}
isEditMode() {
@ -209,66 +232,198 @@ export class AddEditListComponent {
}
dataListBuilding() {
this.monitoringApiService.getBuildingList().subscribe(data => {
this.dataBuildingList = data.data.filter(item => item.statusName.toLowerCase() === "aktif" || item.status_id === 71)
this.monitoringApiService.getBuildingList().subscribe((data) => {
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 => {
const newArray = data.data.map(item => ({
this.monitoringApiService.getListRoomDataUnmap().subscribe((data) => {
console.log(data);
const newArray = data.data.map((item) => ({
id: item.id,
name: `${item.name} (${item.code})`
}));
this.dataRoomList = newArray
name: `${item.name} (${item.code})`,
})).sort((a, b) => b.id - a.id);
this.dataRoomList = newArray;
});
}
dataListFloor() {
this.monitoringApiService.getListFloorDataUnmap(6).subscribe(data => {
console.log(data);
const newArray = data.data.map(item => ({
this.monitoringApiService.getListFloorDataUnmap(6).subscribe((data) => {
const newArray = data.data.map((item) => ({
id: item.id,
name: `${item.name} (${item.code})`
}));
this.dataFloorList = newArray
name: `${item.name} (${item.code})`,
})).sort((a, b) => b.id - a.id);
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.router.navigate(["/list-monitoring"]);
});
this.monitoringApiService
.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.router.navigate(["/list-monitoring"]);
});
this.monitoringApiService
.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}`);
}
);
}
}

69
src/app/content/hemat-app/master/master-floor/master-floor.component.ts
View File

@ -1,16 +1,16 @@
import { Component } from '@angular/core';
import { AddEditMasterComponent } from '../add-edit-master/add-edit-master.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 { LoginService } from '../../service/login.service';
import { ToastrService } from 'ngx-toastr';
import { Component } from "@angular/core";
import { AddEditMasterComponent } from "../add-edit-master/add-edit-master.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 { LoginService } from "../../service/login.service";
import { ToastrService } from "ngx-toastr";
@Component({
selector: 'app-master-floor',
templateUrl: './master-floor.component.html',
styleUrls: ['./master-floor.component.css']
selector: "app-master-floor",
templateUrl: "./master-floor.component.html",
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
keyboard: false // Add this line
backdrop: "static", // 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.toastr.error("Warning", "Data yang anda masukan double.", {
timeOut: 5000,
closeButton: true,
});
} else {
this.monitoringApiService
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
keyboard: false // Add this line
backdrop: "static", // 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.", {
timeOut: 5000,
closeButton: true,
});
this.toastr.error(
"Warning",
"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.", {