LDAPWeb/server-connection/geonet-console/public/js/list-row-actions.js

(function () {
    'use strict';

    var sheet = document.getElementById('list-row-actions-sheet');
    if (!sheet) {
        return;
    }

    var titleEl = document.getElementById('list-actions-sheet-title');
    var subtitleEl = document.getElementById('list-actions-sheet-subtitle');
    var bodyEl = document.getElementById('list-actions-sheet-body');
    var mobileMq = window.matchMedia('(max-width: 1023px)');

    function isMobile() {
        return mobileMq.matches;
    }

    function cellHasActions(cell) {
        if (!cell) {
            return false;
        }

        if (cell.querySelector('a[href], button, form')) {
            var text = (cell.textContent || '').trim();
            return text !== '' && text !== '—' && text !== '-';
        }

        return false;
    }

    function rowTitle(row) {
        var custom = row.getAttribute('data-list-row-title');
        if (custom) {
            return custom;
        }

        var first = row.querySelector('td');
        return first ? first.textContent.trim() : 'Item';
    }

    function rowSubtitle(row) {
        var custom = row.getAttribute('data-list-row-subtitle');
        if (custom) {
            return custom;
        }

        var cells = row.querySelectorAll('td:not(.list-col-actions):not(.list-col-row-hint)');
        if (cells.length < 2) {
            return '';
        }

        return cells[1].textContent.trim();
    }

    function bindSheetForms(root) {
        root.querySelectorAll('form').forEach(function (form) {
            if (form.dataset.listActionsBound === '1') {
                return;
            }

            form.dataset.listActionsBound = '1';
            form.addEventListener('submit', function (event) {
                var submitter = event.submitter || form.querySelector('[type="submit"]');
                var message = (submitter && submitter.dataset.loadingMessage)
                    || form.dataset.loadingMessage
                    || 'Memproses permintaan...';

                if (window.UiFeedback && window.UiFeedback.showLoading) {
                    window.UiFeedback.showLoading(message);
                }

                closeSheet();
            });
        });
    }

    function openSheet(row) {
        var actionsCell = row.querySelector('.list-col-actions');
        if (!cellHasActions(actionsCell)) {
            return;
        }

        if (titleEl) {
            titleEl.textContent = rowTitle(row);
        }

        if (subtitleEl) {
            var subtitle = rowSubtitle(row);
            if (subtitle && subtitle !== '—') {
                subtitleEl.textContent = subtitle;
                subtitleEl.hidden = false;
            } else {
                subtitleEl.textContent = '';
                subtitleEl.hidden = true;
            }
        }

        if (bodyEl && actionsCell) {
            bodyEl.innerHTML = actionsCell.innerHTML;
            bindSheetForms(bodyEl);
        }

        sheet.hidden = false;
        document.body.classList.add('list-actions-open');

        var closeBtn = sheet.querySelector('.list-actions-sheet__close');
        if (closeBtn) {
            closeBtn.focus();
        }
    }

    function closeSheet() {
        sheet.hidden = true;
        document.body.classList.remove('list-actions-open');
        if (bodyEl) {
            bodyEl.innerHTML = '';
        }
    }

    function prepareRow(row) {
        var actionsCell = row.querySelector('.list-col-actions');
        if (!cellHasActions(actionsCell)) {
            return;
        }

        row.setAttribute('data-has-actions', '1');
        row.setAttribute('tabindex', '0');
        row.setAttribute('role', 'button');
        row.setAttribute('aria-label', 'Buka aksi untuk ' + rowTitle(row));
    }

    function onRowActivate(row, event) {
        if (!isMobile()) {
            return;
        }

        if (event.target.closest('a, button, form, input, select, textarea, label')) {
            return;
        }

        event.preventDefault();
        openSheet(row);
    }

    function initTable(table) {
        if (table.dataset.listActionsBound === '1') {
            return;
        }

        table.dataset.listActionsBound = '1';

        table.querySelectorAll('tbody tr').forEach(function (row) {
            if (row.querySelector('td[colspan]')) {
                return;
            }

            prepareRow(row);

            row.addEventListener('click', function (event) {
                onRowActivate(row, event);
            });

            row.addEventListener('keydown', function (event) {
                if (event.key === 'Enter' || event.key === ' ') {
                    event.preventDefault();
                    onRowActivate(row, event);
                }
            });
        });
    }

    function initAll(root) {
        var scope = root || document;
        scope.querySelectorAll('.list-table--row-actions').forEach(initTable);
    }

    initAll();

    document.addEventListener('app:frame-loaded', function (event) {
        if (event.detail && event.detail.frame) {
            initAll(event.detail.frame);
        }
    });

    sheet.querySelectorAll('[data-list-actions-close]').forEach(function (el) {
        el.addEventListener('click', closeSheet);
    });

    document.addEventListener('keydown', function (event) {
        if (event.key === 'Escape' && !sheet.hidden) {
            closeSheet();
        }
    });

    mobileMq.addEventListener('change', function () {
        if (!isMobile()) {
            closeSheet();
        }
    });
})();