menu FixWins.com Spring MVC Spring Boot NodeJS+ExpressJS+Mysql ReactJS+NodeJS+Mysql Angular Android PFE
Spring MVC Spring Boot NodeJS+ExpressJS+Mysql ReactJS+NodeJS+Mysql Angular PFE

Angular:Role Afficher supprimer ,modifier

folder Projet: backEndProject et frontEndproject
Dans cette partie, on va gérer les rôles  afficher, modifier et supprimer
Remarque cette partie est basée sur la partie précédente 15.2

BackEndProject :les roles :list,update,delete

Model: Modifier src/models/Role.js

Ajouter la fonction afficherAll() permettant de retourner la liste des roles
/**Afficher tout les roles**/
Role.afficherAll = (result) =>{
    connexion.query('SELECT * FROM roles', (err, res)=>{
        if(err){
            result(null,err);
        }else{
        /*retourne la liste des roles*/
            result(null,res);
        }
    })

}
Ajouter la fonction supprimer() permettant de supprimer un role dont id est passé en paramètre
/*Supprimer un role par son ID*/
Role.supprimer = (id, result)=>{
    connexion.query('DELETE FROM roles WHERE id=?', [id], (err, res)=>{
        if(err){
            result(null, err);
        }else{
            result(null, res);
        }
    })
}

Ajouter la fonction details() permettant de retourner les dtails d'un role dont id est passé en paramètre


/*Chercher un Role par son id*/
Role.details = (id, result)=>{
    connexion.query('SELECT * FROM roles WHERE id=?', id, (err, res)=>{
        if(err){
            result(null, err);
        }else{
            result(null, res);
        }
    })
}

Ajouter la fonction updateRole() permettant de retourner de modifier un role dont id est passé en paramètre

/*Modifier un role*/
Role.updateRole = (id, role_nouveau, result)=>{
    connexion.query("UPDATE roles SET nom=? WHERE id = ?",
    [role_nouveau.nom,id],
    (err, res)=>{
        if(err){
            result(null, err);
        }else{
            result(null, res);
        }
    });

}

controller: Modifier src/controllers/RoleController.js

Ajouter la fonction afficherAll() permettant d'afficher la liste des rôles
/*Afficher tout les roles*/
exports.afficherAll = (req, res)=> {
    RoleModel.afficherAll((err, roles) =>{
        if(err)
        /*si erreur envoyer l'erreur*/
        res.send(err);
        /*sinon envoyer la liste des roles*/
        res.send(roles)
    })
}

Ajouter la fonction supprimer() permettant de supprimer un role dont id est passé en paramètre

/*Supprimer un role*/
exports.supprimer = (req, res)=>{
    RoleModel.supprimer(req.params.id, (err, result)=>{
        if(err)
        res.send(err);
        res.json({status:true, message: 'Le role est bien supprime'});
    })
}

Ajouter la fonction details() permettant de retourner les dtails d'un role dont id est passé en paramètre


/*Chercher un role par son id*/
exports.details = (req, res)=>{
    RoleModel.details(req.params.id, (err, role)=>{
        if(err)
        res.send(err);
        res.send({ status: true, error: null, role: role[0] });
    })
}

Ajouter la fonction updateRole() permettant de retourner de modifier un role dont id est passé en paramètre

/*Modifier un role*/
exports.updateRole = (req, res)=>{
    const role_nouveau = new RoleModel(req.body);
/*vérifier si tout les champs sont remplir*/
    if(req.body.constructor === Object && Object.keys(req.body).length === 0){
        res.send(400).send({success: false, message: 'Erreur tous les champs sont obligatoires'});
    }else{
        RoleModel.updateRole(req.params.id, role_nouveau, (err, role)=>{
            if(err)
            res.send(err);
            res.json({status: true, message: 'Role est modifi�'})
        })
    }
}

Routes src/routes/RoleRoutes.js

Ajouter une route sécurisée permettant à un admin connecté d'ajouter un rôle
/*importer express js pour manipuler les routes*/
const express = require('express');
/*importer le module Router de express js*/
const routerRoles = express.Router();
/*imporer roleController*/
const roleController = require('../controllers/RoleController');
const auth = require('../middleware/auth');
/*la route:=> roles/ajouter ,avec la m�thode POST */
//routerRoles.post('/ajouter', roleController.insert);
routerRoles.post('/ajouter', auth.verifyToken, async (req, res) => {
roleController.insert(req,res);
});

//afficher all
routerRoles.get('/', auth.verifyToken, async (req, res) => {
roleController.afficherAll(req,res);
});


//supprimer
routerRoles.get('/details/:id', auth.verifyToken, async (req, res) => {
roleController.details(req,res);
});


//modifier
routerRoles.post('/modifier/:id', auth.verifyToken, async (req, res) => {
roleController.updateRole(req,res);
});

//d�tails par id
routerRoles.get('/supprimer/:id', auth.verifyToken, async (req, res) => {
roleController.supprimer(req,res);
});

module.exports = routerRoles

Server Serveur.js

importer le fichier de routage RoleRoutes.js dans le fichier Serveur.js

//importer le fichier de routage pour les roles
const routerRoles = require('./src/routes/RoleRoutes');
/*Créer les apis pour Utiliatuer*/
app.use('/apis/roles/', routerRoles);

frontEndProject:list,delete ,update

services/api.service.ts

Créer la méthode getSecure permettant d'exécuter la requête HTTP get en envoyant le token de sécurité
getSecure(url:string) {
    //1.récupérer token
    const auth_token=this.authService.getToken();
    const httpOptions = {
       headers: new HttpHeaders({
     'Content-Type': 'application/json',
        'Authorization': `${auth_token}`
        })
      };
    //2.envoyer la requete
    return this._http.get(this.baseUrl+""+url,httpOptions).pipe(map(res => {
    return res;
    }));
    }
Créer la méthode getSecureAvecParam permettant d'exécuter la requête HTTP get avec des paramètres en envoyant le token de sécurité
getSecureAvecParam(url:string,param:any) {
    //1.récupérer token
    const auth_token=this.authService.getToken();
    const httpOptions = {
       headers: new HttpHeaders({
     'Content-Type': 'application/json',
        'Authorization': `${auth_token}`
        })
      };
    //2.envoyer la requete
    return this._http.get(this.baseUrl+""+url+"/"+param,httpOptions).pipe(map(res => {
    return res;
    }));
    }

Créer la component listeRoles

Permettant d'afficher la liste des roles ,modifier et supprimer un role
ng g component components/listRoles

list-roles.component.ts

import { Component, OnInit } from '@angular/core';
import { ApiService } from './../../services/api.service'
import { AuthService } from './../../services/auth.service'
import { Router } from '@angular/router';

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

  isLogin: boolean = false;
  status: number=-1;
  messageStatus: any;
  userinfo: any;
  //afin de remplir la liste des roles
listeRoles:any=[];


constructor(
    private _api: ApiService,
    private _auth: AuthService,
    private _router:Router
  ) { }
 
//--------------------------
//afficher la liste des roles
ngOnInit() {
this.isUserLogin();
//charger la liste des roles from la table roles
 this._api.getSecure('roles').subscribe((data:any) => {
            this.listeRoles=data;
           
        });
}

//----------------------

//supprimer un role
supprimer(idrole:number)
{
//.Envoyer les données et le token
 this._api.getSecureAvecParam('roles/supprimer', idrole).subscribe((res: any) => {
        console.log(res);
        this.status=res.status;
       
      //1.OK
      if (this.status==1) {      
        this.messageStatus="Roles bien supprimé";

      }
    //2.Erreur
     else   {
        this.messageStatus="ERREUR :Role non supprimer";
          }
    });
   
    //supprimer de la liste affiché
    this.listeRoles = this.listeRoles.filter((item:any) => item.id !== idrole);
}


//--------------------
//vérifier si utilisateur infos existe déjà dans localStorage
isUserLogin(){
this.userinfo=this._auth.getUserDetails();
 if( this.userinfo!= null){
this.isLogin = true;
this.userinfo=JSON.parse(this.userinfo);
 }
 else
 {
      this._router.navigate(['/login']);
 }
}

}

list-roles.component.html

<div class="card text-center ">
    <div class="card-header bg-info">
La liste des rôles
    </div>
    <div class="card-body">

    <h3 *ngIf = 'this.status==0' class="bg-danger">{{this.messageStatus}}</h3>
    <h3 *ngIf = 'this.status==1' class="bg-success">{{this.messageStatus}}</h3>
<table class="table table-striped" *ngIf = 'this.userinfo[0].idRole==1'>
 <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Nom</th>
      <th scope="col">Actions</th>
 
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let role of listeRoles">
     <td>{{role.id}}</td>
     <td>{{role.nom}}</td>
     <td><a href="roles/details/{{role.id}}" class="btn btn-info btn-sm" style="margin:2px;">Détails</a>
     <a href="roles/modifier/{{role.id}}" class="btn btn-warning btn-sm"  style="margin:2px;">Modifier</a>
     <button (click)="this.supprimer(role.id)" class="btn btn-danger  btn-sm"  style="margin:2px;">Supprimer</button></td>
    </tr>
    </tbody>
</table>
<h3 *ngIf = '!this.isLogin' class="bg-success">Only Admin</h3>

</div>
</div>

Créer la component detailsRoles

Permettant d'afficher les détails d'un produit dont l'id est passé en paramètre
ng g component components/detailsRoles

details-roles.component.ts

import { Component, OnInit } from '@angular/core';
import { ApiService } from './../../services/api.service'
import { AuthService } from './../../services/auth.service'
import { Router } from '@angular/router';
import { ActivatedRoute,ParamMap  } from '@angular/router';


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

  isLogin: boolean = false;
  status: number=-1;
  messageStatus: any;
  userinfo: any;
  //afin de remplir la liste des roles
role:any={};
constructor(
    private _api: ApiService,
    private _auth: AuthService,
    private _router:Router,
    private route:ActivatedRoute
  ) { }

ngOnInit() {
this.isUserLogin();
//récupérer le paramètre
 this.route.paramMap.subscribe((params: ParamMap) => {
    let RoleId = Number(params.get('id'));
      console.log(RoleId);

 this._api.getSecureAvecParam('roles/details',RoleId).subscribe((data:any) => {
            this.role=data.role;
console.log(this.role);        
        });

});
}


//vérifier si utilisateur infos existe déjà dans localStorage
isUserLogin(){
this.userinfo=this._auth.getUserDetails();
 if( this.userinfo!= null){
this.isLogin = true;
this.userinfo=JSON.parse(this.userinfo);
 }
 else
 {
      this._router.navigate(['/login']);
 }
}

}


details-roles.component.html

<div class="card text-center ">
    <div class="card-header bg-info">
Détails du role :{{role.nom}}
    </div>
    <div class="card-body">
    <h3 *ngIf = 'this.status==0' class="bg-danger">{{this.messageStatus}}</h3>
    <h3 *ngIf = 'this.status==1' class="bg-success">{{this.messageStatus}}</h3>
<table class="table table-striped" *ngIf = 'this.userinfo[0].idRole==1'>
 <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Nom</th>
    </tr>
  </thead>
  <tbody>
    <tr>
     <td>{{role.id}}</td>
     <td>{{role.nom}}</td>
   
    </tr>
    </tbody>
</table>
<h3 *ngIf = '!this.isLogin' class="bg-success">Only Admin</h3>

</div>
</div>

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './auth/components/login/login.component';
import { RegisterComponent } from './auth/components/register/register.component';
import { ProfileComponent } from './components/profile/profile.component';
import { ListRolesComponent } from './components/list-roles/list-roles.component';
import { AddRolesComponent } from './components/add-roles/add-roles.component';
import { DetailsRolesComponent } from './components/details-roles/details-roles.component';
import { ModifierRolesComponent } from './components/modifier-roles/modifier-roles.component';
import { AuthGuardService } from './services/auth-guard.service';
const routes: Routes = [
  //les routes publiques
  {path: 'login', component: LoginComponent},
  {path: 'register', component: RegisterComponent},
  //une route privé controllé par  AuthGuardService
  {path: 'profile', canActivate: [AuthGuardService], component: ProfileComponent},
  {path: 'roles/add', canActivate: [AuthGuardService], component: AddRolesComponent},
  {path: 'roles', canActivate: [AuthGuardService],  component: ListRolesComponent},
  {path: 'roles/details/:id', canActivate: [AuthGuardService],  component: DetailsRolesComponent},
  {path: 'roles/modifier/:id', canActivate: [AuthGuardService],  component: ModifierRolesComponent},
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.module.ts

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {FormsModule, ReactiveFormsModule} from '@angular/forms'

import { AuthModule } from './auth/auth/auth.module';
import { ProfileComponent } from './components/profile/profile.component';
import { AddRolesComponent } from './components/add-roles/add-roles.component';
import { ListRolesComponent } from './components/list-roles/list-roles.component';
import { DetailsRolesComponent } from './components/details-roles/details-roles.component';
import { ModifierRolesComponent } from './components/modifier-roles/modifier-roles.component';
 
@NgModule({
  declarations: [
    AppComponent,
    ProfileComponent,
    AddRolesComponent,
    ListRolesComponent,
    DetailsRolesComponent,
    ModifierRolesComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule,
    AuthModule,
    ReactiveFormsModule,
    FormsModule,
  ],
  providers: [ ],
  bootstrap: [AppComponent]
})
export class AppModule { }