Merge pull request #5932 from Countly/journey+content-main

Journey and Content version 1 bug fixes and improvements

Author: ArtursKadikis

frontend/express/public/javascripts/countly/vue/components/content.js

@@ -80,11 +80,6 @@
                 type: Array
             },
 
-            titleMaxLength: {
-                default: 50,
-                type: Number
-            },
-
             toggle: {
                 default: false,
                 type: Boolean
@@ -104,6 +99,11 @@
                 type: String
             },
 
+            valueMaxLength: {
+                default: 50,
+                type: Number
+            },
+
             version: {
                 default: null,
                 type: String
@@ -385,7 +385,7 @@
     const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_COLOR_PICKER = 'color-picker';
     const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_DROPDOWN = 'dropdown';
     const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_INPUT = 'input';
-    const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_INPUT_NUMBER = 'input-number';
+    const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_NUMBER = 'number';
     const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SLIDER = 'slider';
     const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SWAPPER = 'swapper';
     const COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SWITCH = 'switch';
@@ -395,7 +395,7 @@
         [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_COLOR_PICKER]: 'cly-colorpicker',
         [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_DROPDOWN]: 'el-select',
         [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_INPUT]: 'el-input',
-        [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_INPUT_NUMBER]: 'el-input-number',
+        [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_NUMBER]: 'el-input-number',
         [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SLIDER]: 'el-slider',
         [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SWAPPER]: 'cly-option-swapper',
         [COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_SWITCH]: 'el-switch',
@@ -475,13 +475,21 @@
                         return countlyCommon.unescapeHtml(this.value) || '';
                     }
 
+                    if (this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_NUMBER) {
+                        return +this.value || 0;
+                    }
+
                     return this.value || null;
                 },
                 set(newValue) {
                     this.$emit('input', newValue);
                 }
             },
 
+            controlsProp() {
+                return this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_NUMBER ? false : null;
+            },
+
             isDropdownInput() {
                 return this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_DROPDOWN;
             },
@@ -495,7 +503,10 @@
             },
 
             isSuffixVisible() {
-                return this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_INPUT && this.suffix;
+                return (
+                    this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_INPUT ||
+                    this.type === COUNTLY_CONTENT_SIDEBAR_INPUT_COMPONENT_BY_TYPE_NUMBER
+                ) && this.suffix;
             },
 
             isSwapperInput() {
@@ -516,6 +527,11 @@
         template: CV.T('/javascripts/countly/vue/templates/UI/option-swapper.html'),
 
         props: {
+            disabled: {
+                default: false,
+                type: Boolean
+            },
+
             highlightOnSelect: {
                 default: true,
                 type: Boolean

frontend/express/public/javascripts/countly/vue/components/dialog.js

@@ -48,8 +48,10 @@
             title: {type: String, required: true},
             saveButtonLabel: {type: String, required: false, default: CV.i18n("common.save")},
             saveButtonVisibility: {type: Boolean, required: false, default: true},
+            saveButtonDisabled: {type: Boolean, required: false, default: false},
             cancelButtonLabel: {type: String, required: false, default: CV.i18n("common.cancel")},
             cancelButtonVisibility: {type: Boolean, required: false, default: true},
+            cancelButtonDisabled: {type: Boolean, required: false, default: false},
             dialogType: {type: String, required: false, default: "success"},
             testId: {type: String, default: 'cly-vue-confirm-dialog-test-id', required: false},
             alignCenter: {type: Boolean, default: true}
@@ -76,9 +78,12 @@
             },
             customClass: function() {
                 return this.alignCenter ? "el-dialog--centered" : "";
-            }
+            },
         },
         methods: {
+            buttonStyle: function(disabled) {
+                return disabled ? { opacity: 0.5 } : {};
+            },
             confirmClicked: function() {
                 this.$emit("confirm");
             },
@@ -91,12 +96,16 @@
                         <template v-for="(_, name) in forwardedSlots" v-slot:[name]="slotData">\
                             <slot :name="name"/>\
                         </template>\
-						<template v-slot:footer><div class="cly-vue-formdialog__buttons is-single-step bu-is-justify-content-flex-end bu-is-flex">\
-							<el-button size="small" :data-test-id="testId + \'-cly-confirm-dialog-cancel-button\'" @click="cancelClicked"  type="secondary" v-if="cancelButtonVisibility">{{cancelLabel}}</el-button>\
-							<el-button size="small" :data-test-id="testId + \'-cly-confirm-dialog-save-button\'" @click="confirmClicked" type="success" v-if="confirmStyle==\'success\' && saveButtonVisibility" >{{saveLabel}}</el-button>\
-                            <el-button size="small" :data-test-id="testId + \'-cly-confirm-dialog-warning-button\'" @click="confirmClicked" type="warning" v-else-if="confirmStyle==\'warning\' && saveButtonVisibility" >{{saveLabel}}</el-button>\
-							<el-button size="small" :data-test-id="testId + \'-cly-confirm-dialog-danger-button\'" @click="confirmClicked" type="danger" v-else-if="saveButtonVisibility" >{{saveLabel}}</el-button>\
-						</div></template>\
+						<template v-slot:footer>\
+                            <slot name="footer">\
+                                <div class="cly-vue-formdialog__buttons is-single-step bu-is-justify-content-flex-end bu-is-flex">\
+                                    <el-button size="small" :data-test-id="testId + \'-cly-confirm-dialog-cancel-button\'" @click="cancelClicked"  type="secondary" :disabled="cancelButtonDisabled" :style="buttonStyle(cancelButtonDisabled)" v-if="cancelButtonVisibility">{{cancelLabel}}</el-button>\
+                                    <el-button size="small" :data-test-id="testId + \'-cly-confirm-dialog-save-button\'" @click="confirmClicked" type="success" :disabled="saveButtonDisabled" :style="buttonStyle(saveButtonDisabled)" v-if="confirmStyle==\'success\' && saveButtonVisibility" >{{saveLabel}}</el-button>\
+                                    <el-button size="small" :data-test-id="testId + \'-cly-confirm-dialog-warning-button\'" @click="confirmClicked" type="warning" :disabled="saveButtonDisabled" :style="buttonStyle(saveButtonDisabled)" v-else-if="confirmStyle==\'warning\' && saveButtonVisibility" >{{saveLabel}}</el-button>\
+                                    <el-button size="small" :data-test-id="testId + \'-cly-confirm-dialog-danger-button\'" @click="confirmClicked" type="danger" :disabled="saveButtonDisabled" :style="buttonStyle(saveButtonDisabled)" v-else-if="saveButtonVisibility" >{{saveLabel}}</el-button>\
+                                </div>\
+                            </slot>\
+                        </template>\
                     </el-dialog>'
     }));
 
@@ -261,4 +270,4 @@
     countlyVue.mixins.hasFormDialogs = hasFormDialogsMixin;
 
 
-}(window.countlyVue = window.countlyVue || {}));
+}(window.countlyVue = window.countlyVue || {}));

frontend/express/public/javascripts/countly/vue/templates/UI/option-swapper.html

@@ -1,13 +1,17 @@
-<!-- :style="{'width': width + 'px'}" -->
-<div class="cly-option-swapper">
+<div 
+  class="cly-option-swapper"
+  :class="{
+    'cly-option-swapper--disabled': disabled
+  }"
+>
   <div
     v-for="(option, index) in options"
     :key="`cly-option-swapper-option-${index}`"
     v-tooltip="option.tooltip"
     class="cly-option-swapper__option"
     :class="{
       'cly-option-swapper__option--active': option.value === selectedOption,
-      'cly-option-swapper__option--disabled': option.disabled,
+      'cly-option-swapper__option--disabled': option.disabled || disabled,
       'cly-option-swapper__option--first': index === 0,
       'cly-option-swapper__option--last': index === (options.length - 1),
       'cly-option-swapper__option--no-highlight': !highlightOnSelect

frontend/express/public/javascripts/countly/vue/templates/content/UI/content-sidebar-input.html

@@ -25,6 +25,7 @@
         v-model="componentValue"
         class="cly-vue-content-builder-sidebar-input__component"
         :class="{ 'cly-vue-content-builder-sidebar-input__component--slider': isSliderInput }"
+        :controls="controlsProp"
         :disabled="disabled"
         :options="options"
       >
@@ -44,6 +45,12 @@
           />
         </template>
       </component>
+      <div
+        v-if="isSuffixVisible && type === 'number'"
+        class="cly-vue-content-builder-sidebar-input__number-input-suffix"
+      >
+        {{ suffix }}
+      </div>
     </slot>
   </div>
 </div>

frontend/express/public/stylesheets/vue/clyvue.scss

@@ -4616,6 +4616,18 @@
         width: auto;
         box-shadow: none;
 
+        // .cly-vue-content-builder-sidebar-input__component.el-input-number
+        &.el-input-number {
+            position: relative;
+
+            // .cly-vue-content-builder-sidebar-input__component.el-input-number .el-input__inner
+            & .el-input__inner {
+                text-align: left;
+                padding: 6px 10px;
+                padding-right: 34px;
+            }
+        }
+
         // .cly-vue-content-builder-sidebar-input__component .el-input__count
         & .el-input__count {
             position: absolute;
@@ -4710,7 +4722,7 @@
 
         // .cly-vue-content-builder-sidebar-input__input-container--small .cly-vue-content-builder-sidebar-input__component
         &--small .cly-vue-content-builder-sidebar-input__component {
-            max-width: 64px;
+            max-width: 70px;
         }
 
         // .cly-vue-content-builder-sidebar-input__input-container--large .cly-vue-content-builder-sidebar-input__component
@@ -4740,6 +4752,19 @@
         line-height: 16px;
     }
 
+    // .cly-vue-content-builder-sidebar-input__number-input-suffix
+    &__number-input-suffix {
+        position: absolute;
+        top: 0;
+        right: 0;
+        padding: 6px 10px;
+        padding-left: 0;
+        color: #81868D;
+        width: 16px;
+        font-size: 14px;
+        line-height: 20px;
+    }
+
     // .cly-vue-content-builder-sidebar-input__sub-header
     &__sub-header {
         color: #81868D;
@@ -4804,6 +4829,12 @@
             background: #F6F6F6;
         }
     }
+
+    // .cly-option-swapper--disabled
+    &--disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+    }
 }
 
 .cly-list-drawer {