API tools faq
paste
Advertisement
Guest User

paraFalito2

a guest
May 10th, 2019
111
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.31 KB | None | 0 0
raw download clone embed print report
  1. var clientes = new Vue({
  2. el: "#tabla-clientes",
  3. data: {
  4. logged: false,
  5. clientes,
  6. paginaActual: 0,
  7. nombreFantasia: "",
  8. page: {
  9. totalPages: 0
  10. }
  11. },
  12. methods: {
  13. cargar: function (json) {
  14. this.clientes = json._embedded.clienteResources;
  15. this.page = json.page;
  16. this.paginaActual = json.page.number;
  17. },
  18. buscar: function () {
  19. this.paginaActual = 0;
  20. consultaClientes(this.paginaActual, this.nombreFantasia)
  21. },
  22. previous: function () {
  23. this.paginaActual--;
  24. consultaClientes(this.paginaActual, this.nombreFantasia)
  25. },
  26. next: function () {
  27. this.paginaActual++;
  28. consultaClientes(this.paginaActual, this.nombreFantasia)
  29. }
  30. },
  31. computed: {
  32. hasNext: function () {
  33. return clientes.paginaActual + 1 !== clientes.page.totalPages
  34. },
  35. hasPrevious: function () {
  36. return clientes.paginaActual !== 0
  37. },
  38. }
  39. })
  40.  
  41. function consultaClientes (page, nombreFantasia) {
  42. $.get({
  43. url: 'http://10.0.0.197:9003/clientes',
  44. crossDomain: true,
  45. data: {
  46. page: page,
  47. nom_fantasia: nombreFantasia
  48. },
  49. headers: {
  50. EmpID: 1,
  51. Authorization: 'Basic ' + btoa(login.user + ':' + login.password)
  52. }
  53. }).done(function (json){
  54. clientes.cargar(json)
  55. }).fail(function (){
  56. alert("HICISTE ALGO MAL FALITENS !!!");
  57. })
  58. }
  59.  
  60. var login = new Vue({
  61. el: '#login',
  62. data: {
  63. logged: false,
  64. user: "ADMIN",
  65. password: "ADMIN"
  66. },
  67. methods: {
  68. ingresar: function () {
  69. $.get({
  70. url: 'http://10.0.0.197:9003/clientes',
  71. crossDomain: true,
  72. data: {
  73. page: clientes.paginaActual,
  74. nom_fantasia: clientes.nombreFantasia
  75. },
  76. headers: {
  77. EmpID: 1,
  78. Authorization: 'Basic ' + btoa(login.user + ':' + login.password)
  79. }
  80. }).done(function (resultadoJSON) {
  81. login.logged = true;
  82. clientes.cargar(resultadoJSON);
  83. clientes.logged = true;
  84.  
  85. }).fail(function () {
  86. alert("HICISTE ALGO MAL FALITENS !!!");
  87. });
  88.  
  89. }
  90. }
  91. })
  92.  
  93. var detalleCliente = new Vue ({
  94. el: "#detalleCliente",
  95. data: {
  96. logged: false,
  97. codigo: "",
  98. razonSocial: "",
  99. nombre: "",
  100. cuit: "",
  101. domicilios: {
  102. domicilio: "",
  103. localidad: {
  104. nombre: "",
  105. cod_postal: ""
  106. }
  107. },
  108. sit_ante_iva_nombre: ""
  109.  
  110. },
  111. methods: {
  112. detallar: function () {
  113. consultaClientes(cliente.paginaActual, cliente.nombreFantasia)
  114. }
  115. }
  116. })
  117.  
  118. $(document).ready(login.ingresar())
  119.  
  120.  
  121. //HTML
  122.  
  123.  
  124. <!DOCTYPE html>
  125. <html lang="en">
  126.  
  127. <head>
  128. <meta charset="UTF-8">
  129. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  130. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  131. <title>Document</title>
  132.  
  133. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  134. <link rel="stylesheet" href="style.css">
  135. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  136. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  137.  
  138. </head>
  139.  
  140. <body>
  141. <div class="container-fluid">
  142. <form id="login" v-if="!logged">
  143. <div class="form-group">
  144. <input type="text" v-model="user" class="form-control" id="usuario" aria-describedby="emailHelp"
  145. placeholder="Usuario" required>
  146. </div>
  147.  
  148. <div class="form-group">
  149. <input type="password" v-model="password" class="form-control" id="inputPassword"
  150. placeholder="Contraseña" required>
  151. </div>
  152.  
  153. <button v-on:click.prevent="ingresar" class="btn btn-primary">Ingresar</button>
  154. </form>
  155.  
  156. <div id="tabla-clientes" class="center" v-if="logged">
  157. <form style="display:inline-block">
  158. <div id="busqueda" class="center2">
  159. Search: <input type="text" @input="buscar(page, nombreFantasia)" v-model="nombreFantasia" placeholder="busca" id="busqueda"/>
  160. <button class="btn btn-primary"> Buscar
  161. <span class="glyphicon glyphicon-search"></span>
  162. </button>
  163. </div>
  164. </form>
  165. <div class="pager">
  166. <a class="glyphicon glyphicon-arrow-left" v-if="hasPrevious" v-on:click="previous"></a>
  167. <span class="badge num"> {{ paginaActual }} de {{ page.totalPages }}</span>
  168. <a class="glyphicon glyphicon-arrow-right arrowRight" v-if="hasNext" v-on:click.prevent="next"></a>
  169. </div>
  170.  
  171. <table class="myTable">
  172. <thead>
  173. <tr>
  174. <th scope="col">ID Cliente</th>
  175. <th scope="col">Razon Social</th>
  176. <th scope="col">Nombre Fantasia</th>
  177. <th scope="col">Domicilio</th>
  178. <th scope="col">Localidad</th>
  179. <th scope="col">Email</th>
  180. </tr>
  181. </thead>
  182. <tbody>
  183. <tr class="niceColor" v-for="cliente in clientes">
  184. <td>{{ cliente.cliId }}</td>
  185. <td>{{ cliente.razonSocial }}</td>
  186. <td>{{ cliente.nombreFantasia }}</td>
  187. <td>{{ cliente.domicilios[0].domicilio }}</td>
  188. <td>{{ cliente.domicilios[0].localidad.nombre }}</td>
  189. <td>{{ cliente.email || 'no email' }}</td>
  190. </tr>
  191. </tbody>
  192. </table>
  193. </div>
  194.  
  195. <div>
  196. <form style="display:inline-block">
  197. <div id="detalleCliente" class="">
  198. <a class="glyphicon glyphicon-arrow-left"></a>
  199. <p>{{ detalleCliente.codigo }}</p>
  200. <p>{{ detalleCliente.razonSocial }}</p>
  201. <p>{{ detalleCliente.nombre }}</p>
  202. <p>{{ detalleCliente.cuit }}</p>
  203. <p>{{ detalleCliente.domicilios[0].domicilio }}</p>
  204. <p>{{ cliente.domicilios[0].localidad.nombre }}</p>
  205. <p>{{ cliente.domicilios[0].localidad.cod_postal}}</p>
  206. <p>{{ cliente.email || 'no email' }}</p>
  207. <p>{{ detalleCliente.sit_ante_iva_nombre}}</p>
  208. </div>
  209. </form>
  210. </div>
  211. </div>
  212. </body>
  213. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  214. <script src="myVue.js"></script>
  215.  
  216. </html>
  217.  
  218.  
  219. //CSS
  220.  
  221.  
  222. body, html { height: 100%; width: 100%; }
  223.  
  224. .container-fluid {
  225. height: 100%;
  226. display: flex;
  227. }
  228.  
  229. form {
  230. padding: 20px;
  231. min-width: 350px;
  232. margin: auto;
  233. background: #fff;
  234. -webkit-box-shadow: 0px 0px 3px 0px rgba(107,107,107,1);
  235. -moz-box-shadow: 0px 0px 3px 0px rgba(107,107,107,1);
  236. box-shadow: 0px 0px 3px 0px rgba(107,107,107,1);
  237. }
  238.  
  239. form * {
  240. border-radius: 0 !important;
  241. }
  242.  
  243. form > button {
  244. width: 100%;
  245. }
  246.  
  247. .center {
  248. width: 80%;
  249. margin: 0 auto;
  250. }
  251.  
  252. .pager {
  253. text-align: RIGHT;
  254. }
  255.  
  256. table {
  257. border-collapse: collapse;
  258. }
  259.  
  260. table, th, td {
  261. border: 1px solid grey;
  262. }
  263.  
  264. th, td {
  265. padding: 15px;
  266. text-align: left;
  267. }
  268.  
  269. th {
  270. background-color: #4CAF50;
  271. color: white;
  272. }
  273.  
  274. .niceColor {
  275. background-color: lightblue;
  276. }
  277. #detalles{
  278. position: absolute;
  279. top:0;
  280. }
  281.  
  282. tr:hover {
  283. cursor:pointer;
  284. background-color: rgba(67, 151, 56, 0.671);
  285. }
  286.  
  287. #falito{
  288. font-size: 30px;
  289. }
  290.  
  291. /* PÁGINA LINDA PARA DEJAR LINDAS LAS COSAS, NO SÉ HAY MUCHO RE VIOLENTO */
  292. /* https://www.webucator.com/how-to/how-style-table-with-css.cfm */
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!