[Vue] migrate scheduled reports management from twig/angularjs to vue (#19012)

* finish initial migration pass

* get changes to build

* delete angularjs and twig

* extract select phone numbers macro to vue and make sure angularjs directives are initialized in scheduled reports event content

* fixing several issues + getting report addition extending working

* fix UI tests

* possibly provide some BC for inline script use

* fix several bugs, use better approach for accessing report in event child vue components, provide backwards compatibility for angularjs/inline javascript potentially used by third party plugins

* apply review fixes

* decode scheduled report description as it is stored escaped in the DB + remove some vue warnings

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

1 files changed, 18 insertions, 8 deletions

diff --git a/plugins/Morpheus/javascripts/piwikHelper.js b/plugins/Morpheus/javascripts/piwikHelper.js
index 3e59e44ef3..6897634b6c 100644
--- a/plugins/Morpheus/javascripts/piwikHelper.js
+++ b/plugins/Morpheus/javascripts/piwikHelper.js
@@ -153,7 +153,7 @@ window.piwikHelper = {
     },
 
     // initial call for 'body' later in this file
-    compileVueEntryComponents: function (selector) {
+    compileVueEntryComponents: function (selector, extraProps) {
       function toCamelCase(arg) {
         return arg[0] + arg.substring(1)
           .replace(/-[a-z]/g, function (s) { return s[1].toUpperCase(); });
@@ -166,6 +166,10 @@ window.piwikHelper = {
 
       // process vue-entry attributes
       $('[vue-entry]', selector).add($(selector).filter('[vue-entry]')).each(function () {
+        if ($(this).closest('[vue-entry-ignore]').length) {
+          return;
+        }
+
         var entry = $(this).attr('vue-entry');
         var componentsToRegister = ($(this).attr('vue-components') || '').split(/\s+/).filter(function (s) {
           return !!s.length;
@@ -191,25 +195,31 @@ window.piwikHelper = {
         $(this).attr('ng-non-bindable', '');
 
         var paramsStr = '';
-
         var componentParams = {};
-        $.each(this.attributes, function () {
-          if (this.name === 'vue-entry') {
+
+        function handleProperty(name, value) {
+          if (name === 'vue-entry') {
             return;
           }
 
           // append with underscore so reserved javascripy keywords aren't accidentally used
-          var camelName = toCamelCase(this.name) + '_';
-          paramsStr += ':' + this.name + '=' + JSON.stringify(camelName) + ' ';
+          var camelName = toCamelCase(name) + '_';
+          paramsStr += ':' + name + '=' + JSON.stringify(camelName) + ' ';
 
-          var value = this.value;
           try {
-            value = JSON.parse(this.value);
+            value = JSON.parse(value);
           } catch (e) {
             // pass
           }
 
           componentParams[camelName] = value;
+        }
+
+        $.each(this.attributes, function () {
+          handleProperty(this.name, this.value);
+        });
+        Object.entries(extraProps || {}).forEach(([name, value]) => {
+          handleProperty(name, value);
         });
 
         // NOTE: we could just do createVueApp(component, componentParams), but Vue will not allow