Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save rinaldifonseca/08202ab4c9324558f38be364ee70290f to your computer and use it in GitHub Desktop.
Save rinaldifonseca/08202ab4c9324558f38be364ee70290f to your computer and use it in GitHub Desktop.
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment