From 66d4c6f7011878e878c092260a4138b3510ffbe8 Mon Sep 17 00:00:00 2001
From: "J.-S. Caux" <J.S.Caux@uva.nl>
Date: Sun, 20 Jun 2021 21:42:17 +0200
Subject: [PATCH] Remove b-table and b-pagination
---
.../assets/vue/components/MessagesTable.vue | 289 ++++++++----------
.../apimail/assets/vue/messages_table.js | 8 -
.../components/SearchableObjectsTable.vue | 10 +-
3 files changed, 135 insertions(+), 172 deletions(-)
diff --git a/scipost_django/apimail/static/apimail/assets/vue/components/MessagesTable.vue b/scipost_django/apimail/static/apimail/assets/vue/components/MessagesTable.vue
index a27eabd89..f3ce2a535 100644
--- a/scipost_django/apimail/static/apimail/assets/vue/components/MessagesTable.vue
+++ b/scipost_django/apimail/static/apimail/assets/vue/components/MessagesTable.vue
@@ -202,11 +202,7 @@
<h1 class="p-2 mb-0 text-center">Your email accounts</h1>
<div class="text-center"><em>(click on a row to see messages)</em></div>
</div>
- <table
- class="table mb-4"
- selectable
- select-mode="single"
- >
+ <table class="table mb-4">
<tr>
<th>Account</th>
<th>Address</th>
@@ -241,7 +237,7 @@
<small class="p-2">Last loaded: {{ lastLoaded }}</small>
<span
class="badge bg-primary p-2"
- @click="refreshMessages"
+ @click="fetchMessages"
>
Refresh now
</span>
@@ -431,66 +427,58 @@
</div>
</div>
</div>
- <b-table
- id="my-table"
- class="mb-0"
- responsive
- show-empty
- :items="messagesProvider"
- :fields="fields"
- :filter="filter"
- :filterIncludedFields="filterOn"
- @filtered="onFiltered"
- :per-page="perPage"
- :current-page="currentPage"
- @row-clicked="onMessageRowClicked"
- >
- <template v-slot:table-busy>
- <button
- class="btn btn-outline-primary"
- type="button" disabled
+
+ <table class="table mb-0">
+ <thead>
+ <tr>
+ <th v-if="tabbedMessages.length > 0" scope="col">
+ Tab
+ </th>
+ <th scope="col"></th>
+ <th scope="col">On</th>
+ <th scope="col">Subject</th>
+ <th scope="col">From</th>
+ <th scope="col">Recipients</th>
+ <th scope="col">Tags</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr
+ v-for="message in messages"
+ :key="message.uuid"
+ @click="onMessageRowClicked(message)"
>
- <span
- class="spinner-grow spinner-grow-sm"
- role="status"
- aria-hidden="true"
- >
- </span>
- Loading...
- </button>
- </template>
- <template v-slot:head(tab)="row">
- <span v-if="tabbedMessages.length > 0">
- Tab
- </span>
- </template>
- <template v-slot:head(tags)="row">
- Tags
- </template>
- <template v-slot:cell(tab)="row">
- <span v-if="isInTabbedMessages(row.item.uuid)">
- {{ tabbedMessages.length - indexInTabbedMessages(row.item.uuid) }}
- </span>
- </template>
- <template v-slot:cell(read)="row">
- <span v-if="!row.item.read">
- <span class="badge bg-primary"> </span>
- </span>
- </template>
- <template v-slot:cell(tags)="row">
- <ul class="list-inline">
- <li class="list-inline-item m-0" v-for="tag in row.item.tags">
- <button
- type="button"
- class="btn btn-sm p-1"
- :style="'background-color: ' + tag.bg_color"
- >
- <small :style="'color: ' + tag.text_color">{{ tag.label }}</small>
- </button>
- </li>
- </ul>
- </template>
- </b-table>
+ <td v-if="tabbedMessages.length > 0">
+ <span v-if="isInTabbedMessages(message.uuid)">
+ {{ tabbedMessages.length - indexInTabbedMessages(message.uuid) }}
+ </span>
+ </td>
+ <td>
+ <span v-if="!message.read">
+ <span class="badge bg-primary"> </span>
+ </span>
+ </td>
+ <td>{{ message.datetimestamp }}</td>
+ <td>{{ message.data.subject }}</td>
+ <td>{{ message.data.from }}</td>
+ <td>{{ message.data.recipients }}</td>
+ <td>
+ <ul class="list-inline">
+ <li class="list-inline-item m-0" v-for="tag in message.tags">
+ <button
+ type="button"
+ class="btn btn-sm p-1"
+ :style="'background-color: ' + tag.bg_color"
+ >
+ <small :style="'color: ' + tag.text_color">{{ tag.label }}</small>
+ </button>
+ </li>
+ </ul>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
<div class="card text-dark bg-light pb-0">
<div class="card-body">
<div class="row mb-0">
@@ -505,16 +493,10 @@
</div>
</div>
<div class="col col-lg-4">
- <b-pagination
+ <b-form-input
v-model="currentPage"
- :total-rows="totalRows"
- :per-page="perPage"
- class="m-1"
- size="sm"
- align="center"
- aria-controls="my-table"
>
- </b-pagination>
+ </b-form-input>
</div>
<div class="col col-lg-4">
<b-form-group
@@ -631,6 +613,7 @@ export default {
draftMessageSelected: null,
queuedMessages: null,
tabbedMessages: [],
+ messages: [],
perPage: 8,
perPageOptions: [ 8, 16, 32 ],
currentPage: 1,
@@ -638,15 +621,6 @@ export default {
lastFetched: null,
lastLoaded: null,
loadError: false,
- fields: [
- { key: 'tab', label: '' },
- { key: 'read', label: '' },
- { key: 'datetimestamp', label: 'On' },
- { key: 'data.subject', label: 'Subject' },
- { key: 'data.from', label: 'From' },
- { key: 'data.recipients', label: 'Recipients' },
- { key: 'tags', },
- ],
filter: null,
filterOn: [],
threadOf: null,
@@ -741,75 +715,61 @@ export default {
}
return false
},
- messagesProvider (ctx) {
- if (!this.accountSelected) return []
-
- var params = '?account=' + this.accountSelected.email
- // Our API uses limit/offset pagination
- params += '&limit=' + ctx.perPage + '&offset=' + ctx.perPage * (ctx.currentPage - 1)
- if (this.threadOf) {
- params += '&thread_of_uuid=' + this.threadOf
- }
- // Add flow direction
- if (this.flowDirection) {
- params += '&flow=' + this.flowDirection
+ fetchMessages () {
+ if (!this.accountSelected) {
+ this.messages = []
}
- // Add search time period
- params += '&period=' + this.timePeriod
- if (this.readStatus !== null) {
- params += '&read=' + this.readStatus
- }
- this.tagsRequired.forEach((tag) => {
- params += '&tag=' + tag
- })
- // Add search query (if it exists)
- if (this.filter) {
- var filterlist = ['from', 'recipients', 'subject', 'body', 'attachment']
- if (this.filterOn.length > 0) {
- filterlist = this.filterOn
+ else {
+ var params = '?account=' + this.accountSelected.email
+ // Our API uses limit/offset pagination
+ params += '&limit=' + this.perPage + '&offset=' + this.perPage * (this.currentPage - 1)
+ if (this.threadOf) {
+ params += '&thread_of_uuid=' + this.threadOf
+ }
+ // Add flow direction
+ if (this.flowDirection) {
+ params += '&flow=' + this.flowDirection
}
+ // Add search time period
+ params += '&period=' + this.timePeriod
+ if (this.readStatus !== null) {
+ params += '&read=' + this.readStatus
+ }
+ this.tagsRequired.forEach((tag) => {
+ params += '&tag=' + tag
+ })
+ // Add search query (if it exists)
+ if (this.filter) {
+ var filterlist = ['from', 'recipients', 'subject', 'body', 'attachment']
+ if (this.filterOn.length > 0) {
+ filterlist = this.filterOn
+ }
- filterlist.forEach((filterfield) => {
- params += '&' + filterfield + '=' + this.filter
- });
- }
- const promise = fetch('/mail/api/stored_messages' + params)
+ filterlist.forEach((filterfield) => {
+ params += '&' + filterfield + '=' + this.filter
+ });
+ }
- var now = new Date()
+ var now = new Date()
- return promise.then(response => {
- if (response.ok) {
- this.lastLoaded = now.toISOString()
- this.loadError = false
- }
- return response.json()
- })
- .then(data => {
- const items = data.results
- this.totalRows = data.count
- if (this.threadOf) {
- this.tabbedMessages = items
- }
- return items || []
- })
- .catch(error => {
- this.lastFetched = now.toISOString()
- this.loadError = true
- console.error(error)
- })
- },
- refreshMessages () {
- this.messagesProvider({
- 'perPage': this.perPage,
- 'currentPage': this.currentPage
- })
- this.$root.$emit('bv::refresh::table', 'my-table')
+ fetch('/mail/api/stored_messages' + params)
+ .then(stream => stream.json())
+ .then(data => {
+ this.lastLoaded = now.toISOString()
+ this.loadError = false
+ this.messages = data.results
+ this.totalRows = data.results.length
+ if (this.threadOf) {
+ this.tabbedMessages = this.messages
+ }
+ }).catch(error => {
+ this.lastFetched = now.toISOString()
+ this.loadError = true
+ console.error(error)
+ })
+ }
this.fetchQueued()
},
- onFiltered(filteredItems) {
- this.totalRows = filteredItems.length
- this.currentPage = 1
- },
indexInTabbedMessages (uuid) {
for (let i = 0; i < this.tabbedMessages.length; i++) {
if (this.tabbedMessages[i].uuid == uuid) {
@@ -850,6 +810,7 @@ export default {
this.fetchTags()
this.fetchDrafts()
this.fetchQueued()
+ this.fetchMessages()
// To move to non-BootstrapVue JS
// this.$root.$on('bv::modal::hide', (bvEvent, modalId) => {
@@ -860,17 +821,19 @@ export default {
// this.fetchDrafts()
// }
// })
- this.refreshInterval = setInterval(this.refreshMessages, this.refreshMinutes * 60000)
+ this.fetchMessagesInterval = setInterval(this.fetchMessages, this.refreshMinutes * 60000)
this.resumeDraftModal = new Modal(document.getElementById('modal-resumedraft'))
},
beforeDestroy() {
clearInterval(this.refreshInterval)
+ clearInterval(this.fetchMessagesInterval)
},
watch: {
accountSelected: function () {
- this.$root.$emit('bv::refresh::table', 'my-table')
+ this.tabbedMessages = []
+ this.fetchMessages()
},
threadOf: function () {
if (this.threadOf == null) {
@@ -880,37 +843,43 @@ export default {
this.flowDirectionLastNotNull = this.flowDirection
this.flowDirection = null
}
- this.$root.$emit('bv::refresh::table', 'my-table')
+ this.fetchMessages()
},
timePeriod: function () {
- this.$root.$emit('bv::refresh::table', 'my-table')
+ this.fetchMessages()
},
- filterOn: function () {
- this.$root.$emit('bv::refresh::table', 'my-table')
+ currentPage: function () {
+ this.fetchMessages()
},
- readStatus: function () {
- this.$root.$emit('bv::refresh::table', 'my-table')
+ filter: function () {
+ this.fetchMessages()
+ },
+ filterOn: function () {
+ this.fetchMessages()
},
flowDirection: function () {
if (this.flowDirection != null) {
this.flowDirectionLastNotNull = this.flowDirection
}
- this.$root.$emit('bv::refresh::table', 'my-table')
+ this.fetchMessages()
},
- tagsRequired: function () {
- this.$root.$emit('bv::refresh::table', 'my-table')
+ perPage: function () {
+ this.fetchMessages()
},
- accountSelected: function () {
- this.tabbedMessages = []
+ readStatus: function () {
+ this.fetchMessages()
+ },
+ refreshMinutes: function () {
+ clearInterval(this.fetchMessagesInterval)
+ this.fetchMessagesInterval = setInterval(this.fetchMessages, this.refreshMinutes * 60000)
},
tabbedMessages: function () {
if (this.threadOf) {
this.tabIndex = this.indexInTabbedMessages(this.threadOf)
}
},
- refreshMinutes: function () {
- clearInterval(this.refreshInterval)
- this.refreshInterval = setInterval(this.refreshMessages, this.refreshMinutes * 60000)
+ tagsRequired: function () {
+ this.fetchMessages()
},
}
}
diff --git a/scipost_django/apimail/static/apimail/assets/vue/messages_table.js b/scipost_django/apimail/static/apimail/assets/vue/messages_table.js
index ef009be2b..44570e92d 100644
--- a/scipost_django/apimail/static/apimail/assets/vue/messages_table.js
+++ b/scipost_django/apimail/static/apimail/assets/vue/messages_table.js
@@ -5,10 +5,6 @@ import {
FormPlugin, FormCheckboxPlugin, BFormFile, BFormGroup, BFormInput, FormRadioPlugin, BFormSelect,
// Input
BInputGroup, BInputGroupAppend,
- // Pagination,
- BPagination,
- // Tables
- TablePlugin,
} from 'bootstrap-vue';
// Forms
@@ -22,10 +18,6 @@ Vue.component('b-form-select', BFormSelect)
// Input
Vue.component('b-input-group', BInputGroup)
Vue.component('b-input-group-append', BInputGroupAppend)
-// Pagination
-Vue.component('b-pagination', BPagination)
-// Tables
-Vue.use(TablePlugin)
// Style
diff --git a/scipost_vue/components/SearchableObjectsTable.vue b/scipost_vue/components/SearchableObjectsTable.vue
index 10d5c39cd..3360cfe93 100644
--- a/scipost_vue/components/SearchableObjectsTable.vue
+++ b/scipost_vue/components/SearchableObjectsTable.vue
@@ -82,10 +82,12 @@
<h3 class="mb-2">Currently applied queries <small class="text-muted">(combined with <em>AND</em>)</small>:</h3>
<table class="table">
<thead>
- <th scope="col">Field</th>
- <th scope="col">Lookup</th>
- <th scope="col">Value</th>
- <th scope="col">Actions</th>
+ <tr>
+ <th scope="col">Field</th>
+ <th scope="col">Lookup</th>
+ <th scope="col">Value</th>
+ <th scope="col">Actions</th>
+ </tr>
</thead>
<tbody>
<tr
--
GitLab