199 lines
6.2 KiB
HTML
199 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">
|
|
<style>
|
|
.maillist .tags {
|
|
display: inline;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<section>
|
|
<div id="app" class="container">
|
|
<div class="row">
|
|
<b-tabs v-model="activeTab">
|
|
<b-tab-item label="List">
|
|
|
|
<b-taginput
|
|
icon="magnify"
|
|
placeholder="Search..."
|
|
expanded
|
|
|
|
v-model="mailSearch"
|
|
|
|
autocomplete
|
|
allow-new
|
|
:data="mailSearchAutocomplete"
|
|
@typing="getFilteredMailAddrs"
|
|
|
|
@input="loadMails"
|
|
>
|
|
</b-taginput>
|
|
<b-table :data="mailTable"
|
|
:loading="mailLoading"
|
|
narrowed
|
|
:row-class="() => 'maillist'"
|
|
|
|
paginated
|
|
backend-pagination
|
|
:total="mailTotal"
|
|
:per-page="mailLimit"
|
|
@page-change="mailPageChange"
|
|
|
|
@select="mailSelect"
|
|
>
|
|
|
|
<template slot-scope="props">
|
|
<b-table-column field="date" label="Datum">
|
|
{{ props.row.date}}
|
|
</b-table-column>
|
|
<b-table-column field="subject" label="Subject">
|
|
<b-taglist attached>
|
|
<b-tag v-for="tag in props.row.tags" type="is-info">
|
|
{{ tag }}
|
|
</b-tag>
|
|
<b-tag type="is-success">{{ props.row.count }}</b-tag>
|
|
</b-taglist>
|
|
{{ props.row.subject}}
|
|
</b-table-column>
|
|
</template>
|
|
</b-table>
|
|
|
|
</b-tab-item>
|
|
<b-tab-item v-for="(thread, thread_id) in mailsOpen"
|
|
:key="thread_id"
|
|
>
|
|
<template slot="header">
|
|
{{ thread.subject | truncate }}
|
|
<b-tag rounded>{{ thread.count }}</b-tag>
|
|
<button type="button"
|
|
class="delete"
|
|
@click="closeActiveTab(thread_id)"
|
|
></button>
|
|
</template>
|
|
<div class="box" v-for="message_id in thread.message_ids"
|
|
key="message_id">
|
|
<iframe style="width: 100%"
|
|
:src="`/message/${message_id}`"
|
|
onload="javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+'px';}(this));"
|
|
></iframe>
|
|
</div>
|
|
</b-tab-item>
|
|
</b-tabs>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://unpkg.com/vue"></script>
|
|
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>
|
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
|
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
data: {
|
|
mailTable: [],
|
|
mailSearch: ['tag:inbox'],
|
|
mailLoading: false,
|
|
mailStart: 0,
|
|
mailLimit: 30,
|
|
mailTotal: 0,
|
|
mailRowContent: {},
|
|
mailAddrs: [],
|
|
mailTags: [],
|
|
mailBody: '',
|
|
mailSearchAutocomplete: [],
|
|
searchTimeout: null,
|
|
|
|
activeTab: 0,
|
|
mailsOpen: {},
|
|
},
|
|
filters: {
|
|
truncate(value) {
|
|
if (value.length > 11) {
|
|
value = value.substring(0, 10) + '…';
|
|
}
|
|
return value;
|
|
},
|
|
},
|
|
methods: {
|
|
|
|
loadMails() {
|
|
this.mailLoading = true;
|
|
search = this.mailSearch.join(' ');
|
|
axios.get(`/search/${search}/${this.mailStart}/${this.mailLimit}`)
|
|
.then(({data}) => {
|
|
this.mailTable = data.threads;
|
|
this.mailTotal = data.count;
|
|
this.mailLoading = false;
|
|
})
|
|
.catch(({request}) => {
|
|
this.mailTable = [];
|
|
this.mailTotal = 0;
|
|
this.mailLoading = false;
|
|
})
|
|
},
|
|
|
|
getFilteredMailAddrs(text) {
|
|
kind = text.split(':', 1);
|
|
text = text.substr(text.indexOf(':') + 1);
|
|
if (text.length == 0) { return; }
|
|
axios.get(`/autocomplete/${kind}/${text}`)
|
|
.then(({data}) => {
|
|
this.mailSearchAutocomplete = data.results.filter((option) => {
|
|
return option.indexOf(text) >= 0;
|
|
});
|
|
})
|
|
},
|
|
|
|
mailPageChange(page) {
|
|
this.mailStart = (page - 1) * this.mailLimit;
|
|
this.loadMails();
|
|
},
|
|
|
|
doMailSearch(search) {
|
|
this.mailSearch = search;
|
|
this.loadMails();
|
|
},
|
|
|
|
debounceSearch(search) {
|
|
if (this.searchTimeout) {
|
|
clearTimeout(this.searchTimeout);
|
|
}
|
|
this.searchTimeout = setTimeout(() => {
|
|
this.doMailSearch(search);
|
|
}, 100);
|
|
},
|
|
|
|
mailSelect(row) {
|
|
axios.get(`/thread/${row.thread_id}`)
|
|
.then(({data}) => {
|
|
console.log('hello');
|
|
console.log(data);
|
|
this.$set(this.mailsOpen, data.thread_id, data);
|
|
this.$nextTick(() => {
|
|
pos = Object.keys(this.mailsOpen).indexOf(data.thread_id);
|
|
this.activeTab = pos + 1;
|
|
});
|
|
}
|
|
);
|
|
},
|
|
|
|
closeActiveTab(thread_id) {
|
|
delete this.mailsOpen[thread_id];
|
|
this.mailsOpen = Object.assign({}, this.mailsOpen);
|
|
this.activeTab--;
|
|
}
|
|
|
|
},
|
|
mounted() {
|
|
this.loadMails();
|
|
}
|
|
})
|
|
</script>
|
|
</section>
|
|
</body>
|
|
</html>
|