[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 8c7539f.

* 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>

plugins/CoreHome/CoreHome.php

@@ -146,7 +146,7 @@ public function getStylesheetFiles(&$stylesheets)
         $stylesheets[] = "plugins/CoreHome/angularjs/widget-bydimension-container/widget-bydimension-container.directive.less";
         $stylesheets[] = "plugins/CoreHome/angularjs/progressbar/progressbar.directive.less";
         $stylesheets[] = "plugins/CoreHome/vue/src/DateRangePicker/DateRangePicker.less";
-        $stylesheets[] = "plugins/CoreHome/angularjs/period-selector/period-selector.directive.less";
+        $stylesheets[] = "plugins/CoreHome/vue/src/PeriodSelector/PeriodSelector.less";
         $stylesheets[] = "plugins/CoreHome/vue/src/MultiPairField/MultiPairField.less";
         $stylesheets[] = "plugins/CoreHome/vue/src/DropdownMenu/DropdownMenu.less";
         $stylesheets[] = "plugins/CoreHome/angularjs/sparkline/sparkline.component.less";
@@ -261,9 +261,6 @@ public function getJsFiles(&$jsFiles)
 
         $jsFiles[] = "plugins/CoreHome/angularjs/content-table/content-table.directive.js";
 
-        $jsFiles[] = "plugins/CoreHome/angularjs/period-selector/period-selector.directive.js";
-        $jsFiles[] = "plugins/CoreHome/angularjs/period-selector/period-selector.controller.js";
-
         // TODO: [Vue] used by RollUpReporting, has to be kept for now.
         $jsFiles[] = "plugins/CoreHome/angularjs/siteselector/siteselector-model.service.js";
 
@@ -467,5 +464,7 @@ public function getClientSideTranslationKeys(&$translationKeys)
         $translationKeys[] = 'General_PreviousYear';
         $translationKeys[] = 'CoreHome_ReportingCategoryHelpPrefix';
         $translationKeys[] = 'CoreHome_TechDeprecationWarning';
+        $translationKeys[] = 'CoreHome_StartDate';
+        $translationKeys[] = 'CoreHome_EndDate';
     }
 }