CRUD icon indicating copy to clipboard operation
CRUD copied to clipboard

[Bug] [Editable Columns] On update editable columns another column (content) disapears

Open preBit opened this issue 2 years ago • 1 comments

Bug report

What I did

Flip editable switch and update editable text columns.

What I expected to happen

Switch is flipped and editable text column is updated.

What happened

Exactly what i expected and some 😁 Details row "+" disappears and appears in respected editable column field. And i think that is when "auto_update_row" is set to "false". Another column disappears if "auto_update_row" is set to "true".

There are various different scenarios:

  • when switch or text is used with details row "auto_update_row" "true" or "false"

editable_columns_1 editable_columns_2

  • when switch or text is used without details row

editable_columns_4

I did not tried this with editable select 😞

What I've already tried to fix it

I tried to play with "minor_update_client_logic.blade.php" with logging some variable and commenting out parts of the code to see what happens.

function saveDetailsRowState(element, i = 0) {
    let hasDetailsRow = element.closest('.dataTable').dataset.hasDetailsRow === '1';
    let tr = element.closest('tr');

    // if i comment out this part it kind of works
    // but when i change "auto_update_row" then another column disappers
    // Temporary move details control to body
    // if(hasDetailsRow && i === 0) {
    //     document.body.appendChild(tr.querySelector('.details-control'));
    // }
}

function restoreDetailsRowState(cell) {
    // Move details control back to cell node
    if(document.body.lastElementChild.classList.contains('details-control')) {
        cell.node().prepend(document.body.lastElementChild);
    }
}

// i also tried different things in this part mostly in update table row without success 
function updateDependentColumns(element, data) {
    let stringCleaner = /[^\w\d]/gi;
    let insideModal = element.closest('.modal');
    let tr = element.closest('tr');
    let td = element.closest('td');
    let trIndex = [...element.closest('tr').parentElement.children].filter(e => !e.previousElementSibling?.classList.contains('shown')).indexOf(element.closest('tr'));
    let tdIndex = [...td.parentElement.children].indexOf(td);
    let hasDetailsRow = element.closest('.dataTable').dataset.hasDetailsRow === '1';

    // add updated class to the row
    let setUpdated = (element, content) => {
        if(element.innerHTML.replaceAll(stringCleaner, '') !== content.replaceAll(stringCleaner, '')) {
            element.classList.add('updated');
            setTimeout(() => element.classList.remove('updated'), 2000);
        }
    };

    // if it's inside modal
    if(insideModal) {
        tableColumns = element.closest('tbody').querySelectorAll('tr > td:last-child');
        trIndex = Number(element.closest('tr').dataset.dtRow);
        tdIndex = Number(element.closest('tr').dataset.dtColumn);

        // update the values in modal
        data.row?.forEach((content, i) => {
            // avoid updating the same column
            if(tdIndex !== i) {
                setUpdated(tableColumns[i], content);
                tableColumns[i].innerHTML = content;
            }
        });
    }

    // update table data
    data.row?.forEach((content, i) => {
        // avoid updating the same column
        if(tdIndex !== i) {
            saveDetailsRowState(element, i);

            // Update cell content
            let cell = crud.table.cell(trIndex, i);
            setUpdated(cell.node(), content);
            cell.data(content);

            // remove details-control from the request
            cell.node().querySelector('.details-control')?.remove();

            restoreDetailsRowState(cell);
        }
    });

    // get back focus to the active input
    focusActiveElement();
}

That is pretty much it........aaaand I am writing this on Sunday morning...i think that also counts like something i did 😊

Is it a bug in the latest version of Backpack?

No, it is a bug in the Editable Columns add-on.

After I run composer update backpack/crud the bug... is it still there?

Yes

Backpack, Laravel, PHP, DB version

When I run php artisan backpack:version the output is:

PHP VERSION:

PHP 8.1.18 (cli) (built: Apr 14 2023 05:22:06) (NTS) Copyright (c) The PHP Group Zend Engine v4.1.18, Copyright (c) Zend Technologies with Xdebug v3.2.0, Copyright (c) 2002-2022, by Derick Rethans with Zend OPcache v8.1.18, Copyright (c), by Zend Technologies

LARAVEL VERSION:

v9.52.7@675ea868fe36b18c8303e954aac540e6b1caa677

BACKPACK PACKAGE VERSIONS:

backpack/activity-log: dev-main backpack/crud: 5.6.0 backpack/editable-columns: 2.1.4 backpack/generators: 3.3.16 backpack/logmanager: v4.0.10 backpack/permissionmanager: 6.0.16 backpack/pro: 1.6.4 backpack/revise-operation: 1.0.12 backpack/settings: 3.0.16

preBit avatar May 21 '23 09:05 preBit

Hey @preBit thanks for the report. This issue completely fell through the cracks, I casually found it now while doing a cleanup, what a shame. 😞

I could easily reproduce the issue you described and took some time to come with a PR for it.

I asked my colleague @promatik for a review as I think he knows best the in's and out's of editable columns.

I hope we can have this fixed in the next couple days.

I am very sorry this was almost 1 year without a single response, we've released quite a few versions without noticing this issue.

You did more than requested by reporting the issue and I am grateful for that, I wish I had seen this issue before.

Cheers

pxpm avatar Apr 03 '24 17:04 pxpm

Thanks again @preBit and sorry for the delay on this. 🙏

It's tagged and fixed in 3.0.10 of backpack/editable-columns.

Cheers

pxpm avatar Jul 23 '24 10:07 pxpm