Closed rowild closed 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...
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
Merged until a better solution is available
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 the
Aimeos.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). Usingdisplay: 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!