@eturnity/eturnity_reusable_components 7.4.4-EPDM-7260.3 → 7.4.4-EPDM-7260.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.4.4-EPDM-7260.3",
+  "version": "7.4.4-EPDM-7260.5",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/components/inputs/inputText/index.vue

@@ -27,7 +27,7 @@
           <input-container
             ref="inputElement"
             :placeholder="placeholder"
-            :isError="isError"
+            :isError="hasError"
             :inputWidth="inputWidth"
             :minWidth="minWidth"
             :inputHeight="inputHeight"
@@ -53,12 +53,12 @@
           >
             <icon name="current_variant" size="20px" />
           </icon-wrapper>
-          <icon-wrapper v-if="isError" size="16px">
+          <icon-wrapper v-if="hasError" size="16px">
             <icon name="warning" size="16px" cursor="default" />
           </icon-wrapper>
         </icon-container>
-        <error-message v-if="isError && errorMessage">{{
-          errorMessage
+        <error-message v-if="hasError && hasErrorMessage">{{
+          dynamicErrorMessage
         }}</error-message>
       </input-error-wrapper>
     </input-wrapper>
@@ -70,6 +70,7 @@ import styled from 'vue-styled-components'
 import InfoText from '../../infoText'
 import Icon from '../../icon'
 import ErrorMessage from '../../errorMessage'
+import InputValidations from '../../../mixins/inputValidations.js'
 
 const Container = styled.div`
   width: 100%;
@@ -229,11 +230,25 @@ export default {
     InputErrorWrapper,
     optionalLabel
   },
+  mixins: [InputValidations],
   data() {
     return {
       inputTypeData: 'text'
     }
   },
+  computed: {
+    hasError() {
+      return this.isError || this.error
+    },
+    hasErrorMessage() {
+      return (
+        (this.errorMessage && this.errorMessage.length > 0) || this.errMessage
+      )
+    },
+    dynamicErrorMessage() {
+      return this.errMessage || this.errorMessage
+    }
+  },
   props: {
     placeholder: {
       required: false,
@@ -332,6 +347,7 @@ export default {
       this.$emit('input-change', $event)
     },
     onInputBlur($event) {
+      this.validateInput($event.target.value)
       this.$emit('input-blur', $event.target.value)
     },
     toggleShowPassword() {

package/src/components/rangeSlider/Slider.vue

@@ -179,8 +179,8 @@ export default {
     this.parentWidth = parentWidth
     this.parentHeight = parentHeight
 
-    this.left = this.min * this.stepCount
-    this.right = this.max * this.stepCount
+    this.left = this.min * this.pxPerStep
+    this.right = this.max * this.pxPerStep
     this.width = computeWidth(this.left, this.right)
     this.height = this.h !== 'auto' ? this.h : parentHeight
 
@@ -467,7 +467,7 @@ export default {
       removeEvent(document.documentElement, eventsFor.move, this.handleResize)
     },
     roundToNearestStep(value) {
-      const val = value / this.stepCount
+      const val = value / this.pxPerStep
 
       const int = 1.0 / this.step
       return (Math.floor(val * int) / int).toFixed(2)
@@ -490,8 +490,11 @@ export default {
 
       return this.handles
     },
+    pxPerStep() {
+      return this.parentWidth / this.stepCount
+    },
     minWidthByPx() {
-      return this.minWidth * this.stepCount
+      return this.minWidth * this.pxPerStep
     },
     computedWidth() {
       if (this.width === 'auto') {

package/src/components/rangeSlider/index.vue

@@ -18,7 +18,7 @@
             <SliderWrapper>
               <Slider
                 v-for="(bar, index) in label.selectedTariffs"
-                :key="index"
+                :key="bar.id"
                 :active="!disabled"
                 :draggable="!disabled"
                 :resizable="!disabled"
@@ -370,6 +370,8 @@ export default {
 
       this.hasOverlap = this.checkOverlap(value, tariffs)
       this.OverlapId = this.hasOverlap ? entityId : null
+
+      this.$emit('has-overlap', this.hasOverlap)
     },
     checkOverlap(value, tariffs) {
       // Check if the tariffs overlap
@@ -434,8 +436,7 @@ export default {
         // add based on the index in the chart.
         this.barOptionsList.push({
           name: bar.name,
-          id: bar.id,
-          index: bar.index
+          id: bar.id
         })
       }
     },
@@ -446,8 +447,8 @@ export default {
       event.preventDefault()
       this.activeLabel = label
       this.barOptionsType = type
-      // need to pass the index to setBarOptions in case it's 'add'
       this.setBarOptions(bar)
+
       if (this.barOptionsList.length) {
         this.showBarOptions = true
         this.barOptionsPosition = { x: event.clientX, y: event.clientY }
@@ -473,16 +474,6 @@ export default {
     // Remove the global click event listener to prevent memory leaks
     document.removeEventListener('click', this.handleOutsideClick)
     document.removeEventListener('keydown', this.onKeyDownDelete)
-  },
-  mounted() {
-    // TODO: remove
-    // this.tariffItems.forEach((item) => {
-    //   item.tariff_time_mfr.forEach((tariff) => {
-    //     tariff.time_to = '12:00:00'
-    //     tariff.time_up_to = '12:00:00'
-    //   })
-    // })
-    console.log('mounted tariffItems', this.tariffItems)
   }
 }
 </script>

package/src/helpers/currencyMapping.js

@@ -0,0 +1,28 @@
+export const currencyMapping = (data) => {
+  let currency
+
+  switch (data) {
+    case 'EUR':
+      currency = 'ct'
+      break
+    case 'CHF':
+      currency = 'Rp.'
+      break
+    case 'SEK':
+      currency = 'öre'
+      break
+    case 'GBP':
+      currency = 'p'
+      break
+    case 'USD':
+      currency = 'ct'
+      break
+    case 'DKK':
+      currency = 'øre'
+      break
+    default:
+      currency = 'ct'
+  }
+
+  return currency
+}

package/src/mixins/inputValidations.js

@@ -0,0 +1,96 @@
+export default {
+  props: {
+    rules: {
+      type: Array,
+      required: false,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      error: false,
+      errMessage: ''
+    }
+  },
+  methods: {
+    validateInput(value) {
+      this.resetError()
+
+      this.rules.forEach((rule) => {
+        switch (rule) {
+          case 'required':
+            if (value) {
+              this.error = true
+              this.errMessage = this.$gettext('Required field')
+            }
+            break
+          case 'number':
+            this.checkNumber(value)
+            break
+          case 'string':
+            this.checkString(value)
+            break
+          case 'email':
+            this.checkEmail(value)
+            break
+          case 'phone':
+            this.checkPhone(value)
+            break
+          case 'year':
+            this.checkYear(value)
+            break
+        }
+      })
+    },
+
+    resetError() {
+      this.error = false
+      this.errMessage = ''
+    },
+
+    checkNumber(value) {
+      this.resetError()
+
+      if (value && isNaN(value)) {
+        this.error = true
+        this.errMessage = this.$gettext('invalid_number')
+      }
+    },
+
+    checkString(value) {
+      this.resetError()
+
+      if (value && value.length < 3) {
+        this.error = true
+        this.errMessage = this.$gettext('invalid_string')
+      }
+    },
+
+    checkEmail(value) {
+      this.resetError()
+
+      if (value && !value.includes('@')) {
+        this.error = true
+        this.errMessage = this.$gettext('Invalid email address')
+      }
+    },
+
+    checkPhone(value) {
+      this.resetError()
+
+      if (value && !/^\d{10}$/.test(value)) {
+        this.error = true
+        this.errMessage = this.$gettext('invalid_phone')
+      }
+    },
+
+    checkYear(value) {
+      this.resetError()
+
+      if (value && (isNaN(value) || value < 1900 || value > 2100)) {
+        this.error = true
+        this.errMessage = this.$gettext('invalid_year')
+      }
+    }
+  }
+}