penambahan modal add device

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)`);
+    }
+  }
+}