From dc74154a27a53753de8f2ac54393fa43680dcc31 Mon Sep 17 00:00:00 2001
From: Fuzi_fauzia <fuzi.fauzia@allbestsistem.com>
Date: Sat, 20 Apr 2024 14:39:24 +0700
Subject: [PATCH] perbaikan form input add device

---
 .../add-edit-device.component.html            | 370 ++++++++++++++----
 .../add-edit-device.component.ts              | 102 +++--
 2 files changed, 349 insertions(+), 123 deletions(-)

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 5ea7104..af8700e 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
@@ -25,7 +25,7 @@
                     <div class="row">
                       <div class="col-md-6">
                         <div class="form-group">
-                          <label for="projectinput1">First Name *</label>
+                          <label for="projectinput1">Device Name *</label>
                           <input
                             type="text"
                             id="projectinput1"
@@ -49,24 +49,40 @@
                       </div>
                       <div class="col-md-6">
                         <div class="form-group">
-                          <label for="projectinput2">Last Name *</label>
-                          <input
-                            type="text"
-                            id="projectinput2"
-                            class="form-control"
-                            formControlName="lastName"
-                            placeholder="Last Name"
-                            [ngClass]="{
-                              'is-invalid': submitted && f.lastName.errors
-                            }"
-                          />
+                          <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.lastName.errors"
+                            *ngIf="submitted && f.interestedIn.errors"
                             class="invalid-feedback"
                           >
-                            <div *ngIf="f.lastName.errors.required">
-                              Last Name is required
+                            <div *ngIf="f.interestedIn.errors.required">
+                              Interest is required
                             </div>
                           </small>
                         </div>
@@ -75,86 +91,78 @@
                     <div class="row">
                       <div class="col-md-6">
                         <div class="form-group">
-                          <label for="projectinput3">E-mail *</label>
-                          <input
-                            type="text"
-                            id="projectinput3"
-                            class="form-control"
-                            formControlName="email"
-                            placeholder="E-mail"
-                            [ngClass]="{
-                              'is-invalid': submitted && f.email.errors
-                            }"
-                          />
+                          <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.email.errors"
+                            *ngIf="submitted && f.interestedIn.errors"
                             class="invalid-feedback"
                           >
-                            <div *ngIf="f.email.errors.required">
-                              Email is required
-                            </div>
-                            <div *ngIf="f.email.errors.email">
-                              Email must be a valid email address
+                            <div *ngIf="f.interestedIn.errors.required">
+                              Interest is required
                             </div>
                           </small>
                         </div>
                       </div>
                       <div class="col-md-6">
                         <div class="form-group">
-                          <label for="projectinput4">Contact Number *</label>
-                          <input
-                            type="text"
-                            id="projectinput4"
+                          <label for="projectinput5">Selection Option *</label>
+                          <select
+                            id="projectinput5"
                             class="form-control"
-                            formControlName="phone"
-                            placeholder="Phone"
+                            formControlName="interestedIn"
                             [ngClass]="{
-                              'is-invalid': submitted && f.phone.errors
+                              'is-invalid': submitted && f.interestedIn.errors
                             }"
-                            (keypress)="keyPress($event)"
-                          />
+                          >
+                            <option
+                              *ngFor="let interest of interestedIn"
+                              [value]="interest"
+                            >
+                              {{ interest }}
+                            </option>
+                          </select>
                           <small
                             class="form-text text-muted danger"
-                            *ngIf="submitted && f.phone.errors"
+                            *ngIf="submitted && f.interestedIn.errors"
                             class="invalid-feedback"
                           >
-                            <div *ngIf="f.phone.errors.required">
-                              phone is required
+                            <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="form-group">
-                      <label for="companyName">Company *</label>
-                      <input
-                        type="text"
-                        id="companyName"
-                        class="form-control"
-                        formControlName="company"
-                        placeholder="Company Name"
-                        [ngClass]="{
-                          'is-invalid': submitted && f.company.errors
-                        }"
-                      />
-                      <small
-                        class="form-text text-muted danger"
-                        *ngIf="submitted && f.company.errors"
-                        class="invalid-feedback"
-                      >
-                        <div *ngIf="f.company.errors.required">
-                          Company is required
-                        </div>
-                      </small>
-                    </div>
                     <div class="row">
                       <div class="col-md-6">
                         <div class="form-group">
-                          <label for="projectinput5">Interested in *</label>
+                          <label for="projectinput5">Location *</label>
                           <select
                             id="projectinput5"
                             class="form-control"
@@ -183,37 +191,237 @@
                       </div>
                       <div class="col-md-6">
                         <div class="form-group">
-                          <label for="projectinput6">Budget *</label>
+                          <label for="projectinput5">Status *</label>
                           <select
-                            id="projectinput6"
+                            id="projectinput5"
                             class="form-control"
-                            formControlName="budget"
+                            formControlName="interestedIn"
                             [ngClass]="{
-                              'is-invalid': submitted && f.budget.errors
+                              'is-invalid': submitted && f.interestedIn.errors
                             }"
                           >
                             <option
-                              *ngFor="let range of budget"
-                              [value]="range"
+                              *ngFor="let interest of interestedIn"
+                              [value]="interest"
                             >
-                              {{ range }}
+                              {{ interest }}
                             </option>
                           </select>
                           <small
                             class="form-text text-muted danger"
-                            *ngIf="submitted && f.budget.errors"
+                            *ngIf="submitted && f.interestedIn.errors"
                             class="invalid-feedback"
                           >
-                            <div *ngIf="f.budget.errors.required">
-                              Budget is required
+                            <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()">
+                    <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">
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 8b6f89f..fadadae 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,27 +1,26 @@
-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';
+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',
-  templateUrl: './add-edit-device.component.html',
-  styleUrls: ['./add-edit-device.component.css']
+  selector: "app-add-edit-device",
+  templateUrl: "./add-edit-device.component.html",
+  styleUrls: ["./add-edit-device.component.css"],
 })
 export class AddEditDeviceComponent {
-
-  @ViewChild('f', { read: true }) userProfileForm: NgForm;
+  @ViewChild("f", { read: true }) userProfileForm: NgForm;
 
   model: any = {};
 
-  @BlockUI('projectInfo') blockUIProjectInfo: NgBlockUI;
-  @BlockUI('userProfile') blockUIUserProfile: NgBlockUI;
+  @BlockUI("projectInfo") blockUIProjectInfo: NgBlockUI;
+  @BlockUI("userProfile") blockUIUserProfile: NgBlockUI;
 
   options = {
     minimize: true,
     reload: true,
     expand: true,
-    close: true
+    close: true,
   };
   public breadcrumb: any;
 
@@ -29,44 +28,60 @@ export class AddEditDeviceComponent {
 
   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'];
+  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) { }
+  constructor(private formBuilder: FormBuilder, private router: Router) {}
 
   ngOnInit() {
     this.breadcrumb = {
-      'mainlabel': 'Basic Forms',
-      'links': [
+      mainlabel: "Basic Forms",
+      links: [
         {
-          'name': 'Home',
-          'isLink': true,
-          'link': '/dashboard/sales'
+          name: "Home",
+          isLink: true,
+          link: "/dashboard/sales",
         },
         {
-          'name': 'Form Layouts',
-          'isLink': true,
-          'link': '#'
+          name: "Form Layouts",
+          isLink: true,
+          link: "#",
         },
         {
-          'name': 'Basic Forms',
-          'isLink': false
-        }
-      ]
+          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],
+      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],
+      aboutProject: ["", Validators.required],
     });
   }
 
@@ -83,7 +98,7 @@ export class AddEditDeviceComponent {
   }
 
   reloadProjectInfo() {
-    this.blockUIProjectInfo.start('Loading..');
+    this.blockUIProjectInfo.start("Loading..");
 
     setTimeout(() => {
       this.blockUIProjectInfo.stop();
@@ -91,7 +106,7 @@ export class AddEditDeviceComponent {
   }
 
   reloadUserProfile() {
-    this.blockUIUserProfile.start('Loading..');
+    this.blockUIUserProfile.start("Loading..");
 
     setTimeout(() => {
       this.blockUIUserProfile.stop();
@@ -107,8 +122,11 @@ export class AddEditDeviceComponent {
     }
   }
 
-  cancel() {
-    this.router.navigate(['/device']);  // Adjust the path as per your routing setup
+  addData(){
+    
+  }
+
+  cancel() {
+    this.router.navigate(["/device"]); // Adjust the path as per your routing setup
   }
-  
 }