@eturnity/eturnity_reusable_components 7.4.4-EPDM-7260.4 → 7.4.4-EPDM-7260.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.4.4-EPDM-7260.4",
+  "version": "7.4.4-EPDM-7260.6",
   "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

@@ -3,14 +3,14 @@
     :style="style"
     :class="className"
     @mousedown="elementMouseDown"
-    @touchstart="elementTouchDown"
+    @touchend="elementTouchDown"
   >
     <div
       v-for="handle in actualHandles"
       :key="handle"
       :style="{ display: enabled ? 'block' : 'none' }"
       @mousedown.stop.prevent="handleDown(handle, $event)"
-      @touchstart.stop.prevent="handleTouchDown(handle, $event)"
+      @touchend.stop.prevent="handleTouchDown(handle, $event)"
     >
       <slot :name="handle"></slot>
     </div>
@@ -443,8 +443,6 @@ export default {
     handleUp() {
       this.handle = null
 
-      this.resetBoundsAndMouseState()
-
       this.dragEnable = false
       this.resizeEnable = false
 
@@ -470,7 +468,7 @@ export default {
       const val = value / this.pxPerStep
 
       const int = 1.0 / this.step
-      return (Math.floor(val * int) / int).toFixed(2)
+      return (Math.round(val * int) / int).toFixed(2)
     }
   },
   computed: {

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"
@@ -242,9 +242,9 @@ const VerticalLabel = styled.div`
 `
 
 const HandleIcon = styled(Icon)`
-  width: auto;
+  width: 12px;
   min-width: 0;
-  margin: -12px;
+  margin: -6px;
 `
 
 const BarOptionAttrs = { top: Number, left: Number }
@@ -370,15 +370,21 @@ 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
-      const { itemId, min, max } = value
+      const { itemId } = value
+      const min = parseFloat(value.min)
+      const max = parseFloat(value.max)
 
       return tariffs.some((tariff) => {
         if (tariff.id === itemId) return false
 
         return (
+          (min === tariff.min ) ||
+          (max === tariff.max) ||
           (min > tariff.min && min < tariff.max) ||
           (max > tariff.min && max < tariff.max) ||
           (min < tariff.min && max > tariff.max)
@@ -419,6 +425,8 @@ export default {
         item,
         label: this.activeLabel
       })
+
+      this.hasOverlap = this.checkOverlap(item, this.activeLabel.selectedTariffs)
       this.showBarOptions = false
     },
     setBarOptions(bar) {
@@ -434,8 +442,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 +453,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 }

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')
+      }
+    }
+  }
+}