P42_UI/app/views/comms/mailings/sheet/dialogs/MailingTemplatePreviewDialog.js

/**
 * 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);