[Vue] migrate dropdown and related directives (#18214)

* migrating RateFeature and ReviewLinks + adding AjaxHelper.fetch utility method (all untested)

* get ratefeature component to work, modify matomodialog component to use v-model, add event parameters to createAngularAdapter, allow translate to use variadic args or one string array + rebuild

* remove ratefeature angularjs files

* rebuild + make vue mapping property optional in createANgularJsAdapter

* migrate enrichedheadline and get to work

* fix test

* fix translate

* fix another translate issue & migrate contentblock directive

* fix anchor links, not including the "/" causes angularjs to fail (also on 4.x-dev)

* update expected screenshots

* fix ui test

* fix some test failures

* fix nested transclude issue

* remove content block files

* fix icon spacing that occurs due to angularjs inserting empty comments in between nodes while vue 3 does not

* update some screenshots

* update screenshot (actually fixes an alignment issue)

* update screenshot

* first pass at converting comparisons service/component

* get new code to build and load without error in the UI

* debugging

* getting basic functionaltiy to work

* Update _dataTable.twig

* fix UI test failure + URL encoding/angularjs issue causing back button to not work

* fix order of operations issue

* built vue files

* using ref in setup() is not needed to access this.$refs

* Convert comparisons service angularjs tests to comparison store typescript tests.

* migrate piwik-date-picker directive

* migrate date range picker component (changed invalid date in input handling to just reset back to the previous date since it was easier in vue to do that)

* migrate period-date-picker component (using composition api more when easier for migration)

* convert piwik-expand-onclick directive to vue directive

* migrate expand on hover directive to vue directive

* fix variable reference

* build

* Add materialize-css @types and migrate piwik-dropdown-menu.

* migrate focus-anywhere-but-here directive to vue directive

* migrate focus-if directive

* migrate menudropdown directive

* forgot to remove old files

* built vue files

* rewrite URL handling to use computed properties in a URL store + do the same for other dependent data in the comparison store to allow vues to subscribe to the properties for changes to global state

* fix some tests

* some more fixes

* more fixes + disallow modifications to MatomoUrl state

* get angularjs unit tests to pass + fix a couple more issues

* another fix

* fix bad merge

* self review + fixes

* remove old fix as it may not be needed anymore

* empty string is not a valid date + do not report invalid date exception just rethrow

* update screenshots and try to fix random failure

* use jquery $destroy event instead of scope one since the scope one is broadcasted

* rangeChange event must be triggered once on mount

* initialize startDateText/endDateText correctly

* use jquery $destroy event instead of angularjs one

* built vue files

* fix menudropdown.directive.js reference

* load vue in installation/updater & correctly make focusanywherebuthere stateful

* correctly implement stateful directives for ExpandOnClick/ExpandOnHover

* less tweak (angularjs comment removal)

* fix submenu check

* quick type fix

* load vue in installation workflow

* add broadcast.js to Installation workflow + do not fail in pk_translate if no translations are loaded

* update expected screenshots (spacing of arrow changed because of angularjs comment no longer being there)

* fix prop type

* built vue files

* re add accidentally removed (?) file

* remove no longer needed file

* Add CoreHome UMD in CoreUpdater/Installation.

* self review

* remove file from JS list

* fix UI tests

* apply review fixes

Co-authored-by: sgiehl <stefan@matomo.org>

7 files changed, 0 insertions, 391 deletions

diff --git a/plugins/CoreHome/angularjs/common/directives/focus-anywhere-but-here.js b/plugins/CoreHome/angularjs/common/directives/focus-anywhere-but-here.js
deleted file mode 100644
index 4b210b2974..0000000000
--- a/plugins/CoreHome/angularjs/common/directives/focus-anywhere-but-here.js
+++ /dev/null
@@ -1,76 +0,0 @@
-/*!
- * Matomo - free/libre analytics platform
- *
- * @link https://matomo.org
- * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */
-
-/**
- * The given expression will be executed when the user presses either escape or presses something outside
- * of this element
- *
- * Example:
- * <div piwik-focus-anywhere-but-here="closeDialog()">my dialog</div>
- */
-(function () {
-    angular.module('piwikApp.directive').directive('piwikFocusAnywhereButHere', piwikFocusAnywhereButHere);
-
-    piwikFocusAnywhereButHere.$inject = ['$document'];
-
-    function piwikFocusAnywhereButHere($document){
-        return {
-            restrict: 'A',
-            link: function(scope, element, attr, ctrl) {
-
-                var isMouseDown = false;
-                var hasScrolled = false;
-
-                function onClickOutsideElement (event) {
-                    var hadUsedScrollbar = isMouseDown && hasScrolled;
-                    isMouseDown = false;
-                    hasScrolled = false;
-
-                    if (hadUsedScrollbar) {
-                        return;
-                    }
-
-                    if (element.has(event.target).length === 0) {
-                        setTimeout(function () {
-                            scope.$apply(attr.piwikFocusAnywhereButHere);
-                        }, 0);
-                    }
-                }
-
-                function onScroll (event) {
-                    hasScrolled = true;
-                }
-
-                function onMouseDown (event) {
-                    isMouseDown = true;
-                    hasScrolled = false;
-                }
-
-                function onEscapeHandler (event) {
-                    if (event.which === 27) {
-                        setTimeout(function () {
-                            isMouseDown = false;
-                            hasScrolled = false;
-                            scope.$apply(attr.piwikFocusAnywhereButHere);
-                        }, 0);
-                    }
-                }
-
-                $document.on('keyup', onEscapeHandler);
-                $document.on('mousedown', onMouseDown);
-                $document.on('mouseup', onClickOutsideElement);
-                $document.on('scroll', onScroll);
-                scope.$on('$destroy', function() {
-                    $document.off('keyup', onEscapeHandler);
-                    $document.off('mousedown', onMouseDown);
-                    $document.off('mouseup', onClickOutsideElement);
-                    $document.off('scroll', onScroll);
-                });
-            }
-        };
-    }
-})();
diff --git a/plugins/CoreHome/angularjs/common/directives/focusif.js b/plugins/CoreHome/angularjs/common/directives/focusif.js
deleted file mode 100644
index 8db12603b6..0000000000
--- a/plugins/CoreHome/angularjs/common/directives/focusif.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/*!
- * Matomo - free/libre analytics platform
- *
- * @link https://matomo.org
- * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */
-
-/**
- * If the given expression evaluates to true the element will be focused
- *
- * Example:
- * <input type="text" piwik-focus-if="view.editName">
- */
-(function () {
-    angular.module('piwikApp.directive').directive('piwikFocusIf', piwikFocusIf);
-
-    piwikFocusIf.$inject = ['$timeout'];
-
-    function piwikFocusIf($timeout) {
-        return {
-            restrict: 'A',
-            link: function(scope, element, attrs) {
-                scope.$watch(attrs.piwikFocusIf, function(newValue, oldValue) {
-                    if (newValue) {
-                        $timeout(function () {
-                            element[0].focus();
-                        }, 5);
-                    }
-                });
-            }
-        };
-    }
-})();
diff --git a/plugins/CoreHome/angularjs/dropdown-menu/dropdown-menu.directive.js b/plugins/CoreHome/angularjs/dropdown-menu/dropdown-menu.directive.js
deleted file mode 100644
index 8829b671a5..0000000000
--- a/plugins/CoreHome/angularjs/dropdown-menu/dropdown-menu.directive.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/*!
- * Matomo - free/libre analytics platform
- *
- * @link https://matomo.org
- * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */
-
-/**
- * A materializecss dropdown menu that supports submenus.
- *
- * To use a submenu, just use this directive within another dropdown.
- *
- * Note: if submenus are used, then dropdowns will never scroll.
- *
- * Usage:
- * <a class='dropdown-trigger btn' href='' data-target='mymenu' piwik-dropdown-menu>Menu</a>
- * <ul id='mymenu' class='dropdown-content'>
- *     <li>
- *         <a class='dropdown-trigger' data-target="mysubmenu" piwik-dropdown-menu>Submenu</a>
- *         <ul id="mysubmenu" class="dropdown-content">
- *             <li>Submenu Item</li>
- *         </ul>
- *     </li>
- *     <li>
- *         <a href="">Another item</a>
- *     </li>
- * </ul>
- */
-(function () {
-    angular.module('piwikApp').directive('piwikDropdownMenu', piwikDropdownMenu);
-
-    piwikDropdownMenu.$inject = ['$timeout'];
-
-    function piwikDropdownMenu($timeout){
-        return {
-            restrict: 'A',
-            link: function (scope, element, attrs) {
-                var options = {};
-
-                var isSubmenu = !! element.parent().closest('.dropdown-content').length;
-                if (isSubmenu) {
-                    options = { hover: true };
-                    element.addClass('submenu');
-                    angular.element('#' + attrs.activates).addClass('submenu-dropdown-content');
-
-                    // if a submenu is used, the dropdown will never scroll
-                    element.parents('.dropdown-content').addClass('submenu-container');
-                }
-
-                $timeout(function () {
-                    element.dropdown(options);
-                });
-            }
-        };
-    }
-})();
\ No newline at end of file
diff --git a/plugins/CoreHome/angularjs/dropdown-menu/dropdown-menu.directive.less b/plugins/CoreHome/angularjs/dropdown-menu/dropdown-menu.directive.less
deleted file mode 100644
index 92f8ca8785..0000000000
--- a/plugins/CoreHome/angularjs/dropdown-menu/dropdown-menu.directive.less
+++ /dev/null
@@ -1,27 +0,0 @@
-[piwik-dropdown-menu] {
-  position: relative;
-
-  &::after {
-    content: "▼";
-    font-size: .7em;
-    position: absolute;
-    right: 1em;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  &.submenu::after {
-    float: right;
-    content: "►";
-    color: @color-black-piwik;
-    font-size: .6em;
-  }
-}
-
-.submenu + .dropdown-content {
-  left: 100%!important;
-}
-
-.submenu-container.dropdown-content {
-  overflow:visible; // required for submenus to display
-}
\ No newline at end of file
diff --git a/plugins/CoreHome/angularjs/menudropdown/menudropdown.directive.html b/plugins/CoreHome/angularjs/menudropdown/menudropdown.directive.html
deleted file mode 100644
index cbfbbb1ae1..0000000000
--- a/plugins/CoreHome/angularjs/menudropdown/menudropdown.directive.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<div piwik-focus-anywhere-but-here="view.showItems=false" class="menuDropdown">
-
-    <span class="title"
-          ng-click="view.showItems=!view.showItems"
-          title="{{ tooltip }}">
-        <span ng-bind-html="menuTitle"></span>
-        <span class="icon-arrow-bottom"></span>
-    </span>
-
-    <div class="items" ng-show="view.showItems">
-        <div class="search" ng-if="showSearch && view.showItems">
-            <input type="text"
-                   piwik-focus-if="view.showItems"
-                   ng-model="view.searchTerm"
-                   placeholder="{{ 'General_Search'|translate }}"
-                   ng-change="searchItems(view.searchTerm)">
-
-            <img title="{{ 'General_Search'|translate }}"
-                 ng-show="!view.searchTerm"
-                 class="search_ico"
-                 src="plugins/Morpheus/images/search_ico.png"/>
-            <img title="{{ 'General_Clear'|translate }}"
-                 ng-show="view.searchTerm"
-                 ng-click="view.searchTerm='';searchItems('')"
-                 class="reset"
-                 src="plugins/CoreHome/images/reset_search.png"/>
-        </div>
-        <div ng-transclude ng-click="selectItem($event)">
-
-        </div>
-    </div>
-
-</div>
\ No newline at end of file
diff --git a/plugins/CoreHome/angularjs/menudropdown/menudropdown.directive.js b/plugins/CoreHome/angularjs/menudropdown/menudropdown.directive.js
deleted file mode 100644
index f51ce2abcf..0000000000
--- a/plugins/CoreHome/angularjs/menudropdown/menudropdown.directive.js
+++ /dev/null
@@ -1,76 +0,0 @@
-/*!
- * Matomo - free/libre analytics platform
- *
- * @link https://matomo.org
- * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */
-
-/**
- * Usage:
- * <div piwik-menudropdown menu-title="MyMenuItem" tooltip="My Tooltip" show-search="false">
- *     <a class="item" href="/url">An Item</a>
- *     <a class="item disabled">Disabled</a>
- *     <a class="item active">Active item</a>
- *     <hr class="item separator"/>
- *     <a class="item disabled category">Category</a>
- *     <a class="item" href="/url"></a>
- * </div>
- */
-(function () {
-    angular.module('piwikApp').directive('piwikMenudropdown', piwikMenudropdown);
-
-    function piwikMenudropdown(){
-
-        return {
-            transclude: true,
-            replace: true,
-            restrict: 'A',
-            scope: {
-                menuTitle: '@',
-                tooltip: '@',
-                showSearch: '=',
-                menuTitleChangeOnClick: '='
-            },
-            templateUrl: 'plugins/CoreHome/angularjs/menudropdown/menudropdown.directive.html?cb=' + piwik.cacheBuster,
-            link: function(scope, element, attrs) {
-
-                scope.selectItem = function (event) {
-                    var $self = angular.element(event.target);
-
-                    if (!$self.hasClass('item') || $self.hasClass('disabled') || $self.hasClass('separator')) {
-                        return;
-                    }
-
-                    if (scope.menuTitleChangeOnClick !== false) {
-                        scope.menuTitle = $self.text().replace(/[\u0000-\u2666]/g, function(c) {
-                            return '&#'+c.charCodeAt(0)+';';
-                        });
-                    }
-                    scope.$eval('view.showItems = false');
-
-                    setTimeout(function () {
-                        scope.$apply();
-                    }, 0);
-
-                    element.find('.item').removeClass('active');
-                    $self.addClass('active');
-                };
-
-                scope.searchItems = function (searchTerm)
-                {
-                    searchTerm = searchTerm.toLowerCase();
-
-                    element.find('.item').each(function (index, node) {
-                        var $node = angular.element(node);
-
-                        if (-1 === $node.text().toLowerCase().indexOf(searchTerm)) {
-                            $node.hide();
-                        } else {
-                            $node.show();
-                        }
-                    });
-                };
-            }
-        };
-    }
-})();
diff --git a/plugins/CoreHome/angularjs/menudropdown/menudropdown.directive.less b/plugins/CoreHome/angularjs/menudropdown/menudropdown.directive.less
deleted file mode 100644
index 63e85640d7..0000000000
--- a/plugins/CoreHome/angularjs/menudropdown/menudropdown.directive.less
+++ /dev/null
@@ -1,90 +0,0 @@
-
-.menuDropdown {
-  display: inline-block;
-  padding-right: 14px;
-
-  .title {
-    position: relative;
-    cursor: pointer;
-  }
-
-  .items {
-    z-index: 200;
-    position: absolute;
-    border: 1px solid @color-silver-l80;
-    background: @theme-color-background-contrast;
-    max-height: 400px;
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding: 0 !important;
-
-    .search {
-      margin: 15px 6px 10px 6px;
-      display: block;
-
-      .search_ico {
-        position: absolute;
-        right: 25px;
-        top: 27px;
-        margin: 0px;
-        left: initial;
-      }
-      .reset {
-        position: absolute;
-        top: 25px;
-        cursor: pointer;
-        margin: 0px;
-        right: 25px;
-        left: initial;
-      }
-
-      input {
-        margin: 0px;
-        width: 100%;
-
-        &::-ms-clear {
-          display: none;
-        }
-      }
-    }
-
-    .item {
-      display: block;
-      color: @theme-color-text !important;
-      text-decoration: none !important;
-      padding: 12px 25px 12px 6px !important;
-      font-size: 11px;
-      float: none;
-      text-align: left;
-      line-height: 16px;
-
-      &:hover {
-        background: @theme-color-background-tinyContrast;
-      }
-
-      &.active {
-        background-color: @theme-color-background-tinyContrast;
-      }
-
-      &.category {
-        color: @theme-color-text-light !important
-      }
-
-      &.separator {
-        padding: 0px !important;
-        border-bottom: 0px;
-        margin: 0px;
-      }
-
-      &.separator,
-      &.disabled {
-        opacity: 0.5;
-        cursor: default;
-
-        &:hover {
-          background: @theme-color-background-base;
-        }
-      }
-    }
-  }
-}