[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, 79 insertions, 0 deletions

diff --git a/plugins/MobileMessaging/vue/src/ReportParameters/ReportParameters.vue b/plugins/MobileMessaging/vue/src/ReportParameters/ReportParameters.vue
new file mode 100644
index 0000000000..d0c067265d
--- /dev/null
+++ b/plugins/MobileMessaging/vue/src/ReportParameters/ReportParameters.vue
@@ -0,0 +1,79 @@
+<!--
+  Matomo - free/libre analytics platform
+  @link https://matomo.org
+  @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+-->
+
+<template>
+  <div v-if="report && report.type === 'mobile'">
+    <SelectPhoneNumbers
+      :phone-numbers="phoneNumbers"
+      :with-introduction="true"
+      :model-value="report.phoneNumbers"
+      @update:model-value="$emit('change', 'phoneNumbers', $event)"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { Report } from 'ScheduledReports';
+import SelectPhoneNumbers from '../SelectPhoneNumbers/SelectPhoneNumbers.vue';
+
+const REPORT_TYPE = 'mobile';
+
+export default defineComponent({
+  props: {
+    report: {
+      type: Object,
+      required: true,
+    },
+    phoneNumbers: {
+      type: [Array, Object],
+      required: true,
+    },
+  },
+  components: {
+    SelectPhoneNumbers,
+  },
+  emits: ['change'],
+  created() {
+    const {
+      resetReportParametersFunctions,
+      updateReportParametersFunctions,
+      getReportParametersFunctions,
+    } = window;
+
+    if (!resetReportParametersFunctions[REPORT_TYPE]) {
+      resetReportParametersFunctions[REPORT_TYPE] = (report: Report) => {
+        report.phoneNumbers = [];
+        report.formatmobile = 'sms';
+      };
+    }
+
+    if (!updateReportParametersFunctions[REPORT_TYPE]) {
+      updateReportParametersFunctions[REPORT_TYPE] = (report: Report) => {
+        if (!report?.parameters) {
+          return;
+        }
+
+        if (report.parameters && report.parameters.phoneNumbers) {
+          report.phoneNumbers = report.parameters.phoneNumbers;
+        }
+        report.formatmobile = 'sms';
+      };
+    }
+
+    if (!getReportParametersFunctions[REPORT_TYPE]) {
+      getReportParametersFunctions[REPORT_TYPE] = (report: Report) => {
+        // returning [''] when no phone numbers are selected avoids the "please provide a value
+        // for 'parameters'" error message
+        const phoneNumbers: string[]|undefined = report.phoneNumbers as string[]|undefined;
+        return {
+          phoneNumbers: phoneNumbers || [''],
+        };
+      };
+    }
+  },
+});
+</script>