diff --git a/scipost_django/apimail/static/apimail/assets/vue/components/MessageContent.vue b/scipost_django/apimail/static/apimail/assets/vue/components/MessageContent.vue
index 35f4e30d9810af4d22702f54ba644cc927dadd73..1f4af270b03bc82fff01f5a14f1c68e369de1618 100644
--- a/scipost_django/apimail/static/apimail/assets/vue/components/MessageContent.vue
+++ b/scipost_django/apimail/static/apimail/assets/vue/components/MessageContent.vue
@@ -1,13 +1,7 @@
<template>
<div>
- <b-card
- border-variant="primary"
- class="overflow-x-auto"
- header-tag="header"
- footer-tag="footer"
- >
- <template v-slot:header>
-
+ <div class="card border-primary overflow-x-auto">
+ <div class="card-header">
<ul class="list-inline m-2">
<li class="list-inline-item">
<button
@@ -158,69 +152,69 @@
</ul>
</li>
</ul>
- <hr>
- <div class="text-dark">
- <div class="row">
- <div class="col col-lg-10">
- On: {{ message.datetimestamp }}
- <br>
- Subject: <strong>{{ message.data.subject }}</strong>
- <br>
- From: {{ message.data.from }}
- <br>
- Recipients: {{ message.data.recipients }}
- </div>
- <div class="col col-lg-2">
- <button
- type="button"
- class="btn btn-secondary"
- data-bs-toggle="modal"
- :data-bs-target="'#message-events-modal' + message.uuid"
- >
- <small>View all events</small>
- </button>
- <div
- class="modal fade"
- :id="'message-events-modal' + message.uuid"
- >
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header">
- <h1 class="modal-title">
- Events
- </h1>
- </div>
- <div class="modal-body">
- <ul class="list-unstyled">
- <li v-for="event in message.event_set">
- <small>
- {{ event.data.timestamp|toDatestring }} {{ event.data.event }}
- <span v-if="event.data.recipient"> 
- [{{ event.data.recipient }}]</span>
- </small>
- </li>
- </ul>
- </div>
- <div class="modal-footer">
- <button
- type="button"
- class="btn btn-danger px-2 py-1"
- data-bs-dismiss="modal"
- >
- Close
- </button>
- </div>
+ </div>
+ <div class="card-body text-dark">
+ <div class="row">
+ <div class="col col-lg-10">
+ On: {{ message.datetimestamp }}
+ <br>
+ Subject: <strong>{{ message.data.subject }}</strong>
+ <br>
+ From: {{ message.data.from }}
+ <br>
+ Recipients: {{ message.data.recipients }}
+ </div>
+ <div class="col col-lg-2">
+ <button
+ type="button"
+ class="btn btn-secondary"
+ data-bs-toggle="modal"
+ :data-bs-target="'#message-events-modal' + message.uuid"
+ >
+ <small>View all events</small>
+ </button>
+ <div
+ class="modal fade"
+ :id="'message-events-modal' + message.uuid"
+ >
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h1 class="modal-title">
+ Events
+ </h1>
+ </div>
+ <div class="modal-body">
+ <ul class="list-unstyled">
+ <li v-for="event in message.event_set">
+ <small>
+ {{ event.data.timestamp|toDatestring }} {{ event.data.event }}
+ <span v-if="event.data.recipient"> 
+ [{{ event.data.recipient }}]</span>
+ </small>
+ </li>
+ </ul>
+ </div>
+ <div class="modal-footer">
+ <button
+ type="button"
+ class="btn btn-danger px-2 py-1"
+ data-bs-dismiss="modal"
+ >
+ Close
+ </button>
</div>
</div>
</div>
</div>
</div>
</div>
- </template>
- <b-card-text>
- <span v-html="sanitized_html"></span>
- </b-card-text>
- <template v-slot:footer>
+ <div>
+ <span v-html="sanitized_html"></span>
+ </div>
+ </div>
+
+ <div class="card-footer">
<div class="text-dark">
<div v-if="message.attachment_files.length > 0">
<h3>Attachments:</h3>
@@ -246,8 +240,9 @@
{{ message }}
</div>
</div>
- </template>
- </b-card>
+ </div>
+
+ </div>
</div>
</template>
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 c04fedef7de41483e8d23a9dba3b76c3894024d4..946b6ccc035f4273326fde51d8b21963ed88fa58 100644
--- a/scipost_django/apimail/static/apimail/assets/vue/components/MessagesTable.vue
+++ b/scipost_django/apimail/static/apimail/assets/vue/components/MessagesTable.vue
@@ -231,187 +231,192 @@
</div>
<div v-if="accountSelected" :key="accountSelected.pk">
- <b-card bg-variant="light">
- <h2 class="text-center mb-2">Messages for <strong>{{ accountSelected.email }}</strong></h2>
- <hr class="my-2">
- <div class="row mb-0">
- <div class="col col-lg-6">
- <small class="p-2">Last loaded: {{ lastLoaded }}</small>
- <span
- class="badge bg-primary p-2"
- @click="refreshMessages"
- >
- Refresh now
- </span>
- <div v-if="loadError">
- <small class="bg-danger text-white mx-2 my-1 p-1">
- A network problem occurred on {{ lastFetched }}
- </small>
+ <div class="card text-dark bg-light">
+ <div class="card-header">
+ <h2 class="text-center mb-2">Messages for <strong>{{ accountSelected.email }}</strong></h2>
+ </div>
+ <div class="card-body">
+ <div class="row mb-0">
+ <div class="col col-lg-6">
+ <small class="p-2">Last loaded: {{ lastLoaded }}</small>
+ <span
+ class="badge bg-primary p-2"
+ @click="refreshMessages"
+ >
+ Refresh now
+ </span>
+ <div v-if="loadError">
+ <small class="bg-danger text-white mx-2 my-1 p-1">
+ A network problem occurred on {{ lastFetched }}
+ </small>
+ </div>
</div>
- </div>
- <div class="col col-lg-6">
- <b-form-group
- label="Refresh interval: "
- label-cols-sm="6"
- label-align-sm="right"
- label-size="sm"
- >
- <b-form-radio-group
- v-model="refreshMinutes"
- buttons
- button-variant="outline-primary"
- size="sm"
- :options="refreshMinutesOptions"
- class="float-center"
+ <div class="col col-lg-6">
+ <b-form-group
+ label="Refresh interval: "
+ label-cols-sm="6"
+ label-align-sm="right"
+ label-size="sm"
>
- mins
- </b-form-radio-group>
- </b-form-group>
- </div>
- </div>
- <hr class="hr-lightweight mt-1 mb-2">
- <div class="row mb-0">
- <div class="col col-lg-1">
- <strong>Restrict:</strong>
+ <b-form-radio-group
+ v-model="refreshMinutes"
+ buttons
+ button-variant="outline-primary"
+ size="sm"
+ :options="refreshMinutesOptions"
+ class="float-center"
+ >
+ mins
+ </b-form-radio-group>
+ </b-form-group>
+ </div>
</div>
- <div class="col
-col-lg-4">
- <b-form-group
- label="Last: "
- label-cols-sm="3"
- label-align-sm="right"
- label-size="sm"
- class="mb-0"
- >
- <b-form-radio-group
- v-model="timePeriod"
- buttons
- button-variant="outline-primary"
- size="sm"
- :options="timePeriodOptions"
+ <hr class="hr-lightweight mt-1 mb-2">
+ <div class="row mb-0">
+ <div class="col col-lg-1">
+ <strong>Restrict:</strong>
+ </div>
+ <div class="col
+ col-lg-4">
+ <b-form-group
+ label="Last: "
+ label-cols-sm="3"
+ label-align-sm="right"
+ label-size="sm"
+ class="mb-0"
>
- </b-form-radio-group>
- </b-form-group>
- </div>
- <div class="col col-lg-4">
- <b-form-group
- label="Status:"
- label-cols-sm="3"
- label-align-sm="right"
- label-size="sm"
- class="mb-0"
- >
- <b-form-radio-group
- v-model="readStatus"
- buttons
- button-variant="outline-primary"
- size="sm"
- :options="readStatusOptions"
+ <b-form-radio-group
+ v-model="timePeriod"
+ buttons
+ button-variant="outline-primary"
+ size="sm"
+ :options="timePeriodOptions"
+ >
+ </b-form-radio-group>
+ </b-form-group>
+ </div>
+ <div class="col col-lg-4">
+ <b-form-group
+ label="Status:"
+ label-cols-sm="3"
+ label-align-sm="right"
+ label-size="sm"
+ class="mb-0"
>
- </b-form-radio-group>
- </b-form-group>
- </div>
- <div class="col col-lg-3">
- <b-form-group
- label="Flow:"
- label-cols-sm="3"
- label-align-sm="right"
- label-size="sm"
- class="mb-0"
- >
- <b-form-radio-group
- v-model="flowDirection"
- buttons
- button-variant="outline-primary"
- size="sm"
- :options="flowDirectionOptions"
+ <b-form-radio-group
+ v-model="readStatus"
+ buttons
+ button-variant="outline-primary"
+ size="sm"
+ :options="readStatusOptions"
+ >
+ </b-form-radio-group>
+ </b-form-group>
+ </div>
+ <div class="col col-lg-3">
+ <b-form-group
+ label="Flow:"
+ label-cols-sm="3"
+ label-align-sm="right"
+ label-size="sm"
+ class="mb-0"
>
- </b-form-radio-group>
- </b-form-group>
- </div>
- </div>
- <hr class="hr-lightweight mt-1 mb-2">
- <div class="row mb-0">
- <div class="col col-lg-1">
- <strong>Tags:</strong>
- </div>
- <div class="col col-lg-9">
- <b-form-group
- label-align-sm="right"
- label-size="sm"
- >
- <b-form-checkbox-group>
- <b-form-checkbox v-model="tagsRequired" v-for="tag in tags" :value="tag.pk" :key="tag.pk">
- <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>
- </b-form-checkbox>
- </b-form-checkbox-group>
- </b-form-group>
+ <b-form-radio-group
+ v-model="flowDirection"
+ buttons
+ button-variant="outline-primary"
+ size="sm"
+ :options="flowDirectionOptions"
+ >
+ </b-form-radio-group>
+ </b-form-group>
+ </div>
</div>
- <div class="col col-lg-2">
- <button
- type="button"
- class="btn btn-sm btn-primary pb-2"
- data-bs-toggle="modal"
- data-bs-target="#modal-manage-tags"
- >
- <small>Manage your tags</small>
- </button>
+ <hr class="hr-lightweight mt-1 mb-2">
+ <div class="row mb-0">
+ <div class="col col-lg-1">
+ <strong>Tags:</strong>
+ </div>
+ <div class="col col-lg-9">
+ <b-form-group
+ label-align-sm="right"
+ label-size="sm"
+ >
+ <b-form-checkbox-group>
+ <b-form-checkbox v-model="tagsRequired" v-for="tag in tags" :value="tag.pk" :key="tag.pk">
+ <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>
+ </b-form-checkbox>
+ </b-form-checkbox-group>
+ </b-form-group>
+ </div>
+ <div class="col col-lg-2">
+ <button
+ type="button"
+ class="btn btn-sm btn-primary pb-2"
+ data-bs-toggle="modal"
+ data-bs-target="#modal-manage-tags"
+ >
+ <small>Manage your tags</small>
+ </button>
+ </div>
</div>
- </div>
- <hr class="hr-lightweight mt-1 mb-2">
- <div class="row mb-0">
- <div class="col col-lg-6">
- <b-form-group>
- <b-input-group size="sm">
- <b-form-input
- v-model="filter"
- debounce="250"
- type="search"
- id="filterInput"
- placeholder="Type to filter"
- >
- </b-form-input>
- <b-input-group-append>
- <button
- :disabled="!filter"
- @click="filter = ''"
+ <hr class="hr-lightweight mt-1 mb-2">
+ <div class="row mb-0">
+ <div class="col col-lg-6">
+ <b-form-group>
+ <b-input-group size="sm">
+ <b-form-input
+ v-model="filter"
+ debounce="250"
+ type="search"
+ id="filterInput"
+ placeholder="Type to filter"
>
- Clear
- </button>
- </b-input-group-append>
- </b-input-group>
- </b-form-group>
- </div>
- <div class="col col-lg-6 mb-0">
- <b-form-group
- description="Leave all unchecked to filter on all fields"
- class="mb-0"
- >
- <b-form-checkbox-group
- v-model="filterOn"
- buttons
- button-variant="outline-primary"
- class="mt-1 mb-0"
- size="sm"
+ </b-form-input>
+ <b-input-group-append>
+ <button
+ :disabled="!filter"
+ @click="filter = ''"
+ >
+ Clear
+ </button>
+ </b-input-group-append>
+ </b-input-group>
+ </b-form-group>
+ </div>
+ <div class="col col-lg-6 mb-0">
+ <b-form-group
+ description="Leave all unchecked to filter on all fields"
+ class="mb-0"
>
- <b-form-checkbox value="from">From</b-form-checkbox>
- <b-form-checkbox value="recipients">Recipients</b-form-checkbox>
- <b-form-checkbox value="subject">Subject</b-form-checkbox>
- <b-form-checkbox value="body">Body</b-form-checkbox>
- <b-form-checkbox value="attachment">Attachments</b-form-checkbox>
- </b-form-checkbox-group>
- </b-form-group>
+ <b-form-checkbox-group
+ v-model="filterOn"
+ buttons
+ button-variant="outline-primary"
+ class="mt-1 mb-0"
+ size="sm"
+ >
+ <b-form-checkbox value="from">From</b-form-checkbox>
+ <b-form-checkbox value="recipients">Recipients</b-form-checkbox>
+ <b-form-checkbox value="subject">Subject</b-form-checkbox>
+ <b-form-checkbox value="body">Body</b-form-checkbox>
+ <b-form-checkbox value="attachment">Attachments</b-form-checkbox>
+ </b-form-checkbox-group>
+ </b-form-group>
+ </div>
</div>
</div>
- </b-card>
+ </div>
+
+
<div v-if="threadOf" class="bg-primary text-white">
<div class="row mt-2 p-2">
<div class="col my-auto"><h2 class="my-0 px-2">Thread focusing is active</h2></div>
@@ -486,47 +491,50 @@ col-lg-4">
</ul>
</template>
</b-table>
- <b-card bg-variant="light" class="pb-0">
- <div class="row mb-0">
- <div class="col col-lg-4">
- <div class="text-center">
- <button
- type="button"
- class="btn btn-sm btn-info p-2"
+ <div class="card text-dark bg-light pb-0">
+ <div class="card-body">
+ <div class="row mb-0">
+ <div class="col col-lg-4">
+ <div class="text-center">
+ <button
+ type="button"
+ class="btn btn-sm btn-info p-2"
+ >
+ {{ totalRows }} messages
+ </button>
+ </div>
+ </div>
+ <div class="col col-lg-4">
+ <b-pagination
+ v-model="currentPage"
+ :total-rows="totalRows"
+ :per-page="perPage"
+ class="m-1"
+ size="sm"
+ align="center"
+ aria-controls="my-table"
>
- {{ totalRows }} messages
- </button>
+ </b-pagination>
</div>
- </div>
- <div class="col col-lg-4">
- <b-pagination
- v-model="currentPage"
- :total-rows="totalRows"
- :per-page="perPage"
- class="m-1"
- size="sm"
- align="center"
- aria-controls="my-table"
- >
- </b-pagination>
- </div>
- <div class="col col-lg-4">
- <b-form-group
- label="Per page:"
- label-cols-sm="3"
- label-align-sm="right"
- label-size="sm"
- >
- <b-form-radio-group
- v-model="perPage"
- :options="perPageOptions"
- class="float-center"
+ <div class="col col-lg-4">
+ <b-form-group
+ label="Per page:"
+ label-cols-sm="3"
+ label-align-sm="right"
+ label-size="sm"
>
- </b-form-radio-group>
- </b-form-group>
+ <b-form-radio-group
+ v-model="perPage"
+ :options="perPageOptions"
+ class="float-center"
+ >
+ </b-form-radio-group>
+ </b-form-group>
+ </div>
</div>
</div>
- </b-card>
+ </div>
+
<b-tabs
id="message-tabs"
v-model="tabIndex"
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 0ab9c1730233ec513505106669fb9170afadbf8d..41fc45b431709476e49d88eaaafd1bcfa99cacd3 100644
--- a/scipost_django/apimail/static/apimail/assets/vue/messages_table.js
+++ b/scipost_django/apimail/static/apimail/assets/vue/messages_table.js
@@ -1,44 +1,18 @@
import Vue from 'vue';
-// import BootstrapVue from 'bootstrap-vue';
-// Vue.use(BootstrapVue);
-
-
import {
- // Layout
- BRow, BCol,
- // Badges
- BBadge,
- // Buttons
- BButton, BButtonGroup, BButtonToolbar,
- // Cards
- CardPlugin,
- // Collapse
- BCollapse,
// Forms
FormPlugin, FormCheckboxPlugin, BFormFile, BFormGroup, BFormInput, FormRadioPlugin, BFormSelect,
// Input
BInputGroup, BInputGroupAppend,
- // Modal
- ModalPlugin,
// Pagination,
BPagination,
- // Spinner
- BSpinner,
// Tabs
TabsPlugin,
// Tables
TablePlugin,
- // Toggle
- VBToggle,
- // Tooltips
- VBTooltip,
} from 'bootstrap-vue';
-// Cards
-Vue.use(CardPlugin)
-// Collapse
-Vue.component('b-collapse', BCollapse)
// Forms
Vue.use(FormPlugin)
Vue.use(FormCheckboxPlugin)