From e8fa9899cea176ef72fe126b8a4115ddf217561e Mon Sep 17 00:00:00 2001
From: Gabriel Oliveira <c.gabriel.oliveira.p@gmail.com>
Date: Wed, 15 Jan 2025 15:45:15 +0000
Subject: [PATCH] feat: add prefix to input number button

---
 .../countly/vue/components/content.js         | 17 +++++++++---
 .../content/UI/content-sidebar-input.html     |  7 +++++
 .../public/stylesheets/vue/clyvue.scss        | 27 ++++++++++++++++++-
 3 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/frontend/express/public/javascripts/countly/vue/components/content.js b/frontend/express/public/javascripts/countly/vue/components/content.js
index 0f8e472e0d2..1595db1a9e4 100644
--- a/frontend/express/public/javascripts/countly/vue/components/content.js
+++ b/frontend/express/public/javascripts/countly/vue/components/content.js
@@ -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,6 +475,10 @@
                         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) {
@@ -482,6 +486,10 @@
                 }
             },
 
+            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() {
diff --git a/frontend/express/public/javascripts/countly/vue/templates/content/UI/content-sidebar-input.html b/frontend/express/public/javascripts/countly/vue/templates/content/UI/content-sidebar-input.html
index 062c9a44c42..db99fcadb7a 100644
--- a/frontend/express/public/javascripts/countly/vue/templates/content/UI/content-sidebar-input.html
+++ b/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>
diff --git a/frontend/express/public/stylesheets/vue/clyvue.scss b/frontend/express/public/stylesheets/vue/clyvue.scss
index 0f4903099af..ed3a485ae03 100644
--- a/frontend/express/public/stylesheets/vue/clyvue.scss
+++ b/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;