[Vue] migrate siteselector directive and quick-access directive (#18292)

* 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

* first pass at migrating notification directive, notification service and parts of UI.Notification to Vue

* 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)

* start moving Notification class code to notifications store

* fix prop type

* fix html escaping

* built vue files

* get toast and other transitions to work + fix broken toast

* move all of notification.js to NotificationStore

* wait for angular to be initialized to post events to avoid loading race condition

* get scroll to notification to work + get initialization of notification groups to work

* correct unmount + remove notifications service file

* fix some test failures

* re add accidentally removed (?) file

* remove no longer needed file

* Add CoreHome UMD in CoreUpdater/Installation.

* self review

* fix type + add default value

* remove file from JS list

* fix test

* fix UI tests

* set correct type in users manager notification and allow scope values to be transformed in createAngularAdapter

* start migrating siteselector

* small addition

* migrate rest of site selector code + make some breaking changes to function signatures in createAngularJsAdapter

* disable webpack asset size hints/warnings + get siteselector code to build

* fixing some bugs

* fix some more issues (allow specifing require in createAngularJsAdapter and make AjaxHelper promises abortable)

* get npm test to pass

* a couple more fixes

* remove existing files

* convert quick-access directive and use shared code/state with site selector

* remove site selector model

* fix more issues and get UI tests to pass for quickaccess

* remove debugging code / todo

* fix initial value

* add back a $timeout()

* fixing tests, the post blur scope.$apply()s are apparently required for angularjs to function properly

* fixing more UI test failures

* rebuild

* fix vue build

* why were these deleted?

* remove debug code

* fix css class issue + update expected screenshots

* rebuild CoreHome

* revert styling change

* built vue files

* get focus-if to work and remove debugging return;

* rebuilt vue

* should not need to specify type there

* built CoreHome

* built vue files

* apply review feedback

* get auto clearing behavior to work in site selector

* fix a couple more bugs

* rebuild vue

* escape htmle entities in site name

* tweak

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

1 files changed, 17 insertions, 2 deletions

diff --git a/plugins/CoreHome/vue/src/createAngularJsAdapter.ts b/plugins/CoreHome/vue/src/createAngularJsAdapter.ts
index b28ee95d33..d1806e84b5 100644
--- a/plugins/CoreHome/vue/src/createAngularJsAdapter.ts
+++ b/plugins/CoreHome/vue/src/createAngularJsAdapter.ts
@@ -31,9 +31,11 @@ type AdapterFunction<InjectTypes, R = void> = (
 
 type EventAdapterFunction<InjectTypes, R = void> = (
   $event: any, // eslint-disable-line
+  vm: ComponentPublicInstance,
   scope: ng.IScope,
   element: ng.IAugmentedJQuery,
   attrs: ng.IAttributes,
+  otherController: ng.IControllerService,
   ...injected: InjectTypes,
 ) => R;
 
@@ -42,6 +44,7 @@ type PostCreateFunction<InjectTypes, R = void> = (
   scope: ng.IScope,
   element: ng.IAugmentedJQuery,
   attrs: ng.IAttributes,
+  otherController: ng.IControllerService,
   ...injected: InjectTypes,
 ) => R;
 
@@ -63,6 +66,7 @@ function toAngularJsCamelCase(arg: string): string {
 
 export default function createAngularJsAdapter<InjectTypes = []>(options: {
   component: ComponentType,
+  require?: string,
   scope?: ScopeMapping,
   directiveName: string,
   events?: EventMapping<InjectTypes>,
@@ -75,6 +79,7 @@ export default function createAngularJsAdapter<InjectTypes = []>(options: {
 }): ng.IDirectiveFactory {
   const {
     component,
+    require,
     scope = {},
     events = {},
     $inject,
@@ -104,6 +109,7 @@ export default function createAngularJsAdapter<InjectTypes = []>(options: {
   function angularJsAdapter(...injectedServices: InjectTypes) {
     const adapter: ng.IDirective = {
       restrict,
+      require,
       scope: noScope ? undefined : angularJsScope,
       compile: function angularJsAdapterCompile() {
         return {
@@ -111,6 +117,7 @@ export default function createAngularJsAdapter<InjectTypes = []>(options: {
             ngScope: ng.IScope,
             ngElement: ng.IAugmentedJQuery,
             ngAttrs: ng.IAttributes,
+            ngController: ng.IControllerService,
           ) {
             const clone = transclude ? ngElement.find(`[ng-transclude][counter=${currentTranscludeCounter}]`) : null;
 
@@ -173,7 +180,15 @@ export default function createAngularJsAdapter<InjectTypes = []>(options: {
                   }
 
                   if (events[name]) {
-                    events[name]($event, ngScope, ngElement, ngAttrs, ...injectedServices);
+                    events[name](
+                      $event,
+                      this,
+                      ngScope,
+                      ngElement,
+                      ngAttrs,
+                      ngController,
+                      ...injectedServices,
+                    );
                   }
                 },
               },
@@ -213,7 +228,7 @@ export default function createAngularJsAdapter<InjectTypes = []>(options: {
             }
 
             if (postCreate) {
-              postCreate(vm, ngScope, ngElement, ngAttrs, ...injectedServices);
+              postCreate(vm, ngScope, ngElement, ngAttrs, ngController, ...injectedServices);
             }
 
             ngElement.on('$destroy', () => {