[Vue] migrate goal page link directive and add event to replace use of angularjs in html ajax code (#18888)

* migrate goal-page-link

* make event more generic and use in compileAngularComponents()

10 files changed, 123 insertions, 50 deletions

diff --git a/plugins/CoreHome/javascripts/dataTable.js b/plugins/CoreHome/javascripts/dataTable.js
index 4287092033..214964a34a 100644
--- a/plugins/CoreHome/javascripts/dataTable.js
+++ b/plugins/CoreHome/javascripts/dataTable.js
@@ -114,7 +114,6 @@ $.extend(DataTable.prototype, UIControl.prototype, {
         this._init(domElem);
         this.enableStickHead(domElem);
         this.initialized = true;
-
     },
 
     enableStickHead: function (domElem) {
diff --git a/plugins/CoreHome/vue/src/ReportingPage/ReportingPage.vue b/plugins/CoreHome/vue/src/ReportingPage/ReportingPage.vue
index d1cd8388c7..5f9dec0367 100644
--- a/plugins/CoreHome/vue/src/ReportingPage/ReportingPage.vue
+++ b/plugins/CoreHome/vue/src/ReportingPage/ReportingPage.vue
@@ -57,8 +57,6 @@ import Matomo from '../Matomo/Matomo';
 import ReportingPagesStoreInstance from '../ReportingPages/ReportingPages.store';
 import AjaxHelper from '../AjaxHelper/AjaxHelper';
 
-const { $ } = window;
-
 function showOnlyRawDataNotification() {
   const params = 'category=General_Visitors&subcategory=Live_VisitorLog';
   const url = window.broadcast.buildReportingUrl(params);
diff --git a/plugins/Goals/Goals.php b/plugins/Goals/Goals.php
index 413eccc6ab..fa2220a3d4 100644
--- a/plugins/Goals/Goals.php
+++ b/plugins/Goals/Goals.php
@@ -342,7 +342,6 @@ class Goals extends \Piwik\Plugin
 
     public function getJsFiles(&$jsFiles)
     {
-        $jsFiles[] = "plugins/Goals/angularjs/common/directives/goal-page-link.js";
         $jsFiles[] = "plugins/Goals/angularjs/manage-goals/manage-goals.controller.js";
         $jsFiles[] = "plugins/Goals/angularjs/manage-goals/manage-goals.directive.js";
     }
diff --git a/plugins/Goals/Reports/Get.php b/plugins/Goals/Reports/Get.php
index 445f6fd1cc..201eeae186 100644
--- a/plugins/Goals/Reports/Get.php
+++ b/plugins/Goals/Reports/Get.php
@@ -113,7 +113,7 @@ class Get extends Base
 
             if ($onlySummary && !empty($idGoal)) {
                 if (is_numeric($idGoal)) {
-                    $view->config->title_attributes = array('piwik-goal-page-link' => $idGoal);
+                    $view->config->title_attributes = array('goal-page-link' => $idGoal);
                 }
 
                 // in Goals overview summary we show proper title for a goal
diff --git a/plugins/Goals/angularjs/common/directives/goal-page-link.js b/plugins/Goals/angularjs/common/directives/goal-page-link.js
deleted file mode 100644
index 9624e8daf4..0000000000
--- a/plugins/Goals/angularjs/common/directives/goal-page-link.js
+++ /dev/null
@@ -1,45 +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-goal-page-link="idGoal">
- */
-(function () {
-    angular.module('piwikApp.directive').directive('piwikGoalPageLink', piwikGoalPageLink);
-
-    piwikGoalPageLink.$inject = ['$location', 'piwik'];
-
-    function piwikGoalPageLink($location, piwik){
-
-        return {
-            restrict: 'A',
-            compile: function (element, attrs) {
-
-                if (attrs.piwikGoalPageLink && piwik.helper.isAngularRenderingThePage()) {
-                    var title = element.text();
-                    element.html('<a></a>');
-                    var link =  element.find('a');
-                    link.text(title);
-                    link.attr('href', 'javascript:void(0)');
-                    link.attr('title', _pk_translate('Goals_ClickToViewThisGoal'));
-                    link.bind('click', function () {
-                        var $search = $location.search();
-                        $search.category = 'Goals_Goals';
-                        $search.subcategory = encodeURIComponent(attrs.piwikGoalPageLink);
-                        $location.search($search);
-                    });
-                }
-
-                return function (scope, element, attrs) {
-
-                };
-            }
-        };
-    }
-})();
\ No newline at end of file
diff --git a/plugins/Goals/vue/dist/umd.metadata.json b/plugins/Goals/vue/dist/umd.metadata.json
new file mode 100644
index 0000000000..9ecfcc0456
--- /dev/null
+++ b/plugins/Goals/vue/dist/umd.metadata.json
@@ -0,0 +1,5 @@
+{
+  "dependsOn": [
+    "CoreHome"
+  ]
+}
\ No newline at end of file
diff --git a/plugins/Goals/vue/src/GoalPageLink/GoalPageLink.adapter.ts b/plugins/Goals/vue/src/GoalPageLink/GoalPageLink.adapter.ts
new file mode 100644
index 0000000000..5d0948a973
--- /dev/null
+++ b/plugins/Goals/vue/src/GoalPageLink/GoalPageLink.adapter.ts
@@ -0,0 +1,30 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+import { IAttributes, IDirective, IScope } from 'angular';
+import GoalPageLink from './GoalPageLink';
+
+export default function piwikGoalPageLink(): IDirective {
+  return {
+    restrict: 'A',
+    link: function expandOnClickLink(scope: IScope, element: JQuery, attrs: IAttributes) {
+      const binding = {
+        instance: null,
+        value: {
+          idGoal: attrs.piwikGoalPageLink,
+        },
+        oldValue: null,
+        modifiers: {},
+        dir: {},
+      };
+
+      GoalPageLink.mounted(element[0], binding);
+    },
+  };
+}
+
+window.angular.module('piwikApp').directive('piwikExpandOnClick', piwikGoalPageLink);
diff --git a/plugins/Goals/vue/src/GoalPageLink/GoalPageLink.ts b/plugins/Goals/vue/src/GoalPageLink/GoalPageLink.ts
new file mode 100644
index 0000000000..53c9b7d33a
--- /dev/null
+++ b/plugins/Goals/vue/src/GoalPageLink/GoalPageLink.ts
@@ -0,0 +1,69 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+import { DirectiveBinding } from 'vue';
+import { Matomo, translate, MatomoUrl } from 'CoreHome';
+
+interface GoalPageLinkArgs {
+  idGoal: string|number;
+}
+
+const { $ } = window;
+
+// usage v-goal-page-link="{ idGoal: 5 }"
+const GoalPageLink = {
+  mounted(el: HTMLElement, binding: DirectiveBinding<GoalPageLinkArgs>): void {
+    if (!Matomo.helper.isAngularRenderingThePage()) {
+      return;
+    }
+
+    const title = $(el).text();
+
+    const link = $('<a></a>');
+    link.text(title);
+    link.attr('title', translate('Goals_ClickToViewThisGoal'));
+    link.click((e) => {
+      e.preventDefault();
+
+      MatomoUrl.updateHash({
+        ...MatomoUrl.hashParsed.value,
+        category: 'Goals_Goals',
+        subcategory: binding.value.idGoal,
+      });
+    });
+
+    $(el).html(link);
+  },
+};
+
+export default GoalPageLink;
+
+// manually handle occurrence of goal-page-link on datatable html attributes since dataTable.js is
+// not managed by vue.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+Matomo.on('Matomo.processDynamicHtml', ($element: JQuery) => {
+  $element.find('[goal-page-link]').each((i, e) => {
+    if ($(e).attr('goal-page-link-handled')) {
+      return;
+    }
+
+    const idGoal = $(e).attr('goal-page-link');
+    if (idGoal) {
+      GoalPageLink.mounted(e, {
+        instance: null,
+        value: {
+          idGoal,
+        },
+        oldValue: null,
+        modifiers: {},
+        dir: {},
+      });
+    }
+
+    $(e).attr('goal-page-link-handled', '1');
+  });
+});
diff --git a/plugins/Goals/vue/src/index.ts b/plugins/Goals/vue/src/index.ts
new file mode 100644
index 0000000000..5be8221004
--- /dev/null
+++ b/plugins/Goals/vue/src/index.ts
@@ -0,0 +1,10 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+import './GoalPageLink/GoalPageLink.adapter';
+
+export { default as GoalPageLink } from './GoalPageLink/GoalPageLink.ts';
diff --git a/plugins/Morpheus/javascripts/piwikHelper.js b/plugins/Morpheus/javascripts/piwikHelper.js
index 903a21fd1a..dfcdb12b84 100644
--- a/plugins/Morpheus/javascripts/piwikHelper.js
+++ b/plugins/Morpheus/javascripts/piwikHelper.js
@@ -248,9 +248,17 @@ window.piwikHelper = {
             }
 
             $compile($element)(scope);
+
+            setTimeout(function () {
+                piwikHelper.processDynamicHtml($element);
+            });
         });
     },
 
+    processDynamicHtml: function ($element) {
+        piwik.postEvent('Matomo.processDynamicHtml', $element);
+    },
+
     /**
      * Detection works currently only for directives defining an isolated scope. Functionality might need to be
      * extended if needed. Under circumstances you might call this method before calling compileAngularComponents()