From 5cbd0f09dc088f5b5516c09eb64c3271aa515cfc Mon Sep 17 00:00:00 2001 From: Fuzi_fauzia Date: Tue, 25 Jun 2024 15:39:26 +0700 Subject: [PATCH] penambahan modal export --- .../add-edit-cost/add-edit-cost.component.css | 0 .../add-edit-cost.component.html | 447 ------------------ .../add-edit-cost/add-edit-cost.component.ts | 162 ------- .../cost-management.component.html | 21 +- .../cost-management.component.ts | 22 +- .../cost-management/cost-management.module.ts | 23 +- .../modal-export/modal-export.component.css | 3 + .../modal-export/modal-export.component.html | 37 ++ .../modal-export.component.spec.ts} | 12 +- .../modal-export/modal-export.component.ts | 42 ++ .../hemat-app/service/device.service.ts | 15 + 11 files changed, 146 insertions(+), 638 deletions(-) delete mode 100644 src/app/content/hemat-app/cost-management/add-edit-cost/add-edit-cost.component.css delete mode 100644 src/app/content/hemat-app/cost-management/add-edit-cost/add-edit-cost.component.html delete mode 100644 src/app/content/hemat-app/cost-management/add-edit-cost/add-edit-cost.component.ts create mode 100644 src/app/content/hemat-app/cost-management/modal-export/modal-export.component.css create mode 100644 src/app/content/hemat-app/cost-management/modal-export/modal-export.component.html rename src/app/content/hemat-app/cost-management/{add-edit-cost/add-edit-cost.component.spec.ts => modal-export/modal-export.component.spec.ts} (51%) create mode 100644 src/app/content/hemat-app/cost-management/modal-export/modal-export.component.ts diff --git a/src/app/content/hemat-app/cost-management/add-edit-cost/add-edit-cost.component.css b/src/app/content/hemat-app/cost-management/add-edit-cost/add-edit-cost.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/content/hemat-app/cost-management/add-edit-cost/add-edit-cost.component.html b/src/app/content/hemat-app/cost-management/add-edit-cost/add-edit-cost.component.html deleted file mode 100644 index e4657b0..0000000 --- a/src/app/content/hemat-app/cost-management/add-edit-cost/add-edit-cost.component.html +++ /dev/null @@ -1,447 +0,0 @@ -
-
-
- -
-
-
-
-
- - -

- {{ - isEditMode() - ? "Edit Cost Management" - : isViewMode() - ? "View Cost Management" - : "Add New Cost Management" - }} -

- - -
-
-

- General Information -

-
-
-
- - - -
- First Name is required -
- -
-
-
-
- -
- -
- -
-
- -
- Interest is required -
- -
-
-
-
-
-
- -
- -
- -
-
- -
- Interest is required -
- -
-
-
-
- - - -
- Interest is required -
- -
-
-
-
-
-
- - - -
- Interest is required -
- -
-
-
-
- - - -
- Interest is required -
- -
-
-
-
-
-
- - - -
- Interest is required -
- -
-
-
-
- - - -
- Interest is required -
- -
-
-
- -

- Energy Information -

-
-
-
- - - -
- First Name is required -
- -
-
-
-
- - - -
- First Name is required -
- -
-
-
-
-
-
- - - -
- First Name is required -
- -
-
-
-
- - - -
- Interest is required -
- -
-
-
-
- - - -
- Interest is required -
- -
-
-
- - -
-
- - -
-
-
-
-
-
- - \ No newline at end of file diff --git a/src/app/content/hemat-app/cost-management/add-edit-cost/add-edit-cost.component.ts b/src/app/content/hemat-app/cost-management/add-edit-cost/add-edit-cost.component.ts deleted file mode 100644 index a2001e6..0000000 --- a/src/app/content/hemat-app/cost-management/add-edit-cost/add-edit-cost.component.ts +++ /dev/null @@ -1,162 +0,0 @@ -import { Component, OnInit, ViewChild } from '@angular/core'; -import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms'; -import { ActivatedRoute, Router } from '@angular/router'; -import { BlockUI, NgBlockUI } from 'ng-block-ui'; - -@Component({ - selector: 'app-add-edit-cost', - templateUrl: './add-edit-cost.component.html', - styleUrls: ['./add-edit-cost.component.css'] -}) -export class AddEditCostComponent implements OnInit{ - @ViewChild("f", { read: true }) userProfileForm: NgForm; - - model: any = {}; - mode: string; - public breadcrumb: any; - projectInfo: FormGroup; - submitted = false; - - @BlockUI("projectInfo") blockUIProjectInfo: NgBlockUI; - - interestedIn = [ - "design", - "development", - "illustration", - "branding", - "video", - "design", - "development", - "illustration", - "branding", - "video", - ]; - budget = [ - "less than 5000$", - "5000$ - 10000$", - "10000$ - 20000$", - "more than 20000$", - ]; - priority = ["Low", "Medium", "High"]; - status = ["Not Started", "Started", "Fixed"]; - - constructor( - private formBuilder: FormBuilder, - private router: Router, - private route: ActivatedRoute - ) {} - - ngOnInit() { - this.route.data.subscribe((data) => { - this.mode = data.mode; - }); - this.setBreadcrumb() - - this.projectInfo = this.formBuilder.group({ - firstName: ["", Validators.required], - lastName: ["", Validators.required], - email: ["", [Validators.required, Validators.email]], - phone: ["", Validators.required], - company: ["", Validators.required], - interestedIn: ["", Validators.required], - budget: ["", Validators.required], - selectFile: [, Validators.required], - aboutProject: ["", Validators.required], - }); - } - - setBreadcrumb() { - if (this.isAddMode()) { - this.breadcrumb = { - mainlabel: "Cost Management", - links: [ - { - name: "Home", - isLink: false, - }, - { - name: "Cost Management", - isLink: false, - }, - { - name: "Add New Cost Management", - isLink: false, - }, - ], - }; - } else if (this.isEditMode()) { - this.breadcrumb = { - mainlabel: "Cost Management", - links: [ - { - name: "Home", - isLink: false, - }, - { - name: "Cost Management", - 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", - isLink: false, - }, - ], - }; - } - } - - isEditMode() { - return this.mode === "edit"; - } - - isViewMode() { - return this.mode === "view"; - } - - isAddMode() { - return this.mode === "add"; - } - - get f() { - return this.projectInfo.controls; - } - - onProjectInfoSubmit() { - this.submitted = true; - if (this.projectInfo.invalid) { - return; - } - } - - keyPress(event: any) { - const pattern = /[0-9\+\-\ ]/; - const inputChar = String.fromCharCode(event.charCode); - if (event.keyCode !== 8 && !pattern.test(inputChar)) { - event.preventDefault(); - } - } - - addData() {} - - cancel() { - this.router.navigate(["/device"]); - } -} diff --git a/src/app/content/hemat-app/cost-management/cost-management.component.html b/src/app/content/hemat-app/cost-management/cost-management.component.html index 8d76505..63b20bf 100644 --- a/src/app/content/hemat-app/cost-management/cost-management.component.html +++ b/src/app/content/hemat-app/cost-management/cost-management.component.html @@ -184,7 +184,7 @@ [searchable]="true" bindLabel="name" bindValue="id" - placeholder="Select Building" + placeholder="Select Category" [(ngModel)]="categorySelected" > @@ -355,6 +355,23 @@

{{ value }}

+ + + Room + + +

{{ value }}

+ + - + diff --git a/src/app/content/hemat-app/cost-management/cost-management.component.ts b/src/app/content/hemat-app/cost-management/cost-management.component.ts index 573cd18..cbe6e79 100644 --- a/src/app/content/hemat-app/cost-management/cost-management.component.ts +++ b/src/app/content/hemat-app/cost-management/cost-management.component.ts @@ -10,6 +10,7 @@ import { ModalAddActualComponent } from "./modal-add-actual/modal-add-actual.com import { ChartEvent, ChartType } from "ng-chartist"; import * as Chartist from "chartist"; import "chartist-plugin-tooltips"; +import { ModalExportComponent } from "./modal-export/modal-export.component"; @Component({ selector: "app-cost-management", @@ -97,6 +98,7 @@ export class CostManagementComponent implements OnInit { this.data_cost = this.filteredRows.map((item) => ({ building: item.name, + roomName: item.room_name, categoryName: item.category_name, estimationCost: item.estimation_cost, totalUse: item.total_use, @@ -310,7 +312,23 @@ export class CostManagementComponent implements OnInit { } viewRow(row) { - console.log("View row:", row); - this.router.navigate(["/cost-management/view", row.name]); + const modalRef = this.modalService.open(ModalExportComponent, { + size: "xl", + centered: true, + }); + modalRef.componentInstance.buildingId = this.buildingSelected; + modalRef.componentInstance.dataRow = row; + + modalRef.result.then( + (result) => { + if (result) { + this.rows.push(result); + this.rows = [...this.rows]; + } + }, + (reason) => { + console.log(`Dismissed: ${reason}`); + } + ); } } diff --git a/src/app/content/hemat-app/cost-management/cost-management.module.ts b/src/app/content/hemat-app/cost-management/cost-management.module.ts index 3c63a37..b46708f 100644 --- a/src/app/content/hemat-app/cost-management/cost-management.module.ts +++ b/src/app/content/hemat-app/cost-management/cost-management.module.ts @@ -7,7 +7,6 @@ import { NgxDatatableModule } from '@swimlane/ngx-datatable'; import { BlockUIModule } from 'ng-block-ui'; import { BlockTemplateComponent } from 'src/app/_layout/blockui/block-template.component'; import { CardModule } from '../../partials/general/card/card.module'; -import { AddEditCostComponent } from './add-edit-cost/add-edit-cost.component'; import { NgSelectModule } from '@ng-select/ng-select'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { ClipboardModule } from 'ngx-clipboard'; @@ -17,15 +16,16 @@ import { NgChartsModule } from 'ng2-charts'; import { ChartistModule } from 'ng-chartist'; import { MatchHeightModule } from '../../partials/general/match-height/match-height.module'; import { ModalAddActualComponent } from './modal-add-actual/modal-add-actual.component'; -import { NgxMaskModule, IConfig } from 'ngx-mask' +import { NgxMaskModule, IConfig } from 'ngx-mask'; +import { ModalExportComponent } from './modal-export/modal-export.component' export const options: Partial | (() => Partial) = null; @NgModule({ declarations: [ CostManagementComponent, - AddEditCostComponent, - ModalAddActualComponent + ModalAddActualComponent, + ModalExportComponent ], imports: [ CommonModule, @@ -49,21 +49,6 @@ export const options: Partial | (() => Partial) = null; { path: '', component: CostManagementComponent - }, - { - path: 'add-row', - component: AddEditCostComponent, - data: { mode: 'add' } - }, - { - path: 'edit/:id', - component: AddEditCostComponent, - data: { mode: 'edit' } - }, - { - path: 'view/:id', - component: AddEditCostComponent, - data: { mode: 'view' } } ]) ], diff --git a/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.css b/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.css new file mode 100644 index 0000000..10cac6b --- /dev/null +++ b/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.css @@ -0,0 +1,3 @@ +::ng-deep .modal-backdrop.show { + z-index: auto !important; +} diff --git a/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.html b/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.html new file mode 100644 index 0000000..f7d5727 --- /dev/null +++ b/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.html @@ -0,0 +1,37 @@ +
+

Input the actual cost of your expenses

+

Building : {{ dataRow.building }}

+ +
+
+ + +
diff --git a/src/app/content/hemat-app/cost-management/add-edit-cost/add-edit-cost.component.spec.ts b/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.spec.ts similarity index 51% rename from src/app/content/hemat-app/cost-management/add-edit-cost/add-edit-cost.component.spec.ts rename to src/app/content/hemat-app/cost-management/modal-export/modal-export.component.spec.ts index 237258b..676c92a 100644 --- a/src/app/content/hemat-app/cost-management/add-edit-cost/add-edit-cost.component.spec.ts +++ b/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.spec.ts @@ -1,18 +1,18 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { AddEditCostComponent } from './add-edit-cost.component'; +import { ModalExportComponent } from './modal-export.component'; -describe('AddEditCostComponent', () => { - let component: AddEditCostComponent; - let fixture: ComponentFixture; +describe('ModalExportComponent', () => { + let component: ModalExportComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ AddEditCostComponent ] + declarations: [ ModalExportComponent ] }) .compileComponents(); - fixture = TestBed.createComponent(AddEditCostComponent); + fixture = TestBed.createComponent(ModalExportComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.ts b/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.ts new file mode 100644 index 0000000..43d0339 --- /dev/null +++ b/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.ts @@ -0,0 +1,42 @@ +import { Component, Input } from "@angular/core"; +import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap"; +import { DeviceService } from "../../service/device.service"; + +@Component({ + selector: "app-modal-export", + templateUrl: "./modal-export.component.html", + styleUrls: ["./modal-export.component.css"], +}) +export class ModalExportComponent { + @Input() buildingId: number; + @Input() dataRow: any; + data: any; + filteredRows: any[]; + data_device: any[]; + constructor( + public activeModal: NgbActiveModal, + private deviceService: DeviceService + ) {} + + ngOnInit() { + this.fetchData(this.buildingId); + } + + fetchData(buildingSelected) { + this.deviceService.getDeviceDataById(buildingSelected).subscribe((res) => { + this.data = res; + this.filteredRows = this.data.results.data; + this.data_device = this.filteredRows.map((item) => ({ + buildingName: item.building_name, + id: item.id, + name: item.name, + icon: item.icon, + watt: item.watt, + categoryName: item.category_name, + typeName: item.type_name, + voltageName: item.voltage_name, + statusName: item.status_name, + })); + }); + } +} diff --git a/src/app/content/hemat-app/service/device.service.ts b/src/app/content/hemat-app/service/device.service.ts index 7f9a74b..1ea2b38 100644 --- a/src/app/content/hemat-app/service/device.service.ts +++ b/src/app/content/hemat-app/service/device.service.ts @@ -31,6 +31,21 @@ export class DeviceService { return this.http.get(url, { headers }); } + getDeviceDataById(id): Observable { + const endpoint = `/devices`; + const params = new URLSearchParams({ + page: "1", + limit: "100", + building_id: id + }); + const url = `${BASE_URL}${endpoint}?${params.toString()}`; + const headers = new HttpHeaders({ + "Content-Type": "application/json", + "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT", + }); + return this.http.get(url, { headers }); + } + getDeviceLIst(): Observable { const endpoint = `/devices`; const url = `${BASE_URL}${endpoint}/list`;