Jose Pinto / foca-crear-hoja-ruta

Download as
Browse Code »

Commit a18e7039846b0f17a01c73675782064aabf9aa3b

Authored by Jose Pinto
1 parent a9ba7eccaa
Exists in master

Nuevo diseño

Showing 2 changed files with 272 additions and 254 deletions   Show diff stats
src/js/controller.js
Diff comments   View file @ a18e703
... ... @@ -3,13 +3,16 @@ angular.module('focaCrearHojaRuta') .controller('hojaRutaCtrl',
3 3 '$scope', '$uibModal', '$location', '$filter', 'crearHojaRutaService', 'focaModalService',
4 4 function($scope, $uibModal, $location, $filter, crearHojaRutaService, focaModalService) {
5 5 $scope.botonera = [
6   - {texto: 'Transportista', accion: function() {$scope.seleccionarProveedor();}},
7   - {texto: 'Chofer', accion: function() {$scope.seleccionarChofer();}},
8   - {texto: 'Vehiculo', accion: function() {$scope.seleccionarVehiculo();}},
9   - {texto: 'Tarifario', accion: function() {$scope.seleccionarTarifario();}},
10   - {texto: 'Remitos', accion: function() {$scope.seleccionarRemito();}},
11   - {texto: '', accion: function() {}},
12   - {texto: '', accion: function() {}},
  6 + {texto: 'Transportista', imagen: '../img/abmPrecios.png',
  7 + accion: function() {$scope.seleccionarProveedor();}},
  8 + {texto: 'Chofer', imagen: '../img/abmPrecios.png',
  9 + accion: function() {$scope.seleccionarChofer();}},
  10 + {texto: 'Vehículo', imagen: '../img/abmPrecios.png',
  11 + accion: function() {$scope.seleccionarVehiculo();}},
  12 + {texto: 'Tarifario', imagen: '../img/abmPrecios.png',
  13 + accion: function() {$scope.seleccionarTarifario();}},
  14 + {texto: 'Remitos', imagen: '../img/abmPrecios.png',
  15 + accion: function() {$scope.seleccionarRemito();}},
13 16 {texto: '', accion: function() {}}
14 17 ];
15 18 $scope.datepickerAbierto = false;
src/views/hoja-ruta.html
Diff comments   View file @ a18e703
1   -<div class="crear-nota-pedido">
2   - <form name="formCrearNota" ng-submit="crearNotaPedido()" class="mb-0">
  1 +<div class="crear-hoja-ruta foca-crear one-row row">
  2 + <form name="formCrearNota" ng-submit="crearNotaPedido()" class="mb-0 col-lg-12">
3 3 <div class="row">
4   - <div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
5   - <div class="row p-1 panel-informativo">
  4 + <div class="col-md-10 col-lg-12">
  5 + <div class="row panel-informativo">
6 6 <div class="col-12">
7   - <div class="row">
8   - <div class="col-12 col-sm-4 nota-pedido">
9   - <h5>HOJA DE RUTA</h5>
  7 + <div class="row titulares">
  8 + <div class="col-12 col-sm-3 nota-pedido border border-left-0 border-white align-middle">
  9 + <h5 class="mb-0">HOJA DE RUTA</h5>
10 10 </div>
11   - <div class="col-5 col-sm-4 numero-pedido"
  11 + <div class="col-12 col-sm-3 numero-pedido text-center text-md-left border border-white align-middle"
12 12 >Nº {{puntoVenta}}-{{comprobante}}
13 13 </div>
14   - <div class="col-7 col-sm-4 text-right">
  14 + <div class="col-7 col-sm-3 border border-white align-middle">
15 15 Fecha:
16 16 <span
17 17 ng-show="!datepickerAbierto"
18   - ng-bind="now | date:'dd/MM/yyyy HH:mm'"
  18 + ng-bind="now | date:'dd/MM/yyyy'"
19 19 ng-click="datepickerAbierto = true"
20 20 >
21 21 </span>
... ... @@ -30,8 +30,17 @@
30 30 hasta-hoy
31 31 />
32 32 </div>
  33 + <div class="col-5 col-sm-3 border border-white border-right-0 align-middle">
  34 + Hora:
  35 + <span
  36 + ng-show="!datepickerAbierto"
  37 + ng-bind="now | date:'HH:mm'"
  38 + ng-click="datepickerAbierto = true"
  39 + >
  40 + </span>
  41 + </div>
33 42 </div>
34   - <div class="row">
  43 + <div class="row py-2">
35 44 <div class="col-auto" ng-repeat="cab in cabecera" ng-show="showCabecera">
36 45 <span class="label" ng-bind="cab.label"></span>
37 46 <span class="valor" ng-bind="cab.valor"></span>
... ... @@ -56,287 +65,293 @@
56 65 </div>
57 66 </div>
58 67 </div>
59   - <div class="row p-1 botonera-secundaria">
  68 +
  69 + </div>
  70 + </div>
  71 + </form>
  72 + <div class="col-lg-12">
  73 + <div class="row mt-4">
  74 + <div class="col-12 col-md-10 border border-light rounded">
  75 + <div class="row px-5 py-2 botonera-secundaria">
60 76 <div class="col-12">
61 77 <div class="row">
62   - <div class="col-6 col-sm-3 px-0 py-0" ng-repeat="boton in botonera">
  78 + <div
  79 + class="col-6 col-sm-2 px-1 py-1 m-auto m-md-0"
  80 + ng-repeat="boton in botonera"
  81 + ng-class="{'d-none d-md-grid': boton.texto == ''}">
63 82 <button
64 83 type="button"
65   - class="btn btn-default btn-block btn-xs text-left py-2"
  84 + class="btn btn-default btn-block btn-xs text-center py-1 rounded border border-light"
66 85 ng-click="boton.accion()"
67   - ng-class="{'d-none d-sm-block': boton.texto == ''}"
  86 + ng-class="{'d-sm-block h-100': boton.texto == ''}"
68 87 >
69   - <i
70   - class="fa fa-arrow-circle-right"
71   - ng-show="boton.texto != ''"
72   - ></i>
73   - &nbsp;
74   - {{boton.texto}}
  88 + <img src="{{boton.imagen}}" alt="" ng-if="boton.imagen">
  89 + <span>{{boton.texto}}</span>
75 90 </button>
76 91 </div>
77 92 </div>
78 93 </div>
79 94 </div>
80   - </div>
81   - </div>
82   - </form>
83   - <div class="row">
84   - <div class="col-12 col-md-10 col-lg-8 offset-md-1 offset-lg-2">
85   - <!-- PC -->
86   - <div class="row grilla-articulo align-items-end d-none d-sm-flex">
87   - <table class="table tabla-articulo table-striped table-sm table-dark">
88   - <thead>
89   - <tr class="d-flex">
90   - <th class="col-auto">#</th>
91   - <th class="col-2">Remito</th>
92   - <th class="col">Cliente</th>
93   - <th class="col">Dirección</th>
94   - <th class="text-right" style="width: 80px">Cantidad</th>
95   - <th class="col-auto">
96   - <button
97   - class="btn btn-outline-secondary selectable"
98   - ng-click="show = !show; masMenos()"
99   - >
100   - <i
101   - class="fa fa-chevron-down"
102   - ng-show="show"
103   - aria-hidden="true"
  95 + <!-- PC -->
  96 + <div class="row grilla-articulo align-items-end d-none d-sm-flex">
  97 + <table class="table tabla-articulo table-striped table-sm mb-0 rounded-bottom">
  98 + <thead>
  99 + <tr class="d-flex">
  100 + <th class="col-auto">#</th>
  101 + <th class="col-2">Remito</th>
  102 + <th class="col">Cliente</th>
  103 + <th class="col">Dirección</th>
  104 + <th class="text-right" style="width: 80px">Cantidad</th>
  105 + <th class="col-auto">
  106 + <button
  107 + class="btn btn-outline-secondary selectable"
  108 + ng-click="show = !show; masMenos()"
104 109 >
105   - </i>
106   - <i
107   - class="fa fa-chevron-up"
108   - ng-hide="show"
109   - aria-hidden="true">
110   - </i>
111   - </button>
112   - </th>
113   - </th>
114   - </tr>
115   - </thead>
116   - <tbody class="tabla-articulo-body">
117   - <tr
118   - ng-repeat="(key, remito) in remitosTabla"
119   - class="d-flex"
120   - ng-show="show || key == remitosTabla.length - 1"
121   - >
122   - <td ng-bind="key + 1" class="col-auto"></td>
123   - <td
124   - class="col-2"
125   - ng-bind="rellenar(remito.sucursal, 4) + '-' + rellenar(remito.numeroRemito, 8)"
126   - ></td>
127   - <th class="col" ng-bind="remito.cliente[0].NOM"></th>
128   - <th class="col" ng-bind="remito.domicilioStamp"></th>
129   - <th class="text-right" ng-bind="remito.litros" style="width: 80px"></th>
130   - <td class="text-center col-auto">
131   - <button
132   - class="btn btn-outline-secondary"
133   - ng-click="quitarArticulo(key)"
134   - >
135   - <i class="fa fa-trash"></i>
136   - </button>
137   - </td>
138   - </tr>
139   - </tbody>
140   - <tfoot>
141   - <tr class="d-flex">
142   - <td class="col-auto px-1">
143   - <strong>Remitos:</strong>
144   - <a ng-bind="remitosTabla.length"></a>
145   - </td>
146   - <td class="col"></td>
147   - <td class="col-auto px-1">
148   - <strong>Cantidad:</strong>
149   - <a ng-bind="hojaRuta.litros"></a>
150   - </td>
151   - </tr>
152   - </tfoot>
153   - </table>
154   - </div>
155   -
156   - <!-- MOBILE -->
157   - <div class="row d-sm-none">
158   - <table class="table table-sm table-striped table-dark margin-bottom-mobile">
159   - <thead>
160   - <tr class="d-flex">
161   - <th class="">#</th>
162   - <th class="col px-0">
163   - <div class="d-flex">
164   - <div class="col-4 px-1">Código</div>
165   - <div class="col-8 px-1">Descripción</div>
166   - </div>
167   - <div class="d-flex">
168   - <div class="col-3 px-1">Cantidad</div>
169   - <div class="col px-1 text-right">P. Uni.</div>
170   - <div class="col px-1 text-right">Subtotal</div>
171   - </div>
172   - </th>
173   - <th class="text-center tamaño-boton">
174   - &nbsp;
175   - </th>
176   - </tr>
177   - </thead>
178   - <tbody>
179   - <tr
180   - ng-repeat="(key, articulo) in remitosTabla"
181   - ng-show="show || key == remitosTabla.length - 1"
182   - >
183   - <td class="w-100 align-middle d-flex p-0">
184   - <div class="align-middle p-1">
185   - <span ng-bind="key+1" class="align-middle"></span>
186   - </div>
187   - <div class="col px-0">
  110 + <i
  111 + class="fa fa-chevron-down"
  112 + ng-show="show"
  113 + aria-hidden="true"
  114 + >
  115 + </i>
  116 + <i
  117 + class="fa fa-chevron-up"
  118 + ng-hide="show"
  119 + aria-hidden="true">
  120 + </i>
  121 + </button>
  122 + </th>
  123 + </th>
  124 + </tr>
  125 + </thead>
  126 + <tbody class="tabla-articulo-body">
  127 + <tr
  128 + ng-repeat="(key, remito) in remitosTabla"
  129 + class="d-flex"
  130 + ng-show="show || key == remitosTabla.length - 1"
  131 + >
  132 + <td ng-bind="key + 1" class="col-auto"></td>
  133 + <td
  134 + class="col-2"
  135 + ng-bind="rellenar(remito.sucursal, 4) + '-' + rellenar(remito.numeroRemito, 8)"
  136 + ></td>
  137 + <th class="col" ng-bind="remito.cliente[0].NOM"></th>
  138 + <th class="col" ng-bind="remito.domicilioStamp"></th>
  139 + <th class="text-right" ng-bind="remito.litros" style="width: 80px"></th>
  140 + <td class="text-center col-auto">
  141 + <button
  142 + class="btn btn-outline-secondary"
  143 + ng-click="quitarArticulo(key)"
  144 + >
  145 + <i class="fa fa-trash"></i>
  146 + </button>
  147 + </td>
  148 + </tr>
  149 + </tbody>
  150 + <tfoot>
  151 + <tr class="d-flex">
  152 + <td class="col-auto px-1">
  153 + <strong>Remitos:</strong>
  154 + <a ng-bind="remitosTabla.length"></a>
  155 + </td>
  156 + <td class="col"></td>
  157 + <td class="col-auto px-1">
  158 + <strong>Cantidad:</strong>
  159 + <a ng-bind="hojaRuta.litros"></a>
  160 + </td>
  161 + </tr>
  162 + </tfoot>
  163 + </table>
  164 + </div>
  165 +
  166 + <!-- MOBILE -->
  167 + <div class="row d-sm-none">
  168 + <table class="table table-sm table-striped table-dark margin-bottom-mobile">
  169 + <thead>
  170 + <tr class="d-flex">
  171 + <th class="">#</th>
  172 + <th class="col px-0">
  173 + <div class="d-flex">
  174 + <div class="col-4 px-1">Código</div>
  175 + <div class="col-8 px-1">Descripción</div>
  176 + </div>
  177 + <div class="d-flex">
  178 + <div class="col-3 px-1">Cantidad</div>
  179 + <div class="col px-1 text-right">P. Uni.</div>
  180 + <div class="col px-1 text-right">Subtotal</div>
  181 + </div>
  182 + </th>
  183 + <th class="text-center tamaño-boton">
  184 + &nbsp;
  185 + </th>
  186 + </tr>
  187 + </thead>
  188 + <tbody>
  189 + <tr
  190 + ng-repeat="(key, articulo) in remitosTabla"
  191 + ng-show="show || key == remitosTabla.length - 1"
  192 + >
  193 + <td class="w-100 align-middle d-flex p-0">
  194 + <div class="align-middle p-1">
  195 + <span ng-bind="key+1" class="align-middle"></span>
  196 + </div>
  197 + <div class="col px-0">
  198 + <div class="d-flex">
  199 + <div class="col-4 px-1">
  200 + <span
  201 + ng-bind="articulo.sector + '-' + articulo.codigo"
  202 + ></span>
  203 + </div>
  204 + <div class="col-8 px-1">
  205 + <span ng-bind="articulo.descripcion"></span>
  206 + </div>
  207 + </div>
  208 + <div class="d-flex">
  209 + <div class="col-3 px-1">
  210 + <span ng-bind="'x' + articulo.cantidad"></span>
  211 + </div>
  212 + <div class="col-3 px-1 text-right">
  213 + <span ng-bind="articulo.precio | currency: hojaRuta.moneda.simbolo : 4"></span>
  214 + </div>
  215 + <div class="col px-1 text-right">
  216 + <span
  217 + ng-bind="(articulo.precio * articulo.cantidad) | currency: hojaRuta.moneda.simbolo"
  218 + >
  219 + </span>
  220 + </div>
  221 + </div>
  222 + </div>
  223 + <div class="align-middle p-1">
  224 + <button
  225 + class="btn btn-outline-secondary"
  226 + ng-click="quitarArticulo(key)"
  227 + >
  228 + <i class="fa fa-trash"></i>
  229 + </button>
  230 + </div>
  231 + </td>
  232 + </tr>
  233 + </tbody>
  234 + <tfoot>
  235 + <!-- CARGANDO ITEM -->
  236 + <tr ng-show="!cargando" class="d-flex">
  237 + <td
  238 + class="align-middle p-1"
  239 + ng-bind="remitosTabla.length + 1"
  240 + ></td>
  241 + <td class="col p-0">
188 242 <div class="d-flex">
189 243 <div class="col-4 px-1">
190 244 <span
191   - ng-bind="articulo.sector + '-' + articulo.codigo"
  245 + ng-bind="articuloACargar.sectorCodigo"
192 246 ></span>
193 247 </div>
194 248 <div class="col-8 px-1">
195   - <span ng-bind="articulo.descripcion"></span>
  249 + <span ng-bind="articuloACargar.descripcion"></span>
196 250 </div>
197 251 </div>
198 252 <div class="d-flex">
199   - <div class="col-3 px-1">
200   - <span ng-bind="'x' + articulo.cantidad"></span>
  253 + <div class="col-3 px-1 m-1">
  254 + <input
  255 + class="form-control p-1"
  256 + type="number"
  257 + min="1"
  258 + ng-model="articuloACargar.cantidad"
  259 + foca-focus="!cargando"
  260 + ng-keypress="agregarATabla($event.keyCode)"
  261 + style="height: auto; line-height: 1.1em"
  262 + >
201 263 </div>
202 264 <div class="col-3 px-1 text-right">
203   - <span ng-bind="articulo.precio | currency: hojaRuta.moneda.simbolo : 4"></span>
  265 + <span ng-bind="articuloACargar.precio | currency: hojaRuta.moneda.simbolo : 4"></span>
204 266 </div>
205 267 <div class="col px-1 text-right">
206 268 <span
207   - ng-bind="(articulo.precio * articulo.cantidad) | currency: hojaRuta.moneda.simbolo"
  269 + ng-bind="getSubTotal() | currency: hojaRuta.moneda.simbolo"
208 270 >
209 271 </span>
210 272 </div>
211 273 </div>
212   - </div>
213   - <div class="align-middle p-1">
  274 + </td>
  275 + <td class="text-center align-middle">
214 276 <button
215 277 class="btn btn-outline-secondary"
216   - ng-click="quitarArticulo(key)"
  278 + ng-click="agregarATabla(13)"
217 279 >
218   - <i class="fa fa-trash"></i>
  280 + <i class="fa fa-save"></i>
219 281 </button>
220   - </div>
221   - </td>
222   - </tr>
223   - </tbody>
224   - <tfoot>
225   - <!-- CARGANDO ITEM -->
226   - <tr ng-show="!cargando" class="d-flex">
227   - <td
228   - class="align-middle p-1"
229   - ng-bind="remitosTabla.length + 1"
230   - ></td>
231   - <td class="col p-0">
232   - <div class="d-flex">
233   - <div class="col-4 px-1">
234   - <span
235   - ng-bind="articuloACargar.sectorCodigo"
236   - ></span>
237   - </div>
238   - <div class="col-8 px-1">
239   - <span ng-bind="articuloACargar.descripcion"></span>
240   - </div>
241   - </div>
242   - <div class="d-flex">
243   - <div class="col-3 px-1 m-1">
244   - <input
245   - class="form-control p-1"
246   - type="number"
247   - min="1"
248   - ng-model="articuloACargar.cantidad"
249   - foca-focus="!cargando"
250   - ng-keypress="agregarATabla($event.keyCode)"
251   - style="height: auto; line-height: 1.1em"
252   - >
253   - </div>
254   - <div class="col-3 px-1 text-right">
255   - <span ng-bind="articuloACargar.precio | currency: hojaRuta.moneda.simbolo : 4"></span>
256   - </div>
257   - <div class="col px-1 text-right">
258   - <span
259   - ng-bind="getSubTotal() | currency: hojaRuta.moneda.simbolo"
260   - >
261   - </span>
262   - </div>
263   - </div>
264   - </td>
265   - <td class="text-center align-middle">
266   - <button
267   - class="btn btn-outline-secondary"
268   - ng-click="agregarATabla(13)"
269   - >
270   - <i class="fa fa-save"></i>
271   - </button>
272   - </td>
273   - </tr>
274   - <!-- SELECCIONAR PRODUCTO -->
275   - <tr ng-show="cargando" class="d-flex">
276   - <td class="col-12">
277   - <input
278   - placeholder="Seleccione Articulo"
279   - class="form-control form-control-sm"
280   - readonly
281   - ng-click="seleccionarArticulo()"
282   - />
283   - </td>
284   - </tr>
285   - <!-- TOOGLE EXPANDIR -->
286   - <tr>
287   - <td class="col">
288   - <button
289   - class="btn btn-outline-secondary selectable w-100"
290   - ng-click="show = !show; masMenos()"
291   - ng-show="remitosTabla.length > 0"
292   - >
293   - <i
294   - class="fa fa-chevron-down"
295   - ng-hide="show"
296   - aria-hidden="true"
  282 + </td>
  283 + </tr>
  284 + <!-- SELECCIONAR PRODUCTO -->
  285 + <tr ng-show="cargando" class="d-flex">
  286 + <td class="col-12">
  287 + <input
  288 + placeholder="Seleccione Articulo"
  289 + class="form-control form-control-sm"
  290 + readonly
  291 + ng-click="seleccionarArticulo()"
  292 + />
  293 + </td>
  294 + </tr>
  295 + <!-- TOOGLE EXPANDIR -->
  296 + <tr>
  297 + <td class="col">
  298 + <button
  299 + class="btn btn-outline-secondary selectable w-100"
  300 + ng-click="show = !show; masMenos()"
  301 + ng-show="remitosTabla.length > 0"
297 302 >
298   - </i>
299   - <i
300   - class="fa fa-chevron-up"
301   - ng-show="show"
302   - aria-hidden="true">
303   - </i>
304   - </button>
305   - </td>
306   - </tr>
307   - <!-- FOOTER -->
308   - <tr class="d-flex">
309   - <td class="align-middle no-border-top" colspan="2">
310   - <strong>Cantidad Items:</strong>
311   - <a ng-bind="remitosTabla.length"></a>
312   - </td>
313   - <td class="text-right ml-auto table-celda-total no-border-top">
314   - <h3>Total:</h3>
315   - </td>
316   - <td class="table-celda-total text-right no-border-top">
317   - <h3>{{getTotal() | currency: hojaRuta.moneda.simbolo}}</h3>
318   - </td>
319   - </tr>
320   - </tfoot>
321   - </table>
  303 + <i
  304 + class="fa fa-chevron-down"
  305 + ng-hide="show"
  306 + aria-hidden="true"
  307 + >
  308 + </i>
  309 + <i
  310 + class="fa fa-chevron-up"
  311 + ng-show="show"
  312 + aria-hidden="true">
  313 + </i>
  314 + </button>
  315 + </td>
  316 + </tr>
  317 + <!-- FOOTER -->
  318 + <tr class="d-flex">
  319 + <td class="align-middle no-border-top" colspan="2">
  320 + <strong>Cantidad Items:</strong>
  321 + <a ng-bind="remitosTabla.length"></a>
  322 + </td>
  323 + <td class="text-right ml-auto table-celda-total no-border-top">
  324 + <h3>Total:</h3>
  325 + </td>
  326 + <td class="table-celda-total text-right no-border-top">
  327 + <h3>{{getTotal() | currency: hojaRuta.moneda.simbolo}}</h3>
  328 + </td>
  329 + </tr>
  330 + </tfoot>
  331 + </table>
  332 + </div>
322 333 </div>
323   - </div>
324   - <div class="col-auto my-2 col-lg-2 botonera-lateral d-none d-md-block">
325   - <div class="row align-items-end">
326   - <div class="col-12">
  334 + <div class="col-auto my-2 col-lg-2 botonera-lateral d-none">
  335 + <div class="col-12 mt-auto">
327 336 <button
328 337 ng-click="crearHojaRuta()"
329 338 type="submit"
330 339 title="Crear nota pedido"
331   - class="btn btn-default btn-block mb-2">
332   - Guardar
  340 + class="btn btn-default btn-block mb-2 border border-dark">
  341 + <strong>GUARDAR</strong>
  342 + </button>
  343 + <button
  344 + type="submit"
  345 + title="Crear nota pedido"
  346 + class="btn btn-default btn-block mb-2 border border-dark">
  347 + <strong>PAUSAR</strong>
333 348 </button>
334 349 <button
335 350 ng-click="salir()"
336 351 type="button"
337 352 title="Salir"
338   - class="btn btn-default btn-block">
339   - Salir
  353 + class="btn btn-default btn-block border border-dark">
  354 + <strong>SALIR</strong>
340 355 </button>
341 356 </div>
342 357 </div>