szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:angular:angular példák|< Angular példák]]

====== Angular HttpClient - Dolgozók ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2022, 2023
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Bevezetés =====

Ebben a leírásban dolgozók adatait fogjuk kezelni, a teljes **CRUD** műveleteket
megvalósítva, **azonosítással**. A megvalósításhoz szükséges egy REST API kiszolgáló. 


===== Backend oldal =====

Szükségünk van egy REST API szerverre, a következő végpontokkal.
Ennek elkészítését lásd [[oktatas:web:back-end_framework:laravel:laravel_rest_api|Laravel API leírásban]]

^  Végpont  ^  Metódus  ^  Auth  ^  CRUD  ^  Leírás  ^
| /employees  | GET | nem  | read | összes dolgozó |
| /employees  | POST | igen  | create | új dolgozó |
| /employees/{id}  | GET | nem  | read | egy dolgozó |
| /employees/{id}  | PUT | igen  | update  | dolgozó frissítése |
| /employees/{id}  | DELETE  | igen  | delete  | dolgozó törlése  |
| /register  | POST | nem | n/a | regisztráció  |
| /login  | POST | nem | n/a | belépés  |
| /logout  | POST  | nem | n/a  | kilépés  |

==== GitHub-on ====

A backend elérhető a GitHubon a következő címen:

  * https://github.com/oktat/emp.git

Beüzemelés a projekt docs könyvtárában.

===== REST API kliens =====
==== Projekt készítése ====

Készítsünk egy angular projektet:
  ng new app01

Kérjünk router szolgáltatást.

Lépjünk be, majd indítsunk kódszerkesztőt.

  cd app01
  code .


===== Azonosítás =====


==== Szükséges modul ====

<code javascript src/app/app.module.ts>
import { HttpClientModule } from '@angular/common/http';
//...

imports: [
    HttpClientModule
],
</code>



==== Szolgáltatás létrehozása  ====

Készítsünk egy szolgáltatást, auth néven:
  ng generate service shared/auth


Létrejön két fájl:
  * src/app/shared/auth.service.ts
  * src/app/shared/auth.service.spec.ts

Importáljuk a HttpClient és HttpHeaders osztályokat:


<code javascript>
import { HttpClient, HttpHeaders } from '@angular/common/http';
</code>

<code javascript>
host = 'http://localhost:8000/api/';
</code>

A konstruktorba paraméterként vegyük fel a http objektumot:
<code javascript>
  constructor(private http: HttpClient) { }
</code>

A login() metódus:
<code javascript>
  login(user: string, pass: string) {
    const authData = {
      name: user,
      password: pass
    }
    let httpHeaders = new HttpHeaders();
    httpHeaders.set('Content-Type', 'application/json');
    const httpOptions = {
      headers: httpHeaders
    }
    let endpoint = 'login';
    let url = this.host + endpoint;
    return this.http.post<any>(url, authData, httpOptions);
  }
</code>


==== Reaktív űrlap ====

<code javascript src/app/app.module.ts>
import { ReactiveFormsModule } from '@angular/forms';

//...

  imports: [
    ReactiveFormsModule
  ],

//...
</code>

==== A login komponens ====

Készítsük el az employee komponenst:
  ng generate component login


Elsőként importáljuk az AuthService osztályt:

<code javascript src/app/login/login.component.ts>
//...
import { FormBuilder, FormGroup } from '@angular/forms';
import { AuthService } from '../shared/auth.service';
//...
</code>

Injektáljuk és használjuk: 
<code javascript>
//...
export class LoginComponent implements OnInit {

  loginForm !: FormGroup;

  constructor(
    private auth: AuthService,
    private formBuilder: FormBuilder
      ) { }

  ngOnInit(): void {
    this.loginForm = this.formBuilder.group({
      user: [''],
      pass: ['']
    });
  }
  login() {
    let user = this.loginForm.value.user;
    let pass = this.loginForm.value.pass;
    this.auth.login(user, pass).subscribe({
      next: data => {
        localStorage.setItem('userData', JSON.stringify(data));
      },
      error: err => {
        console.log('Hiba! A belépés sikertelen!')
      }
    });
  }
}

</code>

A válasz részletezése:
<code javascript>
      console.log(res.name);
      console.log(res.token);
</code>


<code html src/app/login/login.component.html>
<h3>Belépés</h3>

<form [formGroup]="loginForm" (submit)="login()">
    <div class="mb-3">
      <label for="user" class="form-label">Felhasználónév</label>
      <input type="text" class="form-control" id="user"
      formControlName="user">
      
    </div>
    <div class="mb-3">
      <label for="pass" class="form-label">Jelszó</label>
      <input type="pass" class="form-control" id="exampleInputPassword1"
      formControlName="pass">
    </div>
    <button type="submit" class="btn btn-primary">Belépés</button>
  </form>
</code>


==== Az app.component ====

<code html src/app/app.component.html>
<ul>
  <li>
    <a routerLink="/employees">Dolgozók</a>
  </li>
  <li>
    <a routerLink="/login">Login</a>
  </li>
</ul>

<router-outlet></router-outlet>
</code>

==== Routing ====

<code javascript>
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';

const routes: Routes = [
  { path: 'login', component: LoginComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
</code>


===== Kilépés =====

==== Az auth bővítése ====

<code javascript src/app/shared/auth.service.ts>
//...

  logout(name: string, token: string) {
    const userData = {
      name: name,
      tokenId: token
    }
    let httpHeaders = new HttpHeaders();
    httpHeaders.set('Content-Type', 'application/json');
    const httpOptions = {
      headers: httpHeaders
    }
    let endpoint = 'logout';
    let url = this.host + endpoint;
    console.log(userData.name)
    return this.http.post<any>(url, userData, httpOptions);
  }
</code>



<code html src/app/app.component.html>
<ul>
  <li>
    <a routerLink="/employees">Dolgozók</a>
  </li>
  <li>
    <a routerLink="/login">Login</a>
  </li>
</ul>

<button (click)="logout()">Kilépés</button>

<router-outlet></router-outlet>
</code>



<code javascript src/app/app.component.ts>
import { Component } from '@angular/core';
import { AuthService } from './shared/auth.service';

//...

export class AppComponent {
  title = 'app01';
  
  constructor(private auth: AuthService) {}

  logout() {
    let jsonUserData: any = localStorage.getItem('userData');
    let userData = JSON.parse(jsonUserData);
    console.log(userData.name);
    console.log(userData.token);
    this.auth.logout(userData.name, userData.token).subscribe({
      next: res => {
        console.log(res)
      }
    });
  }
}
</code>


===== Összes dolgozó =====


^  Végpont  ^  Metódus  ^  Azonosítás  ^ CRUD  ^
|  /employees  | GET | nem  | Read  |
==== Modul regisztrálása ====

Szükségünk van a HttpClientModule nevű modulra. 
Ha megcsináltuk az azonosítást, akkor ez kihagyható:

<code javascript src/app/app.module.ts>
import { HttpClientModule } from '@angular/common/http';
//...

imports: [
    HttpClientModule
],
</code>

==== Szolgáltatás létrehozása ====

Készítsünk egy szolgáltatást, api néven:
  ng generate service shared/api


Létrejön két fájl:
  * src/app/shared/api.service.ts
  * src/app/shared/api.service.spec.ts

Az api.service.ts fájlba írjuk a szolgáltatást. Az api.service.spec.ts a teszt az előbbi állomány számára.


Vegyük az api.service.ts fájl, majd importáljuk a HttpClient:


<code javascript src/app/shared/api.service.ts>
import { HttpClient } from '@angular/common/http';
</code>


A konstruktorba paraméterként vegyük fel a http objektumot:
<code javascript src/app/shared/api.service.ts>
  constructor(private http: HttpClient) { }
</code>


Hozzuk létre a host adattagot és a getEmployees() metódust:
<code javascript src/app/shared/api.service.ts>
//...

  host = 'http://localhost:8000/api/';

//...

  getEmployees() {    
    let endpoint = 'employees';
    let url = this.host + endpoint;
    return this.http.get<any>(url);
  }
</code>

==== Employee komponense ====

  ng generate component employee



Szerkesszük az **src/app/employee/employee.component.ts** fájlt. 
  * Importáljuk az **ApiService** osztályt.
  * Hozzunk létre egy **employees** adattagot.
  * Injektáljuk az **ApiService** osztályt.
  * Írjunk egy **getEmployees()** metódust.
  * Hívjuk meg a getEmployees() metódust a **ngOnInit()** metódusban.

<code javascript src/app/employee/employee.component.ts>
import { Component, OnInit } from '@angular/core';
import { ApiService } from '../shared/api.service';

@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.css']
})
export class EmployeeComponent implements OnInit {
  employees: any;
  constructor(private api: ApiService) { }

  ngOnInit(): void {
    this.getEmployees();
  }
  getEmployees() {
    this.api.getEmployees().subscribe({
      next: data => {
        this.employees = data;
      },
      error: err => {
        console.log('Hiba! A dolgozók letöltése sikertelen!');
      }
    });
  }
}
</code>

==== Sablonfájl ====


<code html src/app/employee/employee.component.html>
<p>Dolgozók</p>

<table>
    <thead>
        <tr>
            <th>Id</th>
            <th>Név</th>
            <th>Település</th>
            <th>Fizetés</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let employee of employees">
            <td>{{ employee.id }}</td>
            <td>{{ employee.name }}</td>
            <td>{{ employee.city }}</td>
            <td>{{ employee.salary }}</td>
        </tr>
    </tbody>
</table>
</code>

==== Routing újra ====

<code javascript>
const routes: Routes = [
  { path: 'login', component: LoginComponent},
  { path: 'employees', component: EmployeeComponent}
];
</code>




===== Dolgozó hozzáadása =====

==== Backend ====

Backend oldalon van egy /api/employees végpontunk, ahol POST metódussal
új dolgozókat vehetünk fel. 

^  Végpont  ^  Metódus  ^  Azonosítás  ^ CRUD  ^
|  /employees  | POST | igen  | Create  |



==== Szükséges modul ====
Ha még nincs regisztrálva az src/app/app.module.ts fájlban a HttpClientModule,
akkor tegyük meg. 

<code javascript src/app/app.module.ts>
import { HttpClientModule } from '@angular/common/http';
//...

imports: [
    HttpClientModule
],
</code>



==== Szolgáltatás létrehozása  ====

Ha még nem létezik, hozzuk létre az api szolgáltatást:
  ng generate service shared/api


Importáljuk a HttpClient és HttpHeaders osztályokat:


<code javascript src/app/shared/api.service.ts>
import { HttpClient, HttpHeaders } from '@angular/common/http';

//...
</code>


A konstruktorba paraméterként vegyük fel a http objektumot, ha még nincs felvéve:
<code javascript src/app/shared/api.service.ts>
//...

  constructor(private http: HttpClient) { }

//...
</code>



Hozzuk létre a addEmployee() metódust:
<code javascript src/app/shared/api.service.ts>
//...

  addEmployee(employee: any) {
    let jsonUserData: any = localStorage.getItem('userData');
    let userData = JSON.parse(jsonUserData);
  
    let httpHeaders = new HttpHeaders()
    .set('Authorization', `Bearer ${userData.token}`);

    const httpOptions = {
      headers: httpHeaders
    }
    let endpoint = 'employees';
    let url = this.host + endpoint;

    return this.http.post<any>(url, employee, httpOptions);
  }
</code>


==== Employee komponens hozzáadással ====

Reaktív űrlapot fogunk használni, ezért importáljuk a FormBuilder és a FormGroup osztályt, az **src/app/employee/employee.component.ts** fájlban: 

<code javascript>
import { FormBuilder, FormGroup } from '@angular/forms';
</code>

Az EmployeeComponent osztályban vegyük fel a következő 
adattagokat, és injektáljuk FormBuilder osztályt:

<code javascript>

export class EmployeeComponent implements OnInit {

  employees: any;
  addForm !: FormGroup;
  addPanel: boolean = false;
  
  constructor(
    private api: ApiService,
    private formBuilder: FormBuilder
    ) { }

//...
</code>

Az ngOnInit() függvényben készítsük elő az űrlapot:

<code javascript>
  ngOnInit(): void {
    this.getEmployees();
    this.addForm = this.formBuilder.group({
      name: [''],
      city: [''],
      salary: ['']
    });
  }
</code>

Írjunk itt is egy addEmployee() metódust, ami az api szolgáltatás
addEmployee() metóudásával dolgozik. 

<code javascript>
  addEmployee() {
    let employee = {
      name: this.addForm.value.name,
      city: this.addForm.value.city,
      salary: this.addForm.value.salary,
    }
    
    this.api.addEmployee(employee).subscribe({
      next: res => {
        console.log(res)
        this.employees.push(res);
      }
    });
  }
</code>

A hozzáadó űrlap megjelenítéséhez, rejtéséhez 
készítsünk egy showAddPanel() metódust:

<code javascript>
  showAddPanel() {
    this.addPanel = true;
  }
</code>


==== Az employee komponens sablonja ====

Adjuk meg a fájl elején egy gombot, a végéhez pedig fűzzünk egy űrlapot:

<code html src/app/employee/employee.component.html>

<!-- ... -->

<button (click)="showAddPanel()">Hozzáad</button>



<!-- ... -->

<div *ngIf="addPanel">

<form [formGroup]="addForm" (submit)="addEmployee()">
    <div>
        <label for="name">Név</label>
        <input type="text" id="name" formControlName="name">
    </div>
    <div>
        <label for="city">Település</label>
        <input type="text" id="city" formControlName="city">
    </div>
    <div>
        <label for="salary">Fizetés</label>
        <input type="text" formControlName="salary">
    </div>

    <button type="submit">Mentés</button>
</form>

</div>
</code>

A "Hozzáad" gomb a táblázat előtt, az űrlap a táblázat után.


===== Dolgozók törlése =====

^  Végpont  ^  Metódus  ^  Azonosítás  ^ CRUD  ^
|  /employees/{id}  | DELETE | igen  | Delete  |
==== api.service ====

Az api szolgáltatás bővítése delEmployee() metódussal,
a **src/app/shared/api.service.ts** fájlban:

<code javascript src/app/shared/api.service.ts>
//...

  delEmployee(id: number) {
    let jsonUserData: any = localStorage.getItem('userData');
    let userData = JSON.parse(jsonUserData);  
    let httpHeaders = new HttpHeaders()
    .set('Authorization', `Bearer ${userData.token}`);
    const httpOptions = {
      headers: httpHeaders
    }

    let endpoint = 'employees';
    let url = this.host + endpoint + '/' + id;
    return this.http.delete<any>(url, httpOptions);    
  }
</code>

==== Az employees komponens ====

Az employee komponensben is megírjuk a delEmployee() metódust:

<code javascript src/app/employee/employee.component.ts>
//...


  delEmployee(employee: any) {
    this.api.delEmployee(employee.id).subscribe({
      next: res => {
        console.log(res);
        this.employees.forEach( (emp: any, index: number) => {
          if (emp.id === employee.id ) {
            this.employees.splice(index, 1)
          }
        })

      }
    });
  }
</code>

==== Employee komponens sablonja ====

Fel kell vennünk egy új táblázatelemet a **src/app/employee/employee.component.html** fájlban:

<code html>
            <td>
                <button (click)="delEmployee(employee)">Törlés</button>
            </td>
</code>

A teljes táblázat így néz ki:
<code html>
<table>
    <thead>
        <th>Id</th>
        <th>Név</th>
        <th>Település</th>
        <th>Fizetés</th>
    </thead>
    <tbody>
        <tr *ngFor="let employee of employees">
            <td>{{ employee.id }}</td>
            <td>{{ employee.name }}</td>
            <td>{{ employee.city }}</td>
            <td>{{ employee.salary }}</td>
            <td>
                <button (click)="delEmployee(employee)">Törlés</button>
            </td>
        </tr>
    </tbody>
</table>
</code>

===== Dolgozók szerkesztése =====


^  Végpont  ^  Metódus  ^  Azonosítás  ^ CRUD  ^
|  /employees/{id}  | PUT | igen  | Update  |
==== ApiService ====

Szükség van egy updateEmployee() metódusra:

<code javascript src/api/shared/api.service.ts>
//...

  updateEmployee(employee: any) {
    let jsonUserData: any = localStorage.getItem('userData');
    let userData = JSON.parse(jsonUserData);
  
    let httpHeaders = new HttpHeaders()
    .set('Authorization', `Bearer ${userData.token}`);

    const httpOptions = {
      headers: httpHeaders
    }
    let endpoint = 'employees';
    let url = this.host + endpoint + '/' + employee.id;

    return this.http.put<any>(url, employee, httpOptions);
  }
</code>


==== EmployeeComponent ====


Szükség van két új adattagra az EmployeeComponent osztályban:
<code javascript>
  editPanel: boolean = false;

  editForm !: FormGroup;
</code>


Az ngOnInit() metódusban inicializálni kell az editForm objektumot:

<code javascript>
    //...
    
    this.editForm = this.formBuilder.group({
      id: [''],
      name: [''],
      city: [''],
      salary: ['']
    });
</code>


Kell egy metódus, ami megjeleníti a szerkesztő felületet:
<code javascript>
  showEdit(employee: any) {
    this.editForm.patchValue({id: employee.id});
    this.editForm.patchValue({name: employee.name});
    this.editForm.patchValue({city: employee.city});
    this.editForm.patchValue({salary: employee.salary});
    this.editPanel = true;
  }
</code>

Kell egy metódus amit frissíti az adatokat:

<code javascript>
  updateEmployee() {
    let employee = {
      id: this.editForm.value.id,
      name: this.editForm.value.name,
      city: this.editForm.value.city,
      salary: this.editForm.value.salary
    }
    this.api.updateEmployee(employee).subscribe({
      next: res => {
        console.log(res);
        this.editPanel = false;
        this.getEmployees();
      }      
    });    
  }
</code>

==== Az employee sablon ====

Fűzzük az employee.component.html végéhez:

<code html src/app/employee/employee.component.html>
//...

<div *ngIf="editPanel">
    <form [formGroup]="editForm" (submit)="updateEmployee()">
        <div>
            <label for="id">Id</label>
            <input type="text" id="id" formControlName="id">
        </div>
        <div>
            <label for="name">Név</label>
            <input type="text" id="name" formControlName="name">
        </div>
        <div>
            <label for="city">Település</label>
            <input type="text" id="city" formControlName="city">
        </div>
        <div>
            <label for="salary">Fizetés</label>
            <input type="text" formControlName="salary">
        </div>
 
        <button type="submit">Mentés</button>
    </form>
</div>
</code>
==== Teljes kód ====


<tabbox app.module.ts>
<code javascript src/app/app.module.ts>
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { ReactiveFormsModule } from '@angular/forms';
import { EmployeeComponent } from './employee/employee.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    EmployeeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

</code>




<tabbox app.component.ts>
<code javascript src/app/app.component.ts>
import { Component } from '@angular/core';
import { AuthService } from './shared/auth.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app01';
  
  constructor(private auth: AuthService) {}

  logout() {
    let jsonUserData: any = localStorage.getItem('userData');
    let userData = JSON.parse(jsonUserData);
    console.log(userData.name);
    console.log(userData.token);
    this.auth.logout(userData.name, userData.token).subscribe({
      next: res => {
        console.log(res)
      }
    });
  }
}

</code>



<tabbox app.component.html>
<code html src/app/app.component.html>
<ul>
  <li>
    <a routerLink="/employees">Dolgozók</a>
  </li>
  <li>
    <a routerLink="/login">Login</a>
  </li>
</ul>

<button (click)="logout()">Kilépés</button>

<router-outlet></router-outlet>
</code>




<tabbox app-routing.module.ts>
<code javascript src/app/app-routing.module.ts>
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { EmployeeComponent } from './employee/employee.component';
import { LoginComponent } from './login/login.component';

const routes: Routes = [
  { path: 'login', component: LoginComponent},
  { path: 'employees', component: EmployeeComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

</code>



<tabbox auth.service.ts>
<code javascript src/app/shared/auth.service.ts>
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  
  host = 'http://localhost:8000/api/';

  constructor(private http: HttpClient) { }

  login(user: string, pass: string) {
    const authData = {
      name: user,
      password: pass
    }
    let httpHeaders = new HttpHeaders();
    httpHeaders.set('Content-Type', 'application/json');
    const httpOptions = {
      headers: httpHeaders
    }
    let endpoint = 'login';
    let url = this.host + endpoint;
    return this.http.post<any>(url, authData, httpOptions);
  }

  logout(name: string, token: string) {
    const userData = {
      name: name,
      tokenId: token
    }
    let httpHeaders = new HttpHeaders();
    httpHeaders.set('Content-Type', 'application/json');
    const httpOptions = {
      headers: httpHeaders
    }
    let endpoint = 'logout';
    let url = this.host + endpoint;
    console.log(userData.name)
    return this.http.post<any>(url, userData, httpOptions);
  }
}

</code>




<tabbox api.service.ts>
<code javascript src/app/shared/api.service.ts>
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  host = 'http://localhost:8000/api/';

  constructor(private http: HttpClient) { }

  getEmployees() {    
    let endpoint = 'employees';
    let url = this.host + endpoint; 
    return this.http.get<any>(url);
  }

  addEmployee(employee: any) {
    let jsonUserData: any = localStorage.getItem('userData');
    let userData = JSON.parse(jsonUserData);
  
    let httpHeaders = new HttpHeaders()
    .set('Authorization', `Bearer ${userData.token}`);

    const httpOptions = {
      headers: httpHeaders
    }
    let endpoint = 'employees';
    let url = this.host + endpoint;

    return this.http.post<any>(url, employee, httpOptions);
  }

  delEmployee(id: number) {
    let jsonUserData: any = localStorage.getItem('userData');
    let userData = JSON.parse(jsonUserData);  
    let httpHeaders = new HttpHeaders()
    .set('Authorization', `Bearer ${userData.token}`);
    const httpOptions = {
      headers: httpHeaders
    }

    let endpoint = 'employees';
    let url = this.host + endpoint + '/' + id;
    return this.http.delete<any>(url, httpOptions);    
  }
  updateEmployee(employee: any) {
    let jsonUserData: any = localStorage.getItem('userData');
    let userData = JSON.parse(jsonUserData);
  
    let httpHeaders = new HttpHeaders()
    .set('Authorization', `Bearer ${userData.token}`);

    const httpOptions = {
      headers: httpHeaders
    }
    let endpoint = 'employees';
    let url = this.host + endpoint + '/' + employee.id;

    return this.http.put<any>(url, employee, httpOptions);
  }
}

</code>



<tabbox login.component.ts>
<code javascript src/app/login/login.component.ts>
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { AuthService } from '../shared/auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  loginForm !: FormGroup;

  constructor(
    private auth: AuthService,
    private formBuilder: FormBuilder
      ) { }

  ngOnInit(): void {
    this.loginForm = this.formBuilder.group({
      user: [''],
      pass: ['']
    });
  }
  login() {
    let user = this.loginForm.value.user;
    let pass = this.loginForm.value.pass;
    this.auth.login(user, pass).subscribe({
      next: data => {
        localStorage.setItem('userData', JSON.stringify(data));
      },
      error: err => {
        console.log('Hiba! A belépés sikertelen!')
      }
    });
  }
}

</code>


<tabbox login.component.html>
<code html src/app/login/login.component.html>
<p>Belépés</p>

<form [formGroup]="loginForm" (submit)="login()">

    <div>
        <label>Felhasználónév</label>
        <input type="text" formControlName="user">
    </div>
    <div>
        <label>Jelszó</label>
        <input type="password" formControlName="pass">
    </div>
    <button type="submit">Belépés</button>

</form>
</code>



<tabbox employee.component.ts>
<code javascript src/app/employee/employee.component.ts>
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { ApiService } from '../shared/api.service';

@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.css']
})
export class EmployeeComponent implements OnInit {
  addPanel: boolean = false;
  editPanel: boolean = false;
  employees: any;
  addForm !: FormGroup;
  editForm !: FormGroup;

  constructor(
    private api: ApiService,
    private formBuilder: FormBuilder
    ) { }

  ngOnInit(): void {
    this.getEmployees();
    this.addForm = this.formBuilder.group({
      name: [''],
      city: [''],
      salary: ['']
    });
    this.editForm = this.formBuilder.group({
      id: [''],
      name: [''],
      city: [''],
      salary: ['']
    });
  }

  getEmployees() {
    this.api.getEmployees().subscribe({
      next: data => {
        this.employees = data;
      },
      error: err => {
        console.log('Hiba! A dolgozók letöltése sikertelen!');
      }
    });
  }

  addEmployee() {
    let employee = {
      name: this.addForm.value.name,
      city: this.addForm.value.city,
      salary: this.addForm.value.salary,
    }
    
    this.api.addEmployee(employee).subscribe({
      next: res => {
        console.log(res)
        this.employees.push(res);
      }
    });
  }

  showAddPanel() {
    this.addPanel = true;
  }

  delEmployee(employee: any) {
    this.api.delEmployee(employee.id).subscribe({
      next: res => {
        console.log(res);
        this.employees.forEach( (emp: any, index: number) => {
          if (emp.id === employee.id ) {
            this.employees.splice(index, 1)
          }
        })

      }
    });
  }

  showEdit(employee: any) {
    this.editForm.patchValue({id: employee.id});
    this.editForm.patchValue({name: employee.name});
    this.editForm.patchValue({city: employee.city});
    this.editForm.patchValue({salary: employee.salary});
    this.editPanel = true;
  }

  updateEmployee() {
    let employee = {
      id: this.editForm.value.id,
      name: this.editForm.value.name,
      city: this.editForm.value.city,
      salary: this.editForm.value.salary
    }
    this.api.updateEmployee(employee).subscribe({
      next: res => {
        console.log(res);
        this.editPanel = false;
        this.getEmployees();
      }      
    });    
  }
}

</code>


<tabbox employee.component.html>
<code html src/app/employee/employee.component.html>
<p>Dolgozók</p>

<button (click)="showAddPanel()">Hozzáad</button>

<table>
    <thead>
        <th>Id</th>
        <th>Név</th>
        <th>Település</th>
        <th>Fizetés</th>
    </thead>
    <tbody>
        <tr *ngFor="let employee of employees">
            <td>{{ employee.id }}</td>
            <td>{{ employee.name }}</td>
            <td>{{ employee.city }}</td>
            <td>{{ employee.salary }}</td>
            <td>
                <button (click)="delEmployee(employee)">Törlés</button>
            </td>
            <td>
                <button (click)="showEdit(employee)">Szerkesztés</button>
            </td>
        </tr>
    </tbody>
</table>

<div *ngIf="addPanel">
    <form [formGroup]="addForm" (submit)="addEmployee()">
        <div>
            <label for="name">Név</label>
            <input type="text" id="name" formControlName="name">
        </div>
        <div>
            <label for="city">Település</label>
            <input type="text" id="city" formControlName="city">
        </div>
        <div>
            <label for="salary">Fizetés</label>
            <input type="text" formControlName="salary">
        </div>

        <button type="submit">Mentés</button>
    </form>
</div>


<div *ngIf="editPanel">
    <form [formGroup]="editForm" (submit)="updateEmployee()">
        <div>
            <label for="id">Id</label>
            <input type="text" id="id" formControlName="id">
        </div>
        <div>
            <label for="name">Név</label>
            <input type="text" id="name" formControlName="name">
        </div>
        <div>
            <label for="city">Település</label>
            <input type="text" id="city" formControlName="city">
        </div>
        <div>
            <label for="salary">Fizetés</label>
            <input type="text" formControlName="salary">
        </div>

        <button type="submit">Mentés</button>
    </form>
</div>

</code>




</tabbox>


===== Függelék =====
==== HttpHeaders változatok ====

A httpHeaders objektum így is létrehozható:
<code javascript>
const httpHeaders = new HttpHeaders()
    .set('Content-Type', 'application/json');
</code>

<code javascript>
    const httpHeaders = new HttpHeaders({
      'Content-Type': 'application/json'
    });
</code>


==== Lekérés azonosítással ====
Ha védett lenne a dolgozók lekérése, akkor
a tokent is el kellene küldenünk a lekéréskor:


Hozzuk létre a getEmployees() metódust:
<code javascript src/app/shared/auth.service.ts>
  getEmployees() {
    let url = 'http://localhost:8000/api/employees';
    let token = '3|7eBr5iAUPgqQz3lxIFgC72Yh3ERO76g1MyuHNOGD';
    let header = {
      headers: new HttpHeaders()
        .set('Authorization', `Bearer ${token}`)
    }
    return this.http.get<any>(url, header);
  }
</code>