diff --git a/src/app/_layout/private-layout/private-layout.component.html b/src/app/_layout/private-layout/private-layout.component.html index 0ef945f..161303f 100644 --- a/src/app/_layout/private-layout/private-layout.component.html +++ b/src/app/_layout/private-layout/private-layout.component.html @@ -8,7 +8,7 @@
-
+
\ No newline at end of file diff --git a/src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.css b/src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.css new file mode 100644 index 0000000..149a8c2 --- /dev/null +++ b/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; + } + + \ 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 new file mode 100644 index 0000000..eb75b5c --- /dev/null +++ b/src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.html @@ -0,0 +1,261 @@ +
+
+
+ + + 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 +

+
+ + + +
+ Company is required +
+ +
+
+
+
+ + + +
+ Interest 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.spec.ts b/src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.spec.ts new file mode 100644 index 0000000..6b3446f --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AddEditDeviceComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(AddEditDeviceComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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 new file mode 100644 index 0000000..a57bcbd --- /dev/null +++ b/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() { } + + +} diff --git a/src/app/content/hemat-app/device/device.component.ts b/src/app/content/hemat-app/device/device.component.ts index 02deaf9..1927341 100644 --- a/src/app/content/hemat-app/device/device.component.ts +++ b/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); - this.rows = [...this.rows]; + 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}`); + }); } + } diff --git a/src/app/content/hemat-app/device/device.module.ts b/src/app/content/hemat-app/device/device.module.ts index d8fd2e4..4ac3df8 100644 --- a/src/app/content/hemat-app/device/device.module.ts +++ b/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, diff --git a/src/app/content/hemat-app/device/modal-add-edit/modal-add-edit.component.css b/src/app/content/hemat-app/device/modal-add-edit/modal-add-edit.component.css new file mode 100644 index 0000000..7e5fe42 --- /dev/null +++ b/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; +} diff --git a/src/app/content/hemat-app/device/modal-add-edit/modal-add-edit.component.html b/src/app/content/hemat-app/device/modal-add-edit/modal-add-edit.component.html new file mode 100644 index 0000000..11e79d0 --- /dev/null +++ b/src/app/content/hemat-app/device/modal-add-edit/modal-add-edit.component.html @@ -0,0 +1,43 @@ +
+

Add New Row

+ +
+
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ +
+ +
+ +
+
+
+
+
+
+
+ + +
diff --git a/src/app/content/hemat-app/device/modal-add-edit/modal-add-edit.component.spec.ts b/src/app/content/hemat-app/device/modal-add-edit/modal-add-edit.component.spec.ts new file mode 100644 index 0000000..eab7c39 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ModalAddEditComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ModalAddEditComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/content/hemat-app/device/modal-add-edit/modal-add-edit.component.ts b/src/app/content/hemat-app/device/modal-add-edit/modal-add-edit.component.ts new file mode 100644 index 0000000..1452d37 --- /dev/null +++ b/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)`); + } + } +}