getarrays/employeemanagerapp

Employeemanagerapp

This project was generated with Angular CLI version 9.1.5.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

employeemanagerapp's Issues

Issue : I created <a class="nav-link" (click)="onOpenModal(null, 'add')">Add Category <span class="sr-only">(current)</span></a>, at html page, I got these Issues. Please Let Me know these Issue. Sincerely

Http failure response for http://localhost:8080/employee/update: 500 OK

Hello Jr.

Thank you very much for your video.
It was very helpful and a great spot for me to begin with and continue to build upon.

I am running into an issue when trying to edit an employee as it returns an error 500:
I am use the Angular 14.2.9 and Spring Boot 2.7.5.
This is the error I am receiving:

IntelliJ terminal is not showing any issues and VSC's terminal is also not showing any errors. Thank you very much for your teaching and help.

-John

Container is possibly null and object is possibly null

` import { Component, OnInit } from '@angular/core';
import { Employee } from './employee';
import { EmployeeService } from './employee.service';
import { HttpErrorResponse } from '@angular/common/http';
import { NgForm } from '@angular/forms';

@component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
public employees: Employee[] = [];
public editEmployee: Employee | undefined;
public deleteEmployee: Employee | undefined;

constructor(private employeeService: EmployeeService){}

ngOnInit() {
this.getEmployees();
}

public getEmployees(): void {
this.employeeService.getEmployees().subscribe(
(response: Employee[]) => {
this.employees = response;
console.log(this.employees);
},
(error: HttpErrorResponse) => {
alert(error.message);
}
);
}

public onAddEmployee(addForm: NgForm): void {
document.getElementById('add-employee-form').click();
this.employeeService.addEmployee(addForm.value).subscribe(
(response: Employee) => {
console.log(response);
this.getEmployees();
addForm.reset();
},
(error: HttpErrorResponse) => {
alert(error.message);
addForm.reset();
}
);
}

public onUpdateEmployee(employee: Employee): void {
this.employeeService.updateEmployee(employee).subscribe({
next: (response: Employee) => {
console.log(response);
this.getEmployees();
},
error: (error: HttpErrorResponse) => {
alert(error.message);
}
});
}

public onDeleteEmployee(employeeId: number): void {
this.employeeService.deleteEmployee(employeeId).subscribe({
next: (response: void) => {
console.log(response);
this.getEmployees();
},
error: (error: HttpErrorResponse) => {
alert(error.message);
}
});
}

public searchEmployees(key: string): void {
console.log(key);
const results: Employee[] = [];
for (const employee of this.employees) {
if (employee.name.toLowerCase().indexOf(key.toLowerCase()) !== -1
|| employee.email.toLowerCase().indexOf(key.toLowerCase()) !== -1
|| employee.phone.toLowerCase().indexOf(key.toLowerCase()) !== -1
|| employee.jobTitle.toLowerCase().indexOf(key.toLowerCase()) !== -1) {
results.push(employee);
}
}
this.employees = results;
if (results.length === 0 || !key) {
this.getEmployees();
}
}

public onOpenModal(mode: string, employee?: Employee ): void {
const container = document.getElementById('main-container');
const button = document.createElement('button');
button.type = 'button';
button.style.display = 'none';
button.setAttribute('data-toggle', 'modal');
if (mode === 'add') {
button.setAttribute('data-target', '#addEmployeeModal');
}
if (mode === 'edit') {
this.editEmployee = employee;
button.setAttribute('data-target', '#updateEmployeeModal');
}
if (mode === 'delete') {
this.deleteEmployee = employee;
button.setAttribute('data-target', '#deleteEmployeeModal');
}
container.appendChild(button);
button.click();
}
}`

Http failure response for http://localhost:8080/employee/delete/6: 500 OK

Hi, Jr.
First of all I want to thank you, because your course is very very good.
I already said it, but I gonna repeat: I am learn a lot with you. <3

Now, my issue:
I am use the Angular 13 and Spring Boot 2.7.0, and I CAN'T DELETE one employee.
Do you can help me?

My backend project: https://github.com/cami-la/Spring_Boot_Full_Stack_with_Angular_Full_Course_amigoscode_getarrays
My frontend project: https://github.com/cami-la/Spring_Boot_Full_Stack_with_Angular_Full_Course_amigoscode_getarrays2

Argument of type 'null' is not assignable to parameter of the type Employee

None of the functionalities work for me + I can't find webpack in sources.

Whatever the functionality that I am trying to work with ( add / update / delete ), it does not work for me -it just refresh the page-, and when I tried to test the modal logic I couldn't find the webpack in inspect/sources.

Argument of type 'number | undefined' is not assignable to parameter of type 'number'. Type 'undefined' is not assignable to type 'number'.

<div class="modal-body"> <p> Are you sure you want to delete employee {{ deleteEmployee?.name }}? </p> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal" > No </button> <button (click)="onDeleteEmployee(deleteEmployee?.id)" class="btn btn-danger" data-dismiss="modal" > Yes </button> </div> </div>

//getting error in line

(click)="onDeleteEmployee(deleteEmployee?.id)"