nuevas vistas

2021-07-27 00:00:36 -04:00
parent 173962f836
commit a1585c597b
28 changed files with 22263 additions and 115 deletions
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -21,7 +21,7 @@
    "@angular/router": "~12.0.1",
    "@auth0/auth0-angular": "^1.5.1",
    "@ng-bootstrap/ng-bootstrap": "^10.0.0",
-    "bootstrap": "^4.5.0",
+    "bootstrap": "^4.6.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.1.0",
    "zone.js": "~0.11.4"
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -7,6 +7,8 @@ import {AuthGuard} from "./guards/auth.guard";
 //import { AuthGuard } from '@auth0/auth0-angular';
 import {AgregarResComponent} from "./components/agregar-res/agregar-res.component";
 import {AgregarUsuarioComponent} from "./components/agregar-usuario/agregar-usuario.component";
+import {MesasRestarantComponent} from "./components/mesas-restarant/mesas-restarant.component";
+import {SectoresComponent} from "./components/sectores/sectores.component";


 const routes: Routes = [
@@ -14,6 +16,8 @@ const routes: Routes = [
  { path: 'private', component:PrivateComponent, canActivate: [AuthGuard]},
  {path: 'agregar.res', component:AgregarResComponent, canActivate:[AuthGuard]},
  {path: 'agregar.usu', component:AgregarUsuarioComponent, canActivate:[AuthGuard]},
+  {path: 'mesaRers', component:MesasRestarantComponent, canActivate:[AuthGuard]},
+  {path: 'sectoresRes', component:SectoresComponent, canActivate:[AuthGuard]},
  {path: '**', pathMatch: 'full', redirectTo: 'public'}
 ];

--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@@ -1,37 +1,38 @@
-<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+<div class="d-flex" id="wrapper" >
+  <!-- Sidebar-->
+  <div class="border-end bg-white" id="sidebar-wrapper" *ngIf="(auth.isAuthenticated$ | async)">
+    <div class="sidebar-heading border-bottom bg-light">Unified Restaurant</div>
+    <div class="list-group list-group-flush" >
+      <a class="list-group-item list-group-item-action list-group-item-light p-3" routerLinkActive="active" routerLink="agregar.res">Restaurantes</a>
+      <a class="list-group-item list-group-item-action list-group-item-light p-3" routerLinkActive="active" routerLink="agregar.usu">Usuarios</a>
+
+
+
+    </div>
+  </div>
+  <!-- Page content wrapper-->
+  <div id="page-content-wrapper">
+    <!-- Top navigation-->
+    <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
      <div class="container-fluid">
-    <a class="navbar-brand" href="#">Navbar</a>
-    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
+        <button class="btn btn-primary" id="sidebarToggle" *ngIf="(auth.isAuthenticated$ | async)">Toggle Menu</button>
+
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
-      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-        <li class="nav-item" routerLinkActive="active">
-          <a class="nav-link" routerLink="public" uter>public</a>
-        </li>
-        <li class="nav-item" routerLinkActive="active">
-          <a class="nav-link" routerLink="agregar.res" *ngIf="(auth.isAuthenticated$ |async )">agregar.res</a>
-        </li>
-        <li class="nav-item" routerLinkActive="active">
-          <a class="nav-link" routerLink="agregar.usu"  *ngIf="(auth.isAuthenticated$ |async )">agregar.usu</a>
-        </li>
-        <li class="nav-item" routerLinkActive="active" >
-          <a class="nav-link" routerLink="private" *ngIf="(auth.isAuthenticated$ |async )">private</a>
-        </li>
-      </ul>
-      <form class="d-flex">
-        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
-        <button class="btn btn-outline-success" type="submit">Search</button>
-      </form>
-      <li> </li>
+          <ul class="navbar-nav ms-auto mt-2 mt-lg-0">
            <button class="btn btn-primary" (click)="loginWithRedirect()"  *ngIf="!(auth.isAuthenticated$ | async)">Ingresar</button>
            <button class="btn btn-danger" (click)="logout()"  *ngIf="(auth.isAuthenticated$ | async)">salir</button>
+          </ul>
        </div>
      </div>
-
    </nav>
+    <!-- Page content-->
+    <div class="container-fluid">
      <div class="container mt-5">
          <router-outlet></router-outlet>
      </div>
+    </div>
+  </div>
+</div>


--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -10,6 +10,10 @@ import { PrivateComponent } from './components/private/private.component';
 import { AgregarResComponent } from './components/agregar-res/agregar-res.component';
 import { AgregarUsuarioComponent } from './components/agregar-usuario/agregar-usuario.component';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { ModalComponent } from './components/modal/modal.component';
+import { ModalUsuarioComponent } from './components/modal-usuario/modal-usuario.component';
+import { MesasRestarantComponent } from './components/mesas-restarant/mesas-restarant.component';
+import { SectoresComponent } from './components/sectores/sectores.component';

@NgModule({
  declarations: [
@@ -17,7 +21,11 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
    PublicComponent,
    PrivateComponent,
    AgregarResComponent,
-    AgregarUsuarioComponent
+    AgregarUsuarioComponent,
+    ModalComponent,
+    ModalUsuarioComponent,
+    MesasRestarantComponent,
+    SectoresComponent
  ],
  imports: [
    BrowserModule,
--- a/frontend/src/app/components/agregar-res/agregar-res.component.html
+++ b/frontend/src/app/components/agregar-res/agregar-res.component.html
@@ -1,19 +1,17 @@
 <div class="row">
  <div class="col">

-<table class="table" *ngIf="restaurante" border="1">
+
+    <table class="table table-bordered table-hover" *ngIf="restaurante" border="1">
  <thead>
  <tr >
-    <th>id</th><th>nombre</th>
+    <th scope="col">id</th><th scope="col">nombre</th>
  </tr>
  </thead>
  <tbody>
-  <tr *ngFor="let r of restaurante.data">
-    <td>{{r.id}}</td>
+  <tr *ngFor="let r of restaurante.data" data-bs-toggle="modal" data-bs-target="#modificarRes" (click)="modificarResModal(r.id,r.nombre)">
+    <td scope="row">{{r.id}}</td>
    <td>{{r.nombre}}</td>
-    <td><p><button class="btn btn-primary" (click)="eliminarRes('6205091c-f172-424e-908c-f3c4bde39a9b')">eliminar</button></p></td>
-    <td><p><button class="btn btn-danger" (click)="modificarRes('59323ad5-b0e5-45a2-8a2b-696f275ef209')">modificar</button></p></td>
-
  </tr>
  </tbody>

@@ -21,16 +19,7 @@
   </div>
 </div>
 <div>
-
-  <p>
-    nombre:<input type="text" [(ngModel)]="agre.nombre">
-  </p>
-  <p><button class="btn btn-primary" (click)="agregarRes()">agregar</button></p>
-  <p><button class="btn btn-primary" (click)="eliminarRes('6205091c-f172-424e-908c-f3c4bde39a9b')">elimiminar</button></p>
-  <p><button class="btn btn-danger" (click)="modificarRes('59323ad5-b0e5-45a2-8a2b-696f275ef209')">modificar</button></p>
-
-</div>
-
+<app-modal [idModalRes]="idSelect" [nombreSelect]="nombreSelect"></app-modal>



--- a/frontend/src/app/components/agregar-res/agregar-res.component.ts
+++ b/frontend/src/app/components/agregar-res/agregar-res.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit, Output,EventEmitter} from '@angular/core';
 import {RestaurantesService} from "../../restaurantes.service";

@Component({
@@ -9,6 +9,10 @@ import {RestaurantesService} from "../../restaurantes.service";
 export class AgregarResComponent implements OnInit {

  restaurante: any;
+  idSelect:any;
+  nombreSelect:any;
+
+

  agre={
     nombre:null
@@ -22,24 +26,31 @@ export class AgregarResComponent implements OnInit {

  }
  recuperartodos(){
+    console.log(this.restaurante);
    this.restaurantServ.mostrarTodosRes().subscribe(result => this.restaurante = result);
  }
  agregarRes(){
-    this.restaurantServ.agregar(this.agre).subscribe(this.recuperartodos)
+    this.restaurantServ.agregar(this.agre).subscribe((respuesta)=>{
+      this.recuperartodos();
+    });
  }
  eliminarRes(id:any){
    if(confirm("Esta seguro de eliminar este registro?")) {
      this.restaurantServ.eliminar(id).subscribe()
    }
  }
-  modificarRes(id:any){
-    console.log(id,this.agre)

-    this.restaurantServ.modificar(id,this.agre).subscribe();
+  modificarResModal(id:any,nombre:any){
+    this.idSelect= id;
+    this.nombreSelect= nombre;
+
  }



+
+
+
  hayregistro(){
    return true;
  }
--- a/frontend/src/app/components/agregar-usuario/agregar-usuario.component.html
+++ b/frontend/src/app/components/agregar-usuario/agregar-usuario.component.html
@@ -1,35 +1,20 @@
-<table class="table" *ngIf="usuarios" border="2">
+<table class="table table-bordered table-hover" *ngIf="usuarios" border="2">
  <thead >
  <tr>
-    <td>id</td><td>nombre</td><td>creacion</td><td>modificacion</td><td>roles</td>
+    <td scope="col">id</td><td scope="col">nombre</td><td scope="col">roles</td>
  </tr>
  </thead>
  <tbody>
-  <tr *ngFor="let r of usuarios.data">
+  <tr *ngFor="let r of usuarios.data" data-bs-toggle="modal" data-bs-target="#ModificarUsuarios" (click)="modificarModelUsuario(r.id,r.nombre)">
    <td>{{r.id}}</td>
    <td>{{r.nombre}}</td>
-    <td>{{r['created_at']}}</td>
-    <td>{{r['updated_at']}}</td>
-    <td>{{r.roles}}</td>
+    <td> <span *ngFor="let f of r.roles" class="badge  badge-success spam_magin">{{f}}</span>   </td>
  </tr>
  </tbody>

 </table>
-<div>
-<p>
-  nombre:<input type="text" [(ngModel)]="agreU.nombre">
-  </p>
-  <p>email:<input type="text" [(ngModel)]="agreU.email"></p>
-  <p>nombre de usuario:<input type="text" [(ngModel)]="agreU.username"></p>
-  <p>Contraseña:<input type="text" [(ngModel)]="agreU.password"></p>
-  <p>roles:<input type="text" [(ngModel)]="agreU.roles"></p>
-  <p>restaurante:<input type="text" [(ngModel)]="agreU.restaurant"></p>
+<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#AgregarUsuarios">
+  Agregar
+</button>

-  <p><button (click)="AgregarUsu()">agregar usuario</button></p>
-  <p><button (click)="eliminarUsu('75d35a3a-4ffc-4dbd-bc6d-eefcf8ff3463')">eliminar</button></p>
-</div>
-<div>
-  <p>nombre:<input type="text" [(ngModel)]="modi.nombre"></p>
-  <p>roles:<input type="text" [(ngModel)]="modi.roles"></p>
-<p><button (click)="modificarUsu('75d35a3a-4ffc-4dbd-bc6d-eefcf8ff3463')">modificar</button></p>
-</div>
+<app-modal-usuario [idModalUsu]="idSelect" [NombreModalusu]="nombreSelect"></app-modal-usuario>
--- a/frontend/src/app/components/agregar-usuario/agregar-usuario.component.scss
+++ b/frontend/src/app/components/agregar-usuario/agregar-usuario.component.scss
@@ -0,0 +1,4 @@
+.spam_magin{
+  margin-right: 2px;
+  margin-left: 2px;
+}
--- a/frontend/src/app/components/agregar-usuario/agregar-usuario.component.ts
+++ b/frontend/src/app/components/agregar-usuario/agregar-usuario.component.ts
@@ -10,6 +10,9 @@ import {RestaurantesService} from "../../restaurantes.service";
 export class AgregarUsuarioComponent implements OnInit {

  usuarios: any;
+  idSelect:any;
+  nombreSelect:any;
+

  agreU={
    nombre:null,
@@ -44,6 +47,14 @@ export class AgregarUsuarioComponent implements OnInit {
  }
  modificarUsu(id:any){
    this.restaurantServ.moficiarUsu(id,this.modi).subscribe();
+  }
+  modificarModelUsuario(id:any,nombre:any){
+    this.idSelect=id;
+    this.nombreSelect=nombre;
+
+
+
+
  }

 }
--- a/frontend/src/app/components/mesas-restarant/mesas-restarant.component.html
+++ b/frontend/src/app/components/mesas-restarant/mesas-restarant.component.html
@@ -0,0 +1,33 @@
+<div class="card " style="width: 18rem;">
+  <div class="card-body ">
+    <h5 class="card-title ">Mesa 1</h5>
+
+    <ul class="list-group list-group-flush">
+      <li class="list-group-item">Cras justo odio</li>
+      <li class="list-group-item">Dapibus ac facilisis in</li>
+      <li class="list-group-item">Morbi leo risus</li>
+      <li class="list-group-item">Porta ac consectetur ac</li>
+      <li class="list-group-item">Vestibulum at eros</li>
+    </ul>
+
+    <a href="#" class="btn btn-primary">Go somewhere</a>
+  </div>
+</div>
+<div class="card" style="width: 18rem;">
+  <img class="card-img-top" src="..." alt="Card image cap">
+  <div class="card-body">
+    <h5 class="card-title">Card title</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+  </div>
+  <ul class="list-group list-group-flush">
+    <li class="list-group-item">Cras justo odio</li>
+    <li class="list-group-item">Dapibus ac facilisis in</li>
+    <li class="list-group-item">Vestibulum at eros</li>
+  </ul>
+  <div class="card-body">
+    <a href="#" class="card-link">Card link</a>
+    <a href="#" class="card-link">Another link</a>
+  </div>
+</div>
+
+
--- a/frontend/src/app/components/mesas-restarant/mesas-restarant.component.scss
+++ b/frontend/src/app/components/mesas-restarant/mesas-restarant.component.scss
@@ -0,0 +1 @@
+
--- a/frontend/src/app/components/mesas-restarant/mesas-restarant.component.ts
+++ b/frontend/src/app/components/mesas-restarant/mesas-restarant.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-mesas-restarant',
+  templateUrl: './mesas-restarant.component.html',
+  styleUrls: ['./mesas-restarant.component.scss']
+})
+export class MesasRestarantComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
--- a/frontend/src/app/components/modal-usuario/modal-usuario.component.html
+++ b/frontend/src/app/components/modal-usuario/modal-usuario.component.html
@@ -0,0 +1,67 @@
+<div class="modal fade" id="AgregarUsuarios" tabindex="-1" aria-labelledby="usuariosModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="usuariosModalLabel">Modal title</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+          <div class="form-group">
+            <label for="Nombre">nombre</label>
+            <input type="text" class="form-control" id="Nombre" [(ngModel)]="agreU.nombre"  placeholder="nombre">
+          </div>
+          <div class="form-group">
+            <label for="email">email</label>
+            <input type="email" class="form-control" id="email" aria-describedby="emailHelp"  [(ngModel)]="agreU.email" placeholder="email">
+          </div>
+          <div class="form-group">
+            <label for="NombredeUsuarios">email</label>
+            <input type="text" class="form-control" id="NombredeUsuarios" [(ngModel)]="agreU.username" placeholder="Nombrede Usuarios" >
+          </div>
+          <div class="form-group">
+            <label for="contraseña">contraseña</label>
+            <input type="password" class="form-control" id="contraseña" [(ngModel)]="agreU.password" placeholder="contraseña">
+          </div>
+          <div class="form-group">
+            <label for="roles">roles</label>
+            <input type="text" class="form-control" id="roles" [(ngModel)]="agreU.roles" placeholder="roles">
+          </div>
+          <div class="form-group">
+            <label for="restaurantes">email</label>
+            <input type="text" class="form-control" id="restaurantes" [(ngModel)]="agreU.restaurant" placeholder="restaurantes">
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            <button type="submit" class="btn btn-primary" data-bs-dismiss="modal" (click)="AgregarUsu()">guardar</button>
+          </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="modal fade" id="ModificarUsuarios" tabindex="-1" aria-labelledby="ModificarModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="ModificarModalLabel">Modificar</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <div class="form-group">
+          <label for="NombreM">nombre</label>
+          <input type="text" class="form-control" id="NombreM" [(ngModel)]="modi.nombre"  placeholder="{{NombreModalusu}}">
+        </div>
+        <div class="form-group">
+          <label for="rolesM">roles</label>
+          <input type="text" class="form-control" id="rolesM" [(ngModel)]="modi.roles" placeholder="roles">
+        </div>
+
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+          <button type="submit" class="btn btn-primary" data-bs-dismiss="modal" (click)="modificarUsu(idModalUsu)">guardar</button>
+          <button type="submit" class="btn btn-danger" data-bs-dismiss="modal" (click)="eliminarUsu(idModalUsu)">eliminar</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
--- a/frontend/src/app/components/modal-usuario/modal-usuario.component.scss
+++ b/frontend/src/app/components/modal-usuario/modal-usuario.component.scss
--- a/frontend/src/app/components/modal-usuario/modal-usuario.component.ts
+++ b/frontend/src/app/components/modal-usuario/modal-usuario.component.ts
@@ -0,0 +1,54 @@
+import { Component, OnInit,Input } from '@angular/core';
+import {RestaurantesService} from "../../restaurantes.service";
+
+@Component({
+  selector: 'app-modal-usuario',
+  templateUrl: './modal-usuario.component.html',
+  styleUrls: ['./modal-usuario.component.scss']
+})
+export class ModalUsuarioComponent implements OnInit {
+
+  usuarios: any;
+
+  @Input()idModalUsu:any;
+  @Input()NombreModalusu:any;
+
+
+  agreU={
+    nombre:null,
+    email:null,
+    username:null,
+    password:null,
+    roles:['admines'],
+    restaurant:null
+  }
+  modi={
+    nombre: null,
+    roles:['productor']
+  }
+
+  constructor(private  restaurantServ : RestaurantesService) { }
+
+  ngOnInit(): void {
+    this.recuperarUsuarios();
+  }
+
+  recuperarUsuarios(){
+    this.restaurantServ.mostrarUsuarios().subscribe(result => this.usuarios = result)
+  }
+  AgregarUsu(){
+    this.restaurantServ.agregarUsu(this.agreU).subscribe(this.recuperarUsuarios)
+  }
+  eliminarUsu(id:any){
+    if(confirm("Esta seguro de eliminar este registro?")){
+      this.restaurantServ.eliminarUsu(id).subscribe();
+
+    }
+
+  }
+  modificarUsu(id:any){
+    this.restaurantServ.moficiarUsu(id,this.modi).subscribe();
+  }
+
+
+}
--- a/frontend/src/app/components/modal/modal.component.html
+++ b/frontend/src/app/components/modal/modal.component.html
@@ -0,0 +1,69 @@
+<!-- Modal de restaurantes-->
+<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <p>Nombre del nuevo restaurante</p>
+        <input type="text" id="NameRes" [(ngModel)]="agre.nombre">
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="submit" class="btn btn-primary" data-bs-dismiss="modal" (click)="agregarRes()">guardar</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="modal fade" id="modificarRes" tabindex="-1" aria-labelledby="modificarReslavel" aria-hidden="true" >
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="modificarReslavel">Modal title</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <div class="form-group">
+          <label for="NombreM">Restaurante a Modificar= {{nombreSelect}}</label>
+          <input type="text" class="form-control" id="NombreM" [(ngModel)]="agre.nombre"  placeholder="{{nombreSelect}}">
+        </div>
+      </div>
+
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        <button type="submit" class="btn btn-primary" data-bs-dismiss="modal" (click)="modificarRes(idModalRes)">Modificar</button>
+        <td><button class="btn btn-danger" (click)="eliminarRes(idModalRes)">eliminar</button></td>
+
+      </div>
+    </div>
+  </div>
+</div>
+
+
+<!-- modal sectores -->
+
+
+<div class="modal fade" id="AgregarSectores" tabindex="-1" aria-labelledby="AgregarSectoresModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="AgregarSectoresModalLabel">Modificar</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <div class="form-group">
+          <label for="NombreS">nombre</label>
+          <input type="text" class="form-control" id="NombreS"  placeholder="Sectores">
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+          <button type="submit" class="btn btn-primary" data-bs-dismiss="modal" >guardar</button>
+          <button type="submit" class="btn btn-danger" data-bs-dismiss="modal" >eliminar</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
--- a/frontend/src/app/components/modal/modal.component.scss
+++ b/frontend/src/app/components/modal/modal.component.scss
--- a/frontend/src/app/components/modal/modal.component.ts
+++ b/frontend/src/app/components/modal/modal.component.ts
@@ -0,0 +1,57 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {RestaurantesService} from "../../restaurantes.service";
+
+@Component({
+  selector: 'app-modal',
+  templateUrl: './modal.component.html',
+  styleUrls: ['./modal.component.scss']
+})
+export class ModalComponent implements OnInit {
+
+  @Input()idModalRes:any;
+  @Input()nombreSelect:any;
+  id:any;
+  restaurante:any;
+
+
+
+  agre={
+    nombre:null
+
+  }
+
+
+
+  constructor(private restaurantServ : RestaurantesService) {
+    this.id = this.idModalRes;
+  }
+
+  ngOnInit(): void {
+    console.log(this.id);
+    this.recuperartodos();
+  }
+
+recuperartodos(){
+  console.log(this.restaurante);
+  this.restaurantServ.mostrarTodosRes().subscribe(result => this.restaurante = result);
+}
+
+  agregarRes(){
+
+    this.restaurantServ.agregar(this.agre).subscribe((respuesta)=>{
+      this.recuperartodos();
+    });
+  }
+  modificarRes(id:any){
+    console.log(id,this.agre)
+
+    this.restaurantServ.modificar(id,this.agre).subscribe();
+  }
+  eliminarRes(id:any){
+    if(confirm("Esta seguro de eliminar este registro?")) {
+      this.restaurantServ.eliminar(id).subscribe()
+    }
+  }
+
+
+}
--- a/frontend/src/app/components/private/private.component.html
+++ b/frontend/src/app/components/private/private.component.html
@@ -1,5 +1,18 @@
-<pre *ngIf="auth.user$ | async">
-  <code>
-    {{dato | json}}
-  </code>
+<pre *ngFor="auth.user$ | async as user">
+<code>{{user | json}}</code>
  </pre>
+<table class="table table-bordered table-hover" *ngIf="usuarios" border="2">
+  <thead >
+  <tr>
+    <td scope="col">id</td><td scope="col">nombre</td><td scope="col">roles</td>
+  </tr>
+  </thead>
+  <tbody>
+  <tr *ngFor="let r of usuarios.data" data-bs-toggle="modal" data-bs-target="#ModificarUsuarios" >
+    <td>{{r.id}}</td>
+    <td>{{r.nombre}}</td>
+    <td> <span *ngFor="let f of r.roles" class="badge  badge-success spam_magin">{{f}}</span>   </td>
+  </tr>
+  </tbody>
+
+</table>
--- a/frontend/src/app/components/private/private.component.ts
+++ b/frontend/src/app/components/private/private.component.ts
@@ -3,6 +3,7 @@ import {AuthService} from "@auth0/auth0-angular";

 import { concatMap, tap, pluck } from 'rxjs/operators';
 import { HttpClient } from '@angular/common/http';
+import {RestaurantesService} from "../../restaurantes.service";

@Component({
  selector: 'app-private',
@@ -11,21 +12,15 @@ import { HttpClient } from '@angular/common/http';
 })
 export class PrivateComponent implements OnInit {
  dato = {};
+  usuarios: any;
+  algo:any;

-  constructor(public auth: AuthService, private  http: HttpClient) { }
+  constructor(public auth: AuthService, private  http: HttpClient, private  restaurantServ : RestaurantesService) { }

  ngOnInit(): void {

-    this.auth.user$
-      .pipe(
-        tap((user)=>console.log(user)),
-        concatMap((user)=>
-        this.http.get(`https://api.unified.restaurant/api/v1/users/${user?.sub}`)
-        ),
-        tap((userdato) =>(this.dato = userdato))
-      ).subscribe();
-    console.log();
-
  }

+
+
 }
--- a/frontend/src/app/components/public/public.component.html
+++ b/frontend/src/app/components/public/public.component.html
@@ -1,22 +1,27 @@
-<ngb-carousel>
-  <ng-template ngbSlide>
-    <div >
-      <img src="https://i0.wp.com/www.4tomono.com/wp-content/uploads/2019/05/525624-PIYDKD-830-e1558385185407.jpg?resize=1110%2C600&ssl=1" alt="Random first slide">
+<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
+  <ol class="carousel-indicators">
+    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
+    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
+    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
+  </ol>
+  <div class="carousel-inner">
+    <div class="carousel-item active">
+      <img class="d-block w-100" src="https://i0.wp.com/www.4tomono.com/wp-content/uploads/2019/05/525624-PIYDKD-830-e1558385185407.jpg?resize=1110%2C600&ssl=1" alt="First slide">
    </div>
-    <div class="carousel-caption">
-      <h3>First slide label</h3>
-      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+    <div class="carousel-item">
+      <img class="d-block w-100" src="https://lh3.googleusercontent.com/proxy/AYysTpSD-uZC01nfihT0-wx7rViJafQMfj_3vFfOcu95Y8A68uaDQDNQk7_G5rnLNuu2ldjTlfgvol5_lcY1Fp7jJxw-9wKOIlYBkKilw-r7wTXd_KOwP2DXR83xMFzLoq2NmrZYMOo5KdPgVNRg1DeU7yPM2ntln5OxtJBwRwU" alt="Second slide">
    </div>
-  </ng-template>
-  <ng-template ngbSlide>
-    <div >
-      <img src="https://i0.wp.com/www.4tomono.com/wp-content/uploads/2019/05/525624-PIYDKD-830-e1558385185407.jpg?resize=1110%2C600&ssl=1" alt="Random first slide">
+    <div class="carousel-item">
+      <img class="d-block w-100" src="https://static.hosteltur.com/app/public/uploads/img/articles/2018/06/01/L_5c1a9bbb04770_Central-001.jpg" alt="Third slide">
    </div>
-    <div class="carousel-caption">
-      <h3>First slide label</h3>
-      <p>fdsfdsfsdfdsfsdds.</p>
  </div>
-  </ng-template>
-</ngb-carousel>
-
+  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
+    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+    <span class="sr-only">Previous</span>
+  </a>
+  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
+    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+    <span class="sr-only">Next</span>
+  </a>
+</div>

--- a/frontend/src/app/components/public/public.component.scss
+++ b/frontend/src/app/components/public/public.component.scss
@@ -0,0 +1,13 @@
+.carousel-item{
+  width: 100%;
+  height: 500px;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+}
+@media (max-width: 600px) {
+  .carousel-item {
+    height: 280px;
+  }
+}
--- a/frontend/src/app/components/sectores/sectores.component.html
+++ b/frontend/src/app/components/sectores/sectores.component.html
@@ -0,0 +1,52 @@
+<table class="table table-bordered table-hover">
+  <thead>
+  <tr>
+    <th scope="col">#</th>
+    <th scope="col">First</th>
+    <th scope="col">Last</th>
+    <th scope="col">Handle</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr data-bs-toggle="modal" data-bs-target="#AgregarSectores">
+    <th scope="row">1</th>
+    <td>Mark</td>
+    <td>Otto</td>
+    <td>@mdo</td>
+  </tr>
+  <tr>
+    <th scope="row">2</th>
+    <td>Jacob</td>
+    <td>Thornton</td>
+    <td>@fat</td>
+  </tr>
+  <tr>
+    <th scope="row">3</th>
+    <td>Larry</td>
+    <td>the Bird</td>
+    <td>@twitter</td>
+  </tr>
+  </tbody>
+</table>
+<pre *ngIf="auth.user$ | async as user">
+<code>{{user | json}}</code>
+  </pre>
+<table class="table table-bordered table-hover" *ngIf="usuarios" border="2">
+  <thead >
+  <tr>
+    <td scope="col">id</td><td scope="col">nombre</td><td scope="col">roles</td>
+  </tr>
+  </thead>
+  <tbody>
+  <tr *ngFor="let r of usuarios.data" data-bs-toggle="modal" data-bs-target="#ModificarUsuarios">
+    <td>{{r.id}}</td>
+    <td>{{r.nombre}}</td>
+    <td> <span *ngFor="let f of r.roles" class="badge  badge-success spam_magin">{{f}}</span>   </td>
+  </tr>
+  </tbody>
+
+</table>
+<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#AgregarUsuarios">
+  Agregar
+</button>
+<app-modal></app-modal>
--- a/frontend/src/app/components/sectores/sectores.component.scss
+++ b/frontend/src/app/components/sectores/sectores.component.scss
--- a/frontend/src/app/components/sectores/sectores.component.ts
+++ b/frontend/src/app/components/sectores/sectores.component.ts
@@ -0,0 +1,43 @@
+import { Component, OnInit } from '@angular/core';
+import {RestaurantesService} from "../../restaurantes.service";
+import {AuthService} from "@auth0/auth0-angular";
+import {HttpClient} from "@angular/common/http";
+import {concatMap, tap} from "rxjs/operators";
+
+@Component({
+  selector: 'app-sectores',
+  templateUrl: './sectores.component.html',
+  styleUrls: ['./sectores.component.scss']
+})
+export class SectoresComponent implements OnInit {
+
+  Sectores:any;
+  idSelect:any;
+  NombreSelect:any;
+  dato: any;
+  usuarios:any;
+  otro:any;
+
+  constructor(public auth: AuthService, private  http: HttpClient, private restaurantServ : RestaurantesService) { }
+
+  ngOnInit(): void {
+    this.auth.user$
+      .pipe(
+        tap((user)=>console.log(user)),
+        concatMap((user)=>
+          this.http.get(`https://api.unified.restaurant/api/v1/users/${user?.sub}`)
+        ),
+        tap((userdato) =>(this.dato = userdato))
+      ).subscribe();
+    console.log();
+    this.recuperarUsuarios();
+
+  }
+
+  recuperarUsuarios(){
+    this.restaurantServ.mostrarUsuarios().subscribe(algo => {
+
+    })
+  }
+
+}
--- a/frontend/src/app/restaurantes.service.ts
+++ b/frontend/src/app/restaurantes.service.ts
@@ -1,6 +1,8 @@
 import { Injectable } from '@angular/core';

 import {HttpClient, HttpHeaders} from "@angular/common/http";
+import {AuthService} from "@auth0/auth0-angular";
+import {concatMap, tap} from "rxjs/operators";

@Injectable({
  providedIn: 'root'
@@ -8,9 +10,10 @@ import {HttpClient, HttpHeaders} from "@angular/common/http";
 export class RestaurantesService {

  url='https://api.unified.restaurant/api/v1';
+  dato:any;


-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient,public auth: AuthService) { }

  mostrarTodosRes(){
    return this.http.get(`${this.url}/restaurantes`);
@@ -32,6 +35,8 @@ export class RestaurantesService {
    return this.http.put(`${this.url}/restaurantes/${codigo}`, JSON.stringify(ModificarRes),{ headers: headers });
  }

+
+
  //CRUD DE USUARIOS
  mostrarUsuarios(){
    return this.http.get(`${this.url}/users`);
@@ -43,7 +48,7 @@ export class RestaurantesService {
    return this.http.post(`${this.url}/users`, JSON.stringify(AgregarUsuario),{ headers: headers });
  }
  eliminarUsu(codigo:any){
-    return this.http.delete(`${this.url}/users/${codigo}`)
+    return this.http.delete(`${this.url}/users/${codigo}`);
  }
  moficiarUsu(codigo:any,Usuariomodificado:any){
    const headers: HttpHeaders = new HttpHeaders({
@@ -52,6 +57,29 @@ export class RestaurantesService {
    return this.http.put(`${this.url}/users/${codigo}`, JSON.stringify(Usuariomodificado), { headers: headers });
  }

+  //CRUD DE SECTORES
+
+  mostrarSectores(codigo:any){
+    return this.http.get(`${this.url}/${codigo}/sectores`);
+  }
+  agregarSectores(codigo:any,AgregarSectores:any){
+    const headers: HttpHeaders = new HttpHeaders({
+      'Content-Type': 'application/json'
+    });
+    return this.http.post(`${this.url}/${codigo}/sectores`, JSON.stringify(AgregarSectores),{ headers: headers});
+  }
+  eliminarSec(codigoRes:any,codigoSec:any){
+    return this.http.delete(`${this.url}/${codigoRes}/sectores/${codigoSec}`);
+
+  }
+  modificarSec(codigoRes:any,codifoSec:any,SectoresModificar:any){
+    const headers: HttpHeaders = new HttpHeaders({
+      'Content-Type': 'application/json'
+    });
+    return this.http.put(`${this.url}/${codigoRes}/sectores/${codifoSec}`, JSON.stringify(SectoresModificar),{headers: headers});
+  }
+
+


 }
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -9,6 +9,11 @@
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
+
+  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
 </head>
 <body>
  <app-root></app-root>
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss