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

integrasi actual cost

This commit is contained in:
Fuzi_fauzia 2024-06-13 16:20:09 +07:00
parent fc10a44d5d
commit f6db135ac6
8 changed files with 554 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

442
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

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

@ -89,28 +89,6 @@ input[type="month"]::-webkit-calendar-picker-indicator {
background-color: #ffffff;
}
/* styles.css atau styles.scss */
.chartist-tooltip {
position: absolute;
display: inline-block;
opacity: 0;
transition: opacity 0.2s ease-in-out;
pointer-events: none;
z-index: 10;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 5px;
border-radius: 3px;
font-size: 12px;
white-space: nowrap;
}
.ct-tooltip-visible {
opacity: 1;
}
/* table */
:host

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

@ -6,7 +6,7 @@
<div class="content-body">
<section>
<div class="row">
<div class="col-lg-4 col-12">
<div class="col-lg-4">
<div class="card" style="background-color: #252525 !important">
<div
class="card-header"
@ -41,7 +41,7 @@
</div>
</div>
</div>
<div class="col-lg-4 col-12">
<div class="col-lg-4">
<div class="card" style="background-color: #252525 !important">
<div
class="card-header"
@ -78,7 +78,7 @@
</div>
</div>
</div>
<div class="col-lg-4 col-12">
<div class="col-lg-4">
<div class="card" style="background-color: #252525 !important">
<div
class="card-header"
@ -194,13 +194,6 @@
<div class="col-3">
<div class="d-flex">
<!-- <input
type="text"
class="form-control"
placeholder="Search..."
[(ngModel)]="searchTerm"
/> -->
<button
type="button"
class="btn btn-outline-success ml-2"

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

@ -143,11 +143,6 @@ export class CostManagementComponent implements OnInit {
startAngle: 0,
labelPosition: "outside",
labelOffset: 50,
plugins: [
Chartist.plugins.tooltip({
appendToBody: true,
}),
],
labelInterpolationFnc: function (value) {
return value;
},
@ -273,11 +268,10 @@ export class CostManagementComponent implements OnInit {
addFieldValue() {
const modalRef = this.modalService.open(ModalAddActualComponent, {
size: "sm",
centered: true,
});
modalRef.componentInstance.newAttribute = {
id: null,
name: "",
};
modalRef.componentInstance.buildingId = this.buildingSelected;
modalRef.componentInstance.periode = this.dateSelected;
modalRef.result.then(
(result) => {

35
src/app/content/hemat-app/cost-management/modal-add-actual/modal-add-actual.component.html
View File

@ -1,31 +1,42 @@
<div class="modal-header">
<!-- <h4 class="modal-title">Add New Row</h4> -->
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="modal-body" style="background-color: #000000 !important">
<h4 style="color: #ffffff">Input the actual cost of your expenses</h4>
<p style="color: #ffffff">Building : {{buildingName}}</p>
<p style="color: #ffffff">Periode : {{formattedDate}}</p>
<form [formGroup]="myForm">
<div class="form-group">
<label for="name">Name:</label>
<input
type="text"
class="form-control"
id="name"
formControlName="name"
id="real_cost"
formControlName="real_cost"
placeholder="0.00"
/>
</div>
</form>
</div>
<div class="modal-footer">
<div class="modal-footer" style="background-color: #000000 !important">
<button
type="button"
class="btn btn-secondary"
style="
color: #c3f164;
background-color: #000000 !important;
border-color: #c3f164 !important;
"
(click)="activeModal.dismiss('Cross click')"
>
Close
</button>
<button type="button" class="btn btn-primary" (click)="addRow()">
<button
type="button"
class="btn btn-primary"
style="
color: #000000 !important;
background-color: #c3f164 !important;
border-color: #c3f164 !important;
"
(click)="addRow()"
>
Save Changes
</button>
</div>

87
src/app/content/hemat-app/cost-management/modal-add-actual/modal-add-actual.component.ts
View File

@ -1,29 +1,96 @@
import { Component, Input } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { Component, Input } from "@angular/core";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
import { CostManagementService } from "../../service/cost-management.service";
@Component({
selector: 'app-modal-add-actual',
templateUrl: './modal-add-actual.component.html',
styleUrls: ['./modal-add-actual.component.css']
selector: "app-modal-add-actual",
templateUrl: "./modal-add-actual.component.html",
styleUrls: ["./modal-add-actual.component.css"],
})
export class ModalAddActualComponent {
@Input() newAttribute: any = {};
myForm: FormGroup;
@Input() buildingId: number;
@Input() periode: any;
constructor(public activeModal: NgbActiveModal, private fb: FormBuilder) {
myForm: FormGroup;
dateCurrent: any;
dataCost: any;
formattedDate: any;
buildingName: any;
constructor(
public activeModal: NgbActiveModal,
private fb: FormBuilder,
private costService: CostManagementService
) {
this.createForm();
}
ngOnInit() {
const currentDate = new Date();
this.dateCurrent = currentDate.toISOString().slice(0, 7);
this.datalistcost();
this.dateFormat();
this.getBuildingById();
}
dateFormat() {
let year = this.periode.slice(0, 4);
let month = this.periode.slice(5);
// Ubah format bulan ke bahasa Indonesia (opsional)
let monthNames = [
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember",
];
let monthName = monthNames[parseInt(month) - 1]; // Menggunakan parseInt karena month dalam format string
// Gabungkan kembali untuk mendapatkan format "Juni 2024"
this.formattedDate = `${monthName} ${year}`;
}
createForm() {
this.myForm = this.fb.group({
name: ['', Validators.required],
real_cost: ["", Validators.required],
});
}
getBuildingById() {
this.costService.getBUildingById(this.buildingId).subscribe((data) => {
this.buildingName = data.data.name;
});
}
datalistcost() {
this.costService
.getRealCostByBuildingId(this.buildingId, this.dateCurrent)
.subscribe((data) => {
this.dataCost = data.data[0];
this.myForm.patchValue({
real_cost: data.data[0].real_cost ? data.data[0].real_cost : 0,
});
});
}
addRow() {
if (this.myForm.valid) {
this.costService
.putRealCost(this.myForm.value, this.dataCost.id)
.subscribe((data) => {
console.log(data);
this.activeModal.close(this.myForm.value);
});
}
}
}

1
src/app/content/hemat-app/device/device.component.css
View File

@ -313,6 +313,7 @@
:host ::ng-deep .ng-select .ng-select-container {
color: #ffffff !important;
background-color: #252525 !important;
height: 40px !important;
}
:host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row {

20
src/app/content/hemat-app/service/cost-management.service.ts
View File

@ -78,4 +78,24 @@ export class CostManagementService {
});
return this.http.get<any>(url, { headers });
}
putRealCost(data: any, id: any): Observable<any> {
const endpoint = `/real-cost`;
const url = `${BASE_URL}${endpoint}/${id}`;
const headers = new HttpHeaders({
'Content-Type': 'application/json',
'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
});
return this.http.put<any>(url, data, { headers });
}
getBUildingById(id: any): Observable<any> {
const endpoint = `/building`;
const url = `${BASE_URL}${endpoint}/${id}`;
const headers = new HttpHeaders({
'Content-Type': 'application/json',
'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
});
return this.http.get<any>(url, { headers });
}
}