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

penambahan modal export

This commit is contained in:
Fuzi_fauzia 2024-06-25 15:39:26 +07:00
parent e27493171e
commit 5cbd0f09dc
11 changed files with 146 additions and 638 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/app/content/hemat-app/cost-management/add-edit-cost/add-edit-cost.component.css
View File

447
src/app/content/hemat-app/cost-management/add-edit-cost/add-edit-cost.component.html
View File

@ -1,447 +0,0 @@
<div class="app-content content">
<div class="content-wrapper">
<div class="content-header row mb-1">
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
</div>
<div class="content-body">
<section id="basic-form-layouts">
<div class="row">
<div class="col-12" *blockUI="'projectInfo'; message: 'Loading'">
<m-card>
<ng-container mCardHeaderTitle>
<h2>
{{
isEditMode()
? "Edit Cost Management"
: isViewMode()
? "View Cost Management"
: "Add New Cost Management"
}}
</h2>
</ng-container>
<ng-container mCardBody>
<form
[formGroup]="projectInfo"
(ngSubmit)="onProjectInfoSubmit()"
>
<div class="form-body">
<h4 class="form-section">
<i class="feather ft-user"></i> General Information
</h4>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="projectinput1">Estimation cost Name *</label>
<input
type="text"
id="projectinput1"
class="form-control"
formControlName="firstName"
placeholder="First Name"
[ngClass]="{
'is-invalid': submitted && f.firstName.errors
}"
/>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.firstName.errors"
class="invalid-feedback"
>
<div *ngIf="f.firstName.errors.required">
First Name is required
</div>
</small>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="projectinput5">Duration Use *</label>
<div class="input-group">
<select
id="projectinput5"
class="form-control"
formControlName="interestedIn"
[ngClass]="{
'is-invalid': submitted && f.interestedIn.errors
}"
>
<option
*ngFor="let interest of interestedIn"
[value]="interest"
>
{{ interest }}
</option>
</select>
<div class="input-group-append">
<button
type="button"
class="btn btn-primary"
(click)="addData()"
>
Add
</button>
</div>
</div>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.interestedIn.errors"
class="invalid-feedback"
>
<div *ngIf="f.interestedIn.errors.required">
Interest is required
</div>
</small>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="projectinput5">Category *</label>
<div class="input-group">
<select
id="projectinput5"
class="form-control"
formControlName="interestedIn"
[ngClass]="{
'is-invalid': submitted && f.interestedIn.errors
}"
>
<option
*ngFor="let interest of interestedIn"
[value]="interest"
>
{{ interest }}
</option>
</select>
<div class="input-group-append">
<button
type="button"
class="btn btn-primary"
(click)="addData()"
>
Add
</button>
</div>
</div>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.interestedIn.errors"
class="invalid-feedback"
>
<div *ngIf="f.interestedIn.errors.required">
Interest is required
</div>
</small>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="projectinput5">Selection Option *</label>
<select
id="projectinput5"
class="form-control"
formControlName="interestedIn"
[ngClass]="{
'is-invalid': submitted && f.interestedIn.errors
}"
>
<option
*ngFor="let interest of interestedIn"
[value]="interest"
>
{{ interest }}
</option>
</select>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.interestedIn.errors"
class="invalid-feedback"
>
<div *ngIf="f.interestedIn.errors.required">
Interest is required
</div>
</small>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="projectinput5">Location *</label>
<select
id="projectinput5"
class="form-control"
formControlName="interestedIn"
[ngClass]="{
'is-invalid': submitted && f.interestedIn.errors
}"
>
<option
*ngFor="let interest of interestedIn"
[value]="interest"
>
{{ interest }}
</option>
</select>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.interestedIn.errors"
class="invalid-feedback"
>
<div *ngIf="f.interestedIn.errors.required">
Interest is required
</div>
</small>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="projectinput5">Status *</label>
<select
id="projectinput5"
class="form-control"
formControlName="interestedIn"
[ngClass]="{
'is-invalid': submitted && f.interestedIn.errors
}"
>
<option
*ngFor="let interest of interestedIn"
[value]="interest"
>
{{ interest }}
</option>
</select>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.interestedIn.errors"
class="invalid-feedback"
>
<div *ngIf="f.interestedIn.errors.required">
Interest is required
</div>
</small>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="projectinput5">Location Room *</label>
<select
id="projectinput5"
class="form-control"
formControlName="interestedIn"
[ngClass]="{
'is-invalid': submitted && f.interestedIn.errors
}"
>
<option
*ngFor="let interest of interestedIn"
[value]="interest"
>
{{ interest }}
</option>
</select>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.interestedIn.errors"
class="invalid-feedback"
>
<div *ngIf="f.interestedIn.errors.required">
Interest is required
</div>
</small>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="projectinput5">Type *</label>
<select
id="projectinput5"
class="form-control"
formControlName="interestedIn"
[ngClass]="{
'is-invalid': submitted && f.interestedIn.errors
}"
>
<option
*ngFor="let interest of interestedIn"
[value]="interest"
>
{{ interest }}
</option>
</select>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.interestedIn.errors"
class="invalid-feedback"
>
<div *ngIf="f.interestedIn.errors.required">
Interest is required
</div>
</small>
</div>
</div>
</div>
<h4 class="form-section">
<i class="la la-paperclip"></i> Energy Information
</h4>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="projectinput1">Price/Kwh *</label>
<input
type="text"
id="projectinput1"
class="form-control"
formControlName="firstName"
placeholder="First Name"
[ngClass]="{
'is-invalid': submitted && f.firstName.errors
}"
/>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.firstName.errors"
class="invalid-feedback"
>
<div *ngIf="f.firstName.errors.required">
First Name is required
</div>
</small>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="projectinput1">Kwh *</label>
<input
type="text"
id="projectinput1"
class="form-control"
formControlName="firstName"
placeholder="First Name"
[ngClass]="{
'is-invalid': submitted && f.firstName.errors
}"
/>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.firstName.errors"
class="invalid-feedback"
>
<div *ngIf="f.firstName.errors.required">
First Name is required
</div>
</small>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="projectinput1">Voltage *</label>
<input
type="text"
id="projectinput1"
class="form-control"
formControlName="firstName"
placeholder="First Name"
[ngClass]="{
'is-invalid': submitted && f.firstName.errors
}"
/>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.firstName.errors"
class="invalid-feedback"
>
<div *ngIf="f.firstName.errors.required">
First Name is required
</div>
</small>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="projectinput5">Auto update *</label>
<select
id="projectinput5"
class="form-control"
formControlName="interestedIn"
[ngClass]="{
'is-invalid': submitted && f.interestedIn.errors
}"
>
<option
*ngFor="let interest of interestedIn"
[value]="interest"
>
{{ interest }}
</option>
</select>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.interestedIn.errors"
class="invalid-feedback"
>
<div *ngIf="f.interestedIn.errors.required">
Interest is required
</div>
</small>
</div>
</div>
</div>
<div class="form-group">
<label for="projectinput5">Auto update *</label>
<select
id="projectinput5"
class="form-control"
formControlName="interestedIn"
[ngClass]="{
'is-invalid': submitted && f.interestedIn.errors
}"
>
<option
*ngFor="let interest of interestedIn"
[value]="interest"
>
{{ interest }}
</option>
</select>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.interestedIn.errors"
class="invalid-feedback"
>
<div *ngIf="f.interestedIn.errors.required">
Interest is required
</div>
</small>
</div>
</div>
<div class="form-actions">
<button
type="button"
class="btn btn-warning mr-1"
(click)="cancel()"
>
<i class="feather ft-x"></i> Cancel
</button>
<button type="submit" class="btn btn-primary">
<i class="la la-check"></i> Save
</button>
</div>
</form>
</ng-container>
</m-card>
</div>
</div>
</section>
</div>
</div>
</div>

162
src/app/content/hemat-app/cost-management/add-edit-cost/add-edit-cost.component.ts
View File

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

21
src/app/content/hemat-app/cost-management/cost-management.component.html
View File

@ -184,7 +184,7 @@
[searchable]="true"
bindLabel="name"
bindValue="id"
placeholder="Select Building"
placeholder="Select Category"
[(ngModel)]="categorySelected"
>
</ng-select>
@ -355,6 +355,23 @@
<p style="color: #ffffff !important">{{ value }}</p>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
name="roomName"
[flexGrow]="1"
[minWidth]="90"
>
<ng-template ngx-datatable-header-template>
<span style="color: #ffffff !important"
>Room</span
>
</ng-template>
<ng-template
let-value="value"
ngx-datatable-cell-template
>
<p style="color: #ffffff !important">{{ value }}</p>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
name="categoryName"
[flexGrow]="1"
@ -469,7 +486,7 @@
"
(click)="viewRow(row)"
>
<i class="ficon feather ft-eye"></i>
<i class="ficon ri-export-line" style="color: #bef264 !important"></i>
</button>
</ng-template>
</ngx-datatable-column>

22
src/app/content/hemat-app/cost-management/cost-management.component.ts
View File

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

23
src/app/content/hemat-app/cost-management/cost-management.module.ts
View File

@ -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<null|IConfig> | (() => Partial<IConfig>) = null;
@NgModule({
declarations: [
CostManagementComponent,
AddEditCostComponent,
ModalAddActualComponent
ModalAddActualComponent,
ModalExportComponent
],
imports: [
CommonModule,
@ -49,21 +49,6 @@ export const options: Partial<null|IConfig> | (() => Partial<IConfig>) = 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' }
}
])
],

3
src/app/content/hemat-app/cost-management/modal-export/modal-export.component.css Normal file
View File

@ -0,0 +1,3 @@
::ng-deep .modal-backdrop.show {
z-index: auto !important;
}

37
src/app/content/hemat-app/cost-management/modal-export/modal-export.component.html Normal file
View File

@ -0,0 +1,37 @@
<div class="modal-body" style="background-color: #252525 !important">
<h4 style="color: #ffffff">Input the actual cost of your expenses</h4>
<p style="color: #ffffff">Building : {{ dataRow.building }}</p>
<!-- <p style="color: #ffffff">Periode : {{ formattedDate }}</p> -->
</div>
<div
class="modal-footer justify-content-between"
style="background-color: #252525 !important; border-style: none !important"
>
<button
type="button"
class="btn btn-secondary"
style="
color: #c3f164;
width: 25%;
background-color: #252525 !important;
border-color: #c3f164 !important;
border-radius: 10px;
"
(click)="activeModal.dismiss('Cross click')"
>
Close
</button>
<button
type="button"
class="btn btn-primary"
style="
color: #252525 !important;
width: 25%;
background-color: #c3f164 !important;
border-color: #c3f164 !important;
border-radius: 10px;
"
>
Add
</button>
</div>

12
src/app/content/hemat-app/cost-management/add-edit-cost/add-edit-cost.component.spec.ts → src/app/content/hemat-app/cost-management/modal-export/modal-export.component.spec.ts
View File

@ -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<AddEditCostComponent>;
describe('ModalExportComponent', () => {
let component: ModalExportComponent;
let fixture: ComponentFixture<ModalExportComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ AddEditCostComponent ]
declarations: [ ModalExportComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(AddEditCostComponent);
fixture = TestBed.createComponent(ModalExportComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

42
src/app/content/hemat-app/cost-management/modal-export/modal-export.component.ts Normal file
View File

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

15
src/app/content/hemat-app/service/device.service.ts
View File

@ -31,6 +31,21 @@ export class DeviceService {
return this.http.get<any>(url, { headers });
}
getDeviceDataById(id): Observable<any> {
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<any>(url, { headers });
}
getDeviceLIst(): Observable<any> {
const endpoint = `/devices`;
const url = `${BASE_URL}${endpoint}/list`;