penambahan modal add device
This commit is contained in:
parent
dbc89d326f
commit
8f0c2fb913
@ -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>
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
@ -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() { }
|
||||
|
||||
|
||||
}
|
||||
@ -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}`);
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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">×</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>
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
@ -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)`);
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user