Commit d3c8406c744793d2e4d29928628c56147830d76a
Exists in
master
Merge branch 'master' into 'master'
Master(mpuebla) See merge request !9
Showing
9 changed files
Show diff stats
angular.json
package-lock.json
... | ... | @@ -3422,6 +3422,11 @@ |
3422 | 3422 | } |
3423 | 3423 | } |
3424 | 3424 | }, |
3425 | + "font-awesome": { | |
3426 | + "version": "4.7.0", | |
3427 | + "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz", | |
3428 | + "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM=" | |
3429 | + }, | |
3425 | 3430 | "for-in": { |
3426 | 3431 | "version": "1.0.2", |
3427 | 3432 | "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz", |
package.json
src/app/components/busqueda-productos/busqueda-productos.component.html
1 | 1 | <div class="row m-0 fade-in"> |
2 | - <div class="col-10 p-0"> | |
3 | - <!-- TOP HEADER --> | |
4 | - <app-header></app-header> | |
5 | - | |
6 | - <!-- NOMBRE DE SECCION --> | |
7 | - <div class="row m-0"> | |
8 | - <div class="col-12 p-0"> | |
9 | - <p class="h5 py-1 bg-light text-muted font-weight-light text-center"><small>Búsqueda</small></p> | |
10 | - </div> | |
2 | + <div class="col-10 p-0"> | |
3 | + <!-- TOP HEADER --> | |
4 | + <app-header></app-header> | |
5 | + | |
6 | + <!-- NOMBRE DE SECCION --> | |
7 | + <div class="row m-0"> | |
8 | + <div class="col-12 p-0"> | |
9 | + <p class="h5 py-1 bg-light text-muted text-center">Búsqueda</p> | |
11 | 10 | </div> |
12 | - | |
13 | - <div class="row m-4 d-flex align-items-center"> | |
14 | - | |
11 | + </div> | |
12 | + | |
13 | + <div class="row m-4 d-flex align-items-center"> | |
14 | + | |
15 | + <div class="col-sm-7"> | |
16 | + <!-- SEARCH INPUT --> | |
17 | + <div class="form-group search"> | |
18 | + <span class="fa fa-search form-control-lg form-control-search pl-3"></span> | |
19 | + <input | |
20 | + type="text" | |
21 | + class="form-control form-control-lg rounded-pill px-5" | |
22 | + placeholder="Búsqueda productos"> | |
23 | + </div> | |
24 | + | |
25 | + <div class="row pr-3 vh-50 overflow-scroll"> | |
26 | + <div | |
27 | + class="col-4 p-2" | |
28 | + *ngFor="let producto of productos"> | |
29 | + <div class="card card-effect bg-white rounded-sm shadow border-0"> | |
30 | + <img src="../../../assets/img/descarga.jpg" class="card-img-top w-75 m-auto"> | |
31 | + <div class="card-body"> | |
32 | + <p class="h5 text-left m-0">{{producto.variable}}</p> | |
33 | + <div class="text-left"> | |
34 | + <p class="m-0"><small>ASDASDSADASDSA</small></p> | |
35 | + <p class="m-0"><small>COD. 1222</small></p> | |
36 | + </div> | |
37 | + </div> | |
38 | + </div> | |
39 | + | |
40 | + </div> | |
41 | + </div> | |
42 | + | |
15 | 43 | </div> |
16 | - | |
17 | 44 | </div> |
18 | - | |
19 | - <!-- SIDEBAR --> | |
20 | - <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar> | |
21 | - </div> | |
22 | 45 | \ No newline at end of file |
46 | + | |
47 | + </div> | |
48 | + | |
49 | + <!-- SIDEBAR --> | |
50 | + <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar> | |
51 | +</div> | |
23 | 52 | \ No newline at end of file |
src/app/components/busqueda-productos/busqueda-productos.component.scss
src/app/components/busqueda-productos/busqueda-productos.component.ts
1 | 1 | import { Component, OnInit } from '@angular/core'; |
2 | +import { ProductoService } from 'src/app/services/producto.service'; | |
3 | +import { Producto } from 'src/app/wrappers/producto'; | |
2 | 4 | |
3 | 5 | @Component({ |
4 | 6 | selector: 'app-busqueda-productos', |
... | ... | @@ -7,9 +9,20 @@ import { Component, OnInit } from '@angular/core'; |
7 | 9 | }) |
8 | 10 | export class BusquedaProductosComponent implements OnInit { |
9 | 11 | |
10 | - constructor() { } | |
12 | + productos: Producto[] = []; | |
13 | + | |
14 | + constructor(private productoService: ProductoService) { } | |
11 | 15 | |
12 | 16 | ngOnInit() { |
17 | + | |
18 | + this.productoService.getAll() | |
19 | + .subscribe((data: Producto[]) => { | |
20 | + | |
21 | + this.productos = data; | |
22 | + }, (error) => { | |
23 | + | |
24 | + console.error(error); | |
25 | + }); | |
13 | 26 | } |
14 | 27 | |
15 | 28 | } |
src/app/components/inicio/inicio.component.html
... | ... | @@ -6,7 +6,7 @@ |
6 | 6 | <!-- NOMBRE DE SECCION --> |
7 | 7 | <div class="row m-0"> |
8 | 8 | <div class="col-12 p-0"> |
9 | - <p class="h5 py-1 bg-light text-muted font-weight-light text-center"><small>Inicio</small></p> | |
9 | + <p class="h5 py-1 bg-light text-muted text-center">Inicio</p> | |
10 | 10 | </div> |
11 | 11 | </div> |
12 | 12 | |
... | ... | @@ -15,7 +15,7 @@ |
15 | 15 | |
16 | 16 | <!-- PROMOCIONES --> |
17 | 17 | <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto"> |
18 | - <div class="card-body p-4"> | |
18 | + <div class="card-body text-left p-4"> | |
19 | 19 | <p class="h3 card-title">Promociones</p> |
20 | 20 | <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p> |
21 | 21 | </div> |
... | ... | @@ -41,7 +41,7 @@ |
41 | 41 | |
42 | 42 | <!-- ORDENAR --> |
43 | 43 | <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> |
44 | - <div class="card-body p-4"> | |
44 | + <div class="card-body text-left p-4"> | |
45 | 45 | <p class="h3 card-title">Ordenar</p> |
46 | 46 | <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p> |
47 | 47 | </div> |
... | ... | @@ -54,7 +54,7 @@ |
54 | 54 | |
55 | 55 | <!-- CARGAR PRODUCTOS --> |
56 | 56 | <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto"> |
57 | - <div class="card-body p-4"> | |
57 | + <div class="card-body text-left p-4"> | |
58 | 58 | <p class="h3 card-title">Cargar Productos</p> |
59 | 59 | <p class="h5 card-text text-muted font-weight-light"> |
60 | 60 | Coloque el código de<br> |
... | ... | @@ -63,7 +63,7 @@ |
63 | 63 | </div> |
64 | 64 | <div class="card bg-white border-0 w-75 mx-auto mb-4"> |
65 | 65 | <img class="card-img-top d-block w-50 mx-auto rounded" src="../../assets/img/descarga.jpg"> |
66 | - <div class="card-body p-2"> | |
66 | + <div class="card-body text-left p-2"> | |
67 | 67 | <p class="m-0 card-text text-muted">Galletas Oreo x117 grs Chocolate.</p> |
68 | 68 | <p class="m-0 card-text text-muted">COD. 12121222</p> |
69 | 69 | </div> |
... | ... | @@ -74,7 +74,7 @@ |
74 | 74 | <div |
75 | 75 | (click)="goPage('busqueda-productos')" |
76 | 76 | class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> |
77 | - <div class="card-body p-4"> | |
77 | + <div class="card-body text-left p-4"> | |
78 | 78 | <p class="h3 card-title">Buscar Productos</p> |
79 | 79 | <p class="h5 card-text text-muted font-weight-light"> |
80 | 80 | Busque aquí los productos<br> |
src/app/wrappers/producto.ts
... | ... | @@ -0,0 +1,90 @@ |
1 | +export interface Producto { | |
2 | + CodSec: number; | |
3 | + CodArt: number; | |
4 | + DetArt: string; | |
5 | + CodRub: number; | |
6 | + Costo: number; | |
7 | + PreNet: number; | |
8 | + ImpInt: number; | |
9 | + UniVen: number; | |
10 | + FecCos: Date; | |
11 | + UltAct: Date; | |
12 | + CodPro: number; | |
13 | + ExiDep: number; | |
14 | + ExiVta: number; | |
15 | + MinDep: number; | |
16 | + MaxDep: number; | |
17 | + MinPVE: number; | |
18 | + MaxPVE: number; | |
19 | + ENTTur: number; | |
20 | + SINTur: number; | |
21 | + SALTur: number; | |
22 | + IvaSN: boolean; | |
23 | + DepSN: boolean; | |
24 | + RubMay: number; | |
25 | + PreVen: number; | |
26 | + IvaCO: number; | |
27 | + TIP: string; | |
28 | + IMPIVA: number; | |
29 | + ENTADM: number; | |
30 | + SALADM: number; | |
31 | + CODIIN: number; | |
32 | + PRO: boolean; | |
33 | + FPP: boolean; | |
34 | + ESS: boolean; | |
35 | + FID: Date; | |
36 | + NID: number; | |
37 | + FIV: Date; | |
38 | + NIV: number; | |
39 | + COO: string; | |
40 | + CAG: string; | |
41 | + CAP: number; | |
42 | + UTL: number; | |
43 | + NHA: boolean; | |
44 | + PID: boolean; | |
45 | + PRV: number; | |
46 | + PRD: number; | |
47 | + ImpInt2: number; | |
48 | + E_HD: string; | |
49 | + C_HD: string; | |
50 | + CLA: number; | |
51 | + UNICAP: number; | |
52 | + ELBPRO: string; | |
53 | + PPP: number; | |
54 | + ALI: number; | |
55 | + BAL_TIPO: string; | |
56 | + PER_MAY: boolean; | |
57 | + ES_MAY: boolean; | |
58 | + CLA_MAY: number; | |
59 | + PME_CMP: string; | |
60 | + USA_BAL: boolean; | |
61 | + DET_LAR: string; | |
62 | + ROTULO: string; | |
63 | + REC_MANUAL: boolean; | |
64 | + E_HD1: string; | |
65 | + C_HD1: string; | |
66 | + ImpInt3: number; | |
67 | + FUA_MAE_YPF: Date; | |
68 | + CPQ: number; | |
69 | + EPQ: string; | |
70 | + BPQ: number; | |
71 | + PUPQ: number; | |
72 | + CORVTO: boolean; | |
73 | + CORVTO_COSTO: number; | |
74 | + UTLFR: number; | |
75 | + FAMILIA: number; | |
76 | + ES_LUB: boolean; | |
77 | + ES_FERT: boolean; | |
78 | + AutoFac: boolean; | |
79 | + LitrosPCD: number; | |
80 | + LisPCD: number; | |
81 | + ImpLey23966: boolean; | |
82 | + es_bio: boolean; | |
83 | + ExpArbaRev: boolean; | |
84 | + ES_AGROQ: boolean; | |
85 | + ES_PLAST: boolean; | |
86 | + es_bio_por: string; | |
87 | + IMP_IMP_INT: boolean; | |
88 | + id: number; | |
89 | + nombreImagen?: any; | |
90 | +} |
src/styles.scss
1 | -@import './assets/scss/animation.scss'; | |
1 | +@import "./assets/scss/animation.scss"; | |
2 | + | |
3 | +html, body { | |
4 | + background-color: rgb(245, 245, 245); | |
5 | + overflow: hidden; | |
6 | +} | |
2 | 7 | |
3 | 8 | .blur { |
4 | 9 | filter: blur(10px); |
... | ... | @@ -12,21 +17,51 @@ |
12 | 17 | user-select: none; |
13 | 18 | } |
14 | 19 | |
15 | -.blue-gradient{ | |
16 | - background: linear-gradient(0deg, rgb(20,56,68),rgb(252, 252, 252)); | |
20 | +.blue-gradient { | |
21 | + background: linear-gradient(0deg, rgb(20, 56, 68), rgb(252, 252, 252)); | |
17 | 22 | } |
18 | 23 | |
19 | 24 | .rounded { |
20 | 25 | border-radius: 1.5rem !important; |
21 | 26 | } |
22 | 27 | |
28 | +.rounded-sm { | |
29 | + border-radius: 0.75rem !important; | |
30 | +} | |
31 | + | |
23 | 32 | .card-effect { |
24 | - &:active{ | |
33 | + &:active, | |
34 | + img { | |
25 | 35 | background-color: #c9c9c9b3 !important; |
26 | 36 | transition: background-color 0.5s; |
27 | 37 | } |
28 | - &:focus{ | |
38 | + &:focus, | |
39 | + img { | |
29 | 40 | background-color: #c9c9c9b3 !important; |
30 | 41 | transition: background-color 0.5s; |
31 | 42 | } |
32 | 43 | } |
44 | + | |
45 | +.overflow-scroll { | |
46 | + overflow-y: scroll !important; | |
47 | + overflow-x: hidden !important; | |
48 | + &::-webkit-scrollbar { | |
49 | + width: 0.5em; | |
50 | + } | |
51 | + &::-webkit-scrollbar-track { | |
52 | + border-radius: 10px; | |
53 | + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4); | |
54 | + } | |
55 | + &::-webkit-scrollbar-thumb { | |
56 | + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7); | |
57 | + outline: 1px solid slategrey; | |
58 | + border-radius: 10px; | |
59 | + height: 12px; | |
60 | + &:active{ | |
61 | + -webkit-box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9); | |
62 | + } | |
63 | + } | |
64 | + &::-webkit-scrollbar-corner { | |
65 | + border-radius: 10px; | |
66 | + } | |
67 | +} | |
33 | 68 | \ No newline at end of file |