STEINNI
129 lines
4.5 KiB
JavaScript
129 lines
4.5 KiB
JavaScript
class MailingMappingDialog extends EICDialogContent {
|
|
|
|
actions = [
|
|
{
|
|
label: 'Cancel',
|
|
onclick: this.cancel.bind(this),
|
|
severity: 'secondary',
|
|
role: 'cancel'
|
|
},
|
|
{
|
|
label: 'Link',
|
|
onclick: this.link.bind(this),
|
|
severity: 'primary',
|
|
role: 'link',
|
|
disabled: false
|
|
}
|
|
]
|
|
|
|
DOMContentLoaded(options) {
|
|
this.model = options.model
|
|
this.token = options.token
|
|
this.sourceId = options.sourceId
|
|
this.currentMailing = options.currentMailing
|
|
this.oneMapping = this.currentMailing.mappings.find(item => item.sourceId==options.sourceId) || { mappings: {} }
|
|
this.oneImport = this.currentMailing.imports.find(item => item.sourceId == options.sourceId)
|
|
|
|
let value = this.oneMapping.mappings[this.token] ? this.oneMapping.mappings[this.token].value : null
|
|
let components = ui.eicfy(this.el)
|
|
|
|
this.warning = this.find('[data-output="warning"]')
|
|
ui.hide(this.warning)
|
|
|
|
this.selector = components.find(component => component.el.name == 'column')
|
|
|
|
for(let column of this.oneImport.availableColumns ) {
|
|
let opt = `<option value="${column.value}">Column ${XLSX.utils.encode_col(column.value)}`
|
|
if(column.hint) {
|
|
opt += ` (${(column.hint.length<51) ? column.hint : column.hint.slice(0,30)+'..…'})`
|
|
}
|
|
opt +='</option>'
|
|
this.selector.el.append(ui.create(opt))
|
|
}
|
|
|
|
this.sampleGrid = new DataGrid(this.find('.sample-grid'), {
|
|
headers: [ {label: 'Sample data'} ],
|
|
height: '20vh'
|
|
})
|
|
|
|
this.selector.value = value
|
|
this.selector.change(this.onColChange.bind(this));
|
|
this.onColChange()
|
|
|
|
this.btResample = new Button(null, {icon: 'icon-refresh', rounded: true, size: 'xsmall', hint: 'Resample'})
|
|
this.btResample.click = this.onColChange.bind(this)
|
|
this.sampleGrid.el.querySelector('header .cell.actions').append(this.btResample.el)
|
|
|
|
}
|
|
|
|
onColChange(event){
|
|
const size = Math.min(10, this.oneImport.dataCount)
|
|
const colIdx = this.selector.value
|
|
|
|
let warnings = []
|
|
this.sampleGrid.clear()
|
|
|
|
if(this.selector.value){
|
|
for(let[idx, row] of this._makeSample(this.oneImport.data).entries()) {
|
|
let value = String(row[colIdx] || '').trim() || `<span eicchip xsmall danger>Empty !</span>`
|
|
this.sampleGrid.addRow( idx, [ value ] )
|
|
}
|
|
|
|
if(this.oneImport.data.some(row => (row[colIdx].trim()==''))){
|
|
warnings.push('<div>Some value in this column are empty !</div>')
|
|
}
|
|
|
|
if(this.oneImport.availableColumns.find(c => c.value == colIdx).isEmail) {
|
|
warnings.push('<div>Column used as recipients email address !</div>')
|
|
}
|
|
|
|
let tokens = []
|
|
for(let token in this.oneMapping.mappings) {
|
|
if(this.oneMapping.mappings[token].value == colIdx && token != this.token) tokens.push(token)
|
|
}
|
|
if(tokens.length > 0) {
|
|
warnings.push(`<div>Column already mapped to ${tokens.join(', ')} !</div>`)
|
|
}
|
|
|
|
}
|
|
|
|
this.warning.innerHTML = ''
|
|
ui.hide(this.warning)
|
|
|
|
if(warnings.length > 0) {
|
|
ui.show(this.warning)
|
|
this.warning.innerHTML = warnings.join('')
|
|
}
|
|
}
|
|
|
|
_makeSample(arr){
|
|
let sample = []
|
|
let noDups = []
|
|
for(let i=0; i<Math.min(10, arr.length); i++){
|
|
let rowNb=Math.floor(Math.random() * arr.length)
|
|
if(noDups.includes(rowNb)){
|
|
i--
|
|
} else {
|
|
sample.push(arr[rowNb])
|
|
noDups.push(rowNb)
|
|
}
|
|
}
|
|
return(sample)
|
|
}
|
|
|
|
async link() {
|
|
const colIdx = parseInt(this.selector.value)
|
|
if(!Number.isNaN(colIdx)) {
|
|
this.actions.find(o => o.role == 'link').button.loading = true
|
|
let curmap = this.currentMailing.mappings.find(item => item.sourceId==this.sourceId )
|
|
curmap.mappings[this.token] = { value: colIdx, hint: this.oneImport.availableColumns[colIdx].hint }
|
|
await this.model.save(this.currentMailing)
|
|
this.commit(true)
|
|
} else {
|
|
this.commit(false)
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
app.registerClass('MailingMappingDialog',MailingMappingDialog); |