@eturnity/eturnity_reusable_components 7.4.4-EPDM-7260.10 → 7.4.4-EPDM-7260.13

package/package.json

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

package/src/components/rangeSlider/index.vue

@@ -19,11 +19,12 @@
               <Slider
                 v-for="(bar, index) in label.selectedTariffs"
                 :key="bar.id"
-                :active="!disabled"
                 :draggable="!disabled"
                 :resizable="!disabled"
                 :color="
-                  hasOverlap && OverlapId === label.id ? '#ff5656' : bar.color
+                  hasOverlap && OverlapId.includes(label.id)
+                    ? '#ff5656'
+                    : bar.color
                 "
                 :minWidth="minWidth"
                 :min="bar.min"
@@ -58,11 +59,7 @@
                   )
                 "
                 @click.native.stop="
-                  $emit('on-bar-tariff-click', {
-                    type: 'delete',
-                    item: bar,
-                    label: activeLabel
-                  })
+                  onBarTariffClick({ item: bar, type: 'delete', label })
                 "
                 @activated="onActivateBar({ item: bar })"
                 @deactivated="onDeactivateBar()"
@@ -83,7 +80,7 @@
             <RulerSubRule v-for="n in subStepCount" :key="n"></RulerSubRule>
           </SubRuler>
           <ErrorMessage
-            v-if="!canOverlap && hasOverlap && OverlapId === label.id"
+            v-if="!canOverlap && hasOverlap && OverlapId.includes(label.id)"
           >
             *{{ $gettext('overlap_error_message') }}
           </ErrorMessage>
@@ -99,7 +96,9 @@
       <bar-item-container
         v-for="item in barOptionsList"
         :key="item.id"
-        @click="onBarTariffClick({ item })"
+        @click="
+          onBarTariffClick({ item, type: barOptionsType, label: activeLabel })
+        "
       >
         <icon
           :name="barOptionsType === 'add' ? 'add_icon' : 'delete'"
@@ -318,7 +317,7 @@ export default {
       barOptionsType: null, // can be "add" or "delete"
       activeLabel: null,
       activeItem: null,
-      OverlapId: null,
+      OverlapId: [],
       hasOverlap: false
     }
   },
@@ -368,7 +367,15 @@ export default {
       this.$emit(type, value)
 
       this.hasOverlap = this.checkOverlap(value, tariffs)
-      this.OverlapId = this.hasOverlap ? entityId : null
+
+      if (this.hasOverlap) {
+        const existing = this.OverlapId.find((id) => id === entityId)
+
+        if (!existing) this.OverlapId.push(entityId)
+      } else
+        this.OverlapId = this.OverlapId
+          ? this.OverlapId.filter((id) => id !== entityId)
+          : []
 
       this.$emit('has-overlap', this.hasOverlap)
     },
@@ -378,7 +385,7 @@ export default {
       const max = parseFloat(value.max)
 
       return tariffs.some((tariff) => {
-        if (tariff.id === value.itemId) return false
+        if (tariff.id === value.itemId || tariff.id === value.id) return false
 
         return (
           min === tariff.min ||
@@ -418,13 +425,17 @@ export default {
         this.activeItem = null
       }
     },
-    onBarTariffClick({ item }) {
+    onBarTariffClick({ item, type, label }) {
+      if (this.disabled) return
+
       this.$emit('on-bar-tariff-click', {
-        type: this.barOptionsType,
+        type,
         item,
-        label: this.activeLabel
+        label
       })
 
+      this.activeLabel = label
+      this.barOptionsType = type
       this.hasOverlap = this.checkOverlap(
         item,
         this.activeLabel.selectedTariffs
@@ -449,6 +460,8 @@ export default {
       }
     },
     onBarRightClick({ event, label, type, bar }) {
+      if (this.disabled) return
+
       // type can be "add", "delete"
       // if "add", show all tariffItems for the group
       // if "delete", only show the delete with the tariff name
@@ -484,14 +497,29 @@ export default {
     document.removeEventListener('keydown', this.onKeyDownDelete)
   },
   watch: {
-    tariffItems(item, oldData) {
-      if (item.length !== oldData.length) {
-        this.hasOverlap = this.checkOverlap(
-          {
-            itemId: 0
-          },
-          item
-        )
+    labels(newVal, oldVal) {
+      //check items for overlap
+      if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
+        const labels = newVal.find((label) => label.placement === 'left')
+
+        if (labels) {
+          labels.value.forEach((label) => {
+            label.selectedTariffs.forEach((tariff) => {
+              this.hasOverlap = this.checkOverlap(tariff, label.selectedTariffs)
+
+              if (this.hasOverlap) {
+                const existing = this.OverlapId.find((id) => id === label.id)
+
+                if (!existing) this.OverlapId.push(label.id)
+              } else
+                this.OverlapId = this.OverlapId
+                  ? this.OverlapId.filter((id) => id !== label.id)
+                  : []
+            })
+          })
+        }
+
+        this.$emit('has-overlap', this.hasOverlap)
       }
     }
   }