Login

sistema-mantenimiento-back/app/Http/Controllers/UsersProfilesController.php

@@ -59,6 +59,7 @@ class UsersProfilesController extends Controller{
             $profiles = DB::table('samperf')->select(
                 'PERF_IDPE as IDPERFIL',
                 'PERF_NOPE as NOMBREPERFIL',
+                'PERF_ESTA as ESTATUS',
                 'PERF_PERM as PERMISOS'
             )->get();
         }catch(PDOException $e){
@@ -68,6 +69,25 @@ class UsersProfilesController extends Controller{
         return $this->responseController->makeresponse(false, "EXITO", $profiles);
     }
 
+    public function getProfile($id){
+        try{
+            $profile = DB::table('samperf')->select(
+                'PERF_IDPE as IDPERFIL',
+                'PERF_NOPE as NOMBREPERFIL',
+                'PERF_ESTA as ESTATUS',
+                'PERF_PERM as PERMISOS'
+            )->where('PERF_IDPE', '=', $id)->get()->first();
+        }catch(PDOException $e){
+            return $this->responseController->makeResponse(true, "No se pudo realizar la consulta a la base.", [], 500);
+        }
+
+        if(is_null($profile)){
+            return $this->responseController->makeResponse(true, "El perfil consultado no existe.", [], 404);
+        }
+        
+        return $this->responseController->makeresponse(false, "EXITO", $profile);
+    }
+
     public function updateUser(Request $request){
         $validator = Validator::make($request->all(), [
             'id' => 'required|string',
@@ -273,4 +293,17 @@ class UsersProfilesController extends Controller{
 
         return $this->responseController->makeResponse(false, "EXITO: Actualización correcta.");
     }
+
+    public function getModules(){
+        try{
+            $modules = DB::table('sammodu')->select(
+                'MODU_IDMO as IDMODULO',
+                'MODU_NOMO as NOMBREMODULO'
+            )->get();
+        }catch(PDOException $e){
+            return $this->responseController->makeResponse(true, "No se pudo realizar la consulta a la base.", [], 500);
+        }
+        
+        return $this->responseController->makeresponse(false, "EXITO", $modules);
+    }
 }

sistema-mantenimiento-back/routes/api.php

@@ -22,12 +22,14 @@ Route::post("/login", "App\Http\Controllers\LoginController@login");
 
 Route::middleware(['jwt.auth'])->group(function(){
     //Módulo de usuarios y perfiles
-    Route::post("/create-user", "App\Http\Controllers\UsersProfilesController@createUser"); //F
-    Route::post("/delete-user", "App\Http\Controllers\UsersProfilesController@deleteUser");
-    Route::post("/modify-user", "App\Http\Controllers\UsersProfilesController@updateUser"); //F
-    Route::post("/modify-pass", "App\Http\Controllers\UsersProfilesController@updatePass"); //F
-    Route::post("/block-user", "App\Http\Controllers\UsersProfilesController@blockUser");   //F
-    Route::get("/get-users", "App\Http\Controllers\UsersProfilesController@getUsers");      //F
-    Route::get("/get-user/{id}", "App\Http\Controllers\UsersProfilesController@getUser");   //F
-    Route::get("/get-profiles", "App\Http\Controllers\UsersProfilesController@getProfiles");//F
+    Route::post("/create-user", "App\Http\Controllers\UsersProfilesController@createUser");    //F
+    Route::post("/delete-user", "App\Http\Controllers\UsersProfilesController@deleteUser");    //F
+    Route::post("/modify-user", "App\Http\Controllers\UsersProfilesController@updateUser");    //F
+    Route::post("/modify-pass", "App\Http\Controllers\UsersProfilesController@updatePass");    //F
+    Route::post("/block-user", "App\Http\Controllers\UsersProfilesController@blockUser");      //F
+    Route::get("/get-users", "App\Http\Controllers\UsersProfilesController@getUsers");         //F
+    Route::get("/get-user/{id}", "App\Http\Controllers\UsersProfilesController@getUser");      //F
+    Route::get("/get-profiles", "App\Http\Controllers\UsersProfilesController@getProfiles");   //F
+    Route::get("/get-profile/{id}", "App\Http\Controllers\UsersProfilesController@getProfile");//F
+    Route::get("/get-modules", "App\Http\Controllers\UsersProfilesController@getModules");
 });

sistema-mantenimiento-front/src/app/app-routing.module.ts

@@ -1,3 +1,4 @@
+import { PermissionsComponent } from './components/users-profiles/profiles-admin/permissions/permissions.component';
 import { NewUserComponent } from './components/users-profiles/users-admin/new-user/new-user.component';
 import { UsersProfilesComponent } from './components/users-profiles/users-profiles.component';
 import { LoginComponent } from './components/login/login.component';
@@ -13,7 +14,8 @@ const routes: Routes = [
     path: 'sam', component: TemplateComponent, canActivate: [AuthGuard],
     children: [
       { path: 'users-profiles', component: UsersProfilesComponent},
-      { path: 'new-user', component: NewUserComponent }
+      { path: 'new-user', component: NewUserComponent },
+      { path: 'permissions', component: PermissionsComponent}
     ]
   }
 

sistema-mantenimiento-front/src/app/app.module.ts

@@ -12,6 +12,8 @@ import { HttpClientModule } from '@angular/common/http';
 import { ReactiveFormsModule } from '@angular/forms';
 import { NewUserComponent } from './components/users-profiles/users-admin/new-user/new-user.component';
 import { NewPasswordComponent } from './components/users-profiles/users-admin/new-password/new-password.component';
+import { DeleteAlertComponent } from './components/users-profiles/users-admin/delete-alert/delete-alert.component';
+import { PermissionsComponent } from './components/users-profiles/profiles-admin/permissions/permissions.component';
 
 /* Angular Material Imports Starts*/
 import { MatCardModule } from '@angular/material/card';
@@ -28,10 +30,10 @@ import { MatDialogModule } from '@angular/material/dialog';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import { DeleteAlertComponent } from './components/users-profiles/users-admin/delete-alert/delete-alert.component';
 import { TemplateComponent } from './components/template/template.component';
 import { FlexLayoutModule } from '@angular/flex-layout';
 
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 /* Angular Material Imports Ends*/
 
 @NgModule({
@@ -45,6 +47,7 @@ import { FlexLayoutModule } from '@angular/flex-layout';
     NewPasswordComponent,
     DeleteAlertComponent,
     TemplateComponent,
+    PermissionsComponent
   ],
   imports: [
     BrowserModule,
@@ -66,7 +69,8 @@ import { FlexLayoutModule } from '@angular/flex-layout';
     MatExpansionModule,
     MatToolbarModule,
     MatSidenavModule,
-    FlexLayoutModule
+    FlexLayoutModule,
+    MatSlideToggleModule
   ],
   providers: [],
   bootstrap: [AppComponent]

sistema-mantenimiento-front/src/app/components/users-profiles/profiles-admin/permissions/permissions.component.html

@@ -0,0 +1,45 @@
+<mat-card style="width: 75%;margin: 32px auto;" class="mat-elevation-z8">
+    <mat-card-title style="text-align: center;">Editar permisos - Perfil {{ profileName }}</mat-card-title>
+    <mat-card-content>
+        <div class="card-content-container" style="overflow-y: auto;">
+            <div class="loader-container" *ngIf="isLoading">
+                <mat-spinner></mat-spinner>
+                <h2 class="loader-label">Cargando...</h2>
+            </div>
+            <div class="error-container" *ngIf="!isLoading && hasError">
+                <mat-icon style="color: #e53935; transform: scale(5); margin-bottom: 48px;">error</mat-icon>
+                <h1 style="color: #e53935;">¡Error!</h1>
+                <p style="font-style: italic; font-size: 16px;">{{ errorStr }}</p>
+            </div>
+            <mat-accordion *ngIf="!isLoading && !hasError" class="headers-align">
+                <mat-expansion-panel *ngFor="let module of modules; let i = index">
+                    <mat-expansion-panel-header>
+                        <mat-panel-title>{{ module.NOMBREMODULO }}</mat-panel-title>
+                        <mat-panel-description>{{ module.IDMODULO }} 
+                            <mat-slide-toggle [checked]="permissionsPerModule[i]" (toggleChange)="permissionsPerModule[i] = !permissionsPerModule[i]">
+                                {{ permissionsPerModule[i] ? 'Deshabilitar' : 'Habilitar' }} módulo
+                            </mat-slide-toggle>
+                        </mat-panel-description>
+                    </mat-expansion-panel-header>
+                    <div style="width: 100%;">
+                        <h4 style="text-align: center;">Submódulo 1</h4>
+                        <div class="module-options-container">
+                            <div class="module-option">
+                                <mat-slide-toggle>Leer datos</mat-slide-toggle>
+                            </div>
+                            <div class="module-option">
+                                <mat-slide-toggle>Editar datos</mat-slide-toggle>
+                            </div>
+                            <div class="module-option">
+                                <mat-slide-toggle>Modificar datos</mat-slide-toggle>
+                            </div>
+                            <div class="module-option">
+                                <mat-slide-toggle>Eliminar datos</mat-slide-toggle>
+                            </div>
+                        </div>
+                    </div>
+                </mat-expansion-panel>
+            </mat-accordion>
+        </div>
+    </mat-card-content>
+</mat-card>

sistema-mantenimiento-front/src/app/components/users-profiles/profiles-admin/permissions/permissions.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PermissionsComponent } from './permissions.component';
+
+describe('PermissionsComponent', () => {
+  let component: PermissionsComponent;
+  let fixture: ComponentFixture<PermissionsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PermissionsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PermissionsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

sistema-mantenimiento-front/src/app/components/users-profiles/profiles-admin/permissions/permissions.component.ts

@@ -0,0 +1,83 @@
+import { ModulesInterface,ModuleInterface } from './../../../../interfaces/modules.interface';
+import { ModulesService } from './../../../../services/modules.service';
+import { ProfileInterface } from './../../../../interfaces/profile.interface';
+import { UsersProfilesService } from './../../../../services/users-profiles.service';
+import { ActivatedRoute } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-permissions',
+  templateUrl: './permissions.component.html',
+  styleUrls: ['./permissions.component.css']
+})
+export class PermissionsComponent implements OnInit {
+  profileName: string;
+  hasError: boolean;
+  errorStr: string;
+  isLoading: boolean;
+  modules: Array<ModuleInterface>;
+  permissionsPerModule: Array<boolean>;
+
+  constructor(
+    private route: ActivatedRoute, 
+    private usersProfilesService: UsersProfilesService,
+    private modulesService: ModulesService
+  ) { 
+    this.profileName = '';
+    this.hasError = false;
+    this.errorStr = "";
+    this.isLoading = true;
+    this.modules = [];
+    this.permissionsPerModule = [];
+  }
+
+  ngOnInit(): void {
+    this.route.queryParams.subscribe(params => {
+      console.log(params['profile']);
+      this.profileName = params['profileName'];
+      
+      if(params['profile'] == undefined){
+        this.isLoading = false;
+        this.hasError = true;
+        this.errorStr = "No se recibió ningún parámetro";
+      }else{
+        this.usersProfilesService.getProfile(params['profile']).subscribe((data: ProfileInterface) => {
+          this.hasError = data.error;
+          this.errorStr = data.msg;
+
+          if(!this.hasError){
+            this.modulesService.getModules().subscribe((dataMod: ModulesInterface) => {
+              this.hasError = dataMod.error;
+              this.errorStr = dataMod.msg;
+              this.isLoading = false;
+
+              if(!this.hasError){
+                this.modules = dataMod.response;
+                let perm = JSON.parse(data.response.PERMISOS);
+
+                this.modules.forEach(module => {
+                  let permMod = perm[`${module}`];
+                  if(permMod == undefined){
+                    this.permissionsPerModule.push(false);
+                  } 
+                });
+                
+              }
+            }, error => {
+              this.isLoading = false;
+              this.hasError = true;
+              this.errorStr = error.error.msg;
+            });
+          }else{
+            this.isLoading = false;
+          }
+        }, error => {
+          this.isLoading = false;
+          this.hasError = true;
+          this.errorStr = error.error.msg;
+        })
+      }
+    });
+  }
+
+}

sistema-mantenimiento-front/src/app/components/users-profiles/profiles-admin/profiles-admin.component.css

@@ -0,0 +1,3 @@
+.green{
+    background-color: #43a047;
+}

sistema-mantenimiento-front/src/app/components/users-profiles/profiles-admin/profiles-admin.component.html

@@ -1,18 +1,52 @@
 <div class="card-content-container">
-    <div class="table-header">
-        <h2 style="margin: 0; width: calc(100% - 160px);">Panel de Gestión de Perfiles (Total: 1)</h2>
-        <button mat-flat-button style="width: 160px;">Crear Nuevo Perfil</button>
+    <div class="table-container" *ngIf="!isLoading && !hasError">
+        <div class="table-header">
+            <h2 style="margin: 0; width: calc(100% - 160px);">Panel de Gestión de Perfiles (Total: {{ profiles.length }})</h2>
+            <button mat-flat-button style="width: 160px;">Crear Nuevo Perfil</button>
+        </div>
+        <div class="table-row-white">
+            <mat-form-field class="example-full-width" appearance="outline" style="margin-bottom: -1.25em; width: calc(100% - 64px - 82px);padding: 0;">
+                <input matInput type="text" #searchInput (keyup.enter)="search(searchInput.value)">
+            </mat-form-field>
+            <button mat-flat-button style="margin-top: 4px;margin-left: -8px;margin-bottom: 5px; width: 82px;" color="primary"
+            (click)="search(searchInput.value)">Buscar</button>
+            <button mat-flat-button style="margin-top: 4px;margin-left: 8px;margin-bottom: 5px; width: 164px;" [disabled]="!searching"
+            (click)="clearSearch()">Limpiar búsqueda</button>
+        </div>
+        <div class="table-row-gray">
+            <div class="table-cell-header">ID</div>
+            <div class="table-cell-header">Nombre</div>
+            <div class="table-cell-header">Estatus</div>
+            <div class="table-cell-header">Permisos</div>
+            <div class="table-cell-header">Acciones</div>
+        </div>
+        <div *ngFor="let profile of profilesFinded; let i = index" [class.table-row-gray]="i % 2 == 1" [class.table-row-white]="i % 2 == 0">
+            <div class="table-cell">{{ profile.IDPERFIL }}</div>
+            <div class="table-cell">{{ profile.NOMBREPERFIL }}</div>
+            <div class="table-cell">{{ profile.ESTATUS }}</div>
+            <div class="table-cell">{{ profile.PERMISOS }}</div>
+            <div class="table-cell">
+                <button mat-mini-fab color="primary" #tooltip="matTooltip" matTooltip="Editar permisos" 
+                (click)="openPermissions(profile.IDPERFIL, profile.NOMBREPERFIL, 'edit')">
+                    <mat-icon>edit</mat-icon>
+                </button>
+                <button mat-mini-fab #tooltip="matTooltip" matTooltip="Ver permisos" style="margin-left: 4px;" class="green"
+                (click)="openPermissions(profile.IDPERFIL, profile.NOMBREPERFIL, 'see')">
+                    <mat-icon>visibility</mat-icon>
+                </button>
+                <button mat-mini-fab #tooltip="matTooltip" matTooltip="Eliminar perfil" style="margin-left: 4px;" color="warn">
+                    <mat-icon>delete</mat-icon>
+                </button>
+            </div>
+        </div>
     </div>
-    <div class="table-row-white">
-        <mat-form-field class="example-full-width" appearance="outline" style="margin-bottom: -1.25em; width: 100%;padding: 0;">
-            <input matInput type="text">
-        </mat-form-field>
-        <button mat-flat-button style="margin-top: 4px;margin-left: -8px;margin-bottom: 5px;" color="primary">Buscar</button>
+    <div class="loader-container" *ngIf="isLoading">
+        <mat-spinner></mat-spinner>
+        <h2 class="loader-label">Cargando...</h2>
     </div>
-    <div class="table-row-gray">
-        <div class="table-cell-header">ID</div>
-        <div class="table-cell-header">Nombre</div>
-        <div class="table-cell-header">Permisos</div>
-        <div class="table-cell-header">Acciones</div>
+    <div class="error-container" *ngIf="!isLoading && hasError">
+        <mat-icon style="color: #e53935; transform: scale(5); margin-bottom: 48px;">error</mat-icon>
+        <h1 style="color: #e53935;">¡Error!</h1>
+        <p style="font-style: italic; font-size: 16px;">{{ errorStr }}</p>
     </div>
 </div>

sistema-mantenimiento-front/src/app/components/users-profiles/profiles-admin/profiles-admin.component.ts

@@ -1,3 +1,6 @@
+import { Router } from '@angular/router';
+import { ProfilesResponse, ProfileResponse } from './../../../interfaces/profiles.interface';
+import { UsersProfilesService } from './../../../services/users-profiles.service';
 import { Component, OnInit } from '@angular/core';
 
 @Component({
@@ -6,10 +9,50 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./profiles-admin.component.css']
 })
 export class ProfilesAdminComponent implements OnInit {
+  isLoading: boolean;
+  hasError: boolean;
+  errorStr: string;
+  profiles: Array<ProfileResponse>;
+  profilesFinded: Array<ProfileResponse>;
+  searching: boolean;
 
-  constructor() { }
+  constructor(private usersProfilesService: UsersProfilesService, private router: Router) { 
+    this.isLoading = true;
+    this.hasError = false;
+    this.errorStr = "";
+    this.profiles = [];
+    this.profilesFinded = [];
+    this.searching = false;
+  }
 
   ngOnInit(): void {
+    this.usersProfilesService.getProfiles().subscribe((data: ProfilesResponse) => {
+      this.isLoading = false;
+      this.hasError = data.error;
+      this.errorStr = data.msg;
+
+      if(!this.hasError){
+        this.profiles = data.response;
+        this.profilesFinded = this.profiles;
+      }
+    }, error => {
+      this.isLoading = false;
+      this.hasError = true;
+      this.errorStr = error.error.msg;
+    });
   }
 
+  search(value: string){}
+
+  clearSearch(){}
+
+  openPermissions(profile: number, profileName: string, action: string){
+    this.router.navigate(['permissions'], {
+      queryParams: {
+        profile: profile,
+        profileName: profileName,
+        action: action
+      }
+    });
+  }
 }

sistema-mantenimiento-front/src/app/interfaces/modules.interface.ts

@@ -0,0 +1,10 @@
+export interface ModulesInterface{
+    error: boolean;
+    msg: string;
+    response: Array<ModuleInterface>;
+}
+
+export interface ModuleInterface{
+    IDMODULO: string;
+    NOMBREMODULO: string;
+}

sistema-mantenimiento-front/src/app/interfaces/profile.interface.ts

@@ -0,0 +1,12 @@
+export interface ProfileInterface{
+    error: boolean;
+    msg: string;
+    response: Profile;
+}
+
+export interface Profile{
+    IDPERFIL: number;
+    NOMBREPERFIL: string;
+    ESTATUS: string;
+    PERMISOS: string;
+}

sistema-mantenimiento-front/src/app/interfaces/profiles.interface.ts

@@ -7,5 +7,6 @@ export interface ProfilesResponse{
 export interface ProfileResponse{
     IDPERFIL: number;
     NOMBREPERFIL: string;
+    ESTATUS: string;
     PERMISOS: number;
 }

sistema-mantenimiento-front/src/app/services/modules.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ModulesService } from './modules.service';
+
+describe('ModulesService', () => {
+  let service: ModulesService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ModulesService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

sistema-mantenimiento-front/src/app/services/modules.service.ts

@@ -0,0 +1,25 @@
+import { apiUriQA } from './../../environments/environment';
+import { map } from 'rxjs';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ModulesService {
+  token = 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJFZERTQSJ9.eyJpc3MiOiJqb3NlLmJAaXR0ZWMubXgiLCJhdWQiOiJkb21pbmlvLnN5cC5teCIsImlhdCI6MTY0NzYxMjc0NCwiY2FkIjoxNjQ3Njk5MTQ0fQ.BkpH8BMrx0hExtdU0EsNGxQxcbx_RqvTpGq12DqfbS0IEej5enf6V6q2DbqPsueK_0DMR_CWU9kMMYQCN2jrCg';
+
+  constructor(private http: HttpClient) { }
+
+  getModules(){
+    return this.getQuery("get-modules").pipe(map((data: any) => data))
+  }
+  getQuery(query: string){
+    const URL = `${apiUriQA}${query}`;
+    return this.http.get(URL, {
+      headers: new HttpHeaders({
+        Authorization: this.token
+      })
+    });
+  }
+}

sistema-mantenimiento-front/src/app/services/users-profiles.service.ts

@@ -23,6 +23,10 @@ export class UsersProfilesService {
     return this.getQuery("get-profiles").pipe(map((data: any) => data))
   }
 
+  getProfile(idProfile: number){
+    return this.getQuery(`get-profile/${idProfile}`).pipe(map((data: any) => data))
+  }
+
   updateUser(userInfo: any){
     return this.postQuery("modify-user", userInfo).pipe(map((data: any) => data))
   }

sistema-mantenimiento-front/src/styles.css

@@ -154,3 +154,35 @@ footer {
   transform: translate(-50%, -50%);
   padding: 10px 10px 30px 10px;
 }
+
+.headers-align .mat-expansion-panel-header-title,
+.headers-align .mat-expansion-panel-header-description {
+    flex-basis: 0;
+}
+
+.headers-align .mat-expansion-panel-header-description {
+    justify-content: space-between;
+    align-items: center;
+}
+
+.headers-align .mat-form-field + .mat-form-field {
+    margin-left: 8px;
+}
+
+.module-options-container{
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+}
+
+.module-option{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/*Scrollbar firefox*/
+*{
+    scrollbar-width: thin;
+}