penambahan form input add data device

src/app/content/dashboard/hospital/hospital.component.html

@@ -1,9 +1,9 @@
 <div class="app-content content">
   <div class="content-overlay"></div>
   <div class="content-wrapper">
-      <div class="content-header row">
+    <div class="content-header row"></div>
-      </div>
+    <div class="content-body">
-      <div class="content-body"><!-- Hospital Info cards -->
+      <!-- Hospital Info cards -->
       <div class="row">
         <div class="col-xl-3 col-lg-6 col-md-6 col-12">
           <div class="card pull-up">
@@ -83,15 +83,23 @@
             <section id="chartjs-bar-charts">
               <div class="row">
                 <div class="col-12" *blockUI="'barCharts'; message: 'Loading'">
-          <m-card [options]="options" (reloadFunction)="reloadBarCharts($event)">
+                  <m-card
-            <ng-container mCardHeaderTitle>
+                    [options]="options"
-              Appointment
+                    (reloadFunction)="reloadBarCharts($event)"
-            </ng-container>
+                  >
+                    <ng-container mCardHeaderTitle> Appointment </ng-container>
                     <ng-container mCardBody>
                       <div class="z">
-                <canvas class="barchart" height="328" baseChart [datasets]="barChartData" [labels]="barChartLabels"
+                        <canvas
-                  [options]="barChartOptions" [legend]="barChartLegend"
+                          class="barchart"
-                  [chartType]="barChartType"></canvas>
+                          height="328"
+                          baseChart
+                          [datasets]="barChartData"
+                          [labels]="barChartLabels"
+                          [options]="barChartOptions"
+                          [legend]="barChartLegend"
+                          [chartType]="barChartType"
+                        ></canvas>
                       </div>
                     </ng-container>
                   </m-card>
@@ -112,24 +120,35 @@
             </div>
             <div class="card-content">
               <div class="table-responsive">
-        <table id="recent-orders" class="table table-hover table-xl mb-0">
+                <table
+                  id="recent-orders"
+                  class="table table-hover table-xl mb-0"
+                >
                   <tbody>
                     <tr *ngFor="let doctor of doctors">
                       <td class="text-truncate p-1 border-top-0">
                         <div class="avatar avatar-md">
-                <img class="media-object rounded-circle" [src]= doctor.image
+                          <img
-                  alt="Avatar">
+                            class="media-object rounded-circle"
+                            [src]="doctor.image"
+                            alt="Avatar"
+                          />
                         </div>
                       </td>
                       <td class="text-truncate pl-0 border-top-0">
                         <div class="name">{{ doctor.name }}</div>
-              <div class="designation text-light font-small-2">Dentist</div>
+                        <div class="designation text-light font-small-2">
+                          Dentist
+                        </div>
                       </td>
                       <td class="text-right border-top-0">
-              <a href="hospital-book-appointment.html" class="btn btn-sm btn-outline-success">Book Appointment</a>
+                        <a
+                          href="hospital-book-appointment.html"
+                          class="btn btn-sm btn-outline-success"
+                          >Book Appointment</a
+                        >
                       </td>
                     </tr>
-      
                   </tbody>
                 </table>
               </div>
@@ -140,17 +159,28 @@
           <div class="card">
             <div class="card-header">
               <h4 class="card-title">Recent Appointments</h4>
-      <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
+              <a class="heading-elements-toggle"
+                ><i class="la la-ellipsis-v font-medium-3"></i
+              ></a>
               <div class="heading-elements">
                 <ul class="list-inline mb-0">
-          <li><a class="btn btn-sm btn-danger box-shadow-2 round btn-min-width pull-right" href="hospital-book-appointment.html"
+                  <li>
-              target="_blank">View all</a></li>
+                    <a
+                      class="btn btn-sm btn-danger box-shadow-2 round btn-min-width pull-right"
+                      href="hospital-book-appointment.html"
+                      target="_blank"
+                      >View all</a
+                    >
+                  </li>
                 </ul>
               </div>
             </div>
             <div class="card-content mt-1">
               <div class="table-responsive">
-          <table id="recent-orders-doctors" class="table table-hover table-xl mb-0">
+                <table
+                  id="recent-orders-doctors"
+                  class="table table-hover table-xl mb-0"
+                >
                   <thead>
                     <tr>
                       <th class="border-top-0">Doctor</th>
@@ -165,23 +195,38 @@
                       <td class="text-truncate">{{ doctor.name }}</td>
                       <td class="text-truncate p-1">
                         <ul class="list-unstyled users-list m-0">
-                <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Kimberly Simmons" class="avatar avatar-sm pull-up" *ngFor="let imageUrl of doctor.image">
+                          <li
-                    <img class="media-object rounded-circle" [src]="imageUrl" alt="Avatar">
+                            data-toggle="tooltip"
-                   
+                            data-popup="tooltip-custom"
+                            data-original-title="Kimberly Simmons"
+                            class="avatar avatar-sm pull-up"
+                            *ngFor="let imageUrl of doctor.image"
+                          >
+                            <img
+                              class="media-object rounded-circle"
+                              [src]="imageUrl"
+                              alt="Avatar"
+                            />
                           </li>
 
                           <li class="avatar avatar-sm">
-                  <span class="badge badge-info">{{doctor.bagde}}</span>
+                            <span class="badge badge-info">{{
+                              doctor.bagde
+                            }}</span>
                           </li>
                         </ul>
                       </td>
                       <td>
-              <button type="button" class="btn btn-sm btn-outline-{{doctor.type}} round">{{doctor.designation}}</button>
+                        <button
+                          type="button"
+                          class="btn btn-sm btn-outline-{{ doctor.type }} round"
+                        >
+                          {{ doctor.designation }}
+                        </button>
                       </td>
                       <td class="text-truncate">{{ doctor.time }}</td>
                       <td class="text-truncate">{{ doctor.amount }}</td>
                     </tr>
-    
                   </tbody>
                 </table>
               </div>

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

@@ -1,24 +1,26 @@
+<div class="app-content content">
+  <div class="content-overlay"></div>
+  <div class="content-wrapper">
+    <div class="content-header row"></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)">
+            <m-card
+              [options]="options"
+              (reloadFunction)="reloadProjectInfo($event)"
+            >
               <ng-container mCardHeaderTitle>
                 Project Info (Reactive Forms Validation)
               </ng-container>
               <ng-container mCardBody>
-          <div class="card-text">
+                <form
-            <p>
+                  [formGroup]="projectInfo"
-              This is the most basic and default form having form sections. To
+                  (ngSubmit)="onProjectInfoSubmit()"
-              add form section use
+                >
-              <code>.form-section</code>
-              class with any heading tags. This form has the buttons on the
-              bottom left corner which is the default position.
-            </p>
-          </div>
-          <form [formGroup]="projectInfo" (ngSubmit)="onProjectInfoSubmit()">
                   <div class="form-body">
                     <h4 class="form-section">
-                <i class="feather ft-user"></i> Personal Info
+                      <i class="feather ft-user"></i> General Information
                     </h4>
                     <div class="row">
                       <div class="col-md-6">
@@ -80,7 +82,9 @@
                             class="form-control"
                             formControlName="email"
                             placeholder="E-mail"
-                      [ngClass]="{ 'is-invalid': submitted && f.email.errors }"
+                            [ngClass]="{
+                              'is-invalid': submitted && f.email.errors
+                            }"
                           />
                           <small
                             class="form-text text-muted danger"
@@ -105,7 +109,9 @@
                             class="form-control"
                             formControlName="phone"
                             placeholder="Phone"
-                      [ngClass]="{ 'is-invalid': submitted && f.phone.errors }"
+                            [ngClass]="{
+                              'is-invalid': submitted && f.phone.errors
+                            }"
                             (keypress)="keyPress($event)"
                           />
                           <small
@@ -121,7 +127,7 @@
                       </div>
                     </div>
                     <h4 class="form-section">
-                <i class="la la-paperclip"></i> Requirements
+                      <i class="la la-paperclip"></i> Energy Information
                     </h4>
                     <div class="form-group">
                       <label for="companyName">Company *</label>
@@ -131,7 +137,9 @@
                         class="form-control"
                         formControlName="company"
                         placeholder="Company Name"
-                  [ngClass]="{ 'is-invalid': submitted && f.company.errors }"
+                        [ngClass]="{
+                          'is-invalid': submitted && f.company.errors
+                        }"
                       />
                       <small
                         class="form-text text-muted danger"
@@ -180,9 +188,14 @@
                             id="projectinput6"
                             class="form-control"
                             formControlName="budget"
-                      [ngClass]="{ 'is-invalid': submitted && f.budget.errors }"
+                            [ngClass]="{
+                              'is-invalid': submitted && f.budget.errors
+                            }"
+                          >
+                            <option
+                              *ngFor="let range of budget"
+                              [value]="range"
                             >
-                      <option *ngFor="let range of budget" [value]="range">
                               {{ range }}
                             </option>
                           </select>
@@ -198,55 +211,9 @@
                         </div>
                       </div>
                     </div>
-              <div class="form-group">
-                <label>Select File</label>
-                <label id="projectinput7" class="file center-block">
-                  <input
-                    type="file"
-                    id="file"
-                    formControlName="selectFile"
-                    [ngClass]="{
-                      'is-invalid': submitted && f.selectFile.errors
-                    }"
-                    style="margin-left: 3px"
-                  />
-                  <span class="file-custom"></span>
-                </label>
-                <small
-                  class="form-text text-muted danger"
-                  *ngIf="submitted && f.selectFile.errors"
-                  class="invalid-feedback"
-                >
-                  <div *ngIf="f.selectFile.errors.required">
-                    File is required
-                  </div>
-                </small>
-              </div>
-              <div class="form-group">
-                <label for="projectinput8">About Project *</label>
-                <textarea
-                  id="projectinput8"
-                  rows="5"
-                  class="form-control"
-                  formControlName="aboutProject"
-                  [ngClass]="{
-                    'is-invalid': submitted && f.aboutProject.errors
-                  }"
-                  placeholder="About Project"
-                ></textarea>
-                <small
-                  class="form-text text-muted danger"
-                  *ngIf="submitted && f.aboutProject.errors"
-                  class="invalid-feedback"
-                >
-                  <div *ngIf="f.aboutProject.errors.required">
-                    Project Description is required
-                  </div>
-                </small>
-              </div>
                   </div>
                   <div class="form-actions">
-              <button type="button" class="btn btn-warning mr-1">
+                    <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">
@@ -259,3 +226,7 @@
           </div>
         </div>
       </section>
+    </div>
+  </div>
+</div>
+<!-- END: Content-->

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',
@@ -7,8 +10,105 @@ import { Component } from '@angular/core';
 })
 export class AddEditDeviceComponent {
 
+  @ViewChild('f', { read: true }) userProfileForm: NgForm;
 
-  constructor() { }
+  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
+  }
   
 }

src/app/content/hemat-app/device/device.component.html

@@ -13,13 +13,10 @@
               (reloadFunction)="reloadAddRows($event)"
             >
               <ng-container mCardBody>
-                <!-- <p class="card-text">New rows can be added to a DataTable very easily using the
-                    (addFieldValue()) function.
-                  </p> -->
                 <button
                   id="addRow"
                   class="btn btn-secondary my-1 mb-2"
-                  (click)="addFieldValue()"
+                  [routerLink]="['/device/add-row']"
                 >
                   <i class="feather ft-plus"></i>&nbsp; Add new row
                 </button>

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

src/app/content/partials/general/card/card.component.html

@@ -7,7 +7,7 @@
     <a class="heading-elements-toggle" (click)="toggleMobileMenu()"><i class="la la-ellipsis-v font-medium-3"></i></a>
     <div class="heading-elements" #mCardHeaderTools>
       <ng-content select="[mCardHeaderTools]"></ng-content>
-      <ul class="list-inline mb-0">
+      <!-- <ul class="list-inline mb-0">
         <li *ngIf="options && options.minimize"><a data-action="collapse"><i class="feather ft-minus"
               (click)="toggleCollpase($event)"></i></a></li>
         <li *ngIf="options && options.reload"><a data-action="reload"><i class="feather ft-rotate-cw"
@@ -16,7 +16,7 @@
               (click)="toggleExpand($event)"></i></a></li>
         <li *ngIf="options && options.close"><a data-action="close"><i class="feather ft-x" (click)="close($event)"></i></a>
         </li>
-      </ul>
+      </ul> -->
     </div>
   </div>
   <div class="card-content collpase show" #mCardContent>