363 lines
14 KiB
PHP
363 lines
14 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,
|
|
scheduled: 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',
|
|
scheduled_downloads: 'scheduled'
|
|
}
|
|
Object.keys(states).forEach(k => {
|
|
if (k in map_keys) {
|
|
this.states[map_keys[k]] = states[k]
|
|
} else {
|
|
this.states[map_keys[k]] = false
|
|
}
|
|
})
|
|
return this
|
|
},
|
|
attachments: attachments => {
|
|
this.attachments = attachments
|
|
}
|
|
}
|
|
}
|
|
has() {
|
|
return {
|
|
attachments: () => {
|
|
return this.states.attachments
|
|
},
|
|
valid: () => {
|
|
return this.states.valid
|
|
},
|
|
downloaded: () => {
|
|
return this.states.downloaded
|
|
},
|
|
scheduled: () => {
|
|
return this.states.scheduled
|
|
}
|
|
}
|
|
}
|
|
doesHave() {
|
|
return {
|
|
attachments: () => {
|
|
this.states.attachments = true
|
|
return this
|
|
},
|
|
valid: () => {
|
|
this.states.valid = true
|
|
return this
|
|
},
|
|
downloaded: () => {
|
|
this.states.downloaded = true
|
|
return this
|
|
},
|
|
scheduled: () => {
|
|
this.states.scheduled = true
|
|
return this
|
|
}
|
|
}
|
|
}
|
|
|
|
draw() {
|
|
return {
|
|
row: () => {
|
|
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)
|
|
)
|
|
}
|
|
const tr = $('<tr></tr>').attr('data-id', this.get().id()).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()) ?
|
|
((this.has().scheduled()) ? this.draw().scheduledButton() : this.draw().scheduleButton()) : ''
|
|
)
|
|
)
|
|
if (this.has().downloaded()) {
|
|
tr.find('td').each((i, td) => {
|
|
const content = $(td).html()
|
|
if (content.indexOf('icon') > -1) {
|
|
return
|
|
}
|
|
$(td).html('')
|
|
$(td).append(
|
|
$('<a></a>').attr('href', '{{$urls->base}}/emails/message/' + this.id).html(content)
|
|
)
|
|
})
|
|
}
|
|
return tr
|
|
},
|
|
scheduleButton: () => {
|
|
return $('<button></button>').addClass('ui mini circular icon button').append(
|
|
$('<i></i>').addClass('clock icon')
|
|
).click(e => {
|
|
this.download().attachments(e)
|
|
})
|
|
},
|
|
scheduledButton: () => {
|
|
return $('<i></i>').addClass('ui green circular inverted check icon')
|
|
},
|
|
schedulingButton: () => {
|
|
return $('<i></i>').addClass('ui circular inverted redo loading icon')
|
|
}
|
|
}
|
|
}
|
|
download() {
|
|
return {
|
|
attachments: event => {
|
|
const td = $(event.currentTarget).parent()
|
|
const id = this.get().id()
|
|
const uri = '/messages/schedule'
|
|
const data = {
|
|
messages: [
|
|
id
|
|
]
|
|
}
|
|
td.html('').append(this.draw().schedulingButton())
|
|
return Send.put({
|
|
uri,
|
|
data
|
|
}).then(response => {
|
|
if (response.scheduled > 0) {
|
|
td.html('').append(this.draw().scheduledButton())
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
const messages = {
|
|
id: {
|
|
results: '',
|
|
name: '',
|
|
count: ''
|
|
},
|
|
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, status, jqXHR) => {
|
|
if (parseInt(jqXHR.status/100) !== 2 || jqXHR.status === 204) {
|
|
$(this.id.results).html('').append(
|
|
this.draw().empty()
|
|
)
|
|
return
|
|
}
|
|
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() {
|
|
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()
|
|
)
|
|
},
|
|
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)
|
|
}
|
|
|
|
return $('<thead></thead>').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()
|
|
row.prepend(
|
|
$('<td></td>').html(i + this.current + 1)
|
|
)
|
|
tbody.append(row)
|
|
})
|
|
return tbody
|
|
},
|
|
empty: () => {
|
|
$(this.id.count).html(' (0)')
|
|
return $('<div></div>').addClass('ui message').html('No messages found.')
|
|
}
|
|
}
|
|
},
|
|
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
|