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

penambahan icon pada master category

This commit is contained in:
Fuzi_fauzia 2024-06-25 21:54:12 +07:00
parent fc9947da15
commit 89203b9984
11 changed files with 164 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/content/hemat-app/component/select-icon/select-icon.component.html
View File

@ -2,6 +2,7 @@
[items]="icons"
bindLabel="name"
(change)="onSelect($event)"
[(ngModel)]="selectedIcon"
bindValue="icon"
placeholder="Select an icon"
>

14
src/app/content/hemat-app/component/select-icon/select-icon.component.ts
View File

@ -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);
}
}
}

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

@ -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">

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

@ -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
}
}

15
src/app/content/hemat-app/master/master-category/master-category.component.html
View File

@ -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"

4
src/app/content/hemat-app/master/master-category/master-category.component.ts
View File

@ -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);

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

@ -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>

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

@ -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)`);
}
}
}

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

@ -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

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

@ -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();
});
});
}
},

8
src/assets/data/hemat/remixicons.json
View File

@ -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"