438 lines
17 KiB
PHP
438 lines
17 KiB
PHP
@extends('emails.base')
|
|
|
|
@section('emails_content')
|
|
<h3>Messages - <span id="name"></span><span id="count"></span></h3>
|
|
<div id="messages" class="ui basic segment"></div>
|
|
@endsection
|
|
|
|
@push('page_scripts')
|
|
<script type="text/javascript">
|
|
class Message
|
|
{
|
|
id
|
|
uid
|
|
subject
|
|
date
|
|
from
|
|
states = {
|
|
attachments: false,
|
|
valid: false,
|
|
downloaded: false
|
|
}
|
|
attachments
|
|
|
|
constructor({id, uid, subject, date_time, from, states, attachments}) {
|
|
this.set().id(id)
|
|
.set().uid(uid)
|
|
.set().subject(subject)
|
|
.set().date(date_time)
|
|
.set().from(from)
|
|
.set().states(states)
|
|
.set().attachments(attachments)
|
|
}
|
|
get() {
|
|
return {
|
|
id: () => {
|
|
return this.id
|
|
},
|
|
uid: () => {
|
|
return this.uid
|
|
},
|
|
subject: () => {
|
|
return this.subject
|
|
},
|
|
date: () => {
|
|
return this.date
|
|
},
|
|
from: () => {
|
|
return this.from
|
|
},
|
|
states: () => {
|
|
return this.states
|
|
},
|
|
attachments: () => {
|
|
return this.attachments
|
|
}
|
|
}
|
|
}
|
|
set() {
|
|
return {
|
|
id: id => {
|
|
this.id = id
|
|
return this
|
|
},
|
|
uid: uid => {
|
|
this.uid = uid
|
|
return this
|
|
},
|
|
subject: subject => {
|
|
this.subject = subject
|
|
return this
|
|
},
|
|
date: date => {
|
|
this.date = date
|
|
return this
|
|
},
|
|
from: from => {
|
|
this.from = from
|
|
return this
|
|
},
|
|
states: states => {
|
|
const map_keys = {
|
|
has_attachments: 'attachments',
|
|
valid_attachments: 'valid',
|
|
downloaded_attachments: 'downloaded'
|
|
}
|
|
Object.keys(states).forEach(k => {
|
|
this.states[map_keys[k]] = states[k]
|
|
})
|
|
return this
|
|
},
|
|
attachments: attachments => {
|
|
this.attachments = attachments
|
|
}
|
|
}
|
|
}
|
|
has() {
|
|
return {
|
|
attachments: () => {
|
|
return this.states.attachments
|
|
},
|
|
valid: () => {
|
|
return this.states.valid
|
|
},
|
|
downloaded: () => {
|
|
return this.states.downloaded
|
|
}
|
|
}
|
|
}
|
|
doesHave() {
|
|
return {
|
|
attachments: () => {
|
|
this.states.attachments = true
|
|
return this
|
|
},
|
|
valid: () => {
|
|
this.states.valid = true
|
|
return this
|
|
},
|
|
downloaded: () => {
|
|
this.states.downloaded = true
|
|
return this
|
|
}
|
|
}
|
|
}
|
|
|
|
draw() {
|
|
const format = Intl.DateTimeFormat('es-CL', {dateStyle: 'full', timeStyle: 'short'})
|
|
let date = new Date()
|
|
try {
|
|
date = new Date(this.get().date())
|
|
} catch (e) {
|
|
console.debug(e)
|
|
}
|
|
const valid = $('<td></td>').html($('<i></i>').addClass(this.has().valid() ? 'green check circle icon' : 'red times circle icon'))
|
|
if (this.has().valid() && this.get().attachments().length > 0) {
|
|
const list = $('<div></div>').addClass('ui list')
|
|
this.get().attachments().forEach(attachment => {
|
|
list.append($('<div></div>').addClass('item').html(attachment.filename))
|
|
})
|
|
valid.append(
|
|
$('<div></div>').addClass('ui popup').append(list)
|
|
)
|
|
}
|
|
return $('<tr></tr>').append(
|
|
$('<td></td>').html(this.get().subject())
|
|
).append(
|
|
$('<td></td>').html(format.format(date))
|
|
).append(
|
|
$('<td></td>').html(this.get().from().full)
|
|
).append(
|
|
$('<td></td>').html($('<i></i>').addClass(this.has().attachments() ? 'green check circle icon' : 'red times circle icon'))
|
|
).append(
|
|
valid
|
|
).append(
|
|
$('<td></td>').html($('<i></i>').addClass(this.has().downloaded() ? 'green check circle icon' : 'red times circle icon'))
|
|
).append(
|
|
$('<td></td>').append(
|
|
(this.has().attachments() && this.has().valid() && !this.has().downloaded()) ?
|
|
$('<button></button>').addClass('ui mini green circular icon button').append(
|
|
$('<i></i>').addClass('clock icon')
|
|
).click(() => {
|
|
this.download().attachments(this.get().id())
|
|
}) : ''
|
|
)
|
|
)
|
|
}
|
|
|
|
download() {
|
|
return {
|
|
attachments: id => {
|
|
const uri = '/messages/schedule'
|
|
const data = {
|
|
messages: [
|
|
id
|
|
]
|
|
}
|
|
return Send.put({
|
|
uri,
|
|
data
|
|
}).then(response => {
|
|
if (response.scheduled > 0) {
|
|
alert('Scheduled Attachments Job')
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
const messages = {
|
|
id: {
|
|
results: '',
|
|
name: '',
|
|
count: ''
|
|
},
|
|
page: 1,
|
|
current: 0,
|
|
shown: 10,
|
|
total: null,
|
|
visible: [],
|
|
get: function() {
|
|
return {
|
|
mailbox: () => {
|
|
this.draw().loader()
|
|
const uri = '/mailbox/{{$mailbox_id}}'
|
|
return Send.get(uri).then(response => {
|
|
$(this.id.name).html(response.mailbox.name)
|
|
})
|
|
},
|
|
messages: () => {
|
|
const uri = '/mailbox/{{$mailbox_id}}/messages/valid'
|
|
return Send.get(uri).then(response => {
|
|
if (this.total === null) {
|
|
$(this.id.count).html(' (' + response.total + ')')
|
|
this.total = response.total
|
|
}
|
|
this.visible = []
|
|
response.messages.forEach(m => {
|
|
this.visible.push(new Message(m))
|
|
})
|
|
if (this.total > 0) {
|
|
$(this.id.results).html('').append(
|
|
this.draw().table()
|
|
)
|
|
} else {
|
|
$(this.id.results).html('').append(
|
|
this.draw().empty()
|
|
)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
},
|
|
draw: function() {
|
|
const columns = 8
|
|
return {
|
|
loader: () => {
|
|
$(this.id.results).html('').append(
|
|
$('<div></div>').addClass('ui segment').append(
|
|
$('<p></p>').html(' ')
|
|
).append(
|
|
$('<div></div>').addClass('ui active dimmer').append(
|
|
$('<div></div>').addClass('ui indeterminate elastic loader')
|
|
)
|
|
).append(
|
|
$('<p></p>').html(' ')
|
|
)
|
|
)
|
|
},
|
|
table: () => {
|
|
return $('<table></table>').addClass('ui table').append(
|
|
this.draw().head()
|
|
).append(
|
|
this.draw().body()
|
|
).append(
|
|
this.draw().footer()
|
|
)
|
|
},
|
|
head: () => {
|
|
const values = []
|
|
for (let i = 0; i < 10; i ++) {
|
|
const v = {
|
|
name: (i + 1) * 10,
|
|
value: (i + 1) * 10
|
|
}
|
|
if ((i + 1) * 10 === this.shown) {
|
|
v['selected'] = true
|
|
}
|
|
values.push(v)
|
|
}
|
|
const dropdown = $('<div></div>').addClass('ui scrolling dropdown').append(
|
|
$('<i></i>').addClass('dropdown icon')
|
|
).append(
|
|
$('<div></div>').addClass('text').html(this.shown)
|
|
).dropdown({
|
|
values,
|
|
onChange: (value, text, $choice) => {
|
|
if (value === this.shown) {
|
|
return
|
|
}
|
|
this.shown = parseInt(value)
|
|
// Trigger pending transition
|
|
$choice.parent().parent().dropdown('hide')
|
|
this.get()
|
|
}
|
|
})
|
|
return $('<thead></thead>').append(
|
|
$('<tr></tr>').append(
|
|
$('<th></th>').addClass('right aligned').attr('colspan', columns).append(
|
|
dropdown
|
|
).append(
|
|
$('<span></span>').addClass('ui basic label').html((this.current + 1) + ' - ' + Math.min(this.shown + this.current, this.total ?? 99999999))
|
|
).append(
|
|
$('<button></button>').addClass('ui mini circular icon button').append(
|
|
$('<i></i>').addClass('left chevron icon')
|
|
).click(() => {
|
|
this.prev()
|
|
})
|
|
).append(
|
|
$('<button></button>').addClass('ui mini circular icon button').append(
|
|
$('<i></i>').addClass('right chevron icon')
|
|
).click(() => {
|
|
this.next()
|
|
})
|
|
)
|
|
)
|
|
).append(
|
|
$('<tr></tr>').append(
|
|
$('<th></th>').html('#')
|
|
).append(
|
|
$('<th></th>').html('Subject')
|
|
).append(
|
|
$('<th></th>').html('Date')
|
|
).append(
|
|
$('<th></th>').html('From')
|
|
).append(
|
|
$('<th></th>').html('Has Attachments')
|
|
).append(
|
|
$('<th></th>').html('Valid Attachments')
|
|
).append(
|
|
$('<th></th>').html('Downloaded Attachments')
|
|
).append(
|
|
$('<th></th>')
|
|
)
|
|
)
|
|
},
|
|
body: () => {
|
|
const tbody = $('<tbody></tbody>')
|
|
this.visible.forEach((m, i) => {
|
|
const row = m.draw()
|
|
row.prepend(
|
|
$('<td></td>').html(i + this.current + 1)
|
|
)
|
|
tbody.append(row)
|
|
})
|
|
return tbody
|
|
},
|
|
footer: () => {
|
|
const pages = this.lastPage()
|
|
const paging = $('<div></div>').addClass('ui right floated pagination menu')
|
|
if (this.page !== 1) {
|
|
paging.append(
|
|
$('<a></a>').addClass('icon item').append(
|
|
$('<i></i>').addClass('step backward icon')
|
|
).click(() => {
|
|
this.first()
|
|
})
|
|
)
|
|
}
|
|
for (let i = 0; i < pages; i ++) {
|
|
const page = $('<a></a>').addClass('item').html(i + 1).click(() => {
|
|
this.goto(i + 1)
|
|
})
|
|
if (i + 1 === this.page) {
|
|
page.addClass('active')
|
|
}
|
|
paging.append(page)
|
|
}
|
|
if (this.page !== this.lastPage()) {
|
|
paging.append(
|
|
$('<a></a>').addClass('icon item').append(
|
|
$('<i></i>').addClass('step forward icon')
|
|
).click(() => {
|
|
this.last()
|
|
})
|
|
)
|
|
}
|
|
return $('<tfoot></tfoot>').append(
|
|
$('<tr></tr>').append(
|
|
$('<th></th>').attr('colspan', columns).append(paging)
|
|
)
|
|
)
|
|
},
|
|
empty: () => {
|
|
return $('<div></div>').addClass('ui message').html('No messages found.')
|
|
}
|
|
}
|
|
},
|
|
lastPage: function() {
|
|
let pages = Math.floor(this.total / this.shown)
|
|
if (this.total / this.shown > pages) {
|
|
pages ++
|
|
}
|
|
return pages
|
|
},
|
|
first: function() {
|
|
if (this.current === 0) {
|
|
return
|
|
}
|
|
this.page = 1
|
|
this.current = 0
|
|
this.get()
|
|
},
|
|
next: function() {
|
|
if (this.current + this.shown >= this.total) {
|
|
return
|
|
}
|
|
this.page ++
|
|
this.current += this.shown
|
|
this.get()
|
|
},
|
|
goto: function(page) {
|
|
if (this.page === page) {
|
|
return
|
|
}
|
|
this.page = page
|
|
this.current = (this.page - 1) * this.shown
|
|
this.get()
|
|
},
|
|
prev: function() {
|
|
if (this.current < this.shown) {
|
|
return
|
|
}
|
|
this.page --
|
|
this.current -= this.shown
|
|
this.get()
|
|
},
|
|
last: function() {
|
|
if (this.page === this.lastPage()) {
|
|
return
|
|
}
|
|
this.page = this.lastPage()
|
|
this.current = (this.page - 1) * this.shown
|
|
this.get()
|
|
},
|
|
setup: function() {
|
|
this.get().mailbox().then(() => {
|
|
this.get().messages()
|
|
})
|
|
}
|
|
}
|
|
$().ready(() => {
|
|
messages.id.results = '#messages'
|
|
messages.id.name = '#name'
|
|
messages.id.count = '#count'
|
|
messages.setup()
|
|
})
|
|
</script>
|
|
@endpush |