Commit 402696548b50022be4f2c3143a35f75a5bbc66d4
Exists in
master
and in
1 other branch
Merge branch 'master' into 'master'
Master(mpuebla) See merge request !70
Showing
6 changed files
Show diff stats
src/app/components/comanda/comanda.component.html
| 1 | <div class="container-fluid p-0"> | 1 | <div class="container-fluid fade-in p-0"> |
| 2 | <div class="row m-1 fade-in disable-user-select"> | 2 | <div class="row m-1 fade-in disable-user-select"> |
| 3 | <div class="col-2 col-1-5 p-1" *ngFor="let item of itemsArray"> | 3 | <div |
| 4 | [ngClass]="{ 'swing-out-top-bck': comanda.estado === 3 }" | ||
| 5 | class="col-2 col-1-5 p-1" *ngFor="let comanda of comandas"> | ||
| 6 | |||
| 4 | <div | 7 | <div |
| 5 | class="card rounded-sm shadow-sm" | 8 | class="card-comanda fade-in d-flex align-items-end flex-column bg-danger rounded-xs shadow-sm border-0 h-100" |
| 6 | [ngClass]="{ 'green-card': false, 'red-card': false }" | 9 | [ngClass]=" |
| 7 | > | 10 | { |
| 8 | <img | 11 | 'bg-light': comanda.estado === 1, |
| 9 | class="card-img-top rounded-sm shadow" | 12 | 'bg-danger': comanda.estado === 2, |
| 10 | src="{{ apiImagenes }}/imagenes/cerealitas.jpg" | 13 | 'bg-success': comanda.estado === 3 |
| 11 | /> | 14 | }"> |
| 12 | <div class="card-body px-1 py-2"> | 15 | <img class="card-img-top rounded-xs shadow" src="{{apiImagenes}}/imagenes/cerealitas.jpg"/> |
| 13 | <p class="h6 card-title">Title</p> | 16 | <div class="row w-100 m-0 mt-2"> |
| 14 | <p class="card-text">Text</p> | 17 | <p class="col-12 px-2 mb-2 m-0 h6">Title</p> |
| 15 | <button class="btn btn-block btn-danger shadow p-1">Elaborar</button> | 18 | <p class="col-12 px-2 mb-2 m-0 h6"><small>Text</small></p> |
| 16 | <button class="btn btn-block btn-success shadow p-1"> | 19 | </div> |
| 17 | Terminado | 20 | <div class="row w-100 m-0 mb-2 mt-auto"> |
| 18 | </button> | 21 | <div |
| 19 | <div class="row mt-2 m-0"> | 22 | class="col-12 px-2" |
| 20 | <div class="col-6 p-0 pr-1"> | 23 | *ngIf="comanda.estado === 1"> |
| 21 | <button class="btn btn-block btn-secondary btn-sm shadow p-0"> | 24 | <button |
| 22 | <span class="pr-1 h7"><small>Eliminar</small></span> | 25 | class="btn btn-block btn-danger shadow" |
| 23 | <i class="fa fa-trash" aria-hidden="true"></i> | 26 | (click)="updateComanda(comanda, 2, 'En elaboracion')"> |
| 24 | </button> | 27 | Elaborar |
| 25 | </div> | 28 | </button> |
| 26 | <div class="col-6 p-0 pl-1"> | 29 | </div> |
| 27 | <button class="btn btn-block btn-light btn-sm shadow p-0"> | 30 | <div |
| 28 | <span class="pr-1 h7"><small>En espera</small></span> | 31 | class="col-12 px-2" |
| 29 | <i class="fa fa-undo text-warning" aria-hidden="true"></i> | 32 | *ngIf="comanda.estado === 2"> |
| 30 | </button> | 33 | <button |
| 31 | </div> | 34 | class="btn btn-block btn-success shadow" |
| 35 | (click)="updateComanda(comanda, 3, 'Terminado')"> | ||
| 36 | Terminado | ||
| 37 | </button> | ||
| 38 | </div> | ||
| 39 | </div> | ||
| 40 | <div | ||
| 41 | *ngIf="comanda.estado === 2" | ||
| 42 | class="row w-100 mx-0 mb-2"> | ||
| 43 | <div class="col-12 px-2"> | ||
| 44 | <button | ||
| 45 | class="btn btn-block btn-light btn-sm shadow p-0" | ||
| 46 | (click)="updateComanda(comanda, 1, 'Pagado')"> | ||
| 47 | <span class="pr-1 h6"><small>En espera</small></span> | ||
| 48 | <i class="fa fa-undo text-warning" aria-hidden="true"></i> | ||
| 49 | </button> | ||
| 32 | </div> | 50 | </div> |
| 33 | </div> | 51 | </div> |
| 34 | </div> | 52 | </div> |
| 53 | |||
| 35 | </div> | 54 | </div> |
| 36 | </div> | 55 | </div> |
| 37 | </div> | 56 | </div> |
| 38 | 57 |
src/app/components/comanda/comanda.component.scss
| 1 | @media (min-width: 1200px) { | 1 | @media (min-width: 1200px) { |
| 2 | .col-1-5 { | 2 | .col-1-5 { |
| 3 | flex: 0 0 12.5%; | 3 | flex: 0 0 12.5%; |
| 4 | max-width: 12.5%; | 4 | max-width: 12.5%; |
| 5 | position: relative; | 5 | position: relative; |
| 6 | width: 100%; | 6 | width: 100%; |
| 7 | padding-right: 15px; | 7 | padding-right: 15px; |
| 8 | padding-left: 15px; | 8 | padding-left: 15px; |
| 9 | } | 9 | } |
| 10 | } | 10 | } |
| 11 | 11 | ||
| 12 | .h7 { | 12 | .bg-danger { |
| 13 | font-size: 0.75rem; | 13 | background-color: #8c000e !important; |
| 14 | p { | ||
| 15 | color: #fff; | ||
| 16 | } | ||
| 14 | } | 17 | } |
| 15 | 18 | ||
| 16 | .red-card { | 19 | .bg-success { |
| 17 | background-color: #8c000e; | 20 | background-color: #00751b !important; |
| 18 | .card-body { | 21 | p { |
| 19 | color: #fff; | 22 | color: #fff; |
| 20 | } | 23 | } |
| 21 | } | 24 | } |
| 22 | 25 | ||
| 23 | .green-card { | 26 | .bg-light { |
| 24 | background-color: #00751B; | 27 | background-color: white !important; |
| 25 | .card-body { | 28 | p { |
| 26 | color: #fff; | 29 | color: #212529; |
| 30 | } | ||
| 31 | } | ||
| 32 | |||
| 33 | .rounded-xs { | ||
| 34 | border-radius: 0.5rem; | ||
| 35 | } | ||
| 36 | |||
| 37 | .card-comanda { | ||
| 38 | min-height: 250px; | ||
| 39 | } | ||
| 40 | |||
| 41 | .swing-out-top-bck { | ||
| 42 | -webkit-animation: swing-out-top-bck 0.45s | ||
| 43 | cubic-bezier(0.6, -0.28, 0.735, 0.045) 10s both; | ||
| 44 | animation: swing-out-top-bck 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) 10s | ||
| 45 | both; | ||
| 46 | } | ||
| 47 | |||
| 48 | @-webkit-keyframes swing-out-top-bck { | ||
| 49 | 0% { | ||
| 50 | -webkit-transform: rotateX(0deg); | ||
| 51 | transform: rotateX(0deg); | ||
| 52 | -webkit-transform-origin: top; | ||
| 53 | transform-origin: top; | ||
| 54 | opacity: 1; | ||
| 55 | } | ||
| 56 | 75% { | ||
| 57 | -webkit-transform: rotateX(-100deg); | ||
| 58 | transform: rotateX(-100deg); | ||
| 59 | -webkit-transform-origin: top; | ||
| 60 | transform-origin: top; | ||
| 61 | } | ||
| 62 | 100% { | ||
| 63 | -webkit-transform: rotateX(-100deg); | ||
| 64 | transform: rotateX(-100deg); | ||
| 65 | -webkit-transform-origin: top; | ||
| 66 | transform-origin: top; | ||
| 67 | opacity: 0; | ||
| 68 | display: none; | ||
| 69 | position: absolute; | ||
| 70 | } | ||
| 71 | } | ||
| 72 | |||
| 73 | @keyframes swing-out-top-bck { | ||
| 74 | 0% { | ||
| 75 | -webkit-transform: rotateX(0deg); | ||
| 76 | transform: rotateX(0deg); | ||
| 77 | -webkit-transform-origin: top; | ||
| 78 | transform-origin: top; | ||
| 79 | opacity: 1; | ||
| 80 | } | ||
| 81 | 75% { | ||
| 82 | -webkit-transform: rotateX(-100deg); | ||
| 83 | transform: rotateX(-100deg); | ||
| 84 | -webkit-transform-origin: top; | ||
| 85 | transform-origin: top; | ||
| 86 | } | ||
| 87 | 100% { | ||
| 88 | -webkit-transform: rotateX(-100deg); | ||
| 89 | transform: rotateX(-100deg); | ||
| 90 | -webkit-transform-origin: top; | ||
| 91 | transform-origin: top; | ||
| 92 | opacity: 0; | ||
| 93 | display: none; | ||
| 94 | position: absolute; | ||
| 27 | } | 95 | } |
| 28 | } | 96 | } |
| 29 | 97 |
src/app/components/comanda/comanda.component.ts
| 1 | import { Component, OnInit } from '@angular/core'; | 1 | import { Component, OnInit } from '@angular/core'; |
| 2 | import { appSettings } from 'src/etc/AppSettings'; | 2 | import { appSettings } from 'src/etc/AppSettings'; |
| 3 | import { ComandaService } from 'src/app/services/comanda.service'; | ||
| 4 | import { Comanda } from 'src/app/wrappers/comanda'; | ||
| 3 | 5 | ||
| 4 | @Component({ | 6 | @Component({ |
| 5 | selector: 'app-comanda', | 7 | selector: 'app-comanda', |
| 6 | templateUrl: './comanda.component.html', | 8 | templateUrl: './comanda.component.html', |
| 7 | styleUrls: ['./comanda.component.scss'] | 9 | styleUrls: ['./comanda.component.scss'] |
| 8 | }) | 10 | }) |
| 9 | export class ComandaComponent implements OnInit { | 11 | export class ComandaComponent implements OnInit { |
| 10 | 12 | ||
| 11 | private apiImagenes = appSettings.apiImagenes; | 13 | private apiImagenes = appSettings.apiImagenes; |
| 12 | private itemsArray = [{},{},{},{},{},{},{},{}] | 14 | private comandas: Comanda[] = []; |
| 13 | 15 | ||
| 14 | constructor() { } | 16 | constructor( |
| 17 | private comandaService: ComandaService | ||
| 18 | ) { } | ||
| 15 | 19 | ||
| 16 | ngOnInit() { | 20 | ngOnInit() { |
| 21 | |||
| 22 | this.comandaService.getAll() | ||
| 23 | .subscribe((res: Comanda[]) => { | ||
| 24 | |||
| 25 | this.comandas = res; | ||
| 26 | }, e => console.error(e)) | ||
| 27 | } | ||
| 28 | |||
| 29 | updateComanda(comanda: Comanda, estadoNuevo: number, observacionNueva: string) { | ||
| 30 | |||
| 31 | this.comandaService.updateComanda(comanda.id, estadoNuevo, observacionNueva) | ||
| 32 | .subscribe(res => { | ||
| 33 | |||
| 34 | if (res.data) { | ||
| 35 | comanda.estado = estadoNuevo; | ||
| 36 | comanda.observacion = observacionNueva; | ||
| 37 | } | ||
| 38 | }, e => console.error(e)) | ||
| 17 | } | 39 | } |
| 18 | 40 | ||
| 19 | } | 41 | } |
| 20 | 42 |
src/app/services/comanda.service.spec.ts
| File was created | 1 | import { TestBed } from '@angular/core/testing'; | |
| 2 | |||
| 3 | import { ComandaService } from './comanda.service'; | ||
| 4 | |||
| 5 | describe('ComandaService', () => { | ||
| 6 | beforeEach(() => TestBed.configureTestingModule({})); | ||
| 7 | |||
| 8 | it('should be created', () => { | ||
| 9 | const service: ComandaService = TestBed.get(ComandaService); | ||
| 10 | expect(service).toBeTruthy(); | ||
| 11 | }); | ||
| 12 | }); | ||
| 13 |
src/app/services/comanda.service.ts
| File was created | 1 | import { Injectable } from "@angular/core"; | |
| 2 | import { HttpClient } from "@angular/common/http"; | ||
| 3 | import { appSettings } from "src/etc/AppSettings"; | ||
| 4 | import { Observable } from "rxjs"; | ||
| 5 | import { Comanda } from '../wrappers/comanda'; | ||
| 6 | |||
| 7 | @Injectable({ | ||
| 8 | providedIn: "root" | ||
| 9 | }) | ||
| 10 | export class ComandaService { | ||
| 11 | private apiUrl: string = appSettings.apiUrl; | ||
| 12 | |||
| 13 | constructor(private http: HttpClient) { } | ||
| 14 | |||
| 15 | getAll(): Observable<any> { | ||
| 16 | |||
| 17 | return this.http.get(`${this.apiUrl}/comandas`); | ||
| 18 | } | ||
| 19 | |||
| 20 | updateComanda(id: number, estado: number, observacion: string): Observable<any> { | ||
| 21 | |||
| 22 | return this.http.get(`${this.apiUrl}/comandas/update/${id}/${estado}/${observacion}`); | ||
| 23 | } | ||
| 24 | } | ||
| 25 |
src/app/wrappers/comanda.ts
| File was created | 1 | export interface ComandaDetalle { | |
| 2 | id: number; | ||
| 3 | idcomanda: number; | ||
| 4 | codsec: number; | ||
| 5 | codart: number; | ||
| 6 | cantidad: number; | ||
| 7 | idarticulo: number; | ||
| 8 | } | ||
| 9 | |||
| 10 | export interface Comanda { | ||
| 11 | id: number; | ||
| 12 | estado: number; | ||
| 13 | observacion: string; | ||
| 14 | fechainicioelaboracion: Date; | ||
| 15 | fechafinelaboracion: Date; | ||
| 16 | detalles: ComandaDetalle[]; | ||
| 17 | } | ||
| 18 |