Pagina roles añadir y eliminar

ogWebconsole/src/app/app.module.ts

@@ -30,6 +30,8 @@ import { DeleteUserModalComponent } from './components/pages/admin/users/users/d
 import { AddUserModalComponent } from './components/pages/admin/users/users/add-user-modal/add-user-modal.component';
 import {MatSelectModule} from '@angular/material/select';
 import { EditUserModalComponent } from './components/pages/admin/users/users/edit-user-modal/edit-user-modal.component';
+import { AddRoleModalComponent } from './components/pages/admin/roles/roles/add-role-modal/add-role-modal.component';
+import { DeleteRoleModalComponent } from './components/pages/admin/roles/roles/delete-role-modal/delete-role-modal.component';
 
 
 @NgModule({ declarations: [
@@ -45,7 +47,9 @@ import { EditUserModalComponent } from './components/pages/admin/users/users/edi
         RolesComponent,
         DeleteUserModalComponent,
         AddUserModalComponent,
-        EditUserModalComponent
+        EditUserModalComponent,
+        AddRoleModalComponent,
+        DeleteRoleModalComponent
     ],
     bootstrap: [AppComponent], 
     imports: [BrowserModule,

ogWebconsole/src/app/components/pages/admin/roles/roles/roles.component.html

@@ -1,6 +1,6 @@
 <div class="header-container">
   <h1>Gestión de roles</h1>
-  <button mat-flat-button color="primary">+ Añadir</button>
+  <button mat-flat-button color="primary" (click)="addUser()">+ Añadir</button>
 </div>
 <table mat-table [dataSource]="dataSource" class="mat-elevation-z8 demo-table">
 
@@ -10,11 +10,10 @@
   </ng-container>
 
   <!-- Botones Column -->
-  <ng-container >
+  <ng-container matColumnDef="actions">
     <th mat-header-cell *matHeaderCellDef> Acciones </th>
     <td mat-cell *matCellDef="let role">
-      <button mat-button color="primary" >Editar</button>
-      <button mat-button color="warn" >Eliminar</button>
+      <button mat-button color="warn"  [disabled]="role.id === 1" (click)="deleteRole(role)">Eliminar</button>
     </td>
   </ng-container>
 

ogWebconsole/src/app/components/pages/admin/roles/roles/roles.component.ts

@@ -2,6 +2,8 @@ import { Component, OnInit } from '@angular/core';
 import { RoleService } from './roles.service';
 import { MatTableDataSource } from '@angular/material/table';
 import { MatDialog } from '@angular/material/dialog';
+import { AddRoleModalComponent } from './add-role-modal/add-role-modal.component';
+import { DeleteRoleModalComponent } from './delete-role-modal/delete-role-modal.component';
 
 @Component({
   selector: 'app-roles',
@@ -27,7 +29,7 @@ export class RolesComponent implements OnInit {
       cell: (role: any) => `${role.permissions.join(', ')}`
     }
   ];
-  displayedColumns = [...this.columns.map(column => column.columnDef)];
+  displayedColumns = [...this.columns.map(column => column.columnDef), 'actions'];
 
   constructor(private roleService: RoleService, public dialog: MatDialog) {}
 
@@ -42,8 +44,16 @@ export class RolesComponent implements OnInit {
     });
   }
 
+  addUser() {
+    const dialogRef = this.dialog.open(AddRoleModalComponent);
 
-  /* deleteRole(role: any) {
+    /* dialogRef.componentInstance.roleAdded.subscribe(() => {
+      this.loadRoles();
+    }); */
+
+  }
+
+  deleteRole(role: any) {
     const dialogRef = this.dialog.open(DeleteRoleModalComponent, {
       data: role
     });
@@ -53,5 +63,5 @@ export class RolesComponent implements OnInit {
         this.loadRoles();
       }
     });
-  } */
+  }
 }