cadu-leite/DataTable Vuetify Star Wars API

## DataTable Vuetify Star Wars API
<!DOCTYPE html>
<html>
<head>
   <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
   <link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
   <div id="app">
      <v-app id="inspire">
         <div>
            <v-data-table
            :headers="headers"
            :items="items"
            :pagination.sync= "pagination"
            :total-items="totalItems"
            :loading="loading"
            :rows-per-page-items="[10,20,30]"
            class="elevation-1"
            >
            <template v-slot:items="props">
                  <td class="text-xs-center">{{ props.item.name }}</td>
                  <td class="text-xs-center">{{ props.item.rotation_period }}</td>
                  <td class="text-xs-center">{{ props.item.orbital_period  }}</td>
                  <td class="text-xs-center">{{ props.item.diameter }}</td>
                  <td class="text-xs-center">{{ props.item.climate }}</td>
                  <td class="text-xs-center">{{ props.item.gravity}}</td>
                  <td class="text-xs-center">{{ props.item.terrain }}</td>
                  <td class="text-xs-center">{{ props.item.surface_water }}</td>
                  <td class="text-xs-center">{{ props.item.population}}</td>
            </template>
         </v-data-table>
      </div>
   </v-app>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script type="text/javascript">
   new Vue({
      el: '#app',
      data () {
         return {
            basePlanetsUrl:"https://swapi.co/api/planets/",
            totalItems: 0,
            items: [],
            loading: true,
            pagination: {},
            headers: [

            { text: 'name', value: 'name' },
            { text: 'rotation_period', value: 'rotation_period' },
            { text: 'orbital_period', value: 'orbital_period' },
            { text: 'diameter', value: 'diameter' },
            { text: 'climate', value: 'climate' },
            { text: 'gravity', value: 'gravity' },
            { text: 'terrain', value: 'terrain' },
            { text: 'surface_water', value: 'surface_water' },
            { text: 'population', value: 'population' },
            ]
         }
      },
      watch: {
         pagination: {
            handler () {
               this.getDataFromApi()
               .then(data => {
                  this.items = data.items
                  this.totalItems = data.total

               })
            },
            deep: true
         }
      },
      mounted () {
         // Não necessário por causa do Watch,
         // o pagitnation.sync seta o Pagination a ativa a chamada
         //  da funcao através do Watch
         // this.getDataFromApi()
         // .then(data => {
         //    this.items = data.items;
         //    this.totalItems = data.total;


         // })
      },
      methods: {
         getDataFromApi () {

            localThis = this
            this.loading = true
            return new Promise((resolve, reject) => {
               const { sortBy, descending, page, rowsPerPage } = this.pagination
               // local_pagination = this.pagination

               //local_totalItems = this.totlaItems
               let items = this.getJsonData().then(
                  function(response){
                     items = response.results;

                     const total = response.count
                     setTimeout(() => {
                        localThis.loading = false;
                        resolve({
                           items,
                           total
                        })
                     }, 1000)

               })
            })
         },
         getJsonData () {
            // console.log(this.pagination)
            //  Aqui pra ficar completo falta o parametro de filtro que a
            // a API so SWAPI não me da...
            return  axios.get(`${this.basePlanetsUrl}?page=${this.pagination.page}`)
               .then(function(response){
                  var result  = response.data;
                  return result;
               }).catch(function (error) {
                // handle error
                console.log(error);
              })
         }
      }
   })
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700\|Material+Icons' rel="stylesheet">
	<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
	</head>
	<body>
	<div id="app">
	<v-app id="inspire">
	<div>
	<v-data-table
	:headers="headers"
	:items="items"
	:pagination.sync= "pagination"
	:total-items="totalItems"
	:loading="loading"
	:rows-per-page-items="[10,20,30]"
	class="elevation-1"
	>
	<template v-slot:items="props">
	<td class="text-xs-center">{{ props.item.name }}</td>
	<td class="text-xs-center">{{ props.item.rotation_period }}</td>
	<td class="text-xs-center">{{ props.item.orbital_period }}</td>
	<td class="text-xs-center">{{ props.item.diameter }}</td>
	<td class="text-xs-center">{{ props.item.climate }}</td>
	<td class="text-xs-center">{{ props.item.gravity}}</td>
	<td class="text-xs-center">{{ props.item.terrain }}</td>
	<td class="text-xs-center">{{ props.item.surface_water }}</td>
	<td class="text-xs-center">{{ props.item.population}}</td>
	</template>
	</v-data-table>
	</div>
	</v-app>
	</div>

	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
	<script type="text/javascript">
	new Vue({
	el: '#app',
	data () {
	return {
	basePlanetsUrl:"https://swapi.co/api/planets/",
	totalItems: 0,
	items: [],
	loading: true,
	pagination: {},
	headers: [

	{ text: 'name', value: 'name' },
	{ text: 'rotation_period', value: 'rotation_period' },
	{ text: 'orbital_period', value: 'orbital_period' },
	{ text: 'diameter', value: 'diameter' },
	{ text: 'climate', value: 'climate' },
	{ text: 'gravity', value: 'gravity' },
	{ text: 'terrain', value: 'terrain' },
	{ text: 'surface_water', value: 'surface_water' },
	{ text: 'population', value: 'population' },
	]
	}
	},
	watch: {
	pagination: {
	handler () {
	this.getDataFromApi()
	.then(data => {
	this.items = data.items
	this.totalItems = data.total

	})
	},
	deep: true
	}
	},
	mounted () {
	// Não necessário por causa do Watch,
	// o pagitnation.sync seta o Pagination a ativa a chamada
	// da funcao através do Watch
	// this.getDataFromApi()
	// .then(data => {
	// this.items = data.items;
	// this.totalItems = data.total;


	// })
	},
	methods: {
	getDataFromApi () {

	localThis = this
	this.loading = true
	return new Promise((resolve, reject) => {
	const { sortBy, descending, page, rowsPerPage } = this.pagination
	// local_pagination = this.pagination

	//local_totalItems = this.totlaItems
	let items = this.getJsonData().then(
	function(response){
	items = response.results;

	const total = response.count
	setTimeout(() => {
	localThis.loading = false;
	resolve({
	items,
	total
	})
	}, 1000)

	})
	})
	},
	getJsonData () {
	// console.log(this.pagination)
	// Aqui pra ficar completo falta o parametro de filtro que a
	// a API so SWAPI não me da...
	return axios.get(`${this.basePlanetsUrl}?page=${this.pagination.page}`)
	.then(function(response){
	var result = response.data;
	return result;
	}).catch(function (error) {
	// handle error
	console.log(error);
	})
	}
	}
	})
	</script>
	</body>
	</html>