Angular:Role Afficher supprimer ,modifier
Model: Modifier src/models/Role.js
/**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);
}
})
}
/*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);
}
})
}
/*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);
}
})
}
/*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
/*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)
})
}
/*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'});
})
}
/*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] });
})
}
/*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);
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
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
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 { }