Created
November 16, 2017 18:09
-
-
Save mtorromeo/2554d6443f57f6f1aaa288eae5fd55ff to your computer and use it in GitHub Desktop.
Vue-Patternfly full table example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <div> | |
| <pf-toolbar ref="toolbar" class="table-view-pf-toolbar" | |
| :filters.sync="filters" | |
| :filter-fields="filterFields" | |
| :result-count="mails.total" | |
| :columns="['Date', 'From', 'To', 'Subject', 'Size', 'Attachments']" | |
| :picked-columns.sync="columns" | |
| view="table" | |
| views=''> | |
| <button class="btn btn-default" type="button" @click="fetch"> | |
| <span class="i fa fa-refresh"></span> | |
| Refresh | |
| </button> | |
| </pf-toolbar> | |
| <pf-table class="flex-column" striped bordered hover scrollable sortable | |
| :page.sync="page" | |
| :pages="pages" | |
| :columns="columns" | |
| :rows="mails.hits" | |
| :sort-by="sortBy" | |
| :sort-direction="sortDirection" | |
| @sort-by="setSort"> | |
| <template scope="data"> | |
| <td v-if="columns.indexOf('Date') >= 0" class="table-column-date"> | |
| {{dateFormat(data.row['date'])}} | |
| </td> | |
| <td v-if="columns.indexOf('From') >= 0"> | |
| <a :href="'mailto:' + data.row.from" :title="data.row.from">{{mailLabel(data.row.from)}}</a> | |
| </td> | |
| <td v-if="columns.indexOf('To') >= 0"> | |
| <template v-for="(email, i) in data.row.to"> | |
| <template v-if="i > 0">, </template> | |
| <a :href="'mailto:' + email" :title="email">{{mailLabel(email)}}</a> | |
| </template> | |
| </td> | |
| <td v-if="columns.indexOf('Subject') >= 0"> | |
| {{data.row.subject}} | |
| </td> | |
| <td v-if="columns.indexOf('Size') >= 0" class="table-column-size"> | |
| {{sizeFormat(data.row.size)}} | |
| </td> | |
| <td v-if="columns.indexOf('Attachments') >= 0" class="table-column-attachments"> | |
| {{data.row.nr_attachments}} | |
| </td> | |
| </template> | |
| <template scope="data" slot="action"> | |
| <a :href="'/mail/' + data.row.id + '.eml'" class="btn btn-default"> | |
| <span class="i fa fa-envelope"></span> | |
| Open | |
| </a> | |
| </template> | |
| </pf-table> | |
| </div> | |
| </template> | |
| <style> | |
| .table-column-date { | |
| min-width: 140px; | |
| } | |
| .table-column-size { | |
| min-width: 80px; | |
| text-align: right; | |
| } | |
| </style> | |
| <script> | |
| import http from '../http'; | |
| import format from 'date-fns/format'; | |
| const MAX_RESULT_WINDOW = 50; | |
| export default { | |
| name: 'archive-page', | |
| data() { | |
| return { | |
| columns: ['Date', 'From', 'To', 'Subject', 'Size'], | |
| filters: [], | |
| filterFields: { | |
| subject: 'Subject', | |
| body: 'Body', | |
| from: 'From', | |
| to: 'To', | |
| date: { | |
| label: 'Date', | |
| placeholder: 'Ex: >2017-01-01', | |
| }, | |
| size: { | |
| label: 'Size', | |
| placeholder: 'Ex: >100000', | |
| }, | |
| nr_attachments: { | |
| label: 'Nr. Attachments', | |
| placeholder: 'Ex: 0', | |
| }, | |
| any: 'Any', | |
| }, | |
| sortBy: 'Date', | |
| sortDirection: 'desc', | |
| mails: {}, | |
| page: 1, | |
| size: 50, | |
| }; | |
| }, | |
| mounted() { | |
| this.fetch(); | |
| }, | |
| computed: { | |
| pages() { | |
| if (!this.mails.total) { | |
| return 0; | |
| } | |
| return this.mails.total / this.size; | |
| }, | |
| }, | |
| methods: { | |
| async fetch() { | |
| this.mails = {}; | |
| const query = { | |
| filters: this.filters, | |
| from: (this.page - 1) * this.size, | |
| size: this.size, | |
| sortBy: this.sortBy, | |
| sortDirection: this.sortDirection, | |
| }; | |
| try { | |
| this.mails = await http.get('/mail/', query); | |
| } catch(e) { | |
| this.$root.notify(e.response.text, e.response.status >= 500 ? 'danger' : 'warning'); | |
| } | |
| }, | |
| mailLabel(mail) { | |
| if (!mail || mail.substr(-1) != '>') { | |
| return mail; | |
| } | |
| var match = /^["']*(.*?)["']*\s*<(.*)>$/.exec(mail); | |
| if (match) { | |
| return match[1] ? match[1] : match[2]; | |
| } | |
| return mail; | |
| }, | |
| dateFormat(date_string) { | |
| const d = new Date(date_string); | |
| return format(d, 'DD/MM/YYYY HH:mm:SS'); | |
| }, | |
| sizeFormat(size) { | |
| const units = ['', 'K', 'M', 'G', 'T', 'P']; | |
| let unitX = 0; | |
| while (size >= 1000 && unitX < units.length) { | |
| unitX++; | |
| size /= 1000; | |
| } | |
| const precision = unitX < 2 ? 0 : 2; | |
| return `${size.toLocaleString(undefined, {maximumFractionDigits: precision})} ${units[unitX]}B`; | |
| }, | |
| setSort(field, direction) { | |
| this.sortBy = field; | |
| this.sortDirection = direction; | |
| this.fetch(); | |
| }, | |
| }, | |
| watch: { | |
| filters() { | |
| this.page = 1; | |
| this.fetch(); | |
| }, | |
| page() { | |
| this.fetch(); | |
| }, | |
| }, | |
| }; | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment