SHARE
TWEET

Untitled

a guest Oct 15th, 2019 96 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. (async function(){
  2.     'use strict';
  3.  
  4.     function generateUsersRows(users) {
  5.         var getCRSF_Token = function() {
  6.             var element = document.querySelector('meta[name="csrf-token"]');
  7.             return element.getAttribute("content");
  8.         };
  9.         var addRow = function(parentNode, CRSFToken, id, name, email, age, department) {
  10.             var newtr = document.createElement('tr');
  11.             // Primeira célula (Nome)
  12.             var newtd = document.createElement('td');
  13.             var newlink = document.createElement('a');
  14.             newlink.href= 'users/' + id;
  15.             newlink.textContent =  name;
  16.             newtd.appendChild(newlink);
  17.             newtr.appendChild(newtd);
  18.             // Segunda célula (Email)
  19.             newtd = document.createElement('td');
  20.             newtd.textContent =  email;
  21.             newtr.appendChild(newtd);
  22.             // Terceira célula (Age)
  23.             newtd = document.createElement('td');
  24.             newtd.textContent =  age;
  25.             newtr.appendChild(newtd);
  26.             // Quarta célula (department)
  27.             newtd = document.createElement('td');
  28.             newtd.textContent =  department;
  29.             newtr.appendChild(newtd);
  30.             // Quinta Célula (1 link - edit  - e um formulário para delete)
  31.             // Link:
  32.             newtd = document.createElement('td');      
  33.             var newNode = document.createElement('a');
  34.             newNode.textContent = 'Edit';
  35.             newNode.classList.add('btn', 'btn-xs', 'btn-primary');
  36.             newNode.href = window.location.hostname + '/users/' + id + '/edit';
  37.             newtd.appendChild(newNode);
  38.             // Form
  39.             var formNode = document.createElement('form');
  40.             formNode.action = 'http://' + window.location.hostname + '/users/' + id;
  41.             formNode.method = 'post';
  42.             formNode.classList.add('inline');
  43.             newNode = document.createElement('input');
  44.             newNode.type = 'hidden';
  45.             newNode.name = '_method';
  46.             newNode.value = 'DELETE';
  47.             formNode.appendChild(newNode);
  48.             newNode = document.createElement('input');
  49.             newNode.type = 'hidden';
  50.             newNode.name = '_token';
  51.             newNode.value = CRSFToken;
  52.             formNode.appendChild(newNode);
  53.             var divNode = document.createElement('div');
  54.             divNode.classList.add('form-group');
  55.             newNode = document.createElement('button');
  56.             newNode.type = 'submit';
  57.             newNode.textContent = 'Delete';
  58.             newNode.classList.add('btn', 'btn-xs', 'btn-danger');
  59.             divNode.appendChild(newNode);
  60.             formNode.appendChild(divNode);
  61.             newtd.appendChild(formNode);
  62.             newtr.appendChild(newtd);
  63.             parentNode.appendChild(newtr);      
  64.         };
  65.  
  66.         var tbodyElement = document.getElementsByTagName('tbody')[0];
  67.         var CRSFToken = getCRSF_Token();
  68.         users.forEach(function(user) {
  69.             addRow(tbodyElement, CRSFToken, user.id, user.name, user.email, user.age, user.department.name);
  70.             });
  71.     }
  72.     const paginationUL = document.querySelector('ul.pagination');
  73.     const tableBody = document.querySelector('table tbody');
  74.     const createPagination = (data)=>{
  75.         for (let i = 1; i <=data.last_page;i++){
  76.             let item= document.createElement('li');
  77.             let link = document.createElement('a');
  78.             item.classList.add('page-item');
  79.             link.classList.add('page-link');
  80.             item.appendChild(link);
  81.             link.innerHTML = i;
  82.  
  83.             link.addEventListener('click',async (event)=>{
  84.                 event.preventDefault();
  85.                 fetchData(`api/user?page=${i}`);
  86.             })
  87.             paginationUL.appendChild(item);
  88.         }
  89.  
  90.     }
  91.  const createButton = (data)=>{
  92.                  let item= document.createElement('li');
  93.             let link = document.createElement('a');
  94.             item.classList.add('page-item');
  95.             link.classList.add('page-link');
  96.             item.appendChild(link);
  97.             link.innerHTML = i;
  98.  
  99.             link.addEventListener('click',async (event)=>{
  100.                 event.preventDefault();
  101.                 fetchData(`api/user?page=${i}`);
  102.             })
  103.             paginationUL.appendChild(item);
  104.  }
  105.  
  106.  
  107.     const fetchData = async(url='api/user?page=1')=>{
  108.         let response = await axios.get(url);
  109.         tableBody.innerHTML ='';
  110.         let users = response.data.data;
  111.         generateUsersRows(users);
  112.         let metadata = response.data;
  113.         paginationUL.innerHTML = '';
  114.         createPagination(metadata);
  115.     }
  116.    
  117.     fetchData();
  118.  
  119.          
  120. })();
RAW Paste Data
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
 
Top