modificacion de visual

frontend/src/app/app-routing.module.ts

@@ -2,15 +2,18 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import {PublicComponent} from "./components/public/public.component";
 import {PrivateComponent} from "./components/private/private.component";
-//import {AuthGuard} from "./guards/auth.guard";
-import { AuthGuard } from '@auth0/auth0-angular';
+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";
 
 
 const routes: Routes = [
   { path: 'public', component:PublicComponent},
   { path: 'private', component:PrivateComponent, canActivate: [AuthGuard]},
   {path: 'agregar.res', component:AgregarResComponent, canActivate:[AuthGuard]},
+  {path: 'agregar.usu', component:AgregarUsuarioComponent, canActivate:[AuthGuard]},
   {path: '**', pathMatch: 'full', redirectTo: 'public'}
 ];
 

frontend/src/app/app.component.html

@@ -10,7 +10,10 @@
           <a class="nav-link" routerLink="public" uter>public</a>
         </li>
         <li class="nav-item" routerLinkActive="active">
-          <a class="nav-link" routerLink="agregar.res">agregar.res</a>
+          <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>

frontend/src/app/app.module.ts

@@ -8,13 +8,16 @@ import { AuthModule, AuthHttpInterceptor } from '@auth0/auth0-angular';
 import { PublicComponent } from './components/public/public.component';
 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';
 
 @NgModule({
   declarations: [
     AppComponent,
     PublicComponent,
     PrivateComponent,
-    AgregarResComponent
+    AgregarResComponent,
+    AgregarUsuarioComponent
   ],
   imports: [
     BrowserModule,
@@ -45,7 +48,8 @@ import { AgregarResComponent } from './components/agregar-res/agregar-res.compon
 
 
     HttpClientModule,
-    FormsModule
+    FormsModule,
+    NgbModule
   ],
   providers: [
     { provide: HTTP_INTERCEPTORS, useClass: AuthHttpInterceptor, multi: true }

frontend/src/app/components/agregar-res/agregar-res.component.html

@@ -1,28 +1,33 @@
+<div class="row">
+  <div class="col">
+
 <table class="table" *ngIf="restaurante" border="1">
   <thead>
   <tr >
-    <td>id</td><td>nombre</td><td>creacion</td><td>modificacion</td>
+    <th>id</th><th>nombre</th>
   </tr>
   </thead>
   <tbody>
   <tr *ngFor="let r of restaurante.data">
     <td>{{r.id}}</td>
     <td>{{r.nombre}}</td>
-    <td>{{r['created_at']}}</td>
-    <td>{{r['updated_at']}}</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>
 
 </table>
+   </div>
+</div>
 <div>
 
   <p>
     nombre:<input type="text" [(ngModel)]="agre.nombre">
   </p>
-  <p><button (click)="agregarRes()">agregar</button></p>
-  <p><button (click)="eliminarRes('6205091c-f172-424e-908c-f3c4bde39a9b')">elimiminar</button></p>
-  <p><button (click)="modificarRes('59323ad5-b0e5-45a2-8a2b-696f275ef209')">modificar</button></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>
 

frontend/src/app/components/agregar-res/agregar-res.component.ts

@@ -28,9 +28,9 @@ export class AgregarResComponent implements OnInit {
     this.restaurantServ.agregar(this.agre).subscribe(this.recuperartodos)
   }
   eliminarRes(id:any){
-    console.log(id);
-    this.restaurantServ.eliminar(id).subscribe()
-
+    if(confirm("Esta seguro de eliminar este registro?")) {
+      this.restaurantServ.eliminar(id).subscribe()
+    }
   }
   modificarRes(id:any){
     console.log(id,this.agre)

frontend/src/app/components/agregar-usuario/agregar-usuario.component.html

@@ -0,0 +1,35 @@
+<table class="table" *ngIf="usuarios" border="2">
+  <thead>
+  <tr>
+    <td>id</td><td>nombre</td><td>creacion</td><td>modificacion</td><td>roles</td>
+  </tr>
+  </thead>
+  <tbody>
+  <tr *ngFor="let r of usuarios.data">
+    <td>{{r.id}}</td>
+    <td>{{r.nombre}}</td>
+    <td>{{r['created_at']}}</td>
+    <td>{{r['updated_at']}}</td>
+    <td>{{r.roles}}</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>
+
+  <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>

frontend/src/app/components/agregar-usuario/agregar-usuario.component.ts

@@ -0,0 +1,49 @@
+import { Component, OnInit } from '@angular/core';
+import {RestaurantesService} from "../../restaurantes.service";
+
+
+@Component({
+  selector: 'app-agregar-usuario',
+  templateUrl: './agregar-usuario.component.html',
+  styleUrls: ['./agregar-usuario.component.scss']
+})
+export class AgregarUsuarioComponent implements OnInit {
+
+  usuarios: any;
+
+  agreU={
+    nombre:null,
+    email:null,
+    username:null,
+    password:null,
+    roles:['admin'],
+    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();
+  }
+
+}

frontend/src/app/components/public/public.component.html

@@ -1 +1,22 @@
-<p>public works!</p>
+<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>
+    <div class="carousel-caption">
+      <h3>First slide label</h3>
+      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+    </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>
+    <div class="carousel-caption">
+      <h3>First slide label</h3>
+      <p>fdsfdsfsdfdsfsdds.</p>
+    </div>
+  </ng-template>
+</ngb-carousel>
+
+

frontend/src/app/components/public/public.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 
+
 @Component({
   selector: 'app-public',
   templateUrl: './public.component.html',

frontend/src/app/restaurantes.service.ts

@@ -9,12 +9,13 @@ export class RestaurantesService {
 
   url='https://api.unified.restaurant/api/v1';
 
+
   constructor(private http: HttpClient) { }
 
   mostrarTodosRes(){
     return this.http.get(`${this.url}/restaurantes`);
   }
-
+   //CRUD DE RESTAURANTE
   agregar(AgreRestaurant:any){
     const headers: HttpHeaders = new HttpHeaders({
       'Content-Type': 'application/json'
@@ -31,5 +32,26 @@ 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`);
+  }
+  agregarUsu(AgregarUsuario:any){
+    const headers: HttpHeaders = new HttpHeaders({
+      'Content-Type': 'application/json'
+    });
+    return this.http.post(`${this.url}/users`, JSON.stringify(AgregarUsuario),{ headers: headers });
+  }
+  eliminarUsu(codigo:any){
+    return this.http.delete(`${this.url}/users/${codigo}`)
+  }
+  moficiarUsu(codigo:any,Usuariomodificado:any){
+    const headers: HttpHeaders = new HttpHeaders({
+      'Content-Type': 'application/json'
+    });
+    return this.http.put(`${this.url}/users/${codigo}`, JSON.stringify(Usuariomodificado), { headers: headers });
+  }
+
+
 
 }