unclean SPARC
This commit is contained in:
STEINNI
@@ -0,0 +1,187 @@
|
||||
/**
|
||||
* Todos
|
||||
* - complete change() mmethod when template selected
|
||||
*/
|
||||
class MailingTemplatePreviewDialog extends EICDialogContent {
|
||||
actions = [
|
||||
{
|
||||
label: 'Cancel',
|
||||
onclick: this.cancel.bind(this),
|
||||
severity: 'secondary',
|
||||
role: 'cancel'
|
||||
},
|
||||
{
|
||||
label: 'Use',
|
||||
onclick: this.change.bind(this),
|
||||
severity: 'primary',
|
||||
role: 'change',
|
||||
disabled: true
|
||||
}
|
||||
]
|
||||
|
||||
constructor(...args) {
|
||||
super(...args)
|
||||
Object.assign(this, app.helpers.validators)
|
||||
Object.assign(this, app.helpers.activeAttributes)
|
||||
}
|
||||
|
||||
DOMContentLoaded(options) {
|
||||
this.templateModel = options.templateModel
|
||||
this.mailingModel = options.mailingModel
|
||||
this.currentMailing = options.currentMailing
|
||||
|
||||
this.currentTemplateInfo = {...this.currentMailing.template}
|
||||
this.templateStatus = options.status
|
||||
|
||||
const components = ui.eicfy(this.el)
|
||||
this.setupTriggers(components)
|
||||
this.setupRefs(components)
|
||||
|
||||
this.fileBrowser = new DataGrid(this.find('.file-browser [eicdatagrid]'), {
|
||||
headers: [
|
||||
{label: '', filter: null, sortable:false},
|
||||
{label: 'name', filter: 'text', sortable:true},
|
||||
],
|
||||
})
|
||||
this.fileBrowser.onRowClick = this.onPathChange.bind(this)
|
||||
this.fileBrowser.loading = true
|
||||
this.preview = new Card(this.find('.preview'))
|
||||
this.shadowRoot = this.find('.mail-content.html').attachShadow({ mode: 'open' })
|
||||
this.refreshFolder(true)
|
||||
}
|
||||
|
||||
showPath(path){
|
||||
this.currentPath = path
|
||||
const dirs = path.split('/').filter(item=>item)
|
||||
const pathChips = dirs.map((dir, idx) => {
|
||||
const path = dirs.slice(0, idx+1).join('/')
|
||||
return(`<span eicchip xxsmall info data-path="/${path}">${dir}</span>`)
|
||||
}).join('')
|
||||
this.output('path', pathChips)
|
||||
}
|
||||
|
||||
fillFolder(templates) {
|
||||
this.fileBrowser.clear()
|
||||
this.fileBrowser.loading = false
|
||||
this.showPath(this.templateModel.ffs.currentPath)
|
||||
for(let folder of this.templateModel.ffs.getFolders()){
|
||||
let row = this.fileBrowser.addRow('./'+folder.name,
|
||||
[
|
||||
`<span warning xsmall class="ffs icon-folder"></span>`,
|
||||
folder.name,
|
||||
|
||||
])
|
||||
row.dataset.type = 'folder'
|
||||
}
|
||||
|
||||
for(let template of templates){
|
||||
if(template.path == this.templateModel.ffs.currentPath){ // Important on 1st display whne we havent't CD yet
|
||||
let row = this.fileBrowser.addRow(template.id, [
|
||||
`<span info xsmall class="ffs icon-new"></span>`,
|
||||
template.name.length>35 ? template.name.slice(0,35)+'...' : template.name
|
||||
])
|
||||
row.dataset.type = 'file'
|
||||
}
|
||||
}
|
||||
|
||||
this.fileBrowser.loading = false
|
||||
if(this.currentTemplateInfo && this.currentTemplateInfo.id) this.onFileSelect(this.fileBrowser.getRowById(this.currentTemplateInfo.id))
|
||||
}
|
||||
|
||||
async refreshFolder(pathToTemplate){
|
||||
this.fileBrowser.clear()
|
||||
this.fileBrowser.loading = true
|
||||
let templates
|
||||
if(pathToTemplate){ // called from DOMContentLoaded => position to current templat, otherwise, let user move around)
|
||||
templates = await this.templateModel.search([this.currentTemplateInfo.path || '/'], this.templateStatus )
|
||||
this.templateModel.ffs.changeDir(this.currentTemplateInfo.path || '/')
|
||||
} else {
|
||||
templates = await this.templateModel.search([this.templateModel.ffs.currentPath], this.templateStatus )
|
||||
}
|
||||
this.fillFolder(templates)
|
||||
}
|
||||
|
||||
onPathChange(row){
|
||||
if(row.dataset.type=='file') {
|
||||
this.onFileSelect(row)
|
||||
} else if(row.dataset.type=='folder') {
|
||||
this.onFolderSelect(row.dataset.id)
|
||||
}
|
||||
}
|
||||
|
||||
async onFileSelect(row){
|
||||
if(!row) return
|
||||
this.preview.loading = true
|
||||
this.fileBrowser.rows().forEach(el => el.classList.remove('selected'))
|
||||
this.currentTemplateInfo = await this.templateModel.get(row.dataset.id)
|
||||
if(this.currentTemplateInfo.id){
|
||||
this.currentTokens = this.templateModel.getTokens(this.currentTemplateInfo)
|
||||
row.classList.add('selected')
|
||||
this.refreshTemplate(this.currentTemplateInfo)
|
||||
}
|
||||
this.preview.loading = false
|
||||
}
|
||||
|
||||
onFolderSelect(path){
|
||||
this.templateModel.ffs.changeDir(path)
|
||||
this.refreshFolder(false)
|
||||
}
|
||||
|
||||
refreshTemplate(templateInfo){
|
||||
const filterText = (text) => {
|
||||
let element = document.createElement('div')
|
||||
element.textContent = text
|
||||
text = element.innerHTML
|
||||
text = text.length > 150 ? text.slice(0, 100) + '...' : text
|
||||
return text
|
||||
}
|
||||
this.output('template', templateInfo.name.length>35 ? templateInfo.name.slice(0,35)+'...' : templateInfo.name)
|
||||
this.outputs['template'].setAttribute('title', templateInfo.name)
|
||||
let subject
|
||||
if((!templateInfo.meta.subject) || (!templateInfo.meta.subject.trim())){
|
||||
this.output('templateWarning', 'This template has no subject and cannot be used here !')
|
||||
ui.show(this.outputs['templateWarning'])
|
||||
subject = ''
|
||||
this.actions.find(o => o.role == 'change').button.disabled = true
|
||||
} else {
|
||||
ui.hide(this.outputs['templateWarning'])
|
||||
subject = filterText(templateInfo.meta.subject || '')
|
||||
this.find('.mail-subject').innerHTML = `${subject.replace(this.validators.mustacheTokenRegex,'<span class="token" eicchip success>$1</span>')}`
|
||||
this.actions.find(o => o.role == 'change').button.disabled = false
|
||||
}
|
||||
|
||||
let html = atob(templateInfo.html).replace(this.validators.mustacheTokenRegex,'<span class="token" eicchip success>$1</span>')
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
span.token[eicchip]{
|
||||
border-radius: 60px !important;
|
||||
background-color: var(--eicui-base-color-success-100);
|
||||
color: var(--eicui-base-color-white);
|
||||
font-size: 0.75rem;
|
||||
padding: var(--eicui-base-spacing-2xs) var(--eicui-base-spacing-s);
|
||||
min-height: var(--eicui-base-spacing-xl);
|
||||
display: inline-grid;
|
||||
grid-template-columns: ;
|
||||
min-content min-content min-content;
|
||||
min-height: 0;
|
||||
align-items: center;
|
||||
margin: 1px var(--eicui-base-spacing-2xs);
|
||||
pointer-events: all;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
text-shadow: none;
|
||||
}
|
||||
</style>
|
||||
${html}`
|
||||
}
|
||||
|
||||
async change() {
|
||||
this.currentMailing.template = { id: this.currentTemplateInfo.id }
|
||||
this.actions.find(o => o.role == 'change').button.loading = true
|
||||
await this.mailingModel.save(this.currentMailing)
|
||||
this.commit(true)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
app.registerClass('MailingTemplatePreviewDialog',MailingTemplatePreviewDialog);
|
||||
Reference in New Issue
Block a user