All files / src/Helper Dialog.ts

97.22% Statements 35/36
91.66% Branches 11/12
100% Functions 7/7
96.96% Lines 32/33

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84                    6x 6x       2x   2x                   2x       2x   2x 1x     1x 1x       3x   2x 2x   2x 1x         1x     1x 2x 2x 2x 2x 2x 2x 2x 2x 2x         2x   1x 1x 1x 1x       1x        
// @ts-expect-error "Import attributes are only supported when the --module option is set to esnext, nodenext, or preserve"
import dialogTemplate from '../tpl/dialog.hbs' with {type: 'text'}
 
import {HelperHandlebars} from '../../types/Types'
 
export class DialogHelper {
 
    private dialogElement?: JQuery
 
    public constructor(
        private pluginName: string,
        private title: string,
    ) {}
 
    public getDialog(): JQuery {
        const html = this.renderTemplate()
 
        this.dialogElement = window.dialog({
            id: this.pluginName,
            title: this.title,
            html,
            width: 800,
            height: 600,
            resizable: true,
            buttons: [],
        }).parent()
 
        return this.dialogElement
    }
 
    private renderTemplate(): string {
        const handlebars: HelperHandlebars | undefined = window.plugin?.HelperHandlebars
 
        if (!handlebars) {
            throw new Error(`${this.pluginName} requires the HelperHandlebars plugin`)
        }
 
        const template = handlebars.compile(dialogTemplate)
        return template({plugin: 'window.plugin.' + this.pluginName, prefix: this.pluginName})
    }
 
    public renderItems(items: {key: string, value: string}[]): void {
        if (!this.dialogElement) return
 
        const tbody = this.dialogElement.find(`#${this.pluginName}Body`)
        tbody.empty()
 
        if (items.length === 0) {
            tbody.append(
                $('<tr>').append(
                    $('<td>').attr('colspan', '3').addClass('ls-empty').text('No entries found')
                )
            )
            return
        }
 
        items.forEach(({key, value}) => {
            const displayValue = value.length > 80 ? value.slice(0, 80) + '…' : value
            const tr = $('<tr>').attr('data-key', key)
            tr.append($('<td>').addClass('ls-key').text(key))
            tr.append($('<td>').addClass('ls-value').text(displayValue))
            const actions = $('<td>').addClass('ls-actions')
            actions.append($('<button>').addClass('ls-edit-btn').text('Edit'))
            actions.append($('<button>').addClass('ls-delete-btn').text('Del'))
            tr.append(actions)
            tbody.append(tr)
        })
    }
 
    public showEditForm(key: string, value: string, isNew: boolean): void {
        if (!this.dialogElement) return
 
        const prefix = this.pluginName
        this.dialogElement.find(`#${prefix}EditKey`).val(key).prop('readonly', !isNew)
        this.dialogElement.find(`#${prefix}EditValue`).val(value)
        this.dialogElement.find(`#${prefix}EditForm`).show()
    }
 
    public hideEditForm(): void {
        Eif (!this.dialogElement) return
        this.dialogElement.find(`#${this.pluginName}EditForm`).hide()
    }
}