diff options
| author | dizzy <diosmosis@users.noreply.github.com> | 2022-08-08 15:59:35 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-08-08 15:59:35 +0300 |
| commit | 21c743f0a87a752365c712adae9862d85afd7e8f (patch) | |
| tree | e26fef1a7f7e57b71eeb75e3c7d07ffa40886cc5 /plugins | |
| parent | 2816b8a4cacc96a810a926eaffdd389b4622270d (diff) | |
[Vue] remove use of angularjs from SegmentEditor plugin (#19391)
* remove use of angularjs from SegmentEditor plugin
* remove import added by phpstorm
* make sure to export comparison service instance not just class
* built vue files
* fixing some issues
* fix initial value for segment definition
* treat null, undefined and empty string segment value the same
* Update expected screenshots
* try to fix timing error in test
* remove use of html_attr escape
* adds missing translations
* remove unused code
* fix segment definition selection and fix Matomo URL watch in Segmentation.js
* fix test failure
Co-authored-by: sgiehl <stefan@matomo.org>
Diffstat (limited to 'plugins')
18 files changed, 222 insertions, 795 deletions
diff --git a/plugins/CoreHome/vue/dist/CoreHome.umd.js b/plugins/CoreHome/vue/dist/CoreHome.umd.js index a737c8853f..1d2980afbf 100644 --- a/plugins/CoreHome/vue/dist/CoreHome.umd.js +++ b/plugins/CoreHome/vue/dist/CoreHome.umd.js @@ -175,6 +175,8 @@ __webpack_require__.d(__webpack_exports__, "SideNav", function() { return /* ree __webpack_require__.d(__webpack_exports__, "EnrichedHeadline", function() { return /* reexport */ EnrichedHeadline; }); __webpack_require__.d(__webpack_exports__, "ContentBlock", function() { return /* reexport */ ContentBlock; }); __webpack_require__.d(__webpack_exports__, "Comparisons", function() { return /* reexport */ Comparisons; }); +__webpack_require__.d(__webpack_exports__, "ComparisonsStore", function() { return /* reexport */ Comparisons_store_ComparisonsStore; }); +__webpack_require__.d(__webpack_exports__, "ComparisonsStoreInstance", function() { return /* reexport */ Comparisons_store_instance; }); __webpack_require__.d(__webpack_exports__, "MenuItemsDropdown", function() { return /* reexport */ MenuItemsDropdown; }); __webpack_require__.d(__webpack_exports__, "DatePicker", function() { return /* reexport */ DatePicker; }); __webpack_require__.d(__webpack_exports__, "DateRangePicker", function() { return /* reexport */ DateRangePicker; }); @@ -12393,6 +12395,8 @@ function deleteCookie(name) { + + // CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib-no-default.js diff --git a/plugins/CoreHome/vue/dist/CoreHome.umd.min.js b/plugins/CoreHome/vue/dist/CoreHome.umd.min.js index 4d50b4dca8..49e93b83a2 100644 --- a/plugins/CoreHome/vue/dist/CoreHome.umd.min.js +++ b/plugins/CoreHome/vue/dist/CoreHome.umd.min.js @@ -4,7 +4,7 @@ * * @link https://matomo.org * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later - */window.hasBlockedContent=!1},"8bbf":function(t,n){t.exports=e},fae3:function(e,t,n){"use strict";if(n.r(t),n.d(t,"createVueApp",(function(){return dt})),n.d(t,"useExternalPluginComponent",(function(){return $n})),n.d(t,"DirectiveUtilities",(function(){return $t})),n.d(t,"debounce",(function(){return Gi})),n.d(t,"getFormattedEvolution",(function(){return Vu})),n.d(t,"createAngularJsAdapter",(function(){return kt})),n.d(t,"transformAngularJsBoolAttr",(function(){return St})),n.d(t,"transformAngularJsIntAttr",(function(){return Ct})),n.d(t,"removeAngularJsSpecificProperties",(function(){return jt})),n.d(t,"clone",(function(){return Et})),n.d(t,"cloneThenApply",(function(){return Dt})),n.d(t,"VueEntryContainer",(function(){return Bu})),n.d(t,"activityIndicatorAdapter",(function(){return Iu})),n.d(t,"ActivityIndicator",(function(){return go})),n.d(t,"translate",(function(){return C})),n.d(t,"translateOrDefault",(function(){return E})),n.d(t,"Alert",(function(){return ut})),n.d(t,"AjaxHelper",(function(){return Ze})),n.d(t,"setCookie",(function(){return xu})),n.d(t,"getCookie",(function(){return Mu})),n.d(t,"deleteCookie",(function(){return Lu})),n.d(t,"MatomoUrl",(function(){return Ee})),n.d(t,"Matomo",(function(){return S})),n.d(t,"Periods",(function(){return m})),n.d(t,"Day",(function(){return z})),n.d(t,"Week",(function(){return Z})),n.d(t,"Month",(function(){return ie})),n.d(t,"Year",(function(){return se})),n.d(t,"Range",(function(){return H})),n.d(t,"format",(function(){return D})),n.d(t,"getToday",(function(){return P})),n.d(t,"parseDate",(function(){return V})),n.d(t,"todayIsInRange",(function(){return N})),n.d(t,"DropdownMenu",(function(){return Pt})),n.d(t,"FocusAnywhereButHere",(function(){return xt})),n.d(t,"FocusIf",(function(){return Rt})),n.d(t,"Tooltips",(function(){return Rr})),n.d(t,"MatomoDialog",(function(){return Cn})),n.d(t,"ExpandOnClick",(function(){return Qt})),n.d(t,"ExpandOnHover",(function(){return rn})),n.d(t,"ShowSensitiveData",(function(){return cn})),n.d(t,"DropdownButton",(function(){return mn})),n.d(t,"SelectOnFocus",(function(){return vn})),n.d(t,"SideNav",(function(){return wn})),n.d(t,"EnrichedHeadline",(function(){return qn})),n.d(t,"ContentBlock",(function(){return tr})),n.d(t,"Comparisons",(function(){return _r})),n.d(t,"MenuItemsDropdown",(function(){return ti})),n.d(t,"DatePicker",(function(){return ci})),n.d(t,"DateRangePicker",(function(){return fi})),n.d(t,"PeriodDatePicker",(function(){return yi})),n.d(t,"Notification",(function(){return ol})),n.d(t,"NotificationGroup",(function(){return wl})),n.d(t,"NotificationsStore",(function(){return hl})),n.d(t,"SitesStore",(function(){return Wi})),n.d(t,"SiteSelector",(function(){return Yi})),n.d(t,"QuickAccess",(function(){return ma})),n.d(t,"FieldArray",(function(){return Ea})),n.d(t,"MultiPairField",(function(){return Ua})),n.d(t,"PeriodSelector",(function(){return No})),n.d(t,"ReportingMenu",(function(){return Zl})),n.d(t,"ReportingMenuStore",(function(){return Hl})),n.d(t,"ReportingPagesStore",(function(){return El})),n.d(t,"ReportMetadataStore",(function(){return cc})),n.d(t,"WidgetsStore",(function(){return Ql})),n.d(t,"WidgetLoader",(function(){return vc})),n.d(t,"WidgetContainer",(function(){return Tc})),n.d(t,"WidgetByDimensionContainer",(function(){return Gc})),n.d(t,"Widget",(function(){return es})),n.d(t,"ReportingPage",(function(){return js})),n.d(t,"ReportExport",(function(){return eu})),n.d(t,"Sparkline",(function(){return ou})),n.d(t,"Progressbar",(function(){return pu})),n.d(t,"ContentIntro",(function(){return fu})),n.d(t,"ContentTable",(function(){return gu})),n.d(t,"AjaxForm",(function(){return ku})),"undefined"!==typeof window){var r=window.document.currentScript,i=r&&r.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);i&&(n.p=i[1])}n("2342");var a=n("8bbf");function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function l(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function c(e,t,n){return t&&l(e.prototype,t),n&&l(e,n),e}function s(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e} + */window.hasBlockedContent=!1},"8bbf":function(t,n){t.exports=e},fae3:function(e,t,n){"use strict";if(n.r(t),n.d(t,"createVueApp",(function(){return dt})),n.d(t,"useExternalPluginComponent",(function(){return $n})),n.d(t,"DirectiveUtilities",(function(){return $t})),n.d(t,"debounce",(function(){return Gi})),n.d(t,"getFormattedEvolution",(function(){return Vu})),n.d(t,"createAngularJsAdapter",(function(){return kt})),n.d(t,"transformAngularJsBoolAttr",(function(){return St})),n.d(t,"transformAngularJsIntAttr",(function(){return Ct})),n.d(t,"removeAngularJsSpecificProperties",(function(){return jt})),n.d(t,"clone",(function(){return Et})),n.d(t,"cloneThenApply",(function(){return Dt})),n.d(t,"VueEntryContainer",(function(){return Bu})),n.d(t,"activityIndicatorAdapter",(function(){return Iu})),n.d(t,"ActivityIndicator",(function(){return go})),n.d(t,"translate",(function(){return C})),n.d(t,"translateOrDefault",(function(){return E})),n.d(t,"Alert",(function(){return ut})),n.d(t,"AjaxHelper",(function(){return Ze})),n.d(t,"setCookie",(function(){return xu})),n.d(t,"getCookie",(function(){return Mu})),n.d(t,"deleteCookie",(function(){return Lu})),n.d(t,"MatomoUrl",(function(){return Ee})),n.d(t,"Matomo",(function(){return S})),n.d(t,"Periods",(function(){return m})),n.d(t,"Day",(function(){return z})),n.d(t,"Week",(function(){return Z})),n.d(t,"Month",(function(){return ie})),n.d(t,"Year",(function(){return se})),n.d(t,"Range",(function(){return H})),n.d(t,"format",(function(){return D})),n.d(t,"getToday",(function(){return P})),n.d(t,"parseDate",(function(){return V})),n.d(t,"todayIsInRange",(function(){return N})),n.d(t,"DropdownMenu",(function(){return Pt})),n.d(t,"FocusAnywhereButHere",(function(){return xt})),n.d(t,"FocusIf",(function(){return Rt})),n.d(t,"Tooltips",(function(){return Rr})),n.d(t,"MatomoDialog",(function(){return Cn})),n.d(t,"ExpandOnClick",(function(){return Qt})),n.d(t,"ExpandOnHover",(function(){return rn})),n.d(t,"ShowSensitiveData",(function(){return cn})),n.d(t,"DropdownButton",(function(){return mn})),n.d(t,"SelectOnFocus",(function(){return vn})),n.d(t,"SideNav",(function(){return wn})),n.d(t,"EnrichedHeadline",(function(){return qn})),n.d(t,"ContentBlock",(function(){return tr})),n.d(t,"Comparisons",(function(){return _r})),n.d(t,"ComparisonsStore",(function(){return Or})),n.d(t,"ComparisonsStoreInstance",(function(){return jr})),n.d(t,"MenuItemsDropdown",(function(){return ti})),n.d(t,"DatePicker",(function(){return ci})),n.d(t,"DateRangePicker",(function(){return fi})),n.d(t,"PeriodDatePicker",(function(){return yi})),n.d(t,"Notification",(function(){return ol})),n.d(t,"NotificationGroup",(function(){return wl})),n.d(t,"NotificationsStore",(function(){return hl})),n.d(t,"SitesStore",(function(){return Wi})),n.d(t,"SiteSelector",(function(){return Yi})),n.d(t,"QuickAccess",(function(){return ma})),n.d(t,"FieldArray",(function(){return Ea})),n.d(t,"MultiPairField",(function(){return Ua})),n.d(t,"PeriodSelector",(function(){return No})),n.d(t,"ReportingMenu",(function(){return Zl})),n.d(t,"ReportingMenuStore",(function(){return Hl})),n.d(t,"ReportingPagesStore",(function(){return El})),n.d(t,"ReportMetadataStore",(function(){return cc})),n.d(t,"WidgetsStore",(function(){return Ql})),n.d(t,"WidgetLoader",(function(){return vc})),n.d(t,"WidgetContainer",(function(){return Tc})),n.d(t,"WidgetByDimensionContainer",(function(){return Gc})),n.d(t,"Widget",(function(){return es})),n.d(t,"ReportingPage",(function(){return js})),n.d(t,"ReportExport",(function(){return eu})),n.d(t,"Sparkline",(function(){return ou})),n.d(t,"Progressbar",(function(){return pu})),n.d(t,"ContentIntro",(function(){return fu})),n.d(t,"ContentTable",(function(){return gu})),n.d(t,"AjaxForm",(function(){return ku})),"undefined"!==typeof window){var r=window.document.currentScript,i=r&&r.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);i&&(n.p=i[1])}n("2342");var a=n("8bbf");function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function l(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function c(e,t,n){return t&&l(e.prototype,t),n&&l(e,n),e}function s(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e} /*! * Matomo - free/libre analytics platform * diff --git a/plugins/CoreHome/vue/src/index.ts b/plugins/CoreHome/vue/src/index.ts index c1098ec98c..f86f8c00ee 100644 --- a/plugins/CoreHome/vue/src/index.ts +++ b/plugins/CoreHome/vue/src/index.ts @@ -93,6 +93,8 @@ export { default as SideNav } from './SideNav/SideNav'; export { default as EnrichedHeadline } from './EnrichedHeadline/EnrichedHeadline.vue'; export { default as ContentBlock } from './ContentBlock/ContentBlock.vue'; export { default as Comparisons } from './Comparisons/Comparisons.vue'; +export { default as ComparisonsStore } from './Comparisons/Comparisons.store'; +export { default as ComparisonsStoreInstance } from './Comparisons/Comparisons.store.instance'; export { default as MenuItemsDropdown } from './MenuItemsDropdown/MenuItemsDropdown.vue'; export { default as DatePicker } from './DatePicker/DatePicker.vue'; export { default as DateRangePicker } from './DateRangePicker/DateRangePicker.vue'; diff --git a/plugins/CoreVue/types/index.d.ts b/plugins/CoreVue/types/index.d.ts index 7a226a46e4..d633a9cf99 100644 --- a/plugins/CoreVue/types/index.d.ts +++ b/plugins/CoreVue/types/index.d.ts @@ -80,6 +80,7 @@ declare global { modalConfirm(element: JQuery|JQLite|HTMLElement|string, callbacks?: ModalConfirmCallbacks, options?: ModalConfirmOptions); getAngularDependency(eventName: string): any; isAngularRenderingThePage(): boolean; + isReportingPage(): boolean; setMarginLeftToBeInViewport(elementToPosition: JQuery|JQLite|Element|string): void; lazyScrollTo(element: JQuery|JQLite|HTMLElement|string, time: number, forceScroll?: boolean): void; lazyScrollToContent(): void; diff --git a/plugins/Morpheus/javascripts/piwikHelper.js b/plugins/Morpheus/javascripts/piwikHelper.js index f0e11bf3f6..a888a4abc9 100644 --- a/plugins/Morpheus/javascripts/piwikHelper.js +++ b/plugins/Morpheus/javascripts/piwikHelper.js @@ -230,7 +230,7 @@ window.piwikHelper = { template: '<root ' + paramsStr + '>' + this.innerHTML + '</root>', data: function () { return componentParams; - } + }, }); app.component('root', component); @@ -380,7 +380,7 @@ window.piwikHelper = { */ isAngularRenderingThePage: function () { - return this.isReportingPage(); + return piwikHelper.isReportingPage(); }, /** @@ -390,7 +390,7 @@ window.piwikHelper = { */ isReportingPage: function () { - return $('.reporting-page').length; + return $('.reporting-page').length; }, /** diff --git a/plugins/SegmentEditor/angularjs/segment-generator/segmentgenerator.controller.js b/plugins/SegmentEditor/angularjs/segment-generator/segmentgenerator.controller.js deleted file mode 100644 index 1726d44c38..0000000000 --- a/plugins/SegmentEditor/angularjs/segment-generator/segmentgenerator.controller.js +++ /dev/null @@ -1,224 +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 - */ -(function () { - angular.module('piwikApp').controller('SegmentGeneratorController', SegmentGeneratorController); - - SegmentGeneratorController.$inject = ['$scope', 'piwik', 'piwikApi', 'segmentGeneratorModel', '$filter', '$timeout']; - - - - - function SegmentGeneratorController($scope, piwik, piwikApi, segmentGeneratorModel, $filter, $timeout) { - var translate = $filter('translate'); - - var self = this; - var firstSegment = ''; - var firstMatch = ''; - this.conditions = []; - this.model = segmentGeneratorModel; - - this.segments = {}; - - this.matches = { - metric: [ - {key: '==', value: translate('General_OperationEquals')}, - {key: '!=', value: translate('General_OperationNotEquals')}, - {key: '<=', value: translate('General_OperationAtMost')}, - {key: '>=', value: translate('General_OperationAtLeast')}, - {key: '<', value: translate('General_OperationLessThan')}, - {key: '>', value: translate('General_OperationGreaterThan')} - ], - dimension: [ - {key: '==', value: translate('General_OperationIs')}, - {key: '!=', value: translate('General_OperationIsNot')}, - {key: '=@', value: translate('General_OperationContains')}, - {key: '!@', value: translate('General_OperationDoesNotContain')}, - {key: '=^', value: translate('General_OperationStartsWith')}, - {key: '=$', value: translate('General_OperationEndsWith')} - ], - }; - this.matches[''] = this.matches.dimension; - - this.andConditionLabel = ''; - - this.addNewAndCondition = function () { - var condition = {orConditions: []}; - - this.addAndCondition(condition); - this.addNewOrCondition(condition); - - return condition; - }; - - this.addAndCondition = function (condition) { - this.andConditionLabel = translate('SegmentEditor_OperatorAND'); - this.conditions.push(condition); - this.updateSegmentDefinition(); - } - - this.addNewOrCondition = function (condition) { - var orCondition = { - segment: firstSegment, - matches: firstMatch, - value: '' - }; - - this.addOrCondition(condition, orCondition); - }; - - this.addOrCondition = function (condition, orCondition) { - orCondition.isLoading = false; - orCondition.id = generateUniqueId(); - - condition.orConditions.push(orCondition); - this.updateSegmentDefinition(); - - $timeout(function () { - self.updateAutocomplete(orCondition); - }); - }; - - this.updateAutocomplete = function (orCondition) { - orCondition.isLoading = true; - - this.updateSegmentDefinition(); - - var inputElement = $('.orCondId' + orCondition.id + " .metricValueBlock input"); - inputElement.autocomplete({ - source: [], - minLength: 0 - }); - - var resolved = false; - - var promise = piwikApi.fetch({ - module: 'API', - format: 'json', - method: 'API.getSuggestedValuesForSegment', - segmentName: orCondition.segment - }, {createErrorNotification: false}); - - promise.then(function(response) { - orCondition.isLoading = false; - resolved = true; - - var inputElement = $('.orCondId' + orCondition.id + " .metricValueBlock input"); - - if (response && response.result != 'error') { - - inputElement.autocomplete({ - source: response, - minLength: 0, - select: function(event, ui){ - event.preventDefault(); - orCondition.value = ui.item.value; - self.updateSegmentDefinition(); - $timeout(function () { - $scope.$apply(); - }); - } - }); - } - - inputElement.off('click'); - inputElement.click(function (e) { - $(inputElement).autocomplete('search', orCondition.value); - }); - }, function(response) { - resolved = true; - orCondition.isLoading = false; - - var inputElement = $('.orCondId' + orCondition.id + " .metricValueBlock input"); - inputElement.autocomplete({ - source: [], - minLength: 0 - }); - $(inputElement).autocomplete('search', orCondition.value); - }); - - $timeout(function () { - if (!resolved) { - promise.abort(); - } - }, 20000); - }; - - this.removeOrCondition = function (condition, orCondition) { - var index = condition.orConditions.indexOf(orCondition); - if (index > -1) { - condition.orConditions.splice(index, 1); - } - - if (condition.orConditions.length === 0) { - var index = self.conditions.indexOf(condition); - if (index > -1) { - self.conditions.splice(index, 1); - } - if (self.conditions.length === 0) { - self.andConditionLabel = ''; - } - } - - this.updateSegmentDefinition(); - }; - - this.getSegmentString = function () { - }; - - this.updateSegmentDefinition = function () { - $scope.segmentDefinition = this.getSegmentString(); - }; - - if ($scope.segmentDefinition) { - this.setSegmentString($scope.segmentDefinition); - } - - $scope.$watch('idsite', function (newValue, oldValue) { - if (newValue != oldValue) { - reloadSegments(newValue, $scope.visitSegmentsOnly); - } - }); - - reloadSegments($scope.idsite, $scope.visitSegmentsOnly); - - function reloadSegments(idsite, visitSegmentsOnly) { - segmentGeneratorModel.loadSegments(idsite, visitSegmentsOnly).then(function (segments) { - - self.segmentList = []; - - var groups = {}; - angular.forEach(segments, function (segment) { - if (!segment.category) { - segment.category = 'Others'; - } - - if (!firstSegment) { - firstSegment = segment.segment; - if (segment.type && self.matches[segment.type]) { - firstMatch = self.matches[segment.type][0].key; - } else { - firstMatch = self.matches[''][0].key - } - } - - self.segments[segment.segment] = segment; - - var segmentData = {group: segment.category, key: segment.segment, value: segment.name}; - if ('acceptedValues' in segment && segment.acceptedValues) { - segmentData.tooltip = stripTags(segment.acceptedValues); - } - self.segmentList.push(segmentData); - }); - - if ($scope.addInitialCondition && self.conditions.length === 0) { - self.addNewAndCondition(); - } - }); - } - } - -})(); diff --git a/plugins/SegmentEditor/angularjs/segment-generator/segmentgenerator.directive.html b/plugins/SegmentEditor/angularjs/segment-generator/segmentgenerator.directive.html deleted file mode 100644 index 4c44807b13..0000000000 --- a/plugins/SegmentEditor/angularjs/segment-generator/segmentgenerator.directive.html +++ /dev/null @@ -1,61 +0,0 @@ -<div class="segment-generator"> - <div piwik-activity-indicator loading="segmentGenerator.model.isLoading"></div> - - <div ng-repeat="(conditionIndex,condition) in segmentGenerator.conditions" class="segmentRow{{conditionIndex}}"> - <div class="segment-rows"> - <div ng-repeat="orCondition in condition.orConditions" class="orCondId{{ orCondition.id }}"> - <div class="segment-row"> - <a ng-click="segmentGenerator.removeOrCondition(condition, orCondition)" class="segment-close"></a> - <a href="#" class="segment-loading" ng-show="orCondition.isLoading"></a> - <div class="segment-row-inputs valign-wrapper"> - <div class="segment-input metricListBlock valign-wrapper"> - <div piwik-field uicontrol="expandable-select" name="segments" - data-title="{{ segmentGenerator.segments[orCondition.segment].name }}" - full-width="true" - style="width: 100%;" - ng-change="segmentGenerator.updateAutocomplete(orCondition)" - ng-model="orCondition.segment" - options="segmentGenerator.segmentList"> - </div> - </div> - <div class="segment-input metricMatchBlock valign-wrapper"> - <div piwik-field uicontrol="select" name="matchType" - style="display: inline-block" - full-width="true" - ng-change="segmentGenerator.updateSegmentDefinition()" - ng-model="orCondition.matches" - options="segmentGenerator.matches[segmentGenerator.segments[orCondition.segment].type]"> - </div> - </div> - <div class="segment-input metricValueBlock valign-wrapper"> - <div class="form-group row" style="width: 100%;"> - <div class="input-field col s12"> - <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span> - <input ng-model="orCondition.value" placeholder="Value" - ng-change="segmentGenerator.updateSegmentDefinition()" - type="text" class="autocomplete" title="Value" autocomplete="off"> - </div> - </div> - </div> - <div class="clear"></div> - </div> - </div> - - <div class="segment-or">{{ 'SegmentEditor_OperatorOR'|translate }}</div> - </div> - - <div class="segment-add-or" ng-click="segmentGenerator.addNewOrCondition(condition)"> - <div> - <a ng-bind-html="'+' + ('SegmentEditor_AddANDorORCondition'|translate:'<span>' + ('SegmentEditor_OperatorOR'|translate) + '</span>')"></a> - </div> - </div> - </div> - <div class="segment-and">{{ 'SegmentEditor_OperatorAND'|translate }}</div> - </div> - - <div class="segment-add-row initial" ng-click="segmentGenerator.addNewAndCondition()"> - <div> - <a ng-bind-html="'+' + ('SegmentEditor_AddANDorORCondition'|translate:'<span>' + segmentGenerator.andConditionLabel + '</span>')"></a> - </div> - </div> -</div> diff --git a/plugins/SegmentEditor/angularjs/segment-generator/segmentgenerator.directive.js b/plugins/SegmentEditor/angularjs/segment-generator/segmentgenerator.directive.js deleted file mode 100644 index 301b8e1f56..0000000000 --- a/plugins/SegmentEditor/angularjs/segment-generator/segmentgenerator.directive.js +++ /dev/null @@ -1,66 +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-segment-generator> - */ -(function () { - angular.module('piwikApp').directive('piwikSegmentGenerator', piwikSegmentGenerator); - - piwikSegmentGenerator.$inject = ['$document', 'piwik', '$filter', '$timeout']; - - function piwikSegmentGenerator($document, piwik, $filter, $timeout){ - var defaults = { - segmentDefinition: '', - addInitialCondition: false, - visitSegmentsOnly: false, - idsite: piwik.idSite - }; - - return { - restrict: 'A', - scope: { - segmentDefinition: '@', - addInitialCondition: '=', - visitSegmentsOnly: '=', - idsite: '=' - }, - require: "?ngModel", - templateUrl: 'plugins/SegmentEditor/angularjs/segment-generator/segmentgenerator.directive.html?cb=' + piwik.cacheBuster, - controller: 'SegmentGeneratorController', - controllerAs: 'segmentGenerator', - compile: function (element, attrs) { - - for (var index in defaults) { - if (attrs[index] === undefined) { - attrs[index] = defaults[index]; - } - } - - return function (scope, element, attrs, ngModel) { - if (ngModel) { - ngModel.$render = function() { - scope.segmentDefinition = ngModel.$viewValue; - if (scope.segmentDefinition) { - scope.segmentGenerator.setSegmentString(scope.segmentDefinition); - } else { - scope.segmentGenerator.setSegmentString(''); - } - }; - } - - scope.$watch('segmentDefinition', function (newValue) { - if (ngModel) { - ngModel.$setViewValue(newValue); - } - }); - }; - } - }; - } -})();
\ No newline at end of file diff --git a/plugins/SegmentEditor/angularjs/segment-generator/segmentgenerator.model.js b/plugins/SegmentEditor/angularjs/segment-generator/segmentgenerator.model.js deleted file mode 100644 index 5db3eeab64..0000000000 --- a/plugins/SegmentEditor/angularjs/segment-generator/segmentgenerator.model.js +++ /dev/null @@ -1,78 +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 - */ -(function () { - angular.module('piwikApp').factory('segmentGeneratorModel', segmentGeneratorModel); - - segmentGeneratorModel.$inject = ['piwikApi', 'piwik']; - - function segmentGeneratorModel(piwikApi, piwik) { - - var initialSegments = null; - var limitPromise = null; - var fetchedSiteId = null; - - var model = { - isLoading: false, - segments : [], - loadSegments: loadSegments - }; - - return model; - - function loadSegments(siteId, visitSegmentsOnly) { - if (model.isLoading) { - if (limitPromise) { - limitPromise.abort(); - limitPromise = null; - } - } - - model.isLoading = true; - - // we need to clear last limit result because we now fetch different data - if (fetchedSiteId != siteId) { - limitPromise = null; - fetchedSiteId = siteId; - } - - if (!limitPromise) { - var params = {method: 'API.getSegmentsMetadata',filter_limit: '-1', '_hideImplementationData': 0}; - - if (siteId === 'all' || !siteId) { - params.idSites = 'all'; - params.idSite = 'all'; - } else if (siteId) { - params.idSites = siteId; - params.idSite = siteId; - } - - limitPromise = piwikApi.fetch(params); - } - - return limitPromise.then(function (response) { - model.isLoading = false; - - if (angular.isDefined(response)) { - if (visitSegmentsOnly) { - model.segments = []; - angular.forEach(response, function (segment) { - if (segment.sqlSegment && segment.sqlSegment.match(/log_visit\./)) { - model.segments.push(segment); - } - }); - } else { - model.segments = response; - } - } - - return model.segments; - }).finally(function () { - model.isLoading = false; - }); - } - } -})();
\ No newline at end of file diff --git a/plugins/SegmentEditor/javascripts/Segmentation.js b/plugins/SegmentEditor/javascripts/Segmentation.js index f94a0453e6..c1d47e6fb7 100644 --- a/plugins/SegmentEditor/javascripts/Segmentation.js +++ b/plugins/SegmentEditor/javascripts/Segmentation.js @@ -81,7 +81,7 @@ Segmentation = (function($) { }; segmentation.prototype.markComparedSegments = function() { - var comparisonService = piwikHelper.getAngularDependency('piwikComparisonsService'); + var comparisonService = window.CoreHome.ComparisonsStoreInstance; var comparedSegments = comparisonService.getSegmentComparisons().map(function (comparison) { return comparison.params.segment; }); @@ -102,7 +102,7 @@ Segmentation = (function($) { if( current != "") { // this code is mad, and may drive you mad. - // the whole segmentation editor needs to be rewritten in AngularJS with clean code + // the whole segmentation editor needs to be rewritten in Vue with clean code var selector = 'div.segmentList ul li[data-definition="'+current+'"]'; var foundItems = $(selector, this.target); @@ -165,9 +165,9 @@ Segmentation = (function($) { + ' data-definition=""><span class="segname" tabindex="4">' + self.translations['SegmentEditor_DefaultAllVisits'] + ' ' + self.translations['General_DefaultAppended'] + '</span>'; - var comparisonService = piwikHelper.getAngularDependency('piwikComparisonsService'); + var comparisonService = window.CoreHome.ComparisonsStoreInstance; if (comparisonService.isComparisonEnabled() - || comparisonService.isComparisonEnabled() === null // may not be initialized since this code is outside of angular + || comparisonService.isComparisonEnabled() === null // may not be initialized since this code is outside of Vue ) { listHtml += '<span class="compareSegment allVisitsCompareSegment" title="' + _pk_translate('SegmentEditor_CompareThisSegment') + '"></span>'; } @@ -218,7 +218,7 @@ Segmentation = (function($) { listHtml += '<span class="editSegment" title="'+ self.translations['General_Edit'].toLocaleLowerCase() +'"></span>'; } if (comparisonService.isComparisonEnabled() - || comparisonService.isComparisonEnabled() === null // may not be initialized since this code is outside of angular + || comparisonService.isComparisonEnabled() === null // may not be initialized since this code is outside of Vue ) { listHtml += '<span class="compareSegment" title="' + _pk_translate('SegmentEditor_CompareThisSegment') + '"></span>'; } @@ -288,7 +288,9 @@ Segmentation = (function($) { var getFormHtml = function() { var html = self.editorTemplate.find("> .segment-element").clone(); - $(html).find(".segment-content > h3").after('<div piwik-segment-generator add-initial-condition="true"></div>').show(); + $(html).find(".segment-content > h3") + .after('<div class="segment-generator-container"></div>') + .show(); return html; }; @@ -324,8 +326,7 @@ Segmentation = (function($) { function showAddNewSegmentForm(segment) { var parameters = {isAllowed: true}; - var $rootScope = piwikHelper.getAngularDependency('$rootScope'); - $rootScope.$emit('Segmentation.initAddSegment', parameters); + window.CoreHome.Matomo.postEvent('Segmentation.initAddSegment', parameters); if (parameters && !parameters.isAllowed) { return; } @@ -401,7 +402,7 @@ Segmentation = (function($) { e.stopPropagation(); e.preventDefault(); - var comparisonService = piwikHelper.getAngularDependency('piwikComparisonsService'); + var comparisonService = window.CoreHome.ComparisonsStoreInstance; comparisonService.addSegmentComparison({ segment: $(e.target).closest('li').data('definition'), }); @@ -413,16 +414,15 @@ Segmentation = (function($) { self.target.on("click", ".segmentList li", function (e) { if ($(e.currentTarget).hasClass("grayed") !== true) { - var idsegment = $(this).attr("data-idsegment"); - segmentDefinition = $(this).data("definition"); + var segmentDefinition = $(this).data("definition"); - if (!piwikHelper.isAngularRenderingThePage()) { + if (!piwikHelper.isReportingPage()) { // we update segment on location change success self.setSegment(segmentDefinition); } self.markCurrentSegment(); - self.segmentSelectMethod( segmentDefinition ); + self.segmentSelectMethod(segmentDefinition); toggleLoadingMessage(segmentDefinition.length); } }); @@ -623,7 +623,8 @@ Segmentation = (function($) { } if (segment !== undefined && segment.definition != ""){ - self.form.find('[piwik-segment-generator]').attr('segment-definition', segment.definition); + self.currentSegmentStr = segment.definition; + self.form.find('.segment-generator-container').attr('model-value', JSON.stringify(segment.definition)); } makeDropList(".enable_all_users" , ".enable_all_users_select"); @@ -646,22 +647,48 @@ Segmentation = (function($) { self.target.closest('.segmentEditorPanel').addClass('editing'); - piwikHelper.compileAngularComponents(self.target); + var segmentGeneratorContainer = $('.segment-generator-container', self.form)[0]; + + var createVueApp = window.CoreHome.createVueApp; + var SegmentGenerator = window.SegmentEditor.SegmentGenerator; + + var app = createVueApp({ + template: '<root :add-initial-condition="true" v-model="value" />', + components: { + root: SegmentGenerator, + }, + watch: { + value: function () { + self.currentSegmentStr = this.value; + }, + }, + data() { + return { + value: self.currentSegmentStr, + }; + }, + }); + app.mount(segmentGeneratorContainer); + + this.addEventListener('matomoVueDestroy', function () { + app.unmount(); + }); }; var closeForm = function () { + $(self.form).find('.segment-generator-container')[0].dispatchEvent( + new CustomEvent('matomoVueDestroy'), + ); + + self.currentSegmentStr = ''; + $(self.form).unbind().remove(); self.target.closest('.segmentEditorPanel').removeClass('editing'); }; - function getSegmentGeneratorController() - { - return angular.element(self.form.find('.segment-generator')).scope().segmentGenerator; - } - var parseFormAndSave = function(){ var segmentName = $(self.form).find(".segment-content > h3 >span").text(); - var segmentStr = getSegmentGeneratorController().getSegmentString(); + var segmentStr = self.currentSegmentStr; var segmentId = $(self.form).find(".available_segments_select").val() || ""; var user = $(self.form).find(".enable_all_users_select option:selected").val(); // if create realtime segments is disabled, the select field is not available, but we need to use autoArchive = 1 @@ -730,7 +757,7 @@ Segmentation = (function($) { }; var testSegment = function() { - var segmentStr = getSegmentGeneratorController().getSegmentString(); + var segmentStr = self.currentSegmentStr; var encSegment = jQuery(jQuery('.segmentEditorPanel').get(0)).data('uiControlObject').uriEncodeSegmentDefinition(segmentStr); var url = window.location.href; @@ -832,26 +859,26 @@ Segmentation = (function($) { toggleLoadingMessage(segmentIsSet); }; - if (piwikHelper.isAngularRenderingThePage()) { - angular.element(document).injector().invoke(function ($rootScope, $location) { - $rootScope.$on('$locationChangeSuccess', function () { - var $search = $location.search(); - - var segment = ''; - if ('undefined' !== typeof $search.segment && null !== $search.segment) { - segment = $search.segment - } - - if (self.getSegment() != segment) { - self.setSegment(segment); - self.initHtml(); - } else { - setTimeout(function () { - self.markComparedSegments(); - }); - } + if (piwikHelper.isReportingPage()) { + var watch = window.Vue.watch; + var MatomoUrl = window.CoreHome.MatomoUrl; + watch( + function () { + return MatomoUrl.url.value; + }, + function () { + var segment = MatomoUrl.hashParsed.value.segment || ''; + + if (self.getSegment() != segment) { + self.setSegment(segment); + self.initHtml(); + } else { + setTimeout(function () { + self.markComparedSegments(); }); - }); + } + } + ); } this.initHtml(); @@ -893,22 +920,16 @@ $(document).ready(function() { }; this.changeSegment = function(segmentDefinition) { - if (piwikHelper.isAngularRenderingThePage()) { - angular.element(document).injector().invoke(function ($location, $rootScope) { - var $search = $location.search(); - - if (segmentDefinition !== $search.segment) { - // eg when using back button the date might be actually already changed in the URL and we do not - // want to change the URL again - $search.segment = segmentDefinition.replace(/%$/, '%25').replace(/%([^\d].)/g, "%25$1"); - $location.search($search); - setTimeout(function () { - try { - $rootScope.$apply(); - } catch (e) {} - }, 1); - } - }); + if (piwikHelper.isReportingPage()) { + var MatomoUrl = window.CoreHome.MatomoUrl; + var segment = MatomoUrl.hashParsed.value.segment; + if (segmentDefinition !== segment) { + // eg when using back button the date might be actually already changed in the URL and we do not + // want to change the URL again + MatomoUrl.updateHash(Object.assign({}, MatomoUrl.hashParsed.value, { + segment: segmentDefinition.replace(/%$/, '%25').replace(/%([^\d].)/g, "%25$1"), + })); + } return false; } else { return this.forceSegmentReload(segmentDefinition); @@ -918,7 +939,7 @@ $(document).ready(function() { this.forceSegmentReload = function (segmentDefinition) { segmentDefinition = this.uriEncodeSegmentDefinition(segmentDefinition); - if (piwikHelper.isAngularRenderingThePage()) { + if (piwikHelper.isReportingPage()) { return broadcast.propagateNewPage('', true, 'addSegmentAsNew=&segment=' + segmentDefinition, ['compareSegments', 'comparePeriods', 'compareDates']); } else { // eg in case of exported dashboard @@ -1107,7 +1128,7 @@ $(document).ready(function() { initTopControls(); - piwikHelper.getAngularDependency('$rootScope').$emit('piwikSegmentationInited'); + window.CoreHome.Matomo.postEvent('piwikSegmentationInited'); }; /** diff --git a/plugins/SegmentEditor/lang/en.json b/plugins/SegmentEditor/lang/en.json index 363e128ec8..8386674d01 100644 --- a/plugins/SegmentEditor/lang/en.json +++ b/plugins/SegmentEditor/lang/en.json @@ -20,6 +20,7 @@ "SaveAndApply": "Save & Apply", "SegmentDisplayedAllWebsites": "all websites", "SegmentDisplayedThisWebsiteOnly": "this website only", + "SegmentEditor": "Segment editor", "SegmentIsDisplayedForWebsite": "and processed for", "SegmentNotApplied": "Segment '%s' not applied", "SegmentNotAppliedMessage": "You are requesting data for the Custom Segment '%s', this Matomo's configuration currently prevents real time processing of reports for performance reasons.", diff --git a/plugins/SegmentEditor/templates/_segmentSelector.twig b/plugins/SegmentEditor/templates/_segmentSelector.twig index 11e7ce8e04..c03e31d14b 100644 --- a/plugins/SegmentEditor/templates/_segmentSelector.twig +++ b/plugins/SegmentEditor/templates/_segmentSelector.twig @@ -1,5 +1,5 @@ <div class="SegmentEditor" style="display:none;"> - <div class="segmentationContainer listHtml" title="{{ 'SegmentEditor_ChooseASegment'|translate|e('html_attr') }}. {{ 'SegmentEditor_CurrentlySelectedSegment'|translate(segmentDescription)|e('html_attr') }}"> + <div class="segmentationContainer listHtml" title="{{ 'SegmentEditor_ChooseASegment'|translate }}. {{ 'SegmentEditor_CurrentlySelectedSegment'|translate(segmentDescription) }}"> <a class="title" tabindex="4"><span class="icon icon-segment"></span><span class="segmentationTitle"></span></a> <div class="dropdown dropdown-body"> <div class="segmentFilterContainer"> @@ -72,7 +72,7 @@ <h3 style="margin: 12px 6px;">{{ 'General_Name'|translate }}: <span class="segmentName"></span> <a class="editSegmentName" href="#">{{ 'General_Edit'|translate|lower }}</a></h3> </div> <div class="segment-footer"> - <div piwik-rate-feature title="Segment Editor" style="display:inline-block;float: left;margin-top: 2px;margin-right: 10px;"></div> + <div vue-entry="Feedback.RateFeature" title=""{{ 'SegmentEditor_SegmentEditor'|translate }}"" style="display:inline-block;float: left;margin-top: 2px;margin-right: 10px;"></div> <a class="btn-flat delete" href="#">{{ 'General_Delete'|translate }}</a> <a class="btn-flat close" href="#">{{ 'General_Close'|translate }}</a> {% if isVisitorLogEnabled %} diff --git a/plugins/SegmentEditor/tests/UI/SegmentSelectorEditor_spec.js b/plugins/SegmentEditor/tests/UI/SegmentSelectorEditor_spec.js index 2381953340..d5d078b583 100644 --- a/plugins/SegmentEditor/tests/UI/SegmentSelectorEditor_spec.js +++ b/plugins/SegmentEditor/tests/UI/SegmentSelectorEditor_spec.js @@ -113,7 +113,7 @@ describe("SegmentSelectorEditorTest", function () { await page.evaluate(function (i) { $(`.metricValueBlock input:eq(${i})`).val('value ' + i).change(); }, i); - await page.waitForTimeout(200); + await page.waitForTimeout(250); } await page.type('input.edit_segment_name', 'new segment'); diff --git a/plugins/SegmentEditor/vue/dist/SegmentEditor.umd.js b/plugins/SegmentEditor/vue/dist/SegmentEditor.umd.js index 2958655d87..3a41c0c4ab 100644 --- a/plugins/SegmentEditor/vue/dist/SegmentEditor.umd.js +++ b/plugins/SegmentEditor/vue/dist/SegmentEditor.umd.js @@ -144,13 +144,124 @@ if (typeof window !== 'undefined') { // Indicate to webpack that this file can be concatenated /* harmony default export */ var setPublicPath = (null); +// CONCATENATED MODULE: ./plugins/SegmentEditor/vue/src/types.ts +/*! + * Matomo - free/libre analytics platform + * + * @link https://matomo.org + * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later + */ + // EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"} var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__("8bbf"); // EXTERNAL MODULE: external "CoreHome" var external_CoreHome_ = __webpack_require__("19dc"); -// CONCATENATED MODULE: ./node_modules/@vue/cli-plugin-babel/node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/@vue/cli-plugin-babel/node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./plugins/SegmentEditor/vue/src/SegmentGenerator/SegmentGenerator.vue?vue&type=template&id=4d3d6b42 +// CONCATENATED MODULE: ./plugins/SegmentEditor/vue/src/SegmentGenerator/SegmentGenerator.store.ts +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +/*! + * Matomo - free/libre analytics platform + * + * @link https://matomo.org + * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later + */ + + + +var SegmentGenerator_store_SegmentGeneratorStore = /*#__PURE__*/function () { + function SegmentGeneratorStore() { + var _this = this; + + _classCallCheck(this, SegmentGeneratorStore); + + _defineProperty(this, "privateState", Object(external_commonjs_vue_commonjs2_vue_root_Vue_["reactive"])({ + isLoading: false, + segments: [] + })); + + _defineProperty(this, "state", Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () { + return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["readonly"])(_this.privateState); + })); + + _defineProperty(this, "loadSegmentsAbort", void 0); + + _defineProperty(this, "loadSegmentsPromise", void 0); + + _defineProperty(this, "fetchedSiteId", void 0); + } + + _createClass(SegmentGeneratorStore, [{ + key: "loadSegments", + value: function loadSegments(siteId, visitSegmentsOnly) { + var _this2 = this; + + if (this.loadSegmentsAbort) { + this.loadSegmentsAbort.abort(); + this.loadSegmentsAbort = undefined; + } + + this.privateState.isLoading = true; + + if (this.fetchedSiteId !== siteId) { + this.loadSegmentsAbort = undefined; + this.fetchedSiteId = siteId; + } + + if (!this.loadSegmentsPromise) { + var idSites = undefined; + var idSite = undefined; + + if (siteId === 'all' || !siteId) { + idSites = 'all'; + idSite = 'all'; + } else if (siteId) { + idSites = siteId; + idSite = siteId; + } + + this.loadSegmentsAbort = new AbortController(); + this.loadSegmentsPromise = external_CoreHome_["AjaxHelper"].fetch({ + method: 'API.getSegmentsMetadata', + filter_limit: '-1', + _hideImplementationData: 0, + idSites: idSites, + idSite: idSite + }); + } + + return this.loadSegmentsPromise.then(function (response) { + _this2.privateState.isLoading = false; + + if (response) { + if (visitSegmentsOnly) { + _this2.privateState.segments = response.filter(function (s) { + return s.sqlSegment && s.sqlSegment.match(/log_visit\./); + }); + } else { + _this2.privateState.segments = response; + } + } + + return _this2.state.value.segments; + }).finally(function () { + _this2.privateState.isLoading = false; + }); + } + }]); + + return SegmentGeneratorStore; +}(); + +/* harmony default export */ var SegmentGenerator_store = (new SegmentGenerator_store_SegmentGeneratorStore()); +// CONCATENATED MODULE: ./node_modules/@vue/cli-plugin-babel/node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/@vue/cli-plugin-babel/node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./plugins/SegmentEditor/vue/src/SegmentGenerator/SegmentGenerator.vue?vue&type=template&id=f95a20fc var _hoisted_1 = { class: "segment-generator", @@ -294,114 +405,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) { innerHTML: _ctx.$sanitize(_ctx.addNewAndConditionLinkText) }, null, 8, _hoisted_20)])])], 512); } -// CONCATENATED MODULE: ./plugins/SegmentEditor/vue/src/SegmentGenerator/SegmentGenerator.vue?vue&type=template&id=4d3d6b42 +// CONCATENATED MODULE: ./plugins/SegmentEditor/vue/src/SegmentGenerator/SegmentGenerator.vue?vue&type=template&id=f95a20fc // EXTERNAL MODULE: external "CorePluginsAdmin" var external_CorePluginsAdmin_ = __webpack_require__("a5a2"); -// CONCATENATED MODULE: ./plugins/SegmentEditor/vue/src/SegmentGenerator/SegmentGenerator.store.ts -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - -function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } - -function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } - -function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } - -/*! - * Matomo - free/libre analytics platform - * - * @link https://matomo.org - * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later - */ - - - -var SegmentGenerator_store_SegmentGeneratorStore = /*#__PURE__*/function () { - function SegmentGeneratorStore() { - var _this = this; - - _classCallCheck(this, SegmentGeneratorStore); - - _defineProperty(this, "privateState", Object(external_commonjs_vue_commonjs2_vue_root_Vue_["reactive"])({ - isLoading: false, - segments: [] - })); - - _defineProperty(this, "state", Object(external_commonjs_vue_commonjs2_vue_root_Vue_["computed"])(function () { - return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["readonly"])(_this.privateState); - })); - - _defineProperty(this, "loadSegmentsAbort", void 0); - - _defineProperty(this, "loadSegmentsPromise", void 0); - - _defineProperty(this, "fetchedSiteId", void 0); - } - - _createClass(SegmentGeneratorStore, [{ - key: "loadSegments", - value: function loadSegments(siteId, visitSegmentsOnly) { - var _this2 = this; - - if (this.loadSegmentsAbort) { - this.loadSegmentsAbort.abort(); - this.loadSegmentsAbort = undefined; - } - - this.privateState.isLoading = true; - - if (this.fetchedSiteId !== siteId) { - this.loadSegmentsAbort = undefined; - this.fetchedSiteId = siteId; - } - - if (!this.loadSegmentsPromise) { - var idSites = undefined; - var idSite = undefined; - - if (siteId === 'all' || !siteId) { - idSites = 'all'; - idSite = 'all'; - } else if (siteId) { - idSites = siteId; - idSite = siteId; - } - - this.loadSegmentsAbort = new AbortController(); - this.loadSegmentsPromise = external_CoreHome_["AjaxHelper"].fetch({ - method: 'API.getSegmentsMetadata', - filter_limit: '-1', - _hideImplementationData: 0, - idSites: idSites, - idSite: idSite - }); - } - - return this.loadSegmentsPromise.then(function (response) { - _this2.privateState.isLoading = false; - - if (response) { - if (visitSegmentsOnly) { - _this2.privateState.segments = response.filter(function (s) { - return s.sqlSegment && s.sqlSegment.match(/log_visit\./); - }); - } else { - _this2.privateState.segments = response; - } - } - - return _this2.state.value.segments; - }).finally(function () { - _this2.privateState.isLoading = false; - }); - } - }]); - - return SegmentGeneratorStore; -}(); - -/* harmony default export */ var SegmentGenerator_store = (new SegmentGenerator_store_SegmentGeneratorStore()); // CONCATENATED MODULE: ./node_modules/@vue/cli-plugin-babel/node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/@vue/cli-plugin-babel/node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./plugins/SegmentEditor/vue/src/SegmentGenerator/ValueInput.vue?vue&type=template&id=17b64c0b var ValueInputvue_type_template_id_17b64c0b_hoisted_1 = ["placeholder", "title", "value"]; @@ -598,7 +606,7 @@ var _window = window, emits: ['update:modelValue'], watch: { modelValue: function modelValue(newVal) { - if (newVal !== this.segmentDefinition) { + if ((newVal || '') !== (this.segmentDefinition || '')) { this.setSegmentString(newVal); } }, @@ -609,7 +617,7 @@ var _window = window, } }, segmentDefinition: function segmentDefinition(newVal) { - if (newVal !== this.modelValue) { + if ((newVal || '') !== (this.modelValue || '')) { // reset state so update:modelValue can cancel the change this.setSegmentString(this.modelValue); this.$emit('update:modelValue', newVal); @@ -848,99 +856,6 @@ var _window = window, SegmentGeneratorvue_type_script_lang_ts.render = render /* harmony default export */ var SegmentGenerator = (SegmentGeneratorvue_type_script_lang_ts); -// CONCATENATED MODULE: ./plugins/SegmentEditor/vue/src/SegmentGenerator/SegmentGenerator.adapter.ts -/*! - * Matomo - free/libre analytics platform - * - * @link https://matomo.org - * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later - */ - - - -/* harmony default export */ var SegmentGenerator_adapter = (Object(external_CoreHome_["createAngularJsAdapter"])({ - component: SegmentGenerator, - require: '?ngModel', - scope: { - segmentDefinition: { - angularJsBind: '@', - vue: 'modelValue' - }, - addInitialCondition: { - angularJsBind: '=', - transform: external_CoreHome_["transformAngularJsBoolAttr"] - }, - visitSegmentsOnly: { - angularJsBind: '=', - transform: external_CoreHome_["transformAngularJsBoolAttr"] - }, - idsite: { - angularJsBind: '=' - } - }, - directiveName: 'piwikSegmentGenerator', - $inject: ['$timeout'], - events: { - 'update:modelValue': function updateModelValue(newValue, vm, scope, element, attrs, ngModel, $timeout) { - var currentValue = ngModel ? ngModel.$viewValue : scope.segmentDefinition; - - if (newValue !== currentValue) { - $timeout(function () { - if (!ngModel) { - scope.segmentDefinition = newValue; - return; - } // ngModel being used - - - ngModel.$setViewValue(newValue); - ngModel.$render(); // not detected by the watch for some reason - }); - } - } - }, - postCreate: function postCreate(vm, scope, element, attrs, controller) { - // methods to forward for BC - // eslint-disable-next-line @typescript-eslint/no-explicit-any - element.scope().segmentGenerator = { - getSegmentString: function getSegmentString() { - return vm.modelValue; - } - }; - var ngModel = controller; - - if (!ngModel) { - scope.$watch('segmentDefinition', function (newVal) { - if (newVal !== vm.modelValue) { - Object(external_commonjs_vue_commonjs2_vue_root_Vue_["nextTick"])(function () { - vm.modelValue = newVal; - }); - } - }); - return; - } // ngModel being used - - - ngModel.$render = function () { - Object(external_commonjs_vue_commonjs2_vue_root_Vue_["nextTick"])(function () { - vm.modelValue = Object(external_CoreHome_["removeAngularJsSpecificProperties"])(ngModel.$viewValue); - }); - }; - - if (typeof scope.segmentDefinition !== 'undefined') { - ngModel.$setViewValue(scope.segmentDefinition); - } else { - ngModel.$setViewValue(vm.modelValue); - } - } -})); -// CONCATENATED MODULE: ./plugins/SegmentEditor/vue/src/types.ts -/*! - * Matomo - free/libre analytics platform - * - * @link https://matomo.org - * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later - */ - // CONCATENATED MODULE: ./plugins/SegmentEditor/vue/src/index.ts /*! * Matomo - free/libre analytics platform @@ -951,7 +866,6 @@ SegmentGeneratorvue_type_script_lang_ts.render = render - // CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib-no-default.js diff --git a/plugins/SegmentEditor/vue/dist/SegmentEditor.umd.min.js b/plugins/SegmentEditor/vue/dist/SegmentEditor.umd.min.js index 386085fde8..d4625ed5e8 100644 --- a/plugins/SegmentEditor/vue/dist/SegmentEditor.umd.min.js +++ b/plugins/SegmentEditor/vue/dist/SegmentEditor.umd.min.js @@ -1,14 +1,20 @@ -(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("CoreHome"),require("vue"),require("CorePluginsAdmin")):"function"===typeof define&&define.amd?define(["CoreHome",,"CorePluginsAdmin"],t):"object"===typeof exports?exports["SegmentEditor"]=t(require("CoreHome"),require("vue"),require("CorePluginsAdmin")):e["SegmentEditor"]=t(e["CoreHome"],e["Vue"],e["CorePluginsAdmin"])})("undefined"!==typeof self?self:this,(function(e,t,n){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var i=t[o]={i:o,l:!1,exports:{}};return e[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(o,i,function(t){return e[t]}.bind(null,i));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="plugins/SegmentEditor/vue/dist/",n(n.s="fae3")}({"19dc":function(t,n){t.exports=e},"8bbf":function(e,n){e.exports=t},a5a2:function(e,t){e.exports=n},fae3:function(e,t,n){"use strict";if(n.r(t),n.d(t,"SegmentGeneratorStore",(function(){return B})),n.d(t,"SegmentGenerator",(function(){return F})),"undefined"!==typeof window){var o=window.document.currentScript,i=o&&o.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);i&&(n.p=i[1])}var a=n("8bbf"),r=n("19dc"),c={class:"segment-generator",ref:"root"},l={class:"segment-rows"},s={class:"segment-row"},d=["onClick"],u={href:"#",class:"segment-loading"},m={class:"segment-row-inputs valign-wrapper"},f={class:"segment-input metricListBlock valign-wrapper"},p={style:{width:"100%"}},g={class:"segment-input metricMatchBlock valign-wrapper"},v={style:{display:"inline-block"}},h={class:"segment-input metricValueBlock valign-wrapper"},O={class:"form-group row",style:{width:"100%"}},b={class:"input-field col s12"},j=Object(a["createElementVNode"])("span",{role:"status","aria-live":"polite",class:"ui-helper-hidden-accessible"},null,-1),S=Object(a["createElementVNode"])("div",{class:"clear"},null,-1),V={class:"segment-or"},y=["onClick"],C=["innerHTML"],w={class:"segment-and"},k=["innerHTML"];function A(e,t,n,o,i,r){var A=this,N=Object(a["resolveComponent"])("ActivityIndicator"),E=Object(a["resolveComponent"])("Field"),L=Object(a["resolveComponent"])("ValueInput");return Object(a["openBlock"])(),Object(a["createElementBlock"])("div",c,[Object(a["createVNode"])(N,{loading:e.isLoading},null,8,["loading"]),(Object(a["openBlock"])(!0),Object(a["createElementBlock"])(a["Fragment"],null,Object(a["renderList"])(e.conditions,(function(t,n){return Object(a["openBlock"])(),Object(a["createElementBlock"])("div",{class:Object(a["normalizeClass"])("segmentRow".concat(n)),key:n},[Object(a["createElementVNode"])("div",l,[(Object(a["openBlock"])(!0),Object(a["createElementBlock"])(a["Fragment"],null,Object(a["renderList"])(t.orConditions,(function(n,o){var i,r;return Object(a["openBlock"])(),Object(a["createElementBlock"])("div",{class:Object(a["normalizeClass"])("orCondId".concat(n.id)),key:o},[Object(a["createElementVNode"])("div",s,[Object(a["createElementVNode"])("a",{class:"segment-close",onClick:function(o){return e.removeOrCondition(t,n)}},null,8,d),Object(a["withDirectives"])(Object(a["createElementVNode"])("a",u,null,512),[[a["vShow"],e.conditionValuesLoading[n.id]]]),Object(a["createElementVNode"])("div",m,[Object(a["createElementVNode"])("div",f,[Object(a["createElementVNode"])("div",p,[Object(a["createVNode"])(E,{uicontrol:"expandable-select",name:"segments","model-value":n.segment,"onUpdate:modelValue":function(t){n.segment=t,e.updateAutocomplete(n),e.computeSegmentDefinition()},title:null===(i=e.segments[n.segment])||void 0===i?void 0:i.name,"full-width":!0,options:e.segmentList},null,8,["model-value","onUpdate:modelValue","title","options"])])]),Object(a["createElementVNode"])("div",g,[Object(a["createElementVNode"])("div",v,[Object(a["createVNode"])(E,{uicontrol:"select",name:"matchType","model-value":n.matches,"onUpdate:modelValue":function(t){n.matches=t,e.computeSegmentDefinition()},"full-width":!0,options:e.matches[null===(r=e.segments[n.segment])||void 0===r?void 0:r.type]},null,8,["model-value","onUpdate:modelValue","options"])])]),Object(a["createElementVNode"])("div",h,[Object(a["createElementVNode"])("div",O,[Object(a["createElementVNode"])("div",b,[j,Object(a["createVNode"])(L,{or:n,onUpdate:function(e){n.value=e,A.computeSegmentDefinition()}},null,8,["or","onUpdate"])])])]),S])]),Object(a["createElementVNode"])("div",V,Object(a["toDisplayString"])(e.translate("SegmentEditor_OperatorOR")),1)],2)})),128)),Object(a["createElementVNode"])("div",{class:"segment-add-or",onClick:function(n){return e.addNewOrCondition(t)}},[Object(a["createElementVNode"])("div",null,[Object(a["createElementVNode"])("a",{innerHTML:e.$sanitize(e.addNewOrConditionLinkText)},null,8,C)])],8,y)]),Object(a["createElementVNode"])("div",w,Object(a["toDisplayString"])(e.translate("SegmentEditor_OperatorAND")),1)],2)})),128)),Object(a["createElementVNode"])("div",{class:"segment-add-row initial",onClick:t[0]||(t[0]=function(t){return e.addNewAndCondition()})},[Object(a["createElementVNode"])("div",null,[Object(a["createElementVNode"])("a",{innerHTML:e.$sanitize(e.addNewAndConditionLinkText)},null,8,k)])])],512)}var N=n("a5a2");function E(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function L(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function _(e,t,n){return t&&L(e.prototype,t),n&&L(e,n),e}function D(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e} +(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("CoreHome"),require("vue"),require("CorePluginsAdmin")):"function"===typeof define&&define.amd?define(["CoreHome",,"CorePluginsAdmin"],t):"object"===typeof exports?exports["SegmentEditor"]=t(require("CoreHome"),require("vue"),require("CorePluginsAdmin")):e["SegmentEditor"]=t(e["CoreHome"],e["Vue"],e["CorePluginsAdmin"])})("undefined"!==typeof self?self:this,(function(e,t,n){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var i=t[o]={i:o,l:!1,exports:{}};return e[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(o,i,function(t){return e[t]}.bind(null,i));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="plugins/SegmentEditor/vue/dist/",n(n.s="fae3")}({"19dc":function(t,n){t.exports=e},"8bbf":function(e,n){e.exports=t},a5a2:function(e,t){e.exports=n},fae3:function(e,t,n){"use strict";if(n.r(t),n.d(t,"SegmentGeneratorStore",(function(){return m})),n.d(t,"SegmentGenerator",(function(){return K})),"undefined"!==typeof window){var o=window.document.currentScript,i=o&&o.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);i&&(n.p=i[1])}var a=n("8bbf"),r=n("19dc"); /*! * Matomo - free/libre analytics platform * * @link https://matomo.org * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later - */var x=function(){function e(){var t=this;E(this,e),D(this,"privateState",Object(a["reactive"])({isLoading:!1,segments:[]})),D(this,"state",Object(a["computed"])((function(){return Object(a["readonly"])(t.privateState)}))),D(this,"loadSegmentsAbort",void 0),D(this,"loadSegmentsPromise",void 0),D(this,"fetchedSiteId",void 0)}return _(e,[{key:"loadSegments",value:function(e,t){var n=this;if(this.loadSegmentsAbort&&(this.loadSegmentsAbort.abort(),this.loadSegmentsAbort=void 0),this.privateState.isLoading=!0,this.fetchedSiteId!==e&&(this.loadSegmentsAbort=void 0,this.fetchedSiteId=e),!this.loadSegmentsPromise){var o=void 0,i=void 0;"all"!==e&&e?e&&(o=e,i=e):(o="all",i="all"),this.loadSegmentsAbort=new AbortController,this.loadSegmentsPromise=r["AjaxHelper"].fetch({method:"API.getSegmentsMetadata",filter_limit:"-1",_hideImplementationData:0,idSites:o,idSite:i})}return this.loadSegmentsPromise.then((function(e){return n.privateState.isLoading=!1,e&&(n.privateState.segments=t?e.filter((function(e){return e.sqlSegment&&e.sqlSegment.match(/log_visit\./)})):e),n.state.value.segments})).finally((function(){n.privateState.isLoading=!1}))}}]),e}(),B=new x,I=["placeholder","title","value"];function G(e,t,n,o,i,r){return Object(a["openBlock"])(),Object(a["createElementBlock"])("input",{placeholder:e.translate("General_Value"),type:"text",class:"autocomplete",title:e.translate("General_Value"),autocomplete:"off",value:e.or.value,onKeydown:t[0]||(t[0]=function(t){return e.onKeydownOrConditionValue(t)}),onChange:t[1]||(t[1]=function(t){return e.onKeydownOrConditionValue(t)})},null,40,I)}var P=Object(a["defineComponent"])({props:{or:Object},created:function(){this.onKeydownOrConditionValue=Object(r["debounce"])(this.onKeydownOrConditionValue,50)},emits:["update"],methods:{onKeydownOrConditionValue:function(e){this.$emit("update",e.target.value)}}});P.render=G;var $=P;function T(){return{metric:[{key:"==",value:Object(r["translate"])("General_OperationEquals")},{key:"!=",value:Object(r["translate"])("General_OperationNotEquals")},{key:"<=",value:Object(r["translate"])("General_OperationAtMost")},{key:">=",value:Object(r["translate"])("General_OperationAtLeast")},{key:"<",value:Object(r["translate"])("General_OperationLessThan")},{key:">",value:Object(r["translate"])("General_OperationGreaterThan")}],dimension:[{key:"==",value:Object(r["translate"])("General_OperationIs")},{key:"!=",value:Object(r["translate"])("General_OperationIsNot")},{key:"=@",value:Object(r["translate"])("General_OperationContains")},{key:"!@",value:Object(r["translate"])("General_OperationDoesNotContain")},{key:"=^",value:Object(r["translate"])("General_OperationStartsWith")},{key:"=$",value:Object(r["translate"])("General_OperationEndsWith")}]}}function q(){for(var e="",t="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789",n=1;n<=10;n+=1)e+=t.charAt(Math.floor(Math.random()*t.length));return e}function M(e){for(var t,n,o=["==","!=","<=",">=","=@","!@","<",">","=^","=$"],i={},a=e.length,r=!1,c=0;c<o.length;c+=1)t=o[c],n=e.indexOf(t),-1!==n&&n<a&&(a=n,1===t.length&&(r=!0));a<e.length&&(!0===r?(i.segment=e.slice(0,a),i.matches=e.slice(a,a+1),i.value=decodeURIComponent(e.slice(a+1))):(i.segment=e.slice(0,a),i.matches=e.slice(a,a+2),i.value=decodeURIComponent(e.slice(a+2))),'""'===i.value&&(i.value=""));try{i.value=decodeURIComponent(i.value)}catch(l){}return i}function U(e){return e?"".concat(e).replace(/(<([^>]+)>)/gi,""):e}var H=window,R=H.$,J=Object(a["defineComponent"])({props:{addInitialCondition:Boolean,visitSegmentsOnly:Boolean,idsite:{type:[String,Number],default:function(){return r["Matomo"].idSite}},modelValue:{type:String,default:""}},components:{ActivityIndicator:r["ActivityIndicator"],Field:N["Field"],ValueInput:$},data:function(){return{conditions:[],queriedSegments:[],matches:T(),conditionValuesLoading:{},segmentDefinition:""}},emits:["update:modelValue"],watch:{modelValue:function(e){e!==this.segmentDefinition&&this.setSegmentString(e)},conditions:{deep:!0,handler:function(){this.computeSegmentDefinition()}},segmentDefinition:function(e){e!==this.modelValue&&(this.setSegmentString(this.modelValue),this.$emit("update:modelValue",e))},idsite:function(e){this.reloadSegments(e,this.visitSegmentsOnly)}},created:function(){this.matches[""]=this.matches.dimension,this.setSegmentString(this.modelValue),this.segmentDefinition=this.modelValue,this.reloadSegments(this.idsite,this.visitSegmentsOnly)},methods:{reloadSegments:function(e,t){var n=this;B.loadSegments(e,t).then((function(e){n.queriedSegments=e.map((function(e){return Object.assign(Object.assign({},e),{},{category:e.category||"Others"})})),n.addInitialCondition&&0===n.conditions.length&&n.addNewAndCondition()}))},addAndCondition:function(e){this.conditions.push(e)},addNewOrCondition:function(e){var t={segment:this.firstSegment,matches:this.firstMatch,value:""};this.addOrCondition(e,t)},addOrCondition:function(e,t){var n=this;this.conditionValuesLoading[t.id]=!1,t.id=q(),e.orConditions.push(t),Object(a["nextTick"])((function(){n.updateAutocomplete(t)}))},updateAutocomplete:function(e){var t=this;this.conditionValuesLoading[e.id]=!0,R(".orCondId".concat(e.id," .metricValueBlock input"),this.$refs.root).autocomplete({source:[],minLength:0});var n=new AbortController,o=!1;r["AjaxHelper"].fetch({module:"API",format:"json",method:"API.getSuggestedValuesForSegment",segmentName:e.segment}).then((function(n){t.conditionValuesLoading[e.id]=!1,o=!0;var i=R(".orCondId".concat(e.id," .metricValueBlock input")).autocomplete({source:n,minLength:0,select:function(n,o){n.preventDefault(),e.value=o.item.value,t.computeSegmentDefinition(),t.$forceUpdate()}}).off("click").click((function(){R(i).autocomplete("search",e.value)}))})).catch((function(){o=!0,t.conditionValuesLoading[e.id]=!1,R(".orCondId".concat(e.id," .metricValueBlock input")).autocomplete({source:[],minLength:0}).autocomplete("search",e.value)})),setTimeout((function(){o||n.abort()}),2e4)},removeOrCondition:function(e,t){var n=e.orConditions.indexOf(t);if(n>-1&&e.orConditions.splice(n,1),0===e.orConditions.length){var o=this.conditions.indexOf(e);n>-1&&this.conditions.splice(o,1)}},setSegmentString:function(e){var t=this;if(this.conditions=[],e){var n=e.split(";").map((function(e){return e.split(",")}));this.conditions=n.map((function(e){var n={orConditions:[]};return e.forEach((function(e){var o=M(e);t.addOrCondition(n,o)})),n}))}},addNewAndCondition:function(){var e={orConditions:[]};return this.addAndCondition(e),this.addNewOrCondition(e),e},computeSegmentDefinition:function(){var e="";this.conditions.forEach((function(t){if(t.orConditions.length){var n="";t.orConditions.forEach((function(e){if(e.value||e.segment||e.matches){""!==n&&(n+=",");var t=encodeURIComponent(encodeURIComponent(e.value));n+="".concat(e.segment).concat(e.matches).concat(t)}})),""!==e&&(e+=";"),e+=n}})),this.segmentDefinition=e}},computed:{firstSegment:function(){return this.queriedSegments[0].segment},firstMatch:function(){var e=this.queriedSegments[0];return e?e.type&&this.matches[e.type]?this.matches[e.type][0].key:this.matches[""][0].key:null},segments:function(){var e={};return this.queriedSegments.forEach((function(t){e[t.segment]=t})),e},segmentList:function(){return this.queriedSegments.map((function(e){return{group:e.category,key:e.segment,value:e.name,tooltip:e.acceptedValues?U(e.acceptedValues):void 0}}))},addNewOrConditionLinkText:function(){return"+".concat(Object(r["translate"])("SegmentEditor_AddANDorORCondition","<span>".concat(Object(r["translate"])("SegmentEditor_OperatorOR"),"</span>")))},andConditionLabel:function(){return this.conditions.length?Object(r["translate"])("SegmentEditor_OperatorAND"):""},addNewAndConditionLinkText:function(){return"+".concat(Object(r["translate"])("SegmentEditor_AddANDorORCondition","<span>".concat(this.andConditionLabel,"</span>")))},isLoading:function(){return B.state.value.isLoading}}});J.render=A;var F=J; + */function c(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function l(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function s(e,t,n){return t&&l(e.prototype,t),n&&l(e,n),e}function d(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e} /*! * Matomo - free/libre analytics platform * * @link https://matomo.org * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later - */Object(r["createAngularJsAdapter"])({component:F,require:"?ngModel",scope:{segmentDefinition:{angularJsBind:"@",vue:"modelValue"},addInitialCondition:{angularJsBind:"=",transform:r["transformAngularJsBoolAttr"]},visitSegmentsOnly:{angularJsBind:"=",transform:r["transformAngularJsBoolAttr"]},idsite:{angularJsBind:"="}},directiveName:"piwikSegmentGenerator",$inject:["$timeout"],events:{"update:modelValue":function(e,t,n,o,i,a,r){var c=a?a.$viewValue:n.segmentDefinition;e!==c&&r((function(){a?(a.$setViewValue(e),a.$render()):n.segmentDefinition=e}))}},postCreate:function(e,t,n,o,i){n.scope().segmentGenerator={getSegmentString:function(){return e.modelValue}};var c=i;c?(c.$render=function(){Object(a["nextTick"])((function(){e.modelValue=Object(r["removeAngularJsSpecificProperties"])(c.$viewValue)}))},"undefined"!==typeof t.segmentDefinition?c.$setViewValue(t.segmentDefinition):c.$setViewValue(e.modelValue)):t.$watch("segmentDefinition",(function(t){t!==e.modelValue&&Object(a["nextTick"])((function(){e.modelValue=t}))}))}})}})})); + */var u=function(){function e(){var t=this;c(this,e),d(this,"privateState",Object(a["reactive"])({isLoading:!1,segments:[]})),d(this,"state",Object(a["computed"])((function(){return Object(a["readonly"])(t.privateState)}))),d(this,"loadSegmentsAbort",void 0),d(this,"loadSegmentsPromise",void 0),d(this,"fetchedSiteId",void 0)}return s(e,[{key:"loadSegments",value:function(e,t){var n=this;if(this.loadSegmentsAbort&&(this.loadSegmentsAbort.abort(),this.loadSegmentsAbort=void 0),this.privateState.isLoading=!0,this.fetchedSiteId!==e&&(this.loadSegmentsAbort=void 0,this.fetchedSiteId=e),!this.loadSegmentsPromise){var o=void 0,i=void 0;"all"!==e&&e?e&&(o=e,i=e):(o="all",i="all"),this.loadSegmentsAbort=new AbortController,this.loadSegmentsPromise=r["AjaxHelper"].fetch({method:"API.getSegmentsMetadata",filter_limit:"-1",_hideImplementationData:0,idSites:o,idSite:i})}return this.loadSegmentsPromise.then((function(e){return n.privateState.isLoading=!1,e&&(n.privateState.segments=t?e.filter((function(e){return e.sqlSegment&&e.sqlSegment.match(/log_visit\./)})):e),n.state.value.segments})).finally((function(){n.privateState.isLoading=!1}))}}]),e}(),m=new u,f={class:"segment-generator",ref:"root"},p={class:"segment-rows"},g={class:"segment-row"},h=["onClick"],v={href:"#",class:"segment-loading"},O={class:"segment-row-inputs valign-wrapper"},b={class:"segment-input metricListBlock valign-wrapper"},j={style:{width:"100%"}},S={class:"segment-input metricMatchBlock valign-wrapper"},y={style:{display:"inline-block"}},C={class:"segment-input metricValueBlock valign-wrapper"},V={class:"form-group row",style:{width:"100%"}},k={class:"input-field col s12"},w=Object(a["createElementVNode"])("span",{role:"status","aria-live":"polite",class:"ui-helper-hidden-accessible"},null,-1),E=Object(a["createElementVNode"])("div",{class:"clear"},null,-1),N={class:"segment-or"},A=["onClick"],L=["innerHTML"],_={class:"segment-and"},I=["innerHTML"];function x(e,t,n,o,i,r){var c=this,l=Object(a["resolveComponent"])("ActivityIndicator"),s=Object(a["resolveComponent"])("Field"),d=Object(a["resolveComponent"])("ValueInput");return Object(a["openBlock"])(),Object(a["createElementBlock"])("div",f,[Object(a["createVNode"])(l,{loading:e.isLoading},null,8,["loading"]),(Object(a["openBlock"])(!0),Object(a["createElementBlock"])(a["Fragment"],null,Object(a["renderList"])(e.conditions,(function(t,n){return Object(a["openBlock"])(),Object(a["createElementBlock"])("div",{class:Object(a["normalizeClass"])("segmentRow".concat(n)),key:n},[Object(a["createElementVNode"])("div",p,[(Object(a["openBlock"])(!0),Object(a["createElementBlock"])(a["Fragment"],null,Object(a["renderList"])(t.orConditions,(function(n,o){var i,r;return Object(a["openBlock"])(),Object(a["createElementBlock"])("div",{class:Object(a["normalizeClass"])("orCondId".concat(n.id)),key:o},[Object(a["createElementVNode"])("div",g,[Object(a["createElementVNode"])("a",{class:"segment-close",onClick:function(o){return e.removeOrCondition(t,n)}},null,8,h),Object(a["withDirectives"])(Object(a["createElementVNode"])("a",v,null,512),[[a["vShow"],e.conditionValuesLoading[n.id]]]),Object(a["createElementVNode"])("div",O,[Object(a["createElementVNode"])("div",b,[Object(a["createElementVNode"])("div",j,[Object(a["createVNode"])(s,{uicontrol:"expandable-select",name:"segments","model-value":n.segment,"onUpdate:modelValue":function(t){n.segment=t,e.updateAutocomplete(n),e.computeSegmentDefinition()},title:null===(i=e.segments[n.segment])||void 0===i?void 0:i.name,"full-width":!0,options:e.segmentList},null,8,["model-value","onUpdate:modelValue","title","options"])])]),Object(a["createElementVNode"])("div",S,[Object(a["createElementVNode"])("div",y,[Object(a["createVNode"])(s,{uicontrol:"select",name:"matchType","model-value":n.matches,"onUpdate:modelValue":function(t){n.matches=t,e.computeSegmentDefinition()},"full-width":!0,options:e.matches[null===(r=e.segments[n.segment])||void 0===r?void 0:r.type]},null,8,["model-value","onUpdate:modelValue","options"])])]),Object(a["createElementVNode"])("div",C,[Object(a["createElementVNode"])("div",V,[Object(a["createElementVNode"])("div",k,[w,Object(a["createVNode"])(d,{or:n,onUpdate:function(e){n.value=e,c.computeSegmentDefinition()}},null,8,["or","onUpdate"])])])]),E])]),Object(a["createElementVNode"])("div",N,Object(a["toDisplayString"])(e.translate("SegmentEditor_OperatorOR")),1)],2)})),128)),Object(a["createElementVNode"])("div",{class:"segment-add-or",onClick:function(n){return e.addNewOrCondition(t)}},[Object(a["createElementVNode"])("div",null,[Object(a["createElementVNode"])("a",{innerHTML:e.$sanitize(e.addNewOrConditionLinkText)},null,8,L)])],8,A)]),Object(a["createElementVNode"])("div",_,Object(a["toDisplayString"])(e.translate("SegmentEditor_OperatorAND")),1)],2)})),128)),Object(a["createElementVNode"])("div",{class:"segment-add-row initial",onClick:t[0]||(t[0]=function(t){return e.addNewAndCondition()})},[Object(a["createElementVNode"])("div",null,[Object(a["createElementVNode"])("a",{innerHTML:e.$sanitize(e.addNewAndConditionLinkText)},null,8,I)])])],512)}var D=n("a5a2"),B=["placeholder","title","value"];function P(e,t,n,o,i,r){return Object(a["openBlock"])(),Object(a["createElementBlock"])("input",{placeholder:e.translate("General_Value"),type:"text",class:"autocomplete",title:e.translate("General_Value"),autocomplete:"off",value:e.or.value,onKeydown:t[0]||(t[0]=function(t){return e.onKeydownOrConditionValue(t)}),onChange:t[1]||(t[1]=function(t){return e.onKeydownOrConditionValue(t)})},null,40,B)}var G=Object(a["defineComponent"])({props:{or:Object},created:function(){this.onKeydownOrConditionValue=Object(r["debounce"])(this.onKeydownOrConditionValue,50)},emits:["update"],methods:{onKeydownOrConditionValue:function(e){this.$emit("update",e.target.value)}}});G.render=P;var q=G;function M(){return{metric:[{key:"==",value:Object(r["translate"])("General_OperationEquals")},{key:"!=",value:Object(r["translate"])("General_OperationNotEquals")},{key:"<=",value:Object(r["translate"])("General_OperationAtMost")},{key:">=",value:Object(r["translate"])("General_OperationAtLeast")},{key:"<",value:Object(r["translate"])("General_OperationLessThan")},{key:">",value:Object(r["translate"])("General_OperationGreaterThan")}],dimension:[{key:"==",value:Object(r["translate"])("General_OperationIs")},{key:"!=",value:Object(r["translate"])("General_OperationIsNot")},{key:"=@",value:Object(r["translate"])("General_OperationContains")},{key:"!@",value:Object(r["translate"])("General_OperationDoesNotContain")},{key:"=^",value:Object(r["translate"])("General_OperationStartsWith")},{key:"=$",value:Object(r["translate"])("General_OperationEndsWith")}]}}function T(){for(var e="",t="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789",n=1;n<=10;n+=1)e+=t.charAt(Math.floor(Math.random()*t.length));return e}function U(e){for(var t,n,o=["==","!=","<=",">=","=@","!@","<",">","=^","=$"],i={},a=e.length,r=!1,c=0;c<o.length;c+=1)t=o[c],n=e.indexOf(t),-1!==n&&n<a&&(a=n,1===t.length&&(r=!0));a<e.length&&(!0===r?(i.segment=e.slice(0,a),i.matches=e.slice(a,a+1),i.value=decodeURIComponent(e.slice(a+1))):(i.segment=e.slice(0,a),i.matches=e.slice(a,a+2),i.value=decodeURIComponent(e.slice(a+2))),'""'===i.value&&(i.value=""));try{i.value=decodeURIComponent(i.value)}catch(l){}return i}function H(e){return e?"".concat(e).replace(/(<([^>]+)>)/gi,""):e}var R=window,$=R.$,F=Object(a["defineComponent"])({props:{addInitialCondition:Boolean,visitSegmentsOnly:Boolean,idsite:{type:[String,Number],default:function(){return r["Matomo"].idSite}},modelValue:{type:String,default:""}},components:{ActivityIndicator:r["ActivityIndicator"],Field:D["Field"],ValueInput:q},data:function(){return{conditions:[],queriedSegments:[],matches:M(),conditionValuesLoading:{},segmentDefinition:""}},emits:["update:modelValue"],watch:{modelValue:function(e){(e||"")!==(this.segmentDefinition||"")&&this.setSegmentString(e)},conditions:{deep:!0,handler:function(){this.computeSegmentDefinition()}},segmentDefinition:function(e){(e||"")!==(this.modelValue||"")&&(this.setSegmentString(this.modelValue),this.$emit("update:modelValue",e))},idsite:function(e){this.reloadSegments(e,this.visitSegmentsOnly)}},created:function(){this.matches[""]=this.matches.dimension,this.setSegmentString(this.modelValue),this.segmentDefinition=this.modelValue,this.reloadSegments(this.idsite,this.visitSegmentsOnly)},methods:{reloadSegments:function(e,t){var n=this;m.loadSegments(e,t).then((function(e){n.queriedSegments=e.map((function(e){return Object.assign(Object.assign({},e),{},{category:e.category||"Others"})})),n.addInitialCondition&&0===n.conditions.length&&n.addNewAndCondition()}))},addAndCondition:function(e){this.conditions.push(e)},addNewOrCondition:function(e){var t={segment:this.firstSegment,matches:this.firstMatch,value:""};this.addOrCondition(e,t)},addOrCondition:function(e,t){var n=this;this.conditionValuesLoading[t.id]=!1,t.id=T(),e.orConditions.push(t),Object(a["nextTick"])((function(){n.updateAutocomplete(t)}))},updateAutocomplete:function(e){var t=this;this.conditionValuesLoading[e.id]=!0,$(".orCondId".concat(e.id," .metricValueBlock input"),this.$refs.root).autocomplete({source:[],minLength:0});var n=new AbortController,o=!1;r["AjaxHelper"].fetch({module:"API",format:"json",method:"API.getSuggestedValuesForSegment",segmentName:e.segment}).then((function(n){t.conditionValuesLoading[e.id]=!1,o=!0;var i=$(".orCondId".concat(e.id," .metricValueBlock input")).autocomplete({source:n,minLength:0,select:function(n,o){n.preventDefault(),e.value=o.item.value,t.computeSegmentDefinition(),t.$forceUpdate()}}).off("click").click((function(){$(i).autocomplete("search",e.value)}))})).catch((function(){o=!0,t.conditionValuesLoading[e.id]=!1,$(".orCondId".concat(e.id," .metricValueBlock input")).autocomplete({source:[],minLength:0}).autocomplete("search",e.value)})),setTimeout((function(){o||n.abort()}),2e4)},removeOrCondition:function(e,t){var n=e.orConditions.indexOf(t);if(n>-1&&e.orConditions.splice(n,1),0===e.orConditions.length){var o=this.conditions.indexOf(e);n>-1&&this.conditions.splice(o,1)}},setSegmentString:function(e){var t=this;if(this.conditions=[],e){var n=e.split(";").map((function(e){return e.split(",")}));this.conditions=n.map((function(e){var n={orConditions:[]};return e.forEach((function(e){var o=U(e);t.addOrCondition(n,o)})),n}))}},addNewAndCondition:function(){var e={orConditions:[]};return this.addAndCondition(e),this.addNewOrCondition(e),e},computeSegmentDefinition:function(){var e="";this.conditions.forEach((function(t){if(t.orConditions.length){var n="";t.orConditions.forEach((function(e){if(e.value||e.segment||e.matches){""!==n&&(n+=",");var t=encodeURIComponent(encodeURIComponent(e.value));n+="".concat(e.segment).concat(e.matches).concat(t)}})),""!==e&&(e+=";"),e+=n}})),this.segmentDefinition=e}},computed:{firstSegment:function(){return this.queriedSegments[0].segment},firstMatch:function(){var e=this.queriedSegments[0];return e?e.type&&this.matches[e.type]?this.matches[e.type][0].key:this.matches[""][0].key:null},segments:function(){var e={};return this.queriedSegments.forEach((function(t){e[t.segment]=t})),e},segmentList:function(){return this.queriedSegments.map((function(e){return{group:e.category,key:e.segment,value:e.name,tooltip:e.acceptedValues?H(e.acceptedValues):void 0}}))},addNewOrConditionLinkText:function(){return"+".concat(Object(r["translate"])("SegmentEditor_AddANDorORCondition","<span>".concat(Object(r["translate"])("SegmentEditor_OperatorOR"),"</span>")))},andConditionLabel:function(){return this.conditions.length?Object(r["translate"])("SegmentEditor_OperatorAND"):""},addNewAndConditionLinkText:function(){return"+".concat(Object(r["translate"])("SegmentEditor_AddANDorORCondition","<span>".concat(this.andConditionLabel,"</span>")))},isLoading:function(){return m.state.value.isLoading}}});F.render=x;var K=F; +/*! + * Matomo - free/libre analytics platform + * + * @link https://matomo.org + * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later + */}})})); //# sourceMappingURL=SegmentEditor.umd.min.js.map
\ No newline at end of file diff --git a/plugins/SegmentEditor/vue/src/SegmentGenerator/SegmentGenerator.adapter.ts b/plugins/SegmentEditor/vue/src/SegmentGenerator/SegmentGenerator.adapter.ts deleted file mode 100644 index 49642797f3..0000000000 --- a/plugins/SegmentEditor/vue/src/SegmentGenerator/SegmentGenerator.adapter.ts +++ /dev/null @@ -1,91 +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 - */ - -import { INgModelController, ITimeoutService } from 'angular'; -import { nextTick } from 'vue'; -import { - createAngularJsAdapter, - removeAngularJsSpecificProperties, - transformAngularJsBoolAttr, -} from 'CoreHome'; -import SegmentGenerator from './SegmentGenerator.vue'; - -export default createAngularJsAdapter<[ITimeoutService]>({ - component: SegmentGenerator, - require: '?ngModel', - scope: { - segmentDefinition: { - angularJsBind: '@', - vue: 'modelValue', - }, - addInitialCondition: { - angularJsBind: '=', - transform: transformAngularJsBoolAttr, - }, - visitSegmentsOnly: { - angularJsBind: '=', - transform: transformAngularJsBoolAttr, - }, - idsite: { - angularJsBind: '=', - }, - }, - directiveName: 'piwikSegmentGenerator', - $inject: ['$timeout'], - events: { - 'update:modelValue': (newValue, vm, scope, element, attrs, ngModel, $timeout) => { - const currentValue = ngModel ? ngModel.$viewValue : scope.segmentDefinition; - if (newValue !== currentValue) { - $timeout(() => { - if (!ngModel) { - scope.segmentDefinition = newValue; - return; - } - - // ngModel being used - (ngModel as INgModelController).$setViewValue(newValue); - (ngModel as INgModelController).$render(); // not detected by the watch for some reason - }); - } - }, - }, - postCreate(vm, scope, element, attrs, controller) { - // methods to forward for BC - // eslint-disable-next-line @typescript-eslint/no-explicit-any - (element.scope() as any).segmentGenerator = { - getSegmentString(): string { - return vm.modelValue; - }, - }; - - const ngModel = controller as INgModelController; - if (!ngModel) { - scope.$watch('segmentDefinition', (newVal: unknown) => { - if (newVal !== vm.modelValue) { - nextTick(() => { - vm.modelValue = newVal; - }); - } - }); - - return; - } - - // ngModel being used - ngModel.$render = () => { - nextTick(() => { - vm.modelValue = removeAngularJsSpecificProperties(ngModel.$viewValue); - }); - }; - - if (typeof scope.segmentDefinition !== 'undefined') { - (ngModel as INgModelController).$setViewValue(scope.segmentDefinition); - } else { - ngModel.$setViewValue(vm.modelValue); - } - }, -}); diff --git a/plugins/SegmentEditor/vue/src/SegmentGenerator/SegmentGenerator.vue b/plugins/SegmentEditor/vue/src/SegmentGenerator/SegmentGenerator.vue index b80293fa50..c60b331e96 100644 --- a/plugins/SegmentEditor/vue/src/SegmentGenerator/SegmentGenerator.vue +++ b/plugins/SegmentEditor/vue/src/SegmentGenerator/SegmentGenerator.vue @@ -278,7 +278,7 @@ export default defineComponent({ emits: ['update:modelValue'], watch: { modelValue(newVal) { - if (newVal !== this.segmentDefinition) { + if ((newVal || '') !== (this.segmentDefinition || '')) { this.setSegmentString(newVal); } }, @@ -289,7 +289,7 @@ export default defineComponent({ }, }, segmentDefinition(newVal) { - if (newVal !== this.modelValue) { + if ((newVal || '') !== (this.modelValue || '')) { // reset state so update:modelValue can cancel the change this.setSegmentString(this.modelValue); @@ -416,7 +416,7 @@ export default defineComponent({ } } }, - setSegmentString(segmentStr: string) { + setSegmentString(segmentStr?: string|null) { this.conditions = []; if (!segmentStr) { diff --git a/plugins/SegmentEditor/vue/src/index.ts b/plugins/SegmentEditor/vue/src/index.ts index 5258822104..09c0389777 100644 --- a/plugins/SegmentEditor/vue/src/index.ts +++ b/plugins/SegmentEditor/vue/src/index.ts @@ -5,8 +5,6 @@ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later */ -import './SegmentGenerator/SegmentGenerator.adapter'; - export * from './types'; export { default as SegmentGeneratorStore } from './SegmentGenerator/SegmentGenerator.store'; export { default as SegmentGenerator } from './SegmentGenerator/SegmentGenerator.vue'; |