ProVM/emails
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Scheduling UI corrected

Browse Source
This commit is contained in:
Aldarien
2022-11-30 20:45:18 -03:00
parent 5e4e52e620
commit c0ddd00cc6
4 changed files with 115 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

266
ui/resources/views/emails/messages.blade.php
View File

@ -17,7 +17,8 @@
states = {
attachments: false,
valid: false,
downloaded: false
downloaded: false,
scheduled: false
}
attachments
@ -81,10 +82,15 @@
const map_keys = {
has_attachments: 'attachments',
valid_attachments: 'valid',
downloaded_attachments: 'downloaded'
downloaded_attachments: 'downloaded',
scheduled_downloads: 'scheduled'
}
Object.keys(states).forEach(k => {
this.states[map_keys[k]] = states[k]
if (k in map_keys) {
this.states[map_keys[k]] = states[k]
} else {
this.states[map_keys[k]] = false
}
})
return this
},
@ -103,6 +109,9 @@
},
downloaded: () => {
return this.states.downloaded
},
scheduled: () => {
return this.states.scheduled
}
}
}
@ -119,80 +128,99 @@
downloaded: () => {
this.states.downloaded = true
return this
},
scheduled: () => {
this.states.scheduled = 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)
)
}
const tr = $('<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())
}) : ''
)
)
if (this.has().downloaded()) {
tr.find('td').each((i, td) => {
const content = $(td).html()
if (content.indexOf('icon') > -1) {
return
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)
}
$(td).html('')
$(td).append(
$('<a></a>').attr('href', '{{$urls->base}}/emails/message/' + this.id).html(content)
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')
}
}
return tr
}
download() {
return {
attachments: id => {
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) {
alert('Scheduled Attachments Job')
td.html('').append(this.draw().scheduledButton())
}
})
}
@ -205,9 +233,6 @@
name: '',
count: ''
},
page: 1,
current: 0,
shown: 10,
total: null,
visible: [],
get: function() {
@ -250,7 +275,6 @@
}
},
draw: function() {
const columns = 8
return {
loader: () => {
$(this.id.results).html('').append(
@ -270,8 +294,6 @@
this.draw().head()
).append(
this.draw().body()
).append(
this.draw().footer()
)
},
head: () => {
@ -286,43 +308,8 @@
}
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(
@ -345,7 +332,7 @@
body: () => {
const tbody = $('<tbody></tbody>')
this.visible.forEach((m, i) => {
const row = m.draw()
const row = m.draw().row()
row.prepend(
$('<td></td>').html(i + this.current + 1)
)
@ -353,95 +340,12 @@
})
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: () => {
$(this.id.count).html(' (0)')
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()