register/marko_unpacked/marko/cms/_public/assets/js/docs.js

class DocumentsModule {


    documentRow() {
        return `
            <td>
                <select oninput="updateInput(this)"  data-input="document_type">
                    <option value=""></option>
                    <option value="pptx">Презентация (pptx)</option>
                    <option value="pdf">Документ (pdf)</option>
                    <option value="docx">Документ (docx)</option>
                    <option value="xlsx">Таблица (xlsx)</option>
                    <option value="other">Други</option>
                </select>
            </td>
            <td><input oninput="updateInput(this)" data-input="name"></td>
            <td><input oninput="updateInput(this)"  data-input="name_en"></td>
            <td class="ct"><button class="btn-ib btn-default" data-upload-field="file_name" onclick="attachAndUploadFile(this)"><i class="la la-file-upload"></i> Качи файл</button></td>
            <td class="ct"><button class="btn-ib btn-default" data-upload-field="file_name_en" onclick="attachAndUploadFile(this)"><i class="la la-file-upload"></i> Качи файл</button></td>
            <td><button onclick="deleteDocument(this)" class="btn btn-red btn-ico center"><i class="la la-trash font-20"></i></button></td>
        `;
    }

    addDocument(documentKey, modelClass, modelId) {
        const
            tbody = document.querySelector('.docs-table tbody'),
            tr = document.createElement('tr')
        tr.innerHTML = this.documentRow()

        this.generateRows();

        this.postRequest('/file/document-add/', {documentKey, modelClass, modelId}, r => {
            console.log(r)
            if (r.document_id)
                tr.setAttribute('data-document-id', r.document_id)
        })
        if (tbody.querySelector('tr.empty')) {
            tbody.innerHTML = ''
            tbody.appendChild(tr)
        } else {
            const first = tbody.querySelector('tr:first-child');
            tbody.insertBefore(tr, first)
        }
    }

    postRequest(url, data, done) {
        const xhr = new XMLHttpRequest();
        xhr.responseType = 'json'
        xhr.open('post', url)
        xhr.onload = () => {
            done(xhr.response)
        }
        xhr.send(JSON.stringify(data));
    }

    getRequest(url, data, done) {
        data = data || {}
        let query = [];
        Object.keys(data).forEach(d => {
            query.push(d + '=' + data[d])
        })
        if (query.length > 0) url = `${url}?${query.join('&')}`
        const xhr = new XMLHttpRequest();
        xhr.responseType = 'json'
        xhr.open('get', url)
        xhr.onload = () => {
            done(xhr.response)
        }
        xhr.send();
    }

    uploadFile(url, data, done) {
        data = data || {}
        const formData = new FormData();
        Object.keys(data).forEach(d => {
            formData.append(d, data[d]);
        })
        const xhr = new XMLHttpRequest();
        xhr.responseType = 'json'
        xhr.open('post', url)
        xhr.onload = () => {
            done(xhr.response)
        }
        xhr.send(formData);
    }

    generateRows() {
        document.querySelectorAll('[data-input]').forEach(e => {
            this.updateInput(e)
        })
    }

    updateInput(e) {
        if (e.tagName === 'SELECT') {
            e.addEventListener('change', () => {
                let id = e.parentNode.parentNode.dataset.documentId;
                this.postRequest('/file/document-update/', {id: id, key: e.dataset.input, value: e.value}, done => {
                })
            })
        }

        if (e.tagName === 'INPUT') {
            e.addEventListener('keypress', () => {
                let id = e.parentNode.parentNode.dataset.documentId;
                this.postRequest('/file/document-update/', {id: id, key: e.dataset.input, value: e.value}, done => {
                })
            })
        }
    }
}

const documentObject = new DocumentsModule();

function addDocument(e) {
    documentObject.addDocument(e.dataset.documentKey, e.dataset.modelClass, e.dataset.modelId)
}

function updateInput(e) {
    documentObject.updateInput(e)
}

function attachAndUploadFile(e) {
    const fileInput = document.createElement('input')
    fileInput.setAttribute('type', 'file')
    fileInput.addEventListener('change', () => {
        let id = e.parentNode.parentNode.dataset.documentId;
        let update = e.dataset.uploadField;
        let file = fileInput.files[0];
        let tdContainer = e.parentNode;

        documentObject.uploadFile('/file/document-file-upload/', {
            id,
            update,
            file
        }, data => {
            console.log(data);
            if(data.id && data.file_path) {
                if (update === 'file_name') {
                    tdContainer.innerHTML = `<a href="${data.file_path}" class="download-link"><span class="extension"><i class="la la-download"></i> ${data.extension} сваляне</span></a>
                    <span data-document-id="${id}" data-delete-field="file_name" onclick="deleteUploadedFile(this)" class="delete-link"><span class="extension"><i class="la la-trash"></i> изтриване</span></span>`;
                } else if (update === 'file_name_en') {
                    tdContainer.innerHTML = `<a href="${data.file_path}" class="download-link"><span class="extension"><i class="la la-download"></i> ${data.extension} сваляне</span></a>
                    <span data-document-id="${id}" data-delete-field="file_name_en" onclick="deleteUploadedFile(this)" class="delete-link"><span class="extension"><i class="la la-trash"></i> изтриване</span></span>`;
                }
                flash.success('Файлът е качен');
            } else {
                flash.error('Грешка при качване на файла');
            }
        })
    })
    fileInput.click()
}

function deleteUploadedFile(e) {
    let td = e.parentNode;
    let id = e.dataset.documentId;
    let deleteField = e.dataset.deleteField;
    modal.confirm('Сигурни ли сте, че искате да изтриете този файл?', function () {
        documentObject.postRequest('/file/document-file-delete/', {id, deleteField}, done => {
            td.innerHTML = `<button class="btn-ib btn-default" data-upload-field="${deleteField}" onclick="attachAndUploadFile(this)"><i class="la la-file-upload"></i> Качи файл</button>`
            flash.success('Файлът е изтрит');
        })
    })

}

function deleteDocument(e) {
    let id = e.parentNode.parentNode.dataset.documentId;
    console.log(id);
    if(id) {
        modal.confirm('Сигурни ли сте, че искате да изтриете този документ?', function () {
            let tr = e.parentNode.parentNode;
            documentObject.postRequest('/file/document-delete/', {id}, done => {
                tr.remove();
                flash.success('Документът е изтрит');
                let rows = document.querySelectorAll('.docs-table tbody tr');
                if(rows.length === 0) {
                    let tbody = document.querySelector('.docs-table tbody');
                    tbody.innerHTML =
                        `<tr class="empty">
                            <td colspan="7" class="ct p20" style="">
                                <strong>Няма добавени документи</strong>
                            </td>
                        </tr>`;
                }
            })
        })
    }
}

document.addEventListener('DOMContentLoaded', () => {
    documentObject.generateRows()
})