From c94c54f62d5da04a24d84831e277449361189c78 Mon Sep 17 00:00:00 2001 From: dizzy Date: Wed, 23 Aug 2023 05:35:16 -0700 Subject: [PATCH] In segment editor segment value input, bind to the actual value and not or condition object (#21167) * In segment editor segment value input, bind to the actual value and not the OR condition object as the value can change by itself. * built vue files --- .../vue/dist/SegmentEditor.umd.js | 24 +++++++++---------- .../vue/dist/SegmentEditor.umd.min.js | 2 +- .../src/SegmentGenerator/SegmentGenerator.vue | 2 +- .../vue/src/SegmentGenerator/ValueInput.vue | 4 ++-- 4 files changed, 16 insertions(+), 16 deletions(-) diff --git a/plugins/SegmentEditor/vue/dist/SegmentEditor.umd.js b/plugins/SegmentEditor/vue/dist/SegmentEditor.umd.js index d480d976d30..20b6cbe08d8 100644 --- a/plugins/SegmentEditor/vue/dist/SegmentEditor.umd.js +++ b/plugins/SegmentEditor/vue/dist/SegmentEditor.umd.js @@ -261,7 +261,7 @@ var SegmentGenerator_store_SegmentGeneratorStore = /*#__PURE__*/function () { }(); /* 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=b9115b72 +// 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=452cbe04 var _hoisted_1 = { class: "segment-generator", @@ -381,13 +381,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) { "full-width": true, options: _ctx.matches[(_ctx$segments$orCondi2 = _ctx.segments[orCondition.segment]) === null || _ctx$segments$orCondi2 === void 0 ? void 0 : _ctx$segments$orCondi2.type] }, null, 8, ["model-value", "onUpdate:modelValue", "options"])])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_11, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_12, [Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_13, [_hoisted_14, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createVNode"])(_component_ValueInput, { - or: orCondition, + value: orCondition.value, onUpdate: function onUpdate($event) { orCondition.value = $event; // deep watch doesn't catch this change _this.computeSegmentDefinition(); } - }, null, 8, ["or", "onUpdate"])])])]), _hoisted_15])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_16, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('SegmentEditor_OperatorOR')), 1)], 2); + }, null, 8, ["value", "onUpdate"])])])]), _hoisted_15])]), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", _hoisted_16, Object(external_commonjs_vue_commonjs2_vue_root_Vue_["toDisplayString"])(_ctx.translate('SegmentEditor_OperatorOR')), 1)], 2); }), 128)), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementVNode"])("div", { class: "segment-add-or", onClick: function onClick($event) { @@ -405,38 +405,38 @@ 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=b9115b72 +// CONCATENATED MODULE: ./plugins/SegmentEditor/vue/src/SegmentGenerator/SegmentGenerator.vue?vue&type=template&id=452cbe04 // EXTERNAL MODULE: external "CorePluginsAdmin" var external_CorePluginsAdmin_ = __webpack_require__("a5a2"); -// 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 +// 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=8c48d084 -var ValueInputvue_type_template_id_17b64c0b_hoisted_1 = ["placeholder", "title", "value"]; -function ValueInputvue_type_template_id_17b64c0b_render(_ctx, _cache, $props, $setup, $data, $options) { +var ValueInputvue_type_template_id_8c48d084_hoisted_1 = ["placeholder", "title", "value"]; +function ValueInputvue_type_template_id_8c48d084_render(_ctx, _cache, $props, $setup, $data, $options) { return Object(external_commonjs_vue_commonjs2_vue_root_Vue_["openBlock"])(), Object(external_commonjs_vue_commonjs2_vue_root_Vue_["createElementBlock"])("input", { placeholder: _ctx.translate('General_Value'), type: "text", class: "autocomplete", title: _ctx.translate('General_Value'), autocomplete: "off", - value: _ctx.or.value, + value: _ctx.value, onKeydown: _cache[0] || (_cache[0] = function ($event) { return _ctx.onKeydownOrConditionValue($event); }), onChange: _cache[1] || (_cache[1] = function ($event) { return _ctx.onKeydownOrConditionValue($event); }) - }, null, 40, ValueInputvue_type_template_id_17b64c0b_hoisted_1); + }, null, 40, ValueInputvue_type_template_id_8c48d084_hoisted_1); } -// CONCATENATED MODULE: ./plugins/SegmentEditor/vue/src/SegmentGenerator/ValueInput.vue?vue&type=template&id=17b64c0b +// CONCATENATED MODULE: ./plugins/SegmentEditor/vue/src/SegmentGenerator/ValueInput.vue?vue&type=template&id=8c48d084 // CONCATENATED MODULE: ./node_modules/@vue/cli-plugin-typescript/node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/@vue/cli-plugin-typescript/node_modules/ts-loader??ref--14-2!./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=script&lang=ts /* harmony default export */ var ValueInputvue_type_script_lang_ts = (Object(external_commonjs_vue_commonjs2_vue_root_Vue_["defineComponent"])({ props: { - or: Object + value: null }, created: function created() { this.onKeydownOrConditionValue = Object(external_CoreHome_["debounce"])(this.onKeydownOrConditionValue, 50); @@ -454,7 +454,7 @@ function ValueInputvue_type_template_id_17b64c0b_render(_ctx, _cache, $props, $s -ValueInputvue_type_script_lang_ts.render = ValueInputvue_type_template_id_17b64c0b_render +ValueInputvue_type_script_lang_ts.render = ValueInputvue_type_template_id_8c48d084_render /* harmony default export */ var ValueInput = (ValueInputvue_type_script_lang_ts); // CONCATENATED MODULE: ./node_modules/@vue/cli-plugin-typescript/node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/@vue/cli-plugin-typescript/node_modules/ts-loader??ref--14-2!./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=script&lang=ts diff --git a/plugins/SegmentEditor/vue/dist/SegmentEditor.umd.min.js b/plugins/SegmentEditor/vue/dist/SegmentEditor.umd.min.js index a1ac480c379..c85fc36f9df 100644 --- a/plugins/SegmentEditor/vue/dist/SegmentEditor.umd.min.js +++ b/plugins/SegmentEditor/vue/dist/SegmentEditor.umd.min.js @@ -10,7 +10,7 @@ * * @link https://matomo.org * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later - */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]+)>)/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.$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=n;Array.isArray(i)&&(i=i.map((function(e){return"".concat(e)})));var a=$(".orCondId".concat(e.id," .metricValueBlock input")).autocomplete({source:i,minLength:0,select:function(n,o){n.preventDefault(),e.value=o.item.value,t.computeSegmentDefinition(),t.$forceUpdate()}}).off("click").click((function(){$(a).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","".concat(Object(r["translate"])("SegmentEditor_OperatorOR"),"")))},andConditionLabel:function(){return this.conditions.length?Object(r["translate"])("SegmentEditor_OperatorAND"):""},addNewAndConditionLinkText:function(){return"+".concat(Object(r["translate"])("SegmentEditor_AddANDorORCondition","".concat(this.andConditionLabel,"")))},isLoading:function(){return m.state.value.isLoading}}});F.render=x;var K=F; + */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"},v=["onClick"],h={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,v),Object(a["withDirectives"])(Object(a["createElementVNode"])("a",h,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,{value:n.value,onUpdate:function(e){n.value=e,c.computeSegmentDefinition()}},null,8,["value","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.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:{value:null},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]+)>)/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.$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=n;Array.isArray(i)&&(i=i.map((function(e){return"".concat(e)})));var a=$(".orCondId".concat(e.id," .metricValueBlock input")).autocomplete({source:i,minLength:0,select:function(n,o){n.preventDefault(),e.value=o.item.value,t.computeSegmentDefinition(),t.$forceUpdate()}}).off("click").click((function(){$(a).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","".concat(Object(r["translate"])("SegmentEditor_OperatorOR"),"")))},andConditionLabel:function(){return this.conditions.length?Object(r["translate"])("SegmentEditor_OperatorAND"):""},addNewAndConditionLinkText:function(){return"+".concat(Object(r["translate"])("SegmentEditor_AddANDorORCondition","".concat(this.andConditionLabel,"")))},isLoading:function(){return m.state.value.isLoading}}});F.render=x;var K=F; /*! * Matomo - free/libre analytics platform * diff --git a/plugins/SegmentEditor/vue/src/SegmentGenerator/SegmentGenerator.vue b/plugins/SegmentEditor/vue/src/SegmentGenerator/SegmentGenerator.vue index 001b4269e41..c8566db9d48 100644 --- a/plugins/SegmentEditor/vue/src/SegmentGenerator/SegmentGenerator.vue +++ b/plugins/SegmentEditor/vue/src/SegmentGenerator/SegmentGenerator.vue @@ -69,7 +69,7 @@ class="ui-helper-hidden-accessible" /> @@ -23,7 +23,7 @@ import { debounce } from 'CoreHome'; export default defineComponent({ props: { - or: Object, + value: null, }, created() { this.onKeydownOrConditionValue = debounce(this.onKeydownOrConditionValue, 50);