1
0
mirror of https://github.com/axllent/mailpit.git synced 2025-07-13 01:20:22 +02:00

Feature: Message tags and auto-tagging

See #17
This commit is contained in:
Ralph Slooten
2022-11-13 16:45:54 +13:00
parent 57cfb2611c
commit 6bc02fd4d4
22 changed files with 579 additions and 107 deletions

View File

@ -1,17 +1,19 @@
<script>
import commonMixins from '../mixins.js';
import moment from 'moment';
import Prism from "prismjs";
import Attachments from './Attachments.vue';
import MessageTags from './MessageTags.vue';
export default {
props: {
message: Object
message: Object,
existingTags: Array
},
components: {
Attachments
Attachments,
MessageTags
},
mixins: [commonMixins],
@ -20,6 +22,7 @@ export default {
return {
srcURI: false,
iframes: [], // for resizing
tagComponent: false, // to force rerendering of component
}
},
@ -27,10 +30,12 @@ export default {
message: {
handler(newQuestion) {
let self = this;
// delay 100ms to select first tab and add HTML highlighting (prev/next)
window.setTimeout(function () {
self.tagComponent = false;
// delay to select first tab and add HTML highlighting (prev/next)
self.$nextTick(function () {
self.renderUI();
}, 100)
self.tagComponent = true;
});
},
// force eager callback execution
immediate: true
@ -39,12 +44,14 @@ export default {
mounted() {
let self = this;
self.tagComponent = false;
window.addEventListener("resize", self.resizeIframes);
self.renderUI();
var tabEl = document.getElementById('nav-raw-tab');
tabEl.addEventListener('shown.bs.tab', function (event) {
self.srcURI = 'api/v1/message/' + self.message.ID + '/raw';
});
self.tagComponent = true;
},
unmounted: function () {
@ -59,9 +66,9 @@ export default {
document.activeElement.blur(); // blur focus
document.getElementById('message-view').scrollTop = 0;
window.setTimeout(function () {
// delay until vue has rendered
self.$nextTick(function () {
let p = document.getElementById('preview-html');
if (p) {
// make links open in new window
let anchorEls = p.contentWindow.document.body.querySelectorAll('a');
@ -75,7 +82,7 @@ export default {
}
self.resizeIframes();
}
}, 200);
});
// html highlighting
window.Prism = window.Prism || {};
@ -98,10 +105,6 @@ export default {
if (s) {
s.style.height = s.contentWindow.document.body.scrollHeight + 50 + 'px';
}
},
messageDate: function (d) {
return moment(d).format('ddd, D MMM YYYY, h:mm a');
}
}
}
@ -155,17 +158,21 @@ export default {
<th class="small">Subject</th>
<td><strong>{{ message.Subject }}</strong></td>
</tr>
<tr class="d-md-none">
<tr class="d-md-none small">
<th class="small">Date</th>
<td>{{ messageDate(message.Date) }}</td>
</tr>
<MessageTags :message="message" :existingTags="existingTags"
@load-messages="$emit('loadMessages')" v-if="tagComponent">
</MessageTags>
</tbody>
</table>
</div>
<div class="col-md-auto text-md-end mt-md-3">
<p class="text-muted small d-none d-md-block"><small>{{ messageDate(message.Date) }}</small></p>
<div class="dropdown mt-2" v-if="allAttachments(message)">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
<!-- <p class="text-muted small d-none d-md-block mb-2"><small>{{ messageDate(message.Date) }}</small></p>
<p class="text-muted small d-none d-md-block"><small>Size: {{ getFileSize(message.Size) }}</small></p> -->
<div class="dropdown mt-2 mt-md-0" v-if="allAttachments(message)">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
aria-expanded="false">
Attachment<span v-if="allAttachments(message).length > 1">s</span>
({{ allAttachments(message).length }})