aimeos / ai-admin-jqadm

Aimeos e-commerce Vue.js+Bootstrap based admin interface
https://aimeos.org
GNU Lesser General Public License v3.0
177 stars 43 forks source link

Fix filter search in newly added "vue-block" #137

Closed rowild closed 4 years ago

rowild commented 4 years ago

I do not know, why vue does not like the jquery manipulations of the search filter bar, since there are no reactive elements that vue managers.

This PR moves the click functionality to Vue and removes the "toggleSearch" function that was handled by jquery in theAimeos.Filter object.

It also adds a function that clears the input field after reload. I do not know if this is a welcome feature (I personally do not like it, because I prefer to see what I actually was looking for).

Furthermore, the animation got lost that took place when the fields opened or closed. They where handled by jquery. I tried to imitate them using CSS, but it is impossible to hide a select DOM elements completely with CSS visibility and opacity rules only (the arrows of those boxes remain visible). Using display: none is not satisfying, since the immediate switch to "display: [inline-]block" causes a jump.

This solution was tested in Laravel only so far. Help wanted for TYPO3 9 and TYPO3 10 - thank you!

rowild commented 4 years ago

DISCUSSION

1: The errors in the console (e.g. "[Vue warn]: Cannot find element: #item-address-group") remain. Most of them can be removed by checking the DOM existence first like this (not implemented yet):

// aimeos.aux.js

$(function () {

    if (document.getElementById('item-address-group') !== null) {
        Aimeos.Address.init();
    }
    if (document.getElementById('item-media-group') !== null) {
        Aimeos.Media.init();
    }
    if (document.getElementById('item-price-group') !== null) {
        Aimeos.Price.init();
    }
    if (document.getElementById('item-text-group') !== null) {
        Aimeos.Text.init();
    }
});

But I don't know if this is good programming style at all...

  1. Does not work on all pages (e.g. "Orders")
aimeos commented 4 years ago

Can this also be implemented as Vue component so we can build the admin interface from stacking different components?

Regarding "[Vue warn]: Cannot find element: #item-address-group": This should be shown in dev mode only

aimeos commented 4 years ago

Merged until a better solution is available