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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/app/_layout/private-layout/private-layout.component.html
View File

@ -1,14 +1,20 @@
<div (window:resize)="onResize($event)"></div>
<app-navigation></app-navigation>
<router-outlet></router-outlet>
<div class="sidenav-overlay d-none" id="sidenav-overlay" (click)="rightbar($event)"></div>
<div
class="sidenav-overlay d-none"
id="sidenav-overlay"
(click)="rightbar($event)"
></div>
<app-footer></app-footer>
<div *ngIf ="customizer === 'on'">
<app-customizer *ngIf="layout === 'vertical'"></app-customizer>
<app-horizontal-customizer *ngIf="layout === 'horizontal'"></app-horizontal-customizer>
</div>
<div *ngIf ="buybutton === 'on'">
<!-- <div class="buy-now" >
<a href="https://1.envato.market/modern_admin_angular" target="_blank" class="btn bg-gradient-directional-purple round white btn-purple btn-glow px-2">Buy Now</a>
<!-- <div *ngIf="customizer === 'on'">
<app-customizer *ngIf="layout === 'vertical'"></app-customizer>
<app-horizontal-customizer
*ngIf="layout === 'horizontal'"
></app-horizontal-customizer>
</div> -->
<!-- <div *ngIf="buybutton === 'on'">
<div class="buy-now" >
<a href="https://1.envato.market/modern_admin_angular" target="_blank" class="btn bg-gradient-directional-purple round white btn-purple btn-glow px-2">Buy Now</a>
</div>
</div> -->
</div>

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' }
}
])
]

16
src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.html
View File

@ -1,15 +1,13 @@
<div class="app-content content">
<div class="content-overlay"></div>
<div class="content-wrapper">
<div class="content-header row"></div>
<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" matchHeight="card">
<div class="col-md-6" *blockUI="'projectInfo'; message: 'Loading'">
<m-card
[options]="options"
(reloadFunction)="reloadProjectInfo($event)"
>
<div class="row">
<div class="col-12" *blockUI="'projectInfo'; message: 'Loading'">
<m-card>
<ng-container mCardHeaderTitle>
<h2>
{{
@ -445,4 +443,4 @@
</div>
</div>
</div>
<!-- END: Content-->

103
src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.ts
View File

@ -1,4 +1,4 @@
import { Component, ViewChild } from "@angular/core";
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";
@ -8,7 +8,7 @@ import { BlockUI, NgBlockUI } from "ng-block-ui";
templateUrl: "./add-edit-device.component.html",
styleUrls: ["./add-edit-device.component.css"],
})
export class AddEditDeviceComponent {
export class AddEditDeviceComponent implements OnInit{
@ViewChild("f", { read: true }) userProfileForm: NgForm;
model: any = {};
@ -59,27 +59,8 @@ export class AddEditDeviceComponent {
ngOnInit() {
this.route.data.subscribe((data) => {
this.mode = data.mode;
console.log(this.mode);
});
this.breadcrumb = {
mainlabel: "Basic Forms",
links: [
{
name: "Home",
isLink: true,
link: "/dashboard/sales",
},
{
name: "Form Layouts",
isLink: true,
link: "#",
},
{
name: "Basic Forms",
isLink: false,
},
],
};
this.setBreadcrumb()
this.projectInfo = this.formBuilder.group({
firstName: ["", Validators.required],
@ -94,6 +75,64 @@ export class AddEditDeviceComponent {
});
}
setBreadcrumb() {
if (this.isAddMode()) {
this.breadcrumb = {
mainlabel: "Device",
links: [
{
name: "Home",
isLink: false,
},
{
name: "Device",
isLink: false,
},
{
name: "Add new device",
isLink: false,
},
],
};
} else if (this.isEditMode()) {
this.breadcrumb = {
mainlabel: "Device",
links: [
{
name: "Home",
isLink: false,
},
{
name: "Device",
isLink: false,
},
{
name: "Edit new device",
isLink: false,
},
],
};
} else if (this.isViewMode()) {
this.breadcrumb = {
mainlabel: "Device",
links: [
{
name: "Home",
isLink: false,
},
{
name: "Device",
isLink: false,
},
{
name: "View new device",
isLink: false,
},
],
};
}
}
isEditMode() {
return this.mode === "edit";
}
@ -112,31 +151,13 @@ export class AddEditDeviceComponent {
onProjectInfoSubmit() {
this.submitted = true;
if (this.projectInfo.invalid) {
return;
}
}
reloadProjectInfo() {
this.blockUIProjectInfo.start("Loading..");
setTimeout(() => {
this.blockUIProjectInfo.stop();
}, 2500);
}
reloadUserProfile() {
this.blockUIUserProfile.start("Loading..");
setTimeout(() => {
this.blockUIUserProfile.stop();
}, 2500);
}
keyPress(event: any) {
const pattern = /[0-9\+\-\ ]/;
const inputChar = String.fromCharCode(event.charCode);
if (event.keyCode !== 8 && !pattern.test(inputChar)) {
event.preventDefault();
@ -146,6 +167,6 @@ export class AddEditDeviceComponent {
addData() {}
cancel() {
this.router.navigate(["/device"]); // Adjust the path as per your routing setup
this.router.navigate(["/device"]);
}
}