[Vue] migrate date-picker and other period-selector related components (#18213)

* 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

* 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

* correctly implement stateful directives for ExpandOnClick/ExpandOnHover

* built vue files

* Update DatePicker.vue

* Update DatePicker.vue

* built vue files

3 files changed, 218 insertions, 0 deletions

diff --git a/plugins/CoreHome/vue/src/DateRangePicker/DateRangePicker.adapter.ts b/plugins/CoreHome/vue/src/DateRangePicker/DateRangePicker.adapter.ts
new file mode 100644
index 0000000000..12fda3b240
--- /dev/null
+++ b/plugins/CoreHome/vue/src/DateRangePicker/DateRangePicker.adapter.ts
@@ -0,0 +1,29 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+import createAngularJsAdapter from '../createAngularJsAdapter';
+import DateRangePicker from './DateRangePicker.vue';
+
+export default createAngularJsAdapter({
+  component: DateRangePicker,
+  scope: {
+    startDate: {
+      angularJsBind: '<',
+    },
+    endDate: {
+      angularJsBind: '<',
+    },
+    rangeChange: {
+      angularJsBind: '&',
+    },
+    submit: {
+      angularJsBind: '&',
+    },
+  },
+  directiveName: 'piwikDateRangePicker',
+  restrict: 'E',
+});
diff --git a/plugins/CoreHome/vue/src/DateRangePicker/DateRangePicker.less b/plugins/CoreHome/vue/src/DateRangePicker/DateRangePicker.less
new file mode 100644
index 0000000000..f380d44ac5
--- /dev/null
+++ b/plugins/CoreHome/vue/src/DateRangePicker/DateRangePicker.less
@@ -0,0 +1,3 @@
+piwik-date-range-picker {
+  display: block;
+}
\ No newline at end of file
diff --git a/plugins/CoreHome/vue/src/DateRangePicker/DateRangePicker.vue b/plugins/CoreHome/vue/src/DateRangePicker/DateRangePicker.vue
new file mode 100644
index 0000000000..c2af7ecb1c
--- /dev/null
+++ b/plugins/CoreHome/vue/src/DateRangePicker/DateRangePicker.vue
@@ -0,0 +1,186 @@
+<!--
+  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 id="calendarRangeFrom">
+    <h6>
+      {{ translate('General_DateRangeFrom') }}
+      <input
+        type="text"
+        id="inputCalendarFrom"
+        name="inputCalendarFrom"
+        class="browser-default"
+        v-model="startDateText"
+        v-on:change="onRangeInputChanged('from', $event)"
+        v-on:keyup="handleEnterPress($event)"
+      />
+    </h6>
+    <DatePicker
+      id="calendarFrom"
+      :view-date="startDate"
+      :selected-date-start="fromPickerSelectedDates[0]"
+      :selected-date-end="fromPickerSelectedDates[1]"
+      :highlighted-date-start="fromPickerHighlightedDates[0]"
+      :highlighted-date-end="fromPickerHighlightedDates[1]"
+      @date-select="setStartRangeDate($event.date)"
+      @cell-hover="fromPickerHighlightedDates = getNewHighlightedDates($event.date, $event.$cell)"
+      @cell-hover-leave="fromPickerHighlightedDates = [null, null]"
+    >
+    </DatePicker>
+  </div>
+  <div id="calendarRangeTo">
+    <h6>
+      {{ translate('General_DateRangeTo') }}
+      <input
+        type="text"
+        id="inputCalendarTo"
+        name="inputCalendarTo"
+        class="browser-default"
+        v-model="endDateText"
+        v-on:change="onRangeInputChanged('to', $event)"
+        v-on:keyup="handleEnterPress($event)"
+      />
+    </h6>
+    <DatePicker
+      id="calendarTo"
+      :view-date="endDate"
+      :selected-date-start="toPickerSelectedDates[0]"
+      :selected-date-end="toPickerSelectedDates[1]"
+      :highlighted-date-start="toPickerHighlightedDates[0]"
+      :highlighted-date-end="toPickerHighlightedDates[1]"
+      @date-select="setEndRangeDate($event.date)"
+      @cell-hover="toPickerHighlightedDates = getNewHighlightedDates($event.date, $event.$cell)"
+      @cell-hover-leave="toPickerHighlightedDates = [null, null]"
+    >
+    </DatePicker>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import JQuery = JQuery;
+import DatePicker from '../DatePicker/DatePicker.vue';
+import { parseDate, format } from '../Periods/utilities';
+import ChangeEvent = JQuery.ChangeEvent;
+
+export default defineComponent({
+  props: {
+    startDate: String,
+    endDate: String,
+  },
+  components: {
+    DatePicker,
+  },
+  data() {
+    let startDate = null;
+    try {
+      startDate = parseDate(this.startDate);
+    } catch (e) {
+      // ignore
+    }
+
+    let endDate = null;
+    try {
+      endDate = parseDate(this.endDate);
+    } catch (e) {
+      // ignore
+    }
+
+    return {
+      fromPickerSelectedDates: [startDate, startDate],
+      toPickerSelectedDates: [endDate, endDate],
+      fromPickerHighlightedDates: [null, null],
+      toPickerHighlightedDates: [null, null],
+      startDateText: this.startDate,
+      endDateText: this.endDate,
+    };
+  },
+  emits: ['rangeChange', 'submit'],
+  watch: {
+    startDate() {
+      this.startDateText = this.startDate;
+      this.setStartRangeDateFromStr(this.startDate);
+    },
+    endDate() {
+      this.endDateText = this.endDate;
+      this.setEndRangeDateFromStr(this.endDate);
+    },
+  },
+  mounted() {
+    this.rangeChanged(); // emit with initial range pair
+  },
+  methods: {
+    setStartRangeDate(date: Date) {
+      this.fromPickerSelectedDates = [date, date];
+
+      this.rangeChanged();
+    },
+    setEndRangeDate(date: Date) {
+      this.toPickerSelectedDates = [date, date];
+
+      this.rangeChanged();
+    },
+    onRangeInputChanged(source: string, event: ChangeEvent) {
+      if (source === 'from') {
+        this.setStartRangeDateFromStr(event.target.value);
+      } else {
+        this.setEndRangeDateFromStr(event.target.value);
+      }
+    },
+    getNewHighlightedDates(date: Date, $cell: JQuery) {
+      if ($cell.hasClass('ui-datepicker-unselectable')) {
+        return null;
+      }
+
+      return [date, date];
+    },
+    handleEnterPress($event: KeyboardEvent) {
+      if ($event.keyCode !== 13) {
+        return;
+      }
+
+      this.$emit('submit', {
+        start: this.startDate,
+        end: this.endDate,
+      });
+    },
+    setStartRangeDateFromStr(dateStr: string) {
+      let startDateParsed: Date;
+      try {
+        startDateParsed = parseDate(dateStr);
+      } catch (e) {
+        this.startDateText = this.startDate;
+      }
+
+      if (startDateParsed) {
+        this.fromPickerSelectedDates = [startDateParsed, startDateParsed];
+      }
+
+      this.rangeChanged();
+    },
+    setEndRangeDateFromStr(dateStr: string) {
+      let endDateParsed: Date;
+      try {
+        endDateParsed = parseDate(dateStr);
+      } catch (e) {
+        this.endDateText = this.endDate;
+      }
+
+      if (endDateParsed) {
+        this.toPickerSelectedDates = [endDateParsed, endDateParsed];
+      }
+
+      this.rangeChanged();
+    },
+    rangeChanged() {
+      this.$emit('rangeChange', {
+        start: format(this.fromPickerSelectedDates[0]),
+        end: format(this.toPickerSelectedDates[0]),
+      });
+    },
+  },
+});
+</script>