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

penambahan form input tambah cost management

Browse Source
This commit is contained in:
Fuzi_fauzia
2024-04-21 21:55:16 +07:00
parent 4f4dde0d07
commit 4dc2c3f1a7
10 changed files with 746 additions and 63 deletions
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 Normal file
View File

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

@@ -0,0 +1,447 @@
<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>

23
src/app/content/hemat-app/cost-management/add-edit-cost/add-edit-cost.component.spec.ts Normal file
View File

@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AddEditCostComponent } from './add-edit-cost.component';
describe('AddEditCostComponent', () => {
let component: AddEditCostComponent;
let fixture: ComponentFixture<AddEditCostComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ AddEditCostComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(AddEditCostComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

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

@@ -0,0 +1,162 @@
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"]);
}
}

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

@@ -29,7 +29,7 @@
<div class="col-md-6 text-right">
<button
class="btn btn-secondary"
[routerLink]="['/device/add-row']"
[routerLink]="['/cost-management/add-row']"
>
<i class="feather ft-plus"></i>&nbsp; Add new data
</button>

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

@@ -66,12 +66,12 @@ export class CostManagementComponent implements OnInit{
viewRow(row) {
console.log("View row:", row);
this.router.navigate(["/device/view", row.name]);
this.router.navigate(["/cost-management/view", row.name]);
}
editRow(row) {
console.log("Edit row:", row);
this.router.navigate(["/device/edit", row.name]);
this.router.navigate(["/cost-management/edit", row.name]);
}
deleteRow(row) {

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

@@ -7,17 +7,28 @@ 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';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
@NgModule({
declarations: [
CostManagementComponent
CostManagementComponent,
AddEditCostComponent
],
imports: [
CommonModule,
CardModule,
BreadcrumbModule,
NgSelectModule,
FormsModule,
ReactiveFormsModule,
ClipboardModule,
PerfectScrollbarModule,
NgxDatatableModule,
BlockUIModule.forRoot({
template: BlockTemplateComponent
@@ -26,6 +37,21 @@ import { CardModule } from '../../partials/general/card/card.module';
{
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' }
}
])
]