Luigi / foca-crear-nota-pedido

Download as
Browse Code »

Commit 37da41698d807a697370fb636ac4b0097e8b2a15

Authored by Nicolás Guarnieri
1 parent 1194dd7f40
Exists in master

cambios para mobile y mejora en tabla de articulos

Showing 2 changed files with 57 additions and 36 deletions   Show diff stats
src/js/controller.js
Diff comments   View file @ 37da416
... ... @@ -33,6 +33,7 @@ angular.module('focaCrearNotaPedido') .controller('notaPedidoCtrl',
33 33 };
34 34  
35 35 $scope.cabecera = [];
  36 + $scope.showCabecera = false;
36 37  
37 38 $scope.now = new Date();
38 39 $scope.puntoVenta = Math.round(Math.random() * 10000);
src/views/nota-pedido.html
Diff comments   View file @ 37da416
... ... @@ -5,30 +5,48 @@
5 5 <div class="row p-1 panel-informativo">
6 6 <div class="col-12">
7 7 <div class="row">
8   - <div class="col-5">
9   - <div class="h6">NOTA DE PEDIDO</div>
  8 + <div class="col-12 col-sm-4 nota-pedido">
  9 + <h5>NOTA DE PEDIDO</h5>
10 10 </div>
11   - <div class="col-3">Nº {{puntoVenta}}-{{comprobante}}</div>
12   - <div class="col-4 text-right">
  11 + <div class="col-6 col-sm-4 numero-pedido">Nº {{puntoVenta}}-{{comprobante}}</div>
  12 + <div class="col-6 col-sm-4 text-right">
13 13 Fecha: {{ now | date:'dd/MM/yyyy HH:mm'}}
14 14 </div>
15 15 </div>
16 16 <div class="row">
17   - <div class="col-auto" ng-repeat="cab in cabecera">
  17 + <div class="col-auto" ng-repeat="cab in cabecera" ng-show="showCabecera">
18 18 <span class="label" ng-bind="cab.label"></span>
19 19 <span class="valor" ng-bind="cab.valor"></span>
20 20 </div>
  21 + <a
  22 + class="btn col-12 btn-secondary d-sm-none"
  23 + ng-show="cabecera.length > 0"
  24 + ng-click="showCabecera = !showCabecera"
  25 + >
  26 + <i
  27 + class="fa fa-chevron-down"
  28 + ng-hide="showCabecera"
  29 + aria-hidden="true"
  30 + >
  31 + </i>
  32 + <i
  33 + class="fa fa-chevron-up"
  34 + ng-show="showCabecera"
  35 + aria-hidden="true">
  36 + </i>
  37 + </a>
21 38 </div>
22 39 </div>
23 40 </div>
24 41 <div class="row p-1 botonera-secundaria">
25 42 <div class="col-12">
26 43 <div class="row">
27   - <div class="col-3 px-0 py-0" ng-repeat="boton in botonera">
  44 + <div class="col-6 col-sm-3 px-0 py-0" ng-repeat="boton in botonera">
28 45 <button
29 46 type="button"
30 47 class="btn btn-default btn-block btn-xs text-left py-2"
31 48 ng-click="boton.accion()"
  49 + ng-class="{'d-none d-sm-block': boton.texto == ''}"
32 50 >
33 51 <i
34 52 class="fa fa-arrow-circle-right"
... ... @@ -45,18 +63,19 @@
45 63 </div>
46 64 </form>
47 65 <div class="row">
48   - <div class="col-md-10 col-lg-8 offset-md-1 offset-lg-2">
  66 + <div class="col-12 col-md-10 col-lg-8 offset-md-1 offset-lg-2">
  67 + <!-- PC -->
49 68 <div class="row grilla-articulo align-items-end">
50   - <table class="table table-striped table-sm table-dark tabla-articulo">
  69 + <table class="table tabla-articulo table-striped table-sm table-dark">
51 70 <thead>
52   - <tr>
53   - <th class="tabla-articulo-numero">#</th>
54   - <th class="tabla-articulo-codigo">Código</th>
55   - <th class="tabla-articulo-descripcion">Descripción</th>
56   - <th class="tabla-articulo-cantidad text-right">Cantidad</th>
57   - <th class="tabla-articulo-precio text-right">Precio Unitario</th>
58   - <th class="tabla-articulo-subtotal text-right">SubTotal</th>
59   - <th class="tabla-articulo-boton text-right">
  71 + <tr class="d-flex">
  72 + <th class="">#</th>
  73 + <th class="col">Código</th>
  74 + <th class="col-4">Descripción</th>
  75 + <th class="col text-right">Cantidad</th>
  76 + <th class="col text-right">Precio Unitario</th>
  77 + <th class="col text-right">SubTotal</th>
  78 + <th class="text-right">
60 79 <button
61 80 class="btn btn-outline-secondary selectable"
62 81 ng-click="show = !show; masMenos()"
... ... @@ -80,17 +99,18 @@
80 99 <tr
81 100 ng-repeat="(key, articulo) in articulosTabla"
82 101 ng-show="show || key == (articulosTabla.length - 1)"
  102 + class="d-flex"
83 103 >
84   - <td class="tabla-articulo-numero" ng-bind="key + 1"></td>
  104 + <td ng-bind="key + 1"></td>
85 105 <td
86   - class="tabla-articulo-codigo"
  106 + class="col"
87 107 ng-bind="articulo.sector + '-' + articulo.codigo"
88 108 ></td>
89 109 <td
90   - class="tabla-articulo-descripcion"
  110 + class="col-4"
91 111 ng-bind="articulo.descripcion"
92 112 ></td>
93   - <td class="tabla-articulo-cantidad text-right">
  113 + <td class="col text-right">
94 114 <input
95 115 ng-show="articulo.edit"
96 116 ng-model="articulo.cantidad"
... ... @@ -109,16 +129,16 @@
109 129 </i>
110 130 </td>
111 131 <td
112   - class="tabla-articulo-precio text-right"
  132 + class="col text-right"
113 133 ng-bind="articulo.precio | currency: '$'"
114 134 ></td>
115 135 <td
116   - class="tabla-articulo-subtotal text-right"
  136 + class="col text-right"
117 137 ng-bind="(articulo.precio * articulo.cantidad) | currency: '$'">
118 138 </td>
119   - <td class="tabla-articulo-boton text-center">
  139 + <td class="text-center">
120 140 <button
121   - class="btn btn-outline-secondary btn-sm"
  141 + class="btn btn-outline-secondary"
122 142 ng-click="quitarArticulo(key)"
123 143 >
124 144 <i class="fa fa-trash"></i>
... ... @@ -127,26 +147,26 @@
127 147 </tr>
128 148 </tbody>
129 149 <tfoot>
130   - <tr ng-show="!cargando">
  150 + <tr ng-show="!cargando" class="d-flex">
131 151 <td
132   - class="tabla-articulo-numero align-middle"
  152 + class="align-middle"
133 153 ng-bind="articulosTabla.length + 1"
134 154 ></td>
135   - <td class="tabla-articulo-codigo">
  155 + <td class="col">
136 156 <input
137 157 class="form-control"
138 158 ng-model="articuloACargar.sectorCodigo"
139 159 readonly
140 160 >
141 161 </td>
142   - <td class="tabla-articulo-descripcion">
  162 + <td class="col-3 tabla-articulo-descripcion">
143 163 <input
144 164 class="form-control"
145 165 ng-model="articuloACargar.descripcion"
146 166 readonly
147 167 >
148 168 </td>
149   - <td class="tabla-articulo-cantidad text-right">
  169 + <td class="col text-right">
150 170 <input
151 171 class="form-control"
152 172 type="number"
... ... @@ -157,20 +177,20 @@
157 177 ng-keypress="agregarATabla($event.keyCode)"
158 178 >
159 179 </td>
160   - <td class="tabla-articulo-precio text-right">
  180 + <td class="col text-right">
161 181 <input
162 182 class="form-control"
163 183 ng-value="articuloACargar.precio | currency: '$'"
164 184 readonly
165 185 >
166 186 </td>
167   - <td class="tabla-articulo-subtotal text-right">
  187 + <td class="col text-right">
168 188 <input
169 189 class="form-control"
170 190 ng-value="getSubTotal() | currency: '$'"
171 191 readonly
172 192 ></td>
173   - <td class="tabla-articulo-boton text-center align-middle">
  193 + <td class="text-center align-middle">
174 194 <button
175 195 class="btn btn-outline-secondary"
176 196 ng-click="agregarATabla(13)"
... ... @@ -179,8 +199,8 @@
179 199 </button>
180 200 </td>
181 201 </tr>
182   - <tr ng-show="cargando">
183   - <td colspan="7">
  202 + <tr ng-show="cargando" class="d-flex">
  203 + <td colspan="7" class="col-12">
184 204 <input
185 205 placeholder="Seleccione Articulo"
186 206 class="form-control form-control-sm"
... ... @@ -189,12 +209,12 @@
189 209 />
190 210 </td>
191 211 </tr>
192   - <tr class="">
  212 + <tr class="d-flex">
193 213 <td colspan="4">
194 214 <strong>Cantidad Items:</strong>
195 215 <a ng-bind="articulosTabla.length"></a>
196 216 </td>
197   - <td class="text-right table-celda-total"><h3>Total:</h3></td>
  217 + <td class="text-right ml-auto table-celda-total"><h3>Total:</h3></td>
198 218 <td class="table-celda-total text-right" colspan="1">
199 219 <h3>{{getTotal() | currency: '$'}}</h3>
200 220 </td>