Skip to content
Permalink
Browse files

Apply vuetify 2 v-data-table

  • Loading branch information...
kondoumh committed Oct 26, 2019
1 parent 1fc09f8 commit 5fbaf09a1378952907c1c1cf4ad663c664ee2265
Showing with 63 additions and 50 deletions.
  1. +37 −30 src/page-list.html
  2. +26 −20 src/page-list.js
@@ -3,19 +3,21 @@
<head>
<meta charset="UTF-8">
<title>Scrapbox page list</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.16/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@1.5.16/dist/vuetify.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.1.7/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@2.1.7/dist/vuetify.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
<style>
tr:nth-child(even) {
background-color: #f2f2f2
}
table.v-table tbody td,
table.v-table tbody th,
table.v-table thead td,
table.v-table thead th,
table.v-table thead th:not(:first-child) {
.v-data-table tbody td,
.v-data-table tbody th,
.v-data-table thead td,
.v-data-table thead th,
.v-data-table thead th:not(:first-child) {
height: 35px;
font-size: medium;
white-space: nowrap;
@@ -49,30 +51,35 @@
<div>
<div class="text-xs-center pt-2">
<v-pagination
v-model="pagination.page"
:length="page"
@input="input"
v-model="page"
:length="length"
></v-pagination>
</div>
<v-data-table
:headers="headers"
:items="items"
:rows-per-page-items="rowsPerPageItems"
:pagination.sync="pagination"
:total-items="pagination.totalItems"
class="elevation-1">
<template v-slot:items="props">
<td class="text-xs-left">{{ props.item.pin != 0 ? "&#128204;" : "" }}</td>
<td class="text-xs-left">{{ props.item.views }}</td>
<td class="text-xs-left">{{ props.item.linked }}</td>
<td class="text-xs-left">{{ formatDate(props.item.updated) }}</td>
<td class="text-xs-left">
<a
:href="'https://scrapbox.io/'+ projectName + '/' + encodeTitle(props.item.title)"
target="_blank"
>{{ props.item.title }}</a>
</td>
<td><img :src="props.item.image" style="width: auto; height: 25px"></td>
:headers="headers"
:items="items"
:options.sync="options"
:server-items-length="pageCount"
:page.sync="page"
:items-per-page="options.itemsPerPage"
:sort-desc="[false, false, false]"
:footer-props="{
'items-per-page-options': [15, 20, 25, 50, 75]
}"
class="elevation-1">
<template v-slot:item.pin="{item}">
{{ item.pin != 0 ? "&#128204;" : "" }}
</template>
<template v-slot:item.updated="{item}">
{{ formatDate(item.updated) }}
</template>
<template v-slot:item.title="{item}">
<a
:href="'https://scrapbox.io/'+ projectName + '/' + encodeTitle(item.title)"
target="_blank">{{ item.title }}</a>
</template>
<template v-slot:item.image="{item}">
<img :src="item.image" style="width: auto; height: 25px">
</template>
</v-data-table>
<div class="dummy-area"></div>
@@ -81,4 +88,4 @@
</div>
<script src="page-list.js"></script>
</body>
</html>
</html>
@@ -1,4 +1,12 @@
const app = new Vue({
vuetify: new Vuetify({
icons : {
iconfont: 'mdi'
},
theme: {
dark: false
}
}),
el: '#app',
async mounted () {
if (!this.projectName) {
@@ -14,24 +22,28 @@ const app = new Vue({
},
methods: {
async fetchData () {
const skip = (this.pagination.page - 1) * this.pagination.rowsPerPage
let url = `https://scrapbox.io/api/pages/${this.projectName}?skip=${skip}&limit=${this.pagination.rowsPerPage}&sort=${this.pagination.sortBy}`
const { sortBy, sortDesc, page, itemsPerPage } = this.options
const skip = (page - 1) * itemsPerPage
let url = `https://scrapbox.io/api/pages/${this.projectName}?skip=${skip}&limit=${itemsPerPage}&sort=${sortBy}`
console.log(url)
const res = await fetch(url)
const data = await res.json()
this.items = await data.pages
this.pagination.totalItems = data.count
console.log(data.count)
this.pageCount = data.count
this.length = Math.ceil(this.pageCount / itemsPerPage)
},
formatDate (timestamp) {
let date = new Date()
date.setTime(timestamp * 1000)
const options = {
const params = {
year: "numeric", month: "numeric", day: "numeric",
hour: "numeric", minute: "numeric", second: "numeric",
hour12: false
}
return date.toLocaleString(navigator.language, options)
return date.toLocaleString(navigator.language, params)
},
input (page) {
input () {
this.fetchData()
},
onFocus () {
@@ -41,28 +53,22 @@ const app = new Vue({
return encodeURIComponent(title)
}
},
computed: {
page () {
if (this.pagination.rowsPerPage == null || this.pagination.totalItems == null ) return 0
return Math.ceil(this.pagination.totalItems / this.pagination.rowsPerPage)
}
},
watch: {
pagination: {
options: {
handler () {
this.pagination.descending = false
this.fetchData()
}
},
deep: true
}
},
data: () => ({
page: 1,
pageCount: 0,
length: 1,
items: [],
ptojectName: '',
rowsPerPageItems: [15, 20, 25, 50, 75, 100],
pagination: {
sortBy: 'updated',
rowsPerPage: 50,
totalItems: 0
options: {
itemsPerPage: 50,
},
headers: [
{ text: 'pin', value: 'pin', sortable: false, width: '25px' },

0 comments on commit 5fbaf09

Please sign in to comment.
You can’t perform that action at this time.