[Vue] migrate piwik-period-selector angularjs component (#18382)

* 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 converting form field directives

* 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

* migrate field-array

* fixing more UI test failures

* rebuild

* start converting multipairfield

* fix vue build

* why were these deleted?

* remove debug code

* first pass migrate multipairfield.vue

* move form-field code relevant to selects to FieldSelect.vue

* fix css class issue + update expected screenshots

* rebuild CoreHome

* move more of form-field.directive.js to new vue classes

* revert styling change

* finish converting last of form-field.directive.js code (completely untested)

* 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

* Fix for misaligned evolution trend icons (#18323)

* Aligned evolution trend icons, text tweak

* Update plugins/MultiSites/angularjs/dashboard/dashboard.directive.less

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

* apply review feedback

* Hide feedback banner in zen mode (#18329)

* [Vue] 4.6.0 fixes (#18334)

* feedback plugin may not be loaded

* fix copy paste

* async/await not supported

* built UMDs

* get local files to build

* built files

* get auto clearing behavior to work in site selector

* fix a couple more bugs

* use jQuery click for expand on click

* undo submodule change

* rebuild vue

* get vue files to run

* missing element

* more fixes

* get more fields working properly

* rebuild

* fix even more issues

* [Vue] use jQuery click for expand on click (#18341)

* use jQuery click for expand on click

* undo submodule change

* migrate piwik-field directive and fix some issues

* forgot to add migrated directive files and get demo.twig to work

* use event target

* make sure angularjs and vue do not share data

* fix ng model mapping

* fix a couple more issues

* fix a couple more bugs

* more fixes

* mimic existing behavior where an empty value will result in an extra field appearing in a select option list, but only at first

* another fix

* built vue files

* more fixes

* do not use UMD if vue/src is not present

* use non-minified angularjs if in development mode

* deprecate custom template file property

* remove angularjs properties in scope properties (ie, $$hashKey) otherwise vue will fail when it tries to process them

* fixing some more issues from ui tests

* more fixes

* fix form field issue + patch jquery so .trigger() will also trigger events added via addEventHandler()

* true bc fix

* get the jquery patch to work

* ignore polyfill map

* fix ng-model issue in report limit in report export directive

* full width property was not handled properly before in angularjs

* do not try and parseInt null values

* fix several more issues for tests

* fix some tests

* fix data binding

* fix css class

* fixing more ui test issues

* do not decode model value of site name in site selector, so it is always the same as what is in the DB

* 4.6.0-rc2

* more ng-model fixes

* rebuild

* html tweaks

* add timeout to test

* rebuild

* fix another UI test

* rebuild vue files

* update some expected screenshots

* fix more issues

* Revert "[Vue] do not decode model value of site name in site selector, so it is always matches the DB value (#18356)"

This reverts commit 8c7539f073e7a49311cbe6dc2474eb1bbfb8718d.

* update screenshots

* more fixes

* another fix + screenshot update

* more screenshot updates

* more fixes

* even more fixes

* another ui test fix

* more type fixes

* rebuilt vue JS

* couple more fixes

* undo debugging

* do not convert undefined to bool

* update screenshot

* another bool checking fix

* rebuild vue files

* more fixes

* initial site value in field is assumed to be encoded

* file headers and custom field component support

* get custom component field code to work

* rebuild vue

* allow using angularjs templateFile for custom field (for BC)

* get angularjs template embedding to work for rollupreporting at least

* deal with some in source TODO items

* fix a couple more issues

* Use separate div in modals to display notifications otherwise Vue will erase modal content when initializing NotificationGroup component.

* build again

* refactor some code and fix an issue with checkbox array field handling in angularjs

* more fixes

* another fix

* even more fixes

* remove more todo

* hopefully the last changes

* update vue files

* update submodule

* revert debugging change + fix issue

* built vue files

* fix another select issue

* rebuild vue files

* fix broken refactor

* update two screenshots

* add some more timeouts and update screenshots

* initial conversion, loading w/o error

* tweaks

* get period selector work in UI

* fix site selector model binding

* rebuild vue

* fix viewDate not being kept in sync

* rebuild CoreHome

* two fixes

* couple UI test fixes

* rebuild vue

* update files

* make getRef a utility method

* add return type

* fix a UI test

* another html fix

* Use themed font family for input forms to override materialize.css styling

* rebuild vue

* add a missing div

* ui test fixes

* update styling

* update expected screenshot

* fix field array title

* apply some pr feedback

* apply more pr feedback

* another fix

* tweak

* fix ng-change not executed before ng-model

* fix another set of issues

* fix another issue

* rebuild vue

* better ng-change/ng-model fix

* initiate initial ng-change ONLY for site selectors where this behavior applies

* built vue files

* update screenshots

* fix date range picker input editing behavior & undo changes to matomo.js/piwik.js

* Update plugins/CoreHome/vue/src/DateRangePicker/DateRangePicker.vue

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

* built vue files

* undo CustomAlerts submodule

Co-authored-by: sgiehl <stefan@matomo.org>
Co-authored-by: Ben Burgess <88810029+bx80@users.noreply.github.com>
Co-authored-by: Matthieu Aubry <mattab@users.noreply.github.com>

1 files changed, 82 insertions, 64 deletions

diff --git a/plugins/CoreHome/vue/src/DateRangePicker/DateRangePicker.vue b/plugins/CoreHome/vue/src/DateRangePicker/DateRangePicker.vue
index c2af7ecb1c..a3f68387b0 100644
--- a/plugins/CoreHome/vue/src/DateRangePicker/DateRangePicker.vue
+++ b/plugins/CoreHome/vue/src/DateRangePicker/DateRangePicker.vue
@@ -5,57 +5,59 @@
 -->
 
 <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>
+    <div id="calendarRangeFrom">
+      <h6>
+        {{ translate('General_DateRangeFrom') }}
+        <input
+          type="text"
+          id="inputCalendarFrom"
+          name="inputCalendarFrom"
+          class="browser-default"
+          v-model="startDateText"
+          @keydown="onRangeInputChanged('from', $event)"
+          @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"
+          @keydown="onRangeInputChanged('to', $event)"
+          @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>
   </div>
 </template>
 
@@ -66,6 +68,8 @@ import DatePicker from '../DatePicker/DatePicker.vue';
 import { parseDate, format } from '../Periods/utilities';
 import ChangeEvent = JQuery.ChangeEvent;
 
+const DATE_FORMAT = 'YYYY-MM-DD';
+
 export default defineComponent({
   props: {
     startDate: String,
@@ -96,6 +100,8 @@ export default defineComponent({
       toPickerHighlightedDates: [null, null],
       startDateText: this.startDate,
       endDateText: this.endDate,
+      startDateInvalid: false,
+      endDateInvalid: false,
     };
   },
   emits: ['rangeChange', 'submit'],
@@ -124,11 +130,13 @@ export default defineComponent({
       this.rangeChanged();
     },
     onRangeInputChanged(source: string, event: ChangeEvent) {
-      if (source === 'from') {
-        this.setStartRangeDateFromStr(event.target.value);
-      } else {
-        this.setEndRangeDateFromStr(event.target.value);
-      }
+      setTimeout(() => {
+        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')) {
@@ -148,32 +156,42 @@ export default defineComponent({
       });
     },
     setStartRangeDateFromStr(dateStr: string) {
+      this.startDateInvalid = true;
+
       let startDateParsed: Date;
       try {
-        startDateParsed = parseDate(dateStr);
+        if (dateStr.length === DATE_FORMAT.length) {
+          startDateParsed = parseDate(dateStr);
+        }
       } catch (e) {
-        this.startDateText = this.startDate;
+        // ignore
       }
 
       if (startDateParsed) {
         this.fromPickerSelectedDates = [startDateParsed, startDateParsed];
-      }
+        this.startDateInvalid = false;
 
-      this.rangeChanged();
+        this.rangeChanged();
+      }
     },
     setEndRangeDateFromStr(dateStr: string) {
+      this.endDateInvalid = true;
+
       let endDateParsed: Date;
       try {
-        endDateParsed = parseDate(dateStr);
+        if (dateStr.length === DATE_FORMAT.length) {
+          endDateParsed = parseDate(dateStr);
+        }
       } catch (e) {
-        this.endDateText = this.endDate;
+        // ignore
       }
 
       if (endDateParsed) {
         this.toPickerSelectedDates = [endDateParsed, endDateParsed];
-      }
+        this.endDateInvalid = false;
 
-      this.rangeChanged();
+        this.rangeChanged();
+      }
     },
     rangeChanged() {
       this.$emit('rangeChange', {