From 6c9b4f18b4b8ad3204ca1307b333796b6fca0745 Mon Sep 17 00:00:00 2001 From: Fuzi_fauzia Date: Sat, 20 Apr 2024 01:31:50 +0700 Subject: [PATCH] penambahan form input add data device --- .../hospital/hospital.component.html | 415 ++++++++------- .../add-edit-device.component.html | 477 ++++++++---------- .../add-edit-device.component.ts | 106 +++- .../hemat-app/device/device.component.html | 5 +- .../content/hemat-app/device/device.module.ts | 4 + .../partials/general/card/card.component.html | 4 +- 6 files changed, 564 insertions(+), 447 deletions(-) diff --git a/src/app/content/dashboard/hospital/hospital.component.html b/src/app/content/dashboard/hospital/hospital.component.html index f5f0cf5..42d2578 100644 --- a/src/app/content/dashboard/hospital/hospital.component.html +++ b/src/app/content/dashboard/hospital/hospital.component.html @@ -1,196 +1,241 @@
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
Doctors Available
-

122

-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
Visiting Doctors
-

34

-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
Today's Inquiry
-

3.5K

-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
Rooms Available
-

179

-
-
-
-
-
-
-
- - - -
-
-
-
+
+
+
+
+
-
- - - Appointment - - -
- +
+
+
+
+
+
+ +
+
+
Doctors Available
+

122

+
+
- - +
+
+
+
+
+
+
+
+
+ +
+
+
Visiting Doctors
+

34

+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
Today's Inquiry
+

3.5K

+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
Rooms Available
+

179

+
+
+
+
+
-
-
-
-
- + - -
-
-
-
-

Doctors Available

-
-
-
- - - - - - - - - -
-
- Avatar + +
+
+
+
+
+
+ + Appointment + +
+ +
+ + +
-
-
{{doctor.name}}
-
Dentist
- 		- Book Appointment -
+ +
+
+ + + +
+
+
+
+

Doctors Available

+
+
+
+ + + + + + + + +
+
+ Avatar +
+ 		+
{{ doctor.name }}
+
+ Dentist +
+ 		+ Book Appointment +
+
+
+
+
+
+
+
+

Recent Appointments

+ +
+ +
+
+
+
+ + + + + + + + + + + + + + + + + + + +
DoctorPatientsSpecialitiesTimingsAmount
{{ doctor.name }} +
    +
  • + Avatar +
    • + +
  • + {{ + doctor.bagde + }} +
    • +
+ 		+ + {{ doctor.time }}{{ doctor.amount }}
+
+
+
+
+
+
-
-
-
-

Recent Appointments

- -
- -
-
-
-
- - - - - - - - - - - - - - - - - - - - -
DoctorPatientsSpecialitiesTimingsAmount
{{doctor.name}} -
    -
  • - Avatar - -
    • - -
  • - {{doctor.bagde}} -
    • -
- 		- - {{doctor.time}}{{doctor.amount}}
-
-
-
-
-
- -
- - - \ No newline at end of file + 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 eb75b5c..5ea7104 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,261 +1,232 @@ -
-
-
- - - Project Info (Reactive Forms Validation) - - -
-

- This is the most basic and default form having form sections. To - add form section use - .form-section - class with any heading tags. This form has the buttons on the - bottom left corner which is the default position. -

-
-
-
-

- Personal Info -

-
-
-
- - - -
- First Name is required -
- -
-
-
-
- - - -
- Last Name is required -
- -
-
-
-
-
-
- - - -
- Email is required -
-
- Email must be a valid email address -
- -
-
-
-
- - - -
- phone is required -
- -
-
-
-

- Requirements -

-
- - - +
+
+
+
+
+
+
+ + + Project Info (Reactive Forms Validation) + + + -
- Company is required -
- -
-
-
-
- - + +
+ First Name is required +
+ +
+
+
+
+ + + +
+ Last Name is required +
+ +
+
+
+
+
+
+ + + +
+ Email is required +
+
+ Email must be a valid email address +
+ +
+
+
+
+ + + +
+ phone is required +
+ +
+
+
+

+ Energy Information +

+
+ + + - {{ interest }} - - - -
- Interest is required +
+ Company is required +
+ +
+
+
+
+ + + +
+ Interest is required +
+ +
- -
-
-
-
- - - -
- Budget is required +
+
+ + + +
+ Budget is required +
+ +
- +
-
-
-
- - - -
- File is required +
+ +
- -
-
- - - -
- Project Description is required -
- -
-
-
- - -
- - - + + + +
+
+
- + + 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 a57bcbd..8b6f89f 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,7 @@ -import { Component } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; +import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms'; +import { Router } from '@angular/router'; +import { BlockUI, NgBlockUI } from 'ng-block-ui'; @Component({ selector: 'app-add-edit-device', @@ -6,9 +9,106 @@ import { Component } from '@angular/core'; styleUrls: ['./add-edit-device.component.css'] }) export class AddEditDeviceComponent { - - constructor() { } + @ViewChild('f', { read: true }) userProfileForm: NgForm; + model: any = {}; + + @BlockUI('projectInfo') blockUIProjectInfo: NgBlockUI; + @BlockUI('userProfile') blockUIUserProfile: NgBlockUI; + + options = { + minimize: true, + reload: true, + expand: true, + close: true + }; + public breadcrumb: any; + + projectInfo: FormGroup; + + submitted = false; + + interestedIn = ['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) { } + + ngOnInit() { + 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.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], + }); + } + + get f() { + return this.projectInfo.controls; + } + + 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(); + } + } + + cancel() { + this.router.navigate(['/device']); // Adjust the path as per your routing setup + } } diff --git a/src/app/content/hemat-app/device/device.component.html b/src/app/content/hemat-app/device/device.component.html index 9641fde..9f54bb6 100644 --- a/src/app/content/hemat-app/device/device.component.html +++ b/src/app/content/hemat-app/device/device.component.html @@ -13,13 +13,10 @@ (reloadFunction)="reloadAddRows($event)" > - diff --git a/src/app/content/hemat-app/device/device.module.ts b/src/app/content/hemat-app/device/device.module.ts index 4ac3df8..bf6b54a 100644 --- a/src/app/content/hemat-app/device/device.module.ts +++ b/src/app/content/hemat-app/device/device.module.ts @@ -40,6 +40,10 @@ import { ModalAddEditComponent } from './modal-add-edit/modal-add-edit.component { path: '', component: DeviceComponent + }, + { + path: 'add-row', + component: AddEditDeviceComponent } ]) ] diff --git a/src/app/content/partials/general/card/card.component.html b/src/app/content/partials/general/card/card.component.html index c60bbac..5499213 100644 --- a/src/app/content/partials/general/card/card.component.html +++ b/src/app/content/partials/general/card/card.component.html @@ -7,7 +7,7 @@
-
    +