From 4dc2c3f1a72f2965da78b335697879f91b5dfd08 Mon Sep 17 00:00:00 2001 From: Fuzi_fauzia Date: Sun, 21 Apr 2024 21:55:16 +0700 Subject: [PATCH] penambahan form input tambah cost management --- .../private-layout.component.html | 24 +- .../add-edit-cost/add-edit-cost.component.css | 0 .../add-edit-cost.component.html | 447 ++++++++++++++++++ .../add-edit-cost.component.spec.ts | 23 + .../add-edit-cost/add-edit-cost.component.ts | 162 +++++++ .../cost-management.component.html | 2 +- .../cost-management.component.ts | 4 +- .../cost-management/cost-management.module.ts | 28 +- .../add-edit-device.component.html | 16 +- .../add-edit-device.component.ts | 103 ++-- 10 files changed, 746 insertions(+), 63 deletions(-) create mode 100644 src/app/content/hemat-app/cost-management/add-edit-cost/add-edit-cost.component.css create mode 100644 src/app/content/hemat-app/cost-management/add-edit-cost/add-edit-cost.component.html create mode 100644 src/app/content/hemat-app/cost-management/add-edit-cost/add-edit-cost.component.spec.ts create mode 100644 src/app/content/hemat-app/cost-management/add-edit-cost/add-edit-cost.component.ts diff --git a/src/app/_layout/private-layout/private-layout.component.html b/src/app/_layout/private-layout/private-layout.component.html index 161303f..f836b57 100644 --- a/src/app/_layout/private-layout/private-layout.component.html +++ b/src/app/_layout/private-layout/private-layout.component.html @@ -1,14 +1,20 @@
-
+
-
- - -
-
- + -
\ No newline at end of file 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 new file mode 100644 index 0000000..e69de29 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 new file mode 100644 index 0000000..e4657b0 --- /dev/null +++ b/src/app/content/hemat-app/cost-management/add-edit-cost/add-edit-cost.component.html @@ -0,0 +1,447 @@ +
+
+
+ +
+
+
+
+
+ + +

+ {{ + 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.spec.ts b/src/app/content/hemat-app/cost-management/add-edit-cost/add-edit-cost.component.spec.ts new file mode 100644 index 0000000..237258b --- /dev/null +++ b/src/app/content/hemat-app/cost-management/add-edit-cost/add-edit-cost.component.spec.ts @@ -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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AddEditCostComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(AddEditCostComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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 new file mode 100644 index 0000000..a2001e6 --- /dev/null +++ b/src/app/content/hemat-app/cost-management/add-edit-cost/add-edit-cost.component.ts @@ -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"]); + } +} 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 ca8def1..c53a455 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 @@ -29,7 +29,7 @@
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 694835b..9d4917a 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 @@ -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) { 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 0a1e053..7620b72 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,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' } } ]) ] diff --git a/src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.html b/src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.html index a0aaa73..92e2f6f 100644 --- a/src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.html +++ b/src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.html @@ -1,15 +1,13 @@
-
-
+
+ +
-
-
- +
+
+

{{ @@ -445,4 +443,4 @@

- + diff --git a/src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.ts b/src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.ts index bb63cda..07d3c76 100644 --- a/src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.ts +++ b/src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.ts @@ -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"]); } }