Marcelo Puebla / autoservicio-axion

Download as
Browse Code »

Commit e6c4e964d47a77178eb3dfe3e8a47febaf40c4c6

Authored by Benjamin Rodriguez
2 parents fde70546d7 db7db7b371
Exists in develop

Merge branch 'develop' of git.focasoftware.com:angular/autoservicio-axion

Showing 6 changed files   Show diff stats
src/app/modules/info-formas-pago/info-formas-pago.component.html
Diff comments   View file @ e6c4e96
1 <div class="h-92 bg-white fade-in-left"> 1 <div class="h-92 bg-white fade-in-left">
2 <div class="row mx-0 h-15"> 2 <div class="row mx-0 h-15">
3 <div class="col-12 px-0 h-80 my-auto"> 3 <div class="col-12 px-0 h-80 my-auto">
4 <img 4 <img
5 draggable="false" 5 draggable="false"
6 ondragstart="return false;" 6 ondragstart="return false;"
7 (contextmenu)="false" 7 (contextmenu)="false"
8 class="d-block mx-auto h-100" 8 class="d-block mx-auto h-100"
9 src="assets/img/logo-spot.svg"> 9 src="assets/img/logo-spot.svg">
10 </div> 10 </div>
11 </div> 11 </div>
12 <div class="h-85"> 12 <div class="h-85">
13 <div class="row h-auto mt-6 mx-0 justify-content-center text-center"> 13 <div class="row h-auto mt-6 mx-0 justify-content-center text-center">
14 <div 14 <div
15 [routerLink]="['/opcion-pedido']" 15 [routerLink]="['/opcion-pedido']"
16 class="col-7 col-xl-4 p-5 m-5 h-auto align-self-end border border-secondary rounded"> 16 class="col-11 col-sm-10 col-md-7 col-lg-4 p-5 m-5 h-auto
17 btn-effect align-self-end border border-secondary rounded">
17 <img 18 <img
18 draggable="false" 19 draggable="false"
19 ondragstart="return false;" 20 ondragstart="return false;"
20 (contextmenu)="false" 21 (contextmenu)="false"
21 class="img-in-top px-4 bg-white" 22 class="img-in-top px-4 bg-white"
22 src="assets/img/icono-tarjetas.svg"> 23 src="assets/img/icono-tarjetas.svg">
23 <p class="h6 m-0">ESTA TERMINAL OPERA CON</p> 24 <p class="h6 m-0">ESTA TERMINAL OPERA CON</p>
24 <p class="h2 mb-3 text-secondary"> 25 <p class="h2 mb-3 text-secondary">
25 tarjetas y 26 tarjetas y
26 <img 27 <img
27 draggable="false" 28 draggable="false"
28 ondragstart="return false;" 29 ondragstart="return false;"
29 (contextmenu)="false" 30 (contextmenu)="false"
30 class="icon-150" 31 class="icon-150"
31 src="assets/img/icono-mercado-pago.svg"> 32 src="assets/img/icono-mercado-pago.svg">
32 </p> 33 </p>
33 <div class="d-inline-block py-1 btn-effect bg-secondary badge-pill text-white"> 34 <div class="d-inline-block py-1 btn-effect bg-secondary badge-pill text-white">
34 CONTINUAR 35 CONTINUAR
35 <img 36 <img
36 draggable="false" 37 draggable="false"
37 ondragstart="return false;" 38 ondragstart="return false;"
38 (contextmenu)="false" 39 (contextmenu)="false"
39 class="icon-30" 40 class="icon-30"
40 src="assets/img/ir.svg"> 41 src="assets/img/ir.svg">
41 </div> 42 </div>
42 </div> 43 </div>
43 <div class="col-7 col-lg-4 p-5 m-5 h-auto align-self-center border 44 <div class="col-11 col-sm-10 col-md-7 col-lg-4 p-5 m-5 h-auto align-self-center
44 border-primary rounded reduce-card-2"> 45 btn-effect border border-primary rounded reduce-card-2">
45 <img 46 <img
46 draggable="false" 47 draggable="false"
47 ondragstart="return false;" 48 ondragstart="return false;"
48 (contextmenu)="false" 49 (contextmenu)="false"
49 class="img-in-top px-4 bg-white" 50 class="img-in-top px-4 bg-white"
50 src="assets/img/icono-efectivo.svg"> 51 src="assets/img/icono-efectivo.svg">
51 <p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p> 52 <p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p>
52 <p class="h2 m-0 text-primary">haga su pedido<br>en caja</p> 53 <p class="h2 m-0 text-primary">haga su pedido<br>en caja</p>
53 </div> 54 </div>
54 </div> 55 </div>
55 </div> 56 </div>
56 </div> 57 </div>
57 58
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ e6c4e96
1 <div class="h-92 bg-white fade-in-left"> 1 <div class="h-92 bg-white fade-in-left">
2 <!-- PUBLICIDADES --> 2 <!-- PUBLICIDADES -->
3 <app-header-publicidad></app-header-publicidad> 3 <app-header-publicidad></app-header-publicidad>
4 4
5 <div class="row mx-0 h-80 align-items-end"> 5 <div class="row mx-0 h-80 align-items-end">
6 <!-- CABECERA --> 6 <!-- CABECERA -->
7 <div class="row w-100 mx-3 h-auto border border-primary rounded-sm"> 7 <div class="row w-100 mx-3 h-auto border border-primary rounded-sm">
8 <div class="col-12 p-2 align-self-center"> 8 <div class="col-12 p-2 align-self-center">
9 <div class="px-3"> 9 <div class="px-3">
10 <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p> 10 <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>
11 </div> 11 </div>
12 </div> 12 </div>
13 </div> 13 </div>
14 <!-- CUERPO --> 14 <!-- CUERPO -->
15 <div class="row w-100 mr-4 h-50 h-md-70" id="content"> 15 <div class="row w-100 mr-4 h-50 h-md-70" id="content">
16 <div class="col-12 h-100 px-0 py-3"> 16 <div class="col-12 h-100 px-0 py-3">
17 <div class="row mx-0 h-100"> 17 <div class="row mx-0 h-100">
18 <!-- FILTRO CATEGORIAS --> 18 <!-- FILTRO CATEGORIAS -->
19 <div class="col-5 col-sm-3 col-xl-2 h-100"> 19 <div class="col-5 col-sm-3 col-xl-2 h-100">
20 <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p> 20 <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
21 <div class="row mx-0 h-94 justify-content-center align-items-center"> 21 <div class="row mx-0 h-94 justify-content-center align-items-center">
22 <div class="col-auto btn-effect h-5 cat-btn"> 22 <div class="col-auto btn-effect h-5 cat-btn">
23 <img 23 <img
24 draggable="false" 24 draggable="false"
25 ondragstart="return false;" 25 ondragstart="return false;"
26 (contextmenu)="false" 26 (contextmenu)="false"
27 class="h-100 d-block mx-auto rotate-90-neg" 27 class="h-100 d-block mx-auto rotate-90-neg"
28 src="assets/img/ir-color.svg" 28 src="assets/img/ir-color.svg"
29 (mousedown)="scrollY(templateCategorias, -100)" 29 (mousedown)="scrollY(templateCategorias, -100)"
30 (mouseup)="mouseup()" 30 (mouseup)="mouseup()"
31 (mouseleave)="mouseup()"> 31 (mouseleave)="mouseup()">
32 </div> 32 </div>
33 <!-- CATEGORIAS --> 33 <!-- CATEGORIAS -->
34 <div 34 <div
35 #templateCategorias 35 #templateCategorias
36 class="col-12 px-0 box-categorias border border-primary py-1 36 class="col-12 px-0 box-categorias border border-primary py-1
37 border-left-0 rounded-right scroll-y cat-box" 37 border-left-0 rounded-right scroll-y cat-box"
38 (scroll)="scrollEvent($event)"> 38 (scroll)="scrollEvent($event)">
39 <div 39 <div
40 class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content" 40 class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content"
41 [ngClass]="{ 'active rounded-sm shadow': allActive, 'border-bottom-effect': !allActive, 41 [ngClass]="{ 'active rounded-sm shadow': allActive, 'border-bottom-effect': !allActive,
42 'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }" 42 'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }"
43 (click)="selectCategoria(-1, 0)"> 43 (click)="selectCategoria(-1, 0)">
44 <img 44 <img
45 draggable="false" 45 draggable="false"
46 ondragstart="return false;" 46 ondragstart="return false;"
47 (contextmenu)="false" 47 (contextmenu)="false"
48 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle" 48 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
49 src="assets/img/logo-spot.svg"> 49 src="assets/img/logo-spot.svg">
50 <small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">Todos</small> 50 <small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">Todos</small>
51 </div> 51 </div>
52 <div 52 <div
53 class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content" 53 class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content"
54 [ngClass]="{ 'active rounded-sm shadow': categoria.selected, 'border-bottom-effect': !categoria.selected, 54 [ngClass]="{ 'active rounded-sm shadow': categoria.selected, 'border-bottom-effect': !categoria.selected,
55 'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }" 55 'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }"
56 (click)="selectCategoria(i, categoria.id)" 56 (click)="selectCategoria(i, categoria.id)"
57 *ngFor="let categoria of categorias; let i = index;"> 57 *ngFor="let categoria of categorias; let i = index;">
58 <img 58 <img
59 draggable="false" 59 draggable="false"
60 ondragstart="return false;" 60 ondragstart="return false;"
61 (contextmenu)="false" 61 (contextmenu)="false"
62 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle img-categoria" 62 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle img-categoria"
63 [ngClass]="{'media-pantalla' : boxCarrito.classList.contains('media-pantalla')}" 63 [ngClass]="{'media-pantalla' : boxCarrito.classList.contains('media-pantalla')}"
64 src="{{urlImagenes}}{{categoria.path_imagen}}" 64 src="{{urlImagenes}}{{categoria.path_imagen}}"
65 onerror="this.src='assets/img/image-not-found.jpg'"> 65 onerror="this.src='assets/img/image-not-found.jpg'">
66 <small class="col-12 px-1 my-1 h-100 h-md-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small> 66 <small class="col-12 px-1 my-1 h-100 h-md-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
67 </div> 67 </div>
68 </div> 68 </div>
69 <div class="col-auto btn-effect h-5 cat-btn"> 69 <div class="col-auto btn-effect h-5 cat-btn">
70 <img 70 <img
71 draggable="false" 71 draggable="false"
72 ondragstart="return false;" 72 ondragstart="return false;"
73 (contextmenu)="false" 73 (contextmenu)="false"
74 class="h-100 d-block mx-auto rotate-90" 74 class="h-100 d-block mx-auto rotate-90"
75 src="assets/img/ir-color.svg" 75 src="assets/img/ir-color.svg"
76 (mousedown)="scrollY(templateCategorias, 100)" 76 (mousedown)="scrollY(templateCategorias, 100)"
77 (mouseup)="mouseup()" 77 (mouseup)="mouseup()"
78 (mouseleave)="mouseup()"> 78 (mouseleave)="mouseup()">
79 </div> 79 </div>
80 </div> 80 </div>
81 </div> 81 </div>
82 <!-- LISTA DE ARTICULOS --> 82 <!-- LISTA DE ARTICULOS -->
83 <div 83 <div
84 class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible" 84 class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible"
85 (scroll)="scrollEvent($event)"> 85 (scroll)="scrollEvent($event)">
86 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6"> 86 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
87 <!-- ARTICULO --> 87 <!-- ARTICULO -->
88 <div 88 <div
89 class="col px-2 my-1 my-md-3 h-auto" 89 class="col px-2 my-1 my-md-3 h-auto"
90 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;"> 90 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
91 <div 91 <div
92 class="swing-in-top-fwd btn-effect card h-auto" 92 class="swing-in-top-fwd btn-effect card h-auto"
93 (click)="selectArticulo(articulo)"> 93 (click)="selectArticulo(articulo)">
94 <img 94 <img
95 draggable="false" 95 draggable="false"
96 ondragstart="return false;" 96 ondragstart="return false;"
97 (contextmenu)="false" 97 (contextmenu)="false"
98 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 98 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
99 onerror="this.src='assets/img/image-not-found.jpg'" 99 onerror="this.src='assets/img/image-not-found.jpg'"
100 class="card-img-top h-30 h-md-55 rounded-sm"> 100 class="card-img-top h-30 h-md-55 rounded-sm">
101 <div class="row mx-0 py-1 h-auto justify-content-center"> 101 <div class="row mx-0 py-1 h-auto justify-content-center">
102 <p 102 <p
103 [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}" 103 [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}"
104 class="col-12 px-1 h6 h-auto text-center min-h-60"> 104 class="col-12 px-1 h6 h-auto text-center min-h-60">
105 {{articulo.DetArt.toUpperCase()}} 105 {{articulo.DetArt.toUpperCase()}}
106 </p> 106 </p>
107 <div class="col-12 px-1 align-self-end h-auto"> 107 <div class="col-12 px-1 align-self-end h-auto">
108 <div 108 <div
109 [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}" 109 [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}"
110 class="row mx-0 justify-content-between badge-pill"> 110 class="row mx-0 justify-content-between badge-pill">
111 <div class="col px-0 align-self-center text-white text-right"> 111 <div class="col px-0 align-self-center text-white text-right">
112 {{articulo.PreVen | currency}} 112 {{articulo.PreVen | currency}}
113 </div> 113 </div>
114 <div class="col-5 px-0"> 114 <div class="col-5 px-0">
115 <img 115 <img
116 draggable="false" 116 draggable="false"
117 ondragstart="return false;" 117 ondragstart="return false;"
118 (contextmenu)="false" 118 (contextmenu)="false"
119 class="d-block ml-auto py-1 icon-30" 119 class="d-block ml-auto py-1 icon-30"
120 src="assets/img/ir.svg"> 120 src="assets/img/ir.svg">
121 </div> 121 </div>
122 </div> 122 </div>
123 </div> 123 </div>
124 </div> 124 </div>
125 </div> 125 </div>
126 </div> 126 </div>
127 </div> 127 </div>
128 <!-- BOTON VER MAS --> 128 <!-- BOTON VER MAS -->
129 <div class="row mx-0"> 129 <div class="row mx-0">
130 <div 130 <div
131 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length" 131 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
132 class="col-12 px-0 mb-2"> 132 class="col-12 px-0 mb-2">
133 <button 133 <button
134 (click)="increaseShow()" 134 (click)="increaseShow()"
135 class="btn btn-block btn-outline-primary"> 135 class="btn btn-block btn-outline-primary">
136 Ver Más 136 Ver Más
137 </button> 137 </button>
138 </div> 138 </div>
139 </div> 139 </div>
140 </div> 140 </div>
141 </div> 141 </div>
142 </div> 142 </div>
143 </div> 143 </div>
144 <!-- FOOTER CARRITO DE COMPRAS --> 144 <!-- FOOTER CARRITO DE COMPRAS -->
145 <div class="row w-90 mx-auto h-auto justify-content-center"> 145 <div class="row w-90 mx-auto h-auto justify-content-center">
146 <div class="h-75 px-0 border border-primary rounded" #boxCarrito 146 <div class="h-75 px-0 border border-primary rounded" #boxCarrito
147 [ngClass]="boxCarrito.classList.contains('media-pantalla') 147 [ngClass]="boxCarrito.classList.contains('media-pantalla')
148 ? 'col-8' : 'col-12'" id="boxCarrito"> 148 ? 'col-8' : 'col-12'" id="boxCarrito">
149 <!-- CABECERA --> 149 <!-- CABECERA -->
150 <div class="row mx-0 h-15 border-bottom border-primary"> 150 <div class="row mx-0 h-15 border-bottom border-primary">
151 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p> 151 <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
152 </div> 152 </div>
153 <!-- CUERPO --> 153 <!-- CUERPO -->
154 <div class="row h-85 mx-0 justify-content-around"> 154 <div class="row h-85 mx-0 justify-content-around">
155 <!-- BOTON SCROLL IZQUIERDA --> 155 <!-- BOTON SCROLL IZQUIERDA -->
156 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 156 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
157 <img 157 <img
158 draggable="false" 158 draggable="false"
159 ondragstart="return false;" 159 ondragstart="return false;"
160 (contextmenu)="false" 160 (contextmenu)="false"
161 class="icon-30 rotate-180-neg" 161 class="icon-30 rotate-180-neg"
162 src="assets/img/ir-fondo-color.svg" 162 src="assets/img/ir-fondo-color.svg"
163 (mousedown)="scrollX(templateCarrito, -100)" 163 (mousedown)="scrollX(templateCarrito, -100)"
164 (mouseup)="mouseup()" 164 (mouseup)="mouseup()"
165 (mouseleave)="mouseup()"> 165 (mouseleave)="mouseup()">
166 </div> 166 </div>
167 <!-- CARRITO --> 167 <!-- CARRITO -->
168 <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100"> 168 <div class="col-6 col-sm-8 col-lg-10 h-100">
169 <div 169 <div
170 #templateCarrito 170 #templateCarrito
171 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x" 171 class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"
172 (scroll)="scrollEvent($event)"> 172 (scroll)="scrollEvent($event)">
173 <!-- MENSAJE DE ADVERTENCIA --> 173 <!-- MENSAJE DE ADVERTENCIA -->
174 <div *ngIf="!articuloService.carrito.length" class="col h-100"> 174 <div *ngIf="!articuloService.carrito.length" class="col h-100">
175 <p class="text-center py-5">No hay articulos en el carrito</p> 175 <p class="text-center py-5">No hay articulos en el carrito</p>
176 </div> 176 </div>
177 <!-- ARTICULOS --> 177 <!-- ARTICULOS -->
178 <div 178 <div
179 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary" 179 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
180 *ngFor="let articulo of articuloService.carrito; let i = index;"> 180 *ngFor="let articulo of articuloService.carrito; let i = index;">
181 <div class="swing-in-top-fwd"> 181 <div class="swing-in-top-fwd">
182 <img 182 <img
183 class="btn-effect icon-20 position-absolute right-0" 183 class="btn-effect icon-20 position-absolute right-0"
184 src="assets/img/icono-cancelar-color.svg" 184 src="assets/img/icono-cancelar-color.svg"
185 (click)="deleteArticulo(i)"> 185 (click)="deleteArticulo(i)">
186 <img 186 <img
187 draggable="false" 187 draggable="false"
188 ondragstart="return false;" 188 ondragstart="return false;"
189 (contextmenu)="false" 189 (contextmenu)="false"
190 class="d-block img-fluid p-2 mx-auto rounded" 190 class="d-block img-fluid p-2 mx-auto rounded"
191 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}" 191 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
192 onerror="this.src='assets/img/image-not-found.jpg'"> 192 onerror="this.src='assets/img/image-not-found.jpg'">
193 <p class="d-block mt-auto text-center text-primary text-truncate"> 193 <p class="d-block mt-auto text-center text-primary text-truncate">
194 <small>{{articulo.DetArt}}</small> 194 <small>{{articulo.DetArt}}</small>
195 </p> 195 </p>
196 </div> 196 </div>
197 </div> 197 </div>
198 </div> 198 </div>
199 </div> 199 </div>
200 <!-- BOTON SCROLL DERECHA --> 200 <!-- BOTON SCROLL DERECHA -->
201 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> 201 <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
202 <img 202 <img
203 draggable="false" 203 draggable="false"
204 ondragstart="return false;" 204 ondragstart="return false;"
205 (contextmenu)="false" 205 (contextmenu)="false"
206 class="icon-30" 206 class="icon-30"
207 src="assets/img/ir-fondo-color.svg" 207 src="assets/img/ir-fondo-color.svg"
208 (mousedown)="scrollX(templateCarrito, 100)" 208 (mousedown)="scrollX(templateCarrito, 100)"
209 (mouseup)="mouseup()" 209 (mouseup)="mouseup()"
210 (mouseleave)="mouseup()"> 210 (mouseleave)="mouseup()">
211 </div> 211 </div>
212 </div> 212 </div>
213 </div> 213 </div>
214 <!-- TOTAL--> 214 <!-- TOTAL-->
215 <div 215 <div
216 class="col-auto mt-2 ml-auto h-20"> 216 class="col-auto mt-2 ml-auto h-20">
217 <div class="row mx-0"> 217 <div class="row mx-0">
218 <div class="col-auto align-self-center text-primary">TOTAL</div> 218 <div class="col-auto align-self-center text-primary">TOTAL</div>
219 <div class="col-auto bg-primary badge-pill"> 219 <div class="col-auto bg-primary badge-pill">
220 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p> 220 <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
221 </div> 221 </div>
222 </div> 222 </div>
223 </div> 223 </div>
224 224
225 <!-- VER CARRITO --> 225 <!-- VER CARRITO -->
226 <div 226 <div
227 class="col-auto px-0 mt-2 h-20" 227 class="col-auto px-0 mt-2 h-20"
228 *ngIf="articuloService.carrito.length" 228 *ngIf="articuloService.carrito.length"
229 [ngClass]="{'ml-auto pb-3' : boxCarrito.classList.contains('media-pantalla')}"> 229 [ngClass]="{'ml-auto pb-3' : boxCarrito.classList.contains('media-pantalla')}">
230 <div 230 <div
231 class="btn-effect col-auto px-0 align-self-center bg-white" 231 class="btn-effect col-auto px-0 align-self-center bg-white"
232 [routerLink]="['/carrito']"> 232 [routerLink]="['/carrito']">
233 <div class="row mx-0 bg-light"> 233 <div class="row mx-0 bg-light">
234 <div class="col-auto p-0 bg-primary"> 234 <div class="col-auto p-0 bg-primary">
235 <img 235 <img
236 draggable="false" 236 draggable="false"
237 ondragstart="return false;" 237 ondragstart="return false;"
238 (contextmenu)="false" 238 (contextmenu)="false"
239 class="p-2 icon-40" 239 class="p-2 icon-40"
240 src="assets/img/carrito.svg"> 240 src="assets/img/carrito.svg">
241 </div> 241 </div>
242 <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div> 242 <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div>
243 </div> 243 </div>
244 </div> 244 </div>
245 </div> 245 </div>
246 246
247 </div> 247 </div>
248 </div> 248 </div>
249 249
250 </div> 250 </div>
251 251
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
Diff comments   View file @ e6c4e96
1 import { Component, OnInit, OnDestroy, HostListener } from '@angular/core'; 1 import { Component, OnInit, OnDestroy, HostListener } from '@angular/core';
2 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal'; 2 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
3 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 3 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
4 import { IArticulo } from 'src/app/interfaces/IArticulo'; 4 import { IArticulo } from 'src/app/interfaces/IArticulo';
5 import { APP_SETTINGS } from 'src/etc/AppSettings'; 5 import { APP_SETTINGS } from 'src/etc/AppSettings';
6 import { ICategoria } from 'src/app/interfaces/ICategoria'; 6 import { ICategoria } from 'src/app/interfaces/ICategoria';
7 import { ISinonimo } from 'src/app/interfaces/ISinonimo'; 7 import { ISinonimo } from 'src/app/interfaces/ISinonimo';
8 import { CategoriaService } from 'src/app/services/categoria/categoria.service'; 8 import { CategoriaService } from 'src/app/services/categoria/categoria.service';
9 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component'; 9 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
10 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service'; 10 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
11 import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service'; 11 import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service';
12 import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component'; 12 import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component';
13 13
14 @Component({ 14 @Component({
15 selector: 'app-seleccion-articulos', 15 selector: 'app-seleccion-articulos',
16 templateUrl: './seleccion-articulos.component.html', 16 templateUrl: './seleccion-articulos.component.html',
17 styleUrls: ['./seleccion-articulos.component.scss'] 17 styleUrls: ['./seleccion-articulos.component.scss']
18 }) 18 })
19 export class SeleccionArticulosComponent implements OnInit, OnDestroy { 19 export class SeleccionArticulosComponent implements OnInit, OnDestroy {
20 showSpinner = true; 20 showSpinner = true;
21 timeoutHandler: any; 21 timeoutHandler: any;
22 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; 22 urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
23 articulos: IArticulo[] = []; 23 articulos: IArticulo[] = [];
24 auxArticulos: IArticulo[] = []; 24 auxArticulos: IArticulo[] = [];
25 showQuantity = 100; 25 showQuantity = 100;
26 queMostrar = 'todos'; 26 queMostrar = 'todos';
27 categoriaActive = null; 27 categoriaActive = null;
28 categorias: ICategoria[] = []; 28 categorias: ICategoria[] = [];
29 searchTerm = ''; 29 searchTerm = '';
30 ordenandoByVendidos = true; 30 ordenandoByVendidos = true;
31 allActive = true; 31 allActive = true;
32 modalRef: BsModalRef; 32 modalRef: BsModalRef;
33 total = 0; 33 total = 0;
34 34
35 constructor( 35 constructor(
36 public articuloService: ArticuloService, 36 public articuloService: ArticuloService,
37 private categoriaService: CategoriaService, 37 private categoriaService: CategoriaService,
38 private sinonimoService: SinonimoService, 38 private sinonimoService: SinonimoService,
39 private modalService: BsModalService, 39 private modalService: BsModalService,
40 private inactiveScreen: InactiveScreenService, 40 private inactiveScreen: InactiveScreenService,
41 ) { } 41 ) { }
42 42
43 ngOnInit() { 43 ngOnInit() {
44 this.getCategorias(); 44 this.getCategorias();
45 this.mediaPantalla(); 45 this.mediaPantalla();
46 } 46 }
47 47
48 ngOnDestroy() { 48 ngOnDestroy() {
49 if (this.modalRef) this.modalRef.hide(); 49 for (let i = 1; i <= this.modalService.getModalsCount(); i++) {
50 this.modalService.hide(i);
51 }
50 } 52 }
51 53
52 getCategorias() { 54 getCategorias() {
53 this.categoriaService.getAll() 55 this.categoriaService.getAll()
54 .subscribe((categorias: ICategoria[]) => { 56 .subscribe((categorias: ICategoria[]) => {
55 switch (this.queMostrar) { 57 switch (this.queMostrar) {
56 case 'todos': 58 case 'todos':
57 this.categorias = categorias; 59 this.categorias = categorias;
58 this.categoriaActive = 0; 60 this.categoriaActive = 0;
59 break; 61 break;
60 case 'promociones': 62 case 'promociones':
61 this.categorias = categorias; 63 this.categorias = categorias;
62 this.categoriaActive = 19; 64 this.categoriaActive = 19;
63 break; 65 break;
64 case 'ordenar': 66 case 'ordenar':
65 this.categorias = categorias.filter((categoria: ICategoria) => { 67 this.categorias = categorias.filter((categoria: ICategoria) => {
66 return categoria.ES_PEDIDO; 68 return categoria.ES_PEDIDO;
67 }); 69 });
68 this.categoriaActive = 4; 70 this.categoriaActive = 4;
69 break; 71 break;
70 default: 72 default:
71 this.categorias = categorias; 73 this.categorias = categorias;
72 this.categoriaActive = 0; 74 this.categoriaActive = 0;
73 break; 75 break;
74 } 76 }
75 !localStorage.getItem('articulos') ? 77 !localStorage.getItem('articulos') ?
76 this.getProductos() : 78 this.getProductos() :
77 this.setProductos(); 79 this.setProductos();
78 }); 80 });
79 } 81 }
80 82
81 getProductos() { 83 getProductos() {
82 this.articuloService.getAll() 84 this.articuloService.getAll()
83 .subscribe((result: IArticulo[]) => { 85 .subscribe((result: IArticulo[]) => {
84 this.articuloService.setArticulosSinImagen(result); 86 this.articuloService.setArticulosSinImagen(result);
85 if (this.queMostrar === 'ordenar') { 87 if (this.queMostrar === 'ordenar') {
86 this.categorias.forEach((categoria: ICategoria) => { 88 this.categorias.forEach((categoria: ICategoria) => {
87 const tempArticulos = result.filter((articulo: IArticulo) => { 89 const tempArticulos = result.filter((articulo: IArticulo) => {
88 return articulo.categoria_selfservice === categoria.id; 90 return articulo.categoria_selfservice === categoria.id;
89 }); 91 });
90 result = tempArticulos; 92 result = tempArticulos;
91 }); 93 });
92 } 94 }
93 localStorage.setItem('articulos', JSON.stringify(result)); 95 localStorage.setItem('articulos', JSON.stringify(result));
94 this.setProductos(); 96 this.setProductos();
95 }, (error) => { 97 }, (error) => {
96 this.showSpinner = false; 98 this.showSpinner = false;
97 console.error(error); 99 console.error(error);
98 }); 100 });
99 } 101 }
100 102
101 setProductos() { 103 setProductos() {
102 this.articulos = JSON.parse(localStorage.getItem('articulos')); 104 this.articulos = JSON.parse(localStorage.getItem('articulos'));
103 this.filterItems(); 105 this.filterItems();
104 } 106 }
105 107
106 filterItems() { 108 filterItems() {
107 if (this.categoriaActive === 0) { 109 if (this.categoriaActive === 0) {
108 this.auxArticulos = this.articulos; 110 this.auxArticulos = this.articulos;
109 return; 111 return;
110 } 112 }
111 this.auxArticulos = this.articulos.filter(x => { 113 this.auxArticulos = this.articulos.filter(x => {
112 return x.categoria_selfservice === this.categoriaActive; 114 return x.categoria_selfservice === this.categoriaActive;
113 }); 115 });
114 this.ordenar(); 116 this.ordenar();
115 } 117 }
116 118
117 ordenar() { 119 ordenar() {
118 if (this.ordenandoByVendidos) { 120 if (this.ordenandoByVendidos) {
119 this.auxArticulos.sort((a, b) => { 121 this.auxArticulos.sort((a, b) => {
120 return b.cantidadVendida - a.cantidadVendida; 122 return b.cantidadVendida - a.cantidadVendida;
121 }); 123 });
122 } 124 }
123 } 125 }
124 126
125 selectCategoria(index: number, idCategoria?: number) { 127 selectCategoria(index: number, idCategoria?: number) {
126 if (this.categoriaActive === idCategoria) return; 128 if (this.categoriaActive === idCategoria) return;
127 this.categoriaActive = idCategoria; 129 this.categoriaActive = idCategoria;
128 this.allActive = idCategoria === 0 ? true : false; 130 this.allActive = idCategoria === 0 ? true : false;
129 this.categorias.forEach((categoria, i) => { 131 this.categorias.forEach((categoria, i) => {
130 categoria.selected = index === i ? true : false; 132 categoria.selected = index === i ? true : false;
131 }); 133 });
132 this.filterItems(); 134 this.filterItems();
133 } 135 }
134 136
135 selectArticulo(articulo: IArticulo) { 137 selectArticulo(articulo: IArticulo) {
136 this.getByID(articulo.id); 138 this.getByID(articulo.id);
137 } 139 }
138 140
139 getByID(id: number) { 141 getByID(id: number) {
140 this.articuloService.getById(id) 142 this.articuloService.getById(id)
141 .subscribe((res: IArticulo) => { 143 .subscribe((res: IArticulo) => {
142 if (res.FPP) { 144 if (res.FPP) {
143 this.openModalPromos(res); 145 this.openModalPromos(res);
144 } else { 146 } else {
145 this.getSinonimos(res); 147 this.getSinonimos(res);
146 } 148 }
147 }, err => console.error(err)); 149 }, err => console.error(err));
148 } 150 }
149 151
150 getSinonimos(articulo: IArticulo) { 152 getSinonimos(articulo: IArticulo) {
151 this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt) 153 this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt)
152 .subscribe((res: ISinonimo[]) => { 154 .subscribe((res: ISinonimo[]) => {
153 if (res.length) { 155 if (res.length) {
154 this.openModalSinonimos(res, articulo); 156 this.openModalSinonimos(res, articulo);
155 } else { 157 } else {
156 this.articuloService.setArticulo(articulo); 158 this.articuloService.setArticulo(articulo);
157 } 159 }
158 }); 160 });
159 } 161 }
160 162
161 openModalPromos(articulo: IArticulo) { 163 openModalPromos(articulo: IArticulo) {
162 this.modalRef = this.modalService.show(PromocionComponent, { 164 this.modalRef = this.modalService.show(PromocionComponent, {
163 initialState: { articulosPromo: [articulo] }, 165 initialState: { articulosPromo: [articulo] },
164 class: 'modal-promo modal-dialog-centered' 166 class: 'modal-promo modal-dialog-centered'
165 }); 167 });
166 } 168 }
167 169
168 openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) { 170 openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) {
169 this.modalRef = this.modalService.show(SinonimoComponent, { 171 this.modalRef = this.modalService.show(SinonimoComponent, {
170 initialState: { sinonimos: sinonimosData }, 172 initialState: { sinonimos: sinonimosData },
171 class: 'modal-promo modal-dialog-centered' 173 class: 'modal-promo modal-dialog-centered'
172 }); 174 });
173 175
174 this.modalRef.content.onClose 176 this.modalRef.content.onClose
175 .subscribe((res: any) => { 177 .subscribe((res: any) => {
176 for (const a of articulo.productos) { 178 for (const a of articulo.productos) {
177 if (a.idSinonimo === res.ID_SIN) { 179 if (a.idSinonimo === res.ID_SIN) {
178 a.CODA = res.articulo.CodArt; 180 a.CODA = res.articulo.CodArt;
179 a.CodArt = res.articulo.CodArt; 181 a.CodArt = res.articulo.CodArt;
180 a.SECA = res.articulo.CodSec; 182 a.SECA = res.articulo.CodSec;
181 a.CodSec = res.articulo.CodSec; 183 a.CodSec = res.articulo.CodSec;
182 a.PreVen = res.articulo.PreVen; 184 a.PreVen = res.articulo.PreVen;
183 a.id = res.articulo.id; 185 a.id = res.articulo.id;
184 a.DET_LAR = res.articulo.DET_LAR; 186 a.DET_LAR = res.articulo.DET_LAR;
185 a.DetArt = res.articulo.DetArt; 187 a.DetArt = res.articulo.DetArt;
186 } 188 }
187 } 189 }
188 this.articuloService.setArticulo(articulo); 190 this.articuloService.setArticulo(articulo);
189 }); 191 });
190 } 192 }
191 193
192 deleteArticulo(index: number) { 194 deleteArticulo(index: number) {
193 this.articuloService.deleteArticulo(index); 195 this.articuloService.deleteArticulo(index);
194 } 196 }
195 197
196 increaseShow() { 198 increaseShow() {
197 this.showQuantity += 100; 199 this.showQuantity += 100;
198 } 200 }
199 201
200 @HostListener('scroll', ['$event']) 202 @HostListener('scroll', ['$event'])
201 scrollEvent(event: Event) { 203 scrollEvent(event: Event) {
202 clearTimeout(this.inactiveScreen.timerReposo); 204 clearTimeout(this.inactiveScreen.timerReposo);
203 this.inactiveScreen.startTimeOutInactividad(); 205 this.inactiveScreen.startTimeOutInactividad();
204 } 206 }
205 207
206 mouseup() { 208 mouseup() {
207 if (!this.timeoutHandler) return; 209 if (!this.timeoutHandler) return;
208 clearInterval(this.timeoutHandler); 210 clearInterval(this.timeoutHandler);
209 } 211 }
210 212
211 scrollY(el: HTMLElement, value) { 213 scrollY(el: HTMLElement, value) {
212 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 214 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
213 this.timeoutHandler = setInterval(() => { 215 this.timeoutHandler = setInterval(() => {
214 el.scroll({ behavior: 'smooth', top: value + el.scrollTop }); 216 el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
215 }, 500); 217 }, 500);
216 } 218 }
217 219
218 scrollX(el: HTMLElement, value) { 220 scrollX(el: HTMLElement, value) {
219 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); 221 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
220 this.timeoutHandler = setInterval(() => { 222 this.timeoutHandler = setInterval(() => {
221 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); 223 el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
222 }, 500); 224 }, 500);
223 } 225 }
224 226
225 mediaPantalla() { 227 mediaPantalla() {
226 if ($('body').hasClass('media-pantalla')) { 228 if ($('body').hasClass('media-pantalla')) {
227 $('.cat-content,#content,.cat-btn,#boxCarrito,.cat-box,.img-categoria').addClass('media-pantalla').addBack('media-pantalla'); 229 $('.cat-content,#content,.cat-btn,#boxCarrito,.cat-box,.img-categoria').addClass('media-pantalla').addBack('media-pantalla');
228 } 230 }
229 } 231 }
230 } 232 }
231 233
src/app/shared/promocion/promocion.component.html
Diff comments   View file @ e6c4e96
1 <div class="modal-header bg-primary rounded-top pt-4 px-2"> 1 <div class="modal-header bg-primary rounded-top pt-4 px-2">
2 <div class="row mx-0 w-100 justify-content-between" *ngIf="articulosPromo.length"> 2 <div class="row mx-0 w-100 justify-content-between" *ngIf="articulosPromo.length">
3 <div class="col-8"> 3 <div class="col-8">
4 <p class="h3 text-white">{{articulosPromo[0].DetArt}}</p> 4 <p class="h3 text-white">{{articulosPromo[0].DetArt}}</p>
5 </div> 5 </div>
6 <div class="col-4 align-self-center"> 6 <div class="col-4 align-self-center">
7 <div 7 <div
8 class="row mx-0 justify-content-between bg-white badge-pill" 8 class="row mx-0 justify-content-between bg-white badge-pill"
9 (click)="selectPromo(articulosPromo[0])"> 9 (click)="selectPromo(articulosPromo[0])">
10 <div class="col px-0 align-self-center text-primary"> 10 <div class="col px-0 align-self-center text-primary">
11 <p class="font-weight-bold">{{articulosPromo[0].PreVen | currency}}</p> 11 <p class="font-weight-bold">{{articulosPromo[0].PreVen | currency}}</p>
12 </div> 12 </div>
13 <div class="col-3 px-0"> 13 <div class="col-3 px-0">
14 <img 14 <img
15 draggable="false" 15 draggable="false"
16 ondragstart="return false;" 16 ondragstart="return false;"
17 (contextmenu)="false" 17 (contextmenu)="false"
18 class="d-block ml-auto py-1 icon-30 mr-2 pt-2" 18 class="d-block ml-auto py-1 icon-30 mr-2 pt-2"
19 src="assets/img/ir-color.svg"> 19 src="assets/img/ir-color.svg">
20 </div> 20 </div>
21 </div> 21 </div>
22 </div> 22 </div>
23 </div> 23 </div>
24 </div> 24 </div>
25 <div class="modal-body bg-primary rounded-bottom pb-3 px-2" *ngIf="articulosPromo.length"> 25 <div class="modal-body bg-primary rounded-bottom pb-3 px-2" *ngIf="articulosPromo.length">
26 <div class="row mx-0 w-100"> 26 <div class="row mx-0 w-100">
27 <div class="col-9"> 27 <div class="col-9">
28 <p class="text-white"><small>¿TE GUSTARÍA LLEVAR ESTE ARTÍCULO</small></p> 28 <p class="text-white"><small>¿TE GUSTARÍA LLEVAR ESTE ARTÍCULO</small></p>
29 <h1 class="text-white mb-4">en un combo?</h1> 29 <h1 class="text-white mb-4">en un combo?</h1>
30 </div> 30 </div>
31 <div class="col-3"> 31 <div class="col-3">
32 <img 32 <img
33 draggable="false" 33 draggable="false"
34 ondragstart="return false;" 34 ondragstart="return false;"
35 (contextmenu)="false" 35 (contextmenu)="false"
36 src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}" 36 src="{{urlImagenes}}{{articulosPromo[0].imagenes[0].imagen}}"
37 onerror="this.src='assets/img/image-not-found.jpg'" 37 onerror="this.src='assets/img/image-not-found.jpg'"
38 class="card-img-top img-fluid rounded-circle"> 38 class="card-img-top img-fluid rounded-circle">
39 </div> 39 </div>
40 </div> 40 </div>
41 <div 41 <div
42 class="row mx-0 lista-promociones scroll-y-visible" 42 class="row mx-0 lista-promociones scroll-y-visible"
43 (scroll)="scrollEvent($event)"> 43 (scroll)="scrollEvent($event)">
44 <div class="col-12"> 44 <div class="col-12">
45 <div *ngFor="let promo of promociones"> 45 <div *ngFor="let promo of promociones">
46 <div class="mx-0 mb-2 bg-white badge-pill text-primary" (click)="selectPromo(promo)"> 46 <div
47 class="mx-0 mb-2 btn-effect bg-white badge-pill text-primary"
48 (click)="selectPromo(promo)">
47 <div class="d-flex"> 49 <div class="d-flex">
48 <p class="text-truncate mr-auto my-auto"><small>{{promo.DetArt}}</small></p> 50 <p class="text-truncate mr-auto my-auto"><small>{{promo.DetArt}}</small></p>
49 <p class="font-weight-bold my-auto pr-2"> 51 <p class="font-weight-bold my-auto pr-2">
50 <span>{{promo.PreVen | currency}}</span> 52 <span>{{promo.PreVen | currency}}</span>
51 </p> 53 </p>
52 <img 54 <img
53 draggable="false" 55 draggable="false"
54 ondragstart="return false;" 56 ondragstart="return false;"
55 (contextmenu)="false" 57 (contextmenu)="false"
56 class="d-block icon-30 py-1" 58 class="d-block icon-30 py-1"
57 src="assets/img/ir-color.svg"> 59 src="assets/img/ir-color.svg">
58 </div> 60 </div>
59 </div> 61 </div>
60 </div> 62 </div>
61 </div> 63 </div>
62 </div> 64 </div>
63 </div> 65 </div>
64 66
src/app/shared/sinonimo/sinonimo.component.html
Diff comments   View file @ e6c4e96
1 <div class="bg-primary rounded text-white"> 1 <div class="bg-primary rounded text-white">
2 <div class="modal-header"> 2 <div class="modal-header">
3 <p class="h4">Seleccione sinonimos</p> 3 <p class="h4">Seleccione sinonimos</p>
4 </div> 4 </div>
5 5
6 <div class="modal-body"> 6 <div class="modal-body">
7 <div 7 <div
8 class="lista-sinonimos scroll-y-visible" 8 class="lista-sinonimos scroll-y-visible"
9 *ngFor="let s of sinonimos"> 9 *ngFor="let s of sinonimos">
10 <div *ngFor="let articulo of s.productos"> 10 <div *ngFor="let articulo of s.productos">
11 <div class="custom-control custom-checkbox"> 11 <div class="custom-control custom-checkbox">
12 <input 12 <input
13 type="checkbox" 13 type="checkbox"
14 class="custom-control-input" 14 class="custom-control-input"
15 [(ngModel)]="articulo.seleccionado" 15 [(ngModel)]="articulo.seleccionado"
16 (click)="selectArticulo(articulo)" 16 (click)="selectArticulo(articulo)"
17 [id]="articulo.id"> 17 [id]="articulo.id">
18 <label 18 <label
19 class="custom-control-label" 19 class="custom-control-label"
20 [for]="articulo.id"> 20 [for]="articulo.id">
21 {{articulo.DET_LAR}} 21 {{articulo.DET_LAR}}
22 </label> 22 </label>
23 </div> 23 </div>
24 </div> 24 </div>
25 </div> 25 </div>
26 </div> 26 </div>
27 27
28 <div class="modal-footer"> 28 <div class="modal-footer">
29 <div 29 <div
30 [ngClass]="validate()" 30 [ngClass]="validate()"
31 class="d-inline-block py-1 btn-effect bg-white badge-pill text-primary" 31 class="d-inline-block py-1 bg-white badge-pill text-primary"
32 (click)="continue()"> 32 (click)="continue()">
33 CONTINUAR 33 CONTINUAR
34 <img 34 <img
35 draggable="false" 35 draggable="false"
36 ondragstart="return false;" 36 ondragstart="return false;"
37 (contextmenu)="false" 37 (contextmenu)="false"
38 class="icon-30" 38 class="icon-30"
39 src="assets/img/ir-color.svg"> 39 src="assets/img/ir-color.svg">
40 </div> 40 </div>
41 </div> 41 </div>
42 </div> 42 </div>
43 43
src/app/shared/sinonimo/sinonimo.component.ts
Diff comments   View file @ e6c4e96
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { ISinonimo } from 'src/app/interfaces/ISinonimo'; 2 import { ISinonimo } from 'src/app/interfaces/ISinonimo';
3 import { IArticulo } from 'src/app/interfaces/IArticulo'; 3 import { IArticulo } from 'src/app/interfaces/IArticulo';
4 import { BsModalRef } from 'ngx-bootstrap/modal'; 4 import { BsModalRef } from 'ngx-bootstrap/modal';
5 import { Subject } from 'rxjs'; 5 import { Subject } from 'rxjs';
6 import { ArticuloService } from 'src/app/services/articulo/articulo.service'; 6 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
7 7
8 @Component({ 8 @Component({
9 selector: 'app-sinonimo', 9 selector: 'app-sinonimo',
10 templateUrl: './sinonimo.component.html', 10 templateUrl: './sinonimo.component.html',
11 styleUrls: ['./sinonimo.component.scss'] 11 styleUrls: ['./sinonimo.component.scss']
12 }) 12 })
13 export class SinonimoComponent implements OnInit { 13 export class SinonimoComponent implements OnInit {
14 sinonimos: ISinonimo[] = []; 14 sinonimos: ISinonimo[] = [];
15 isValid: boolean; 15 isValid: boolean;
16 onClose: Subject<any>; 16 onClose: Subject<any>;
17 articuloSelected: IArticulo; 17 articuloSelected: IArticulo;
18 18
19 constructor( 19 constructor(
20 private modalRef: BsModalRef, 20 private modalRef: BsModalRef,
21 private articuloService: ArticuloService, 21 private articuloService: ArticuloService,
22 ) { 22 ) {
23 this.onClose = new Subject(); 23 this.onClose = new Subject();
24 } 24 }
25 25
26 ngOnInit() { 26 ngOnInit() {
27 } 27 }
28 28
29 selectArticulo(articulo: IArticulo) { 29 selectArticulo(articulo: IArticulo) {
30 for (const s of this.sinonimos) { 30 for (const s of this.sinonimos) {
31 for (const a of s.productos) { 31 for (const a of s.productos) {
32 a.seleccionado = false; 32 a.seleccionado = false;
33 } 33 }
34 } 34 }
35 articulo.seleccionado = true; 35 articulo.seleccionado = true;
36 this.articuloSelected = articulo; 36 this.articuloSelected = articulo;
37 } 37 }
38 38
39 validate() { 39 validate() {
40 this.isValid = false; 40 this.isValid = false;
41 for (const s of this.sinonimos) { 41 for (const s of this.sinonimos) {
42 for (const articulo of s.productos) { 42 for (const articulo of s.productos) {
43 if (articulo.seleccionado) { 43 if (articulo.seleccionado) {
44 this.isValid = true; 44 this.isValid = true;
45 } 45 }
46 } 46 }
47 } 47 }
48 return !this.isValid ? 'disabled' : ''; 48 return !this.isValid ? 'disabled' : 'btn-effect';
49 } 49 }
50 50
51 continue() { 51 continue() {
52 if (!this.isValid) return; 52 if (!this.isValid) return;
53 const ID_SIN = this.articuloSelected.ID_SIN; 53 const ID_SIN = this.articuloSelected.ID_SIN;
54 this.articuloService.getById(this.articuloSelected.id) 54 this.articuloService.getById(this.articuloSelected.id)
55 .subscribe((res: IArticulo) => { 55 .subscribe((res: IArticulo) => {
56 this.modalRef.hide(); 56 this.modalRef.hide();
57 this.onClose.next({ 57 this.onClose.next({
58 articulo: res, 58 articulo: res,
59 ID_SIN 59 ID_SIN
60 }); 60 });
61 }, err => console.error(err)); 61 }, err => console.error(err));
62 } 62 }
63 63
64 } 64 }
65 65