penambahan modal add device

src/app/_layout/private-layout/private-layout.component.html

@@ -8,7 +8,7 @@
 <app-horizontal-customizer *ngIf="layout === 'horizontal'"></app-horizontal-customizer>
 </div>
 <div *ngIf ="buybutton === 'on'">
-<div class="buy-now" >
+<!-- <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>

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

@@ -0,0 +1,153 @@
+.form-control.is-invalid {
+    border-color: #CACFE7;
+    background-image: none !important;
+}
+
+.div.basicInfoCard {
+    height: 700px;
+}
+
+:host ::ng-deep .block-ui-wrapper {
+    background: rgba(255, 249, 249, 0.5) !important;
+}
+:host ::ng-deep .block-ui-wrapper {
+    background: rgba(255, 249, 249, 0.5) !important;
+  }
+  :host ::ng-deep .btn-light:not(:disabled):not(.disabled):active {
+    color: unset !important;
+    background-color: unset !important;
+    border-color: #d3d9df !important;
+  }
+  
+  :host ::ng-deep .btn-light:hover:not(.disabled):active {
+    background-color: #e2e6ea !important;
+    border-color: #dae0e5 !important;
+  }
+  
+  :host ::ng-deep .btn-light {
+    color: unset !important;
+    background-color: unset !important;
+    border-color: unset !important;
+  }
+  
+  :host ::ng-deep .bg-primary {
+    background-color: #007bff !important;
+  }
+  
+  :host ::ng-deep .text-white {
+    color: #fff !important;
+  }
+  
+  :host ::ng-deep .custom-day {
+    text-align: center;
+    padding: .185rem .25rem;
+    display: inline-block;
+    height: 2rem;
+    width: 2rem;
+  }
+  
+  :host ::ng-deep .custom-day:active {
+    color: #6d7183 !important;
+   background-color: #fff !important;
+   border-block-color: rgb(2, 117, 216) !important;
+   
+  }
+  
+  .bg-light {
+    background-color: #f8f9fa !important;
+  }
+  
+  :host ::ng-deep .hidden {
+    display: block !important;
+  }
+  
+  .ngb-dp-weekday {
+    color: #17a2b8;
+  }
+  
+  .ngb-dp-week-number,
+  .ngb-dp-weekday {
+    line-height: 2rem;
+    text-align: center;
+    font-style: italic;
+  }
+  
+  .ngb-datepicker-month-view {
+    pointer-events: auto;
+  }
+  
+  .small {
+    font-size: 80%;
+    font-weight: 400;
+  }
+  
+  .ngb-dp-day {
+    cursor: pointer !important;
+  }
+  
+  .ngb-dp-month {
+    pointer-events: none;
+  }
+  
+  .btn-light:hover {
+    color: #212529 !important;
+    background-color: #e2e6ea !important;
+    border-color: #dae0e5 !important;
+  }
+  
+  .ngb-datepicker-month-view {
+    pointer-events: auto;
+  }
+
+  :host ::ng-deep .ngb-dp-header {
+    background-color: var(--light) !important;
+}
+
+:host ::ng-deep .ngb-dp-weekdays {
+    background-color: var(--light);
+}
+
+:host ::ng-deep .ngb-dp-month-name {
+    background-color: var(--light);
+}
+  
+  .ngb-dp-header {
+    border-bottom: 0;
+    border-radius: .25rem .25rem 0 0;
+    padding-top: .25rem;
+  }
+  
+  .ngb-dp-day,
+  .ngb-dp-week-number,
+  .ngb-dp-weekday {
+    width: 2rem;
+    height: 2rem;
+  }
+  
+  .custom-day {
+    text-align: center;
+    padding: 0.185rem 0.25rem;
+    display: inline-block;
+    height: 2rem;
+    width: 2rem;
+  }
+  
+  .custom-day.focused {
+    background-color: #e6e6e6;
+  }
+  
+  .custom-day.range,
+  .custom-day:hover {
+    background-color: rgb(2, 117, 216);
+    color: white;
+  }
+  
+  .custom-day.faded {
+    background-color: rgba(2, 117, 216, 0.5);
+  }
+  
+  :host ::ng-deep .block-ui-wrapper {
+    background: rgba(255, 249, 249, 0.5) !important;
+  }
+  
+  

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

@@ -0,0 +1,261 @@
+<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)">
+        <ng-container mCardHeaderTitle>
+          Project Info (Reactive Forms Validation)
+        </ng-container>
+        <ng-container mCardBody>
+          <div class="card-text">
+            <p>
+              This is the most basic and default form having form sections. To
+              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
+              </h4>
+              <div class="row">
+                <div class="col-md-6">
+                  <div class="form-group">
+                    <label for="projectinput1">First 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="projectinput2">Last Name *</label>
+                    <input
+                      type="text"
+                      id="projectinput2"
+                      class="form-control"
+                      formControlName="lastName"
+                      placeholder="Last Name"
+                      [ngClass]="{
+                        'is-invalid': submitted && f.lastName.errors
+                      }"
+                    />
+                    <small
+                      class="form-text text-muted danger"
+                      *ngIf="submitted && f.lastName.errors"
+                      class="invalid-feedback"
+                    >
+                      <div *ngIf="f.lastName.errors.required">
+                        Last Name is required
+                      </div>
+                    </small>
+                  </div>
+                </div>
+              </div>
+              <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 }"
+                    />
+                    <small
+                      class="form-text text-muted danger"
+                      *ngIf="submitted && f.email.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>
+                    </small>
+                  </div>
+                </div>
+                <div class="col-md-6">
+                  <div class="form-group">
+                    <label for="projectinput4">Contact Number *</label>
+                    <input
+                      type="text"
+                      id="projectinput4"
+                      class="form-control"
+                      formControlName="phone"
+                      placeholder="Phone"
+                      [ngClass]="{ 'is-invalid': submitted && f.phone.errors }"
+                      (keypress)="keyPress($event)"
+                    />
+                    <small
+                      class="form-text text-muted danger"
+                      *ngIf="submitted && f.phone.errors"
+                      class="invalid-feedback"
+                    >
+                      <div *ngIf="f.phone.errors.required">
+                        phone is required
+                      </div>
+                    </small>
+                  </div>
+                </div>
+              </div>
+              <h4 class="form-section">
+                <i class="la la-paperclip"></i> Requirements
+              </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>
+                    <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="projectinput6">Budget *</label>
+                    <select
+                      id="projectinput6"
+                      class="form-control"
+                      formControlName="budget"
+                      [ngClass]="{ 'is-invalid': submitted && f.budget.errors }"
+                    >
+                      <option *ngFor="let range of budget" [value]="range">
+                        {{ range }}
+                      </option>
+                    </select>
+                    <small
+                      class="form-text text-muted danger"
+                      *ngIf="submitted && f.budget.errors"
+                      class="invalid-feedback"
+                    >
+                      <div *ngIf="f.budget.errors.required">
+                        Budget is required
+                      </div>
+                    </small>
+                  </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">
+                <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>

src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddEditDeviceComponent } from './add-edit-device.component';
+
+describe('AddEditDeviceComponent', () => {
+  let component: AddEditDeviceComponent;
+  let fixture: ComponentFixture<AddEditDeviceComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AddEditDeviceComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AddEditDeviceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-add-edit-device',
+  templateUrl: './add-edit-device.component.html',
+  styleUrls: ['./add-edit-device.component.css']
+})
+export class AddEditDeviceComponent {
+  
+
+  constructor() { }
+
+  
+}

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

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild } from "@angular/core";
-import { log } from "console";
+import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
 import { NgBlockUI, BlockUI } from "ng-block-ui";
 import {
   PerfectScrollbarDirective,
@@ -7,6 +7,7 @@ import {
   PerfectScrollbarConfigInterface,
 } from "ngx-perfect-scrollbar";
 import { TableApiService } from "src/app/_services/table-api.service";
+import { ModalAddEditComponent } from "./modal-add-edit/modal-add-edit.component";
 
 @Component({
   selector: "app-device",
@@ -40,7 +41,10 @@ export class DeviceComponent implements OnInit {
   row: any;
   public breadcrumb: any;
 
-  constructor(private tableApiservice: TableApiService) {}
+  constructor(
+    private tableApiservice: TableApiService,
+    private modalService: NgbModal
+  ) {}
 
   ngOnInit() {
     this.breadcrumb = {
@@ -70,7 +74,6 @@ export class DeviceComponent implements OnInit {
     this.row = this.data.row;
   }
 
-  // eslint-disable-next-line @typescript-eslint/member-ordering
   private newAttribute = {
     id: 15,
     name: "Mark",
@@ -81,8 +84,23 @@ export class DeviceComponent implements OnInit {
     startdate: "16/05/2017",
   };
 
+  // addFieldValue() {
+  //   this.rows.push(this.newAttribute);
+  //   this.rows = [...this.rows];
+  // }
+
   addFieldValue() {
-    this.rows.push(this.newAttribute);
+    const modalRef = this.modalService.open(ModalAddEditComponent, { size: 'lg' });
+    modalRef.componentInstance.newAttribute = { id: null, name: '', position: '', office: '', age: '', salary: '', startdate: '' };
+  
+    modalRef.result.then((result) => {
+      if (result) {
+        this.rows.push(result);
         this.rows = [...this.rows];
       }
+    }, (reason) => {
+      console.log(`Dismissed: ${reason}`);
+    });
+  }
+  
 }

src/app/content/hemat-app/device/device.module.ts

@@ -5,19 +5,23 @@ import { RouterModule } from '@angular/router';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 
 import { NgSelectModule } from '@ng-select/ng-select';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ClipboardModule } from 'ngx-clipboard';
 import { CardModule } from '../../partials/general/card/card.module';
 import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
 import { BlockUIModule } from 'ng-block-ui';
 import { BlockTemplateComponent } from '../../../_layout/blockui/block-template.component';
 import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
+import { AddEditDeviceComponent } from './add-edit-device/add-edit-device.component';
+import { ModalAddEditComponent } from './modal-add-edit/modal-add-edit.component';
 
 
 
 @NgModule({
   declarations: [
-    DeviceComponent
+    DeviceComponent,
+    AddEditDeviceComponent,
+    ModalAddEditComponent
   ],
   imports: [
     CommonModule,
@@ -25,6 +29,7 @@ import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
     BreadcrumbModule,
     NgSelectModule,
     FormsModule,
+    ReactiveFormsModule,
     ClipboardModule,
     PerfectScrollbarModule,
     NgxDatatableModule,

src/app/content/hemat-app/device/modal-add-edit/modal-add-edit.component.css

@@ -0,0 +1,55 @@
+/* modal-add-edit.component.css */
+::ng-deep .modal-backdrop.show {
+  z-index: auto !important;
+}
+
+::ng-deep .input-group-append .btn {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-radius: 0;
+    border-left: 0;
+    flex-grow: 0;
+    border-left: 1px solid #ced4da;
+    padding: 0.375rem 0.75rem;
+}
+
+::ng-deep .input-group {
+  display: flex;
+  flex-wrap: nowrap; /* Prevents wrapping of the items */
+  align-items: center;
+}
+
+::ng-deep .form-control {
+  flex-grow: 1; /* Ensures select takes up available space */
+  padding-right: 0.5rem;
+}
+
+::ng-deep .input-group select, 
+::ng-deep .input-group .input-group-append .btn {
+  padding-right: 5px; /* Adjust padding if necessary */
+}
+
+::ng-deep .input-group .form-control {
+  margin-right: 2px; /* Adjust margin to make space */
+}
+
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-control {
+  display: block;
+  width: 100%;
+  height: calc(1.5em + 0.75rem + 2px);
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #495057;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}

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

@@ -0,0 +1,43 @@
+<div class="modal-header">
+  <h4 class="modal-title">Add New Row</h4>
+  <button type="button" class="close" aria-label="Close">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+<div class="modal-body">
+  <form [formGroup]="myForm">
+    <div class="form-row">
+      <div class="form-group col-md-6">
+        <label for="name">Name:</label>
+        <input type="text" class="form-control" id="name" formControlName="name">
+      </div>
+      <div class="form-group col-md-6">
+        <label for="position">Position:</label>
+        <input type="text" class="form-control" id="position" formControlName="position">
+      </div>
+    </div>
+    <div class="form-row">
+      <div class="form-group col-md-6">
+        <label for="age">Age:</label>
+        <input type="number" class="form-control" id="age" formControlName="age">
+      </div>
+      <div class="form-group col-md-6">
+        <label for="department">Department:</label>
+        <div class="input-group">
+          <select class="form-control" formControlName="department">
+            <option>IT</option>
+            <option>HR</option>
+            <option>Finance</option>
+          </select>
+          <div class="input-group-append">
+            <button class="btn btn-outline-secondary" type="button" (click)="addDepartment()">+</button>
+          </div>
+        </div>
+      </div>            
+    </div>
+  </form>
+</div>
+<div class="modal-footer">
+  <button type="button" class="btn btn-secondary" (click)="activeModal.dismiss('Cross click')">Close</button>
+  <button type="button" class="btn btn-primary" (click)="addRow()">Save Changes</button>
+</div>

src/app/content/hemat-app/device/modal-add-edit/modal-add-edit.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModalAddEditComponent } from './modal-add-edit.component';
+
+describe('ModalAddEditComponent', () => {
+  let component: ModalAddEditComponent;
+  let fixture: ComponentFixture<ModalAddEditComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ModalAddEditComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ModalAddEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/content/hemat-app/device/modal-add-edit/modal-add-edit.component.ts

@@ -0,0 +1,41 @@
+import { Component, Input } from "@angular/core";
+import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+
+@Component({
+  selector: "app-modal-add-edit",
+  templateUrl: "./modal-add-edit.component.html",
+  styleUrls: ["./modal-add-edit.component.css"],
+})
+export class ModalAddEditComponent {
+  @Input() newAttribute: any = {};
+  myForm: FormGroup;
+
+  constructor(public activeModal: NgbActiveModal, private fb: FormBuilder) {
+    this.createForm();
+  }
+
+  createForm() {
+    this.myForm = this.fb.group({
+      name: ['', Validators.required],
+      position: ['', Validators.required],
+      age: [null, [Validators.required, Validators.min(18)]],
+      department: ['', Validators.required]
+    });
+  }
+
+  addRow() {
+    if (this.myForm.valid) {
+      this.activeModal.close(this.myForm.value);
+    }
+  }
+
+  addDepartment() {
+    // Example function to simulate adding a department
+    let newDept = prompt("Enter new department name:");
+    if (newDept) {
+      // Normally you would add to a database or a service
+      alert(`Department ${newDept} added! (simulated)`);
+    }
+  }
+}