@eturnity/eturnity_reusable_components 7.24.3-EPDM-11320.0 → 7.24.3-EPDM-11143.1

package/src/components/rangeSlider/index.vue

@@ -1,52 +1,41 @@
 <template>
   <RangeSliderContainer>
     <Labels v-if="topLabels && topLabels.length > 0">
-      <Label
-        v-for="label in topLabels"
-        :key="label"
-      >
+      <Label v-for="label in topLabels" :key="label">
         {{ label }}
       </Label>
     </Labels>
 
     <BarContainer v-if="leftLabels && leftLabels.length > 0">
-      <BarWrapper
-        v-for="(label, index) in leftLabels"
-        :key="index"
-      >
+      <BarWrapper v-for="(label, index) in leftLabels" :key="index">
         <VerticalLabel>{{ label.name }}</VerticalLabel>
         <BarSlider>
           <Bar
-            :data-id="`slider_bar_${dataLocation}_${label.id}`"
             @click.native.stop="
               onBarRightClick({ event: $event, label, type: 'add' })
             "
+            :data-id="`slider_bar_${dataLocation}_${label.id}`"
           >
             <SliderWrapper>
               <Slider
                 v-for="(bar, index) in label.selectedTariffs"
+                :dataId="`slider_bar_item_${dataLocation}_${label.id}_${bar.name}`"
                 :key="bar.id"
+                :draggable="!disabled"
+                :resizable="!disabled"
                 :color="
                   hasOverlap && OverlapId.includes(label.id)
                     ? '#ff5656'
                     : bar.color
                 "
-                :data-id="`slider_bar_item_${dataLocation}_${label.id}_${bar.name}`"
-                :draggable="!disabled"
-                :max="bar.max"
+                :minWidth="minWidth"
                 :min="bar.min"
-                :min-width="minWidth"
-                :resizable="!disabled"
-                :step="step"
-                :step-count="stepCount"
-                :sub-step-count="subStepCount"
+                :max="bar.max"
                 :z="index"
-                @activated="onActivateBar({ item: bar })"
-                @click.native.stop="
-                  onBarTariffClick({ item: bar, type: 'delete', label })
-                "
-                @deactivated="onDeactivateBar()"
-                @drag-stop="
+                :step="step"
+                :stepCount="stepCount"
+                :subStepCount="subStepCount"
+                @dragStop="
                   onChange('drag', {
                     itemId: bar.id,
                     parentId: bar.parentId,
@@ -54,13 +43,18 @@
                     ...$event
                   })
                 "
-                @resize-stop="
+                @resizeStop="
                   onChange('resize', {
                     itemId: bar.id,
                     entityId: label.id,
                     ...$event
                   })
                 "
+                @click.native.stop="
+                  onBarTariffClick({ item: bar, type: 'delete', label })
+                "
+                @activated="onActivateBar({ item: bar })"
+                @deactivated="onDeactivateBar()"
               >
                 <template #mr>
                   <HandleIcon />
@@ -72,16 +66,10 @@
             </SliderWrapper>
           </Bar>
           <Ruler>
-            <RulerRule
-              v-for="n in stepCount"
-              :key="n"
-            />
+            <RulerRule v-for="n in stepCount" :key="n"></RulerRule>
           </Ruler>
           <SubRuler>
-            <RulerSubRule
-              v-for="n in subStepCount"
-              :key="n"
-            />
+            <RulerSubRule v-for="n in subStepCount" :key="n"></RulerSubRule>
           </SubRuler>
           <ErrorMessage
             v-if="!canOverlap && hasOverlap && OverlapId.includes(label.id)"
@@ -91,13 +79,13 @@
         </BarSlider>
       </BarWrapper>
     </BarContainer>
-    <BarOptionsContainer
+    <bar-options-container
       v-if="showBarOptions"
-      ref="barDropdown"
-      :left="barOptionsPosition.x"
       :top="barOptionsPosition.y"
+      :left="barOptionsPosition.x"
+      ref="barDropdown"
     >
-      <BarItemContainer
+      <bar-item-container
         v-for="item in barOptionsList"
         :key="item.id"
         @click="
@@ -105,29 +93,29 @@
         "
       >
         <AddIcon />
-        <BarItemText>{{ item.name }}</BarItemText>
-      </BarItemContainer>
-    </BarOptionsContainer>
+        <bar-item-text>{{ item.name }}</bar-item-text>
+      </bar-item-container>
+    </bar-options-container>
   </RangeSliderContainer>
 </template>
 
 <script>
-  import styled from 'vue3-styled-components'
-  import handleSVG from '../../assets/svgIcons/handle.svg'
-  import add from '../../assets/svgIcons/add_icon.svg'
+import styled from 'vue3-styled-components'
+import handleSVG from '../../assets/svgIcons/handle.svg'
+import add from '../../assets/svgIcons/add_icon.svg'
 
-  import SliderComponent from './Slider'
+import SliderComponent from './Slider'
 
-  const wrapperAttrs = { width: String, height: String }
-  const SliderWrapper = styled('div', wrapperAttrs)`
+const wrapperAttrs = { width: String, height: String }
+const SliderWrapper = styled('div', wrapperAttrs)`
   position: relative;
   display: flex;
   height: ${(props) => props.height || '24px'};
   width: ${(props) => props.width || '100%'};
 `
 
-  const sliderAttrs = { color: String, draggable: Boolean }
-  const Slider = styled(SliderComponent, sliderAttrs)`
+const sliderAttrs = { color: String, draggable: Boolean }
+const Slider = styled(SliderComponent, sliderAttrs)`
   cursor: ${(props) => (props.draggable ? 'pointer' : 'not-allowed')};
   opacity: 0.7;
   display: flex;
@@ -137,14 +125,14 @@
   background-color: ${(props) => props.color};
 `
 
-  const ErrorMessage = styled.p`
+const ErrorMessage = styled.p`
   color: ${(props) => props.theme.colors.red};
   font-style: italic;
   font-size: 13px;
   margin-top: 5px;
 `
 
-  const Bar = styled.div`
+const Bar = styled.div`
   display: flex;
   margin-bottom: -30px;
   margin-left: 1px;
@@ -153,13 +141,13 @@
   background-color: ${(props) => props.theme.colors.gray1};
 `
 
-  const Ruler = styled.div`
+const Ruler = styled.div`
   margin: 10px 0px -5px 0px;
   display: flex;
   overflow: hidden;
 `
 
-  const RulerRule = styled.div`
+const RulerRule = styled.div`
   border-left: solid 1px ${(props) => props.theme.colors.grey2};
   border-bottom: solid 1px ${(props) => props.theme.colors.grey2};
   display: flex;
@@ -172,12 +160,12 @@
   }
 `
 
-  const SubRuler = styled.div`
+const SubRuler = styled.div`
   margin: -7px 0px -5px 0px;
   display: flex;
 `
 
-  const RulerSubRule = styled.div`
+const RulerSubRule = styled.div`
   border-left: solid 1px ${(props) => props.theme.colors.grey2};
   border-bottom: solid 1px ${(props) => props.theme.colors.grey2};
   display: flex;
@@ -195,23 +183,23 @@
   }
 `
 
-  const BarSlider = styled.div`
+const BarSlider = styled.div`
   width: 100%;
 `
 
-  const BarContainer = styled.div`
+const BarContainer = styled.div`
   display: flex;
   flex-direction: column;
 `
 
-  const BarWrapper = styled.div`
+const BarWrapper = styled.div`
   display: flex;
   flex-direction: row;
   margin: 20px 0px;
   align-items: center;
 `
 
-  const RangeSliderContainer = styled.div`
+const RangeSliderContainer = styled.div`
   display: flex;
   position: relative;
   padding: 20px 10px;
@@ -220,7 +208,7 @@
   width: 100%;
 `
 
-  const Labels = styled.div`
+const Labels = styled.div`
   display: flex;
   justify-content: space-between;
   padding: 0px;
@@ -228,20 +216,20 @@
   width: calc(100% - 100px);
 `
 
-  const Label = styled.div`
+const Label = styled.div`
   font-size: 80%;
   display: flex;
   width: 1px;
   justify-content: center;
 `
 
-  const VerticalLabel = styled.div`
+const VerticalLabel = styled.div`
   text-align: left;
   min-width: 100px;
   font-size: 13px;
 `
 
-  const AddIcon = styled(add)`
+const AddIcon = styled(add)`
     width: 33px;
     height: 29px;
     fill: black
@@ -249,14 +237,14 @@
     margin-top: -10px;
 `
 
-  const HandleIcon = styled(handleSVG)`
+const HandleIcon = styled(handleSVG)`
   width: 13px;
   min-width: 0;
   margin: -6px;
 `
 
-  const BarOptionAttrs = { top: Number, left: Number }
-  const BarOptionsContainer = styled('div', BarOptionAttrs)`
+const BarOptionAttrs = { top: Number, left: Number }
+const BarOptionsContainer = styled('div', BarOptionAttrs)`
   display: grid;
   position: fixed;
   z-index: 9999;
@@ -268,7 +256,7 @@
   left: ${(props) => props.left + 'px'};
 `
 
-  const BarItemContainer = styled.div`
+const BarItemContainer = styled.div`
   display: grid;
   grid-template-columns: auto 1fr;
   grid-gap: 12px;
@@ -282,248 +270,248 @@
   }
 `
 
-  const BarItemText = styled.div`
+const BarItemText = styled.div`
   font-size: 13px;
 `
 
-  export default {
-    name: 'RangeSlider',
-    components: {
-      Bar,
-      Label,
-      Labels,
-      Ruler,
-      Slider,
-      AddIcon,
-      SubRuler,
-      BarSlider,
-      RulerRule,
-      HandleIcon,
-      BarWrapper,
-      ErrorMessage,
-      RulerSubRule,
-      BarContainer,
-      SliderWrapper,
-      VerticalLabel,
-      RangeSliderContainer,
-      BarOptionsContainer,
-      BarItemContainer,
-      BarItemText
-    },
-    props: {
-      dataLocation: { type: String, default: '' },
-      tariffItems: { type: Array, default: () => [] },
-      labels: { type: Array, default: () => [] },
-      rangeMargin: { type: Number, default: 1 },
-      step: { type: Number, default: 1 },
-      minWidth: { type: Number, default: 1 },
-      canOverlap: { type: Boolean, default: true },
-      disabled: { type: Boolean, default: false }
-    },
-    data() {
-      return {
-        showBarOptions: false,
-        barOptionsPosition: { x: 0, y: 0 },
-        barOptionsList: [],
-        barOptionsType: null, // can be "add" or "delete"
-        activeLabel: null,
-        activeItem: null,
-        OverlapId: [],
-        hasOverlap: false
-      }
+export default {
+  name: 'RangeSlider',
+  props: {
+    dataLocation: { type: String, default: '' },
+    tariffItems: { type: Array, default: () => [] },
+    labels: { type: Array, default: () => [] },
+    rangeMargin: { type: Number, default: 1 },
+    step: { type: Number, default: 1 },
+    minWidth: { type: Number, default: 1 },
+    canOverlap: { type: Boolean, default: true },
+    disabled: { type: Boolean, default: false }
+  },
+  components: {
+    Bar,
+    Label,
+    Labels,
+    Ruler,
+    Slider,
+    AddIcon,
+    SubRuler,
+    BarSlider,
+    RulerRule,
+    HandleIcon,
+    BarWrapper,
+    ErrorMessage,
+    RulerSubRule,
+    BarContainer,
+    SliderWrapper,
+    VerticalLabel,
+    RangeSliderContainer,
+    BarOptionsContainer,
+    BarItemContainer,
+    BarItemText
+  },
+  data() {
+    return {
+      showBarOptions: false,
+      barOptionsPosition: { x: 0, y: 0 },
+      barOptionsList: [],
+      barOptionsType: null, // can be "add" or "delete"
+      activeLabel: null,
+      activeItem: null,
+      OverlapId: [],
+      hasOverlap: false
+    }
+  },
+  computed: {
+    maximum() {
+      if (!this.labels.length) return
+
+      return this.topLabels.at(-1)
     },
-    computed: {
-      maximum() {
-        if (!this.labels.length) return
-
-        return this.topLabels.at(-1)
-      },
-      minimum() {
-        if (!this.labels.length) return
-
-        return this.topLabels[0]
-      },
-      topLabels() {
-        if (!this.labels.length) return
-        const labels = this.labels.find((label) => label.placement === 'top')
-
-        return labels ? labels.value : []
-      },
-      leftLabels() {
-        if (!this.labels.length) return
-        const labels = this.labels.find((label) => label.placement === 'left')
-        return labels ? labels.value : []
-      },
-      stepCount() {
-        let labels = this.topLabels || []
-
-        if (labels.length) {
-          return labels.length - 1
-        }
+    minimum() {
+      if (!this.labels.length) return
 
-        return Math.floor((this.maximum - this.minimum) / this.step)
-      },
-      subStepCount() {
-        let labels = this.topLabels || []
+      return this.topLabels[0]
+    },
+    topLabels() {
+      if (!this.labels.length) return
+      const labels = this.labels.find((label) => label.placement === 'top')
 
-        if (labels.length && this.step) {
-          return (this.maximum - this.minimum) / this.step
-        }
+      return labels ? labels.value : []
+    },
+    leftLabels() {
+      if (!this.labels.length) return
+      const labels = this.labels.find((label) => label.placement === 'left')
+      return labels ? labels.value : []
+    },
+    stepCount() {
+      let labels = this.topLabels || []
 
-        return 0
+      if (labels.length) {
+        return labels.length - 1
       }
+
+      return Math.floor((this.maximum - this.minimum) / this.step)
     },
-    watch: {
-      labels(newVal, oldVal) {
-        const overlapContainer = []
-
-        //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) => {
-                const hasOverlap = this.checkOverlap(
-                  tariff,
-                  label.selectedTariffs
-                )
-
-                if (hasOverlap) overlapContainer.push(label.id)
-              })
-            })
-          }
+    subStepCount() {
+      let labels = this.topLabels || []
 
-          const hasOverlap = overlapContainer.length > 0
+      if (labels.length && this.step) {
+        return (this.maximum - this.minimum) / this.step
+      }
 
-          if (!hasOverlap) {
-            this.OverlapId = []
-          } else {
-            this.OverlapId = [...new Set(overlapContainer)]
-          }
+      return 0
+    }
+  },
+  methods: {
+    onChange(type, value) {
+      this.$emit(type, value)
+    },
+    checkOverlap(value, tariffs) {
+      // Check if the tariffs overlap
+      const min = parseFloat(value.min)
+      const max = parseFloat(value.max)
+
+      return tariffs.some((tariff) => {
+        if (tariff.id === value.itemId || tariff.id === value.id) 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)
+        )
+      })
+    },
+    barOptionLabel(value) {
+      if (this.barOptionsType === 'add')
+        return `${this.$gettext('Add')} ${value}`
 
-          this.hasOverlap = hasOverlap
-          this.$emit('has-overlap', hasOverlap)
-        }
-      }
+      return `${this.$gettext('Remove')} ${value}`
+    },
+    onActivateBar({ item }) {
+      this.$emit('activate')
+      this.activeItem = item
+      document.addEventListener('keydown', this.onKeyDownDelete)
     },
-    beforeDestroy() {
-      // Remove the global click event listener to prevent memory leaks
-      document.removeEventListener('click', this.handleOutsideClick)
+    onDeactivateBar() {
+      this.$emit('deactivate')
+      this.activeItem = null
       document.removeEventListener('keydown', this.onKeyDownDelete)
     },
-    methods: {
-      onChange(type, value) {
-        this.$emit(type, value)
-      },
-      checkOverlap(value, tariffs) {
-        // Check if the tariffs overlap
-        const min = parseFloat(value.min)
-        const max = parseFloat(value.max)
-
-        return tariffs.some((tariff) => {
-          if (tariff.id === value.itemId || tariff.id === value.id) 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)
-          )
+    onKeyDownDelete(event) {
+      // Check if the pressed key is the Delete or Backspace key
+      if (
+        (event.key === 'Delete' || event.key === 'Backspace') &&
+        this.activeItem
+      ) {
+        this.$emit('on-bar-tariff-click', {
+          type: 'delete',
+          item: this.activeItem,
+          label: this.activeLabel
         })
-      },
-      barOptionLabel(value) {
-        if (this.barOptionsType === 'add')
-          return `${this.$gettext('Add')} ${value}`
-
-        return `${this.$gettext('Remove')} ${value}`
-      },
-      onActivateBar({ item }) {
-        this.$emit('activate')
-        this.activeItem = item
-        document.addEventListener('keydown', this.onKeyDownDelete)
-      },
-      onDeactivateBar() {
-        this.$emit('deactivate')
         this.activeItem = null
-        document.removeEventListener('keydown', this.onKeyDownDelete)
-      },
-      onKeyDownDelete(event) {
-        // Check if the pressed key is the Delete or Backspace key
-        if (
-          (event.key === 'Delete' || event.key === 'Backspace') &&
-          this.activeItem
-        ) {
-          this.$emit('on-bar-tariff-click', {
-            type: 'delete',
-            item: this.activeItem,
-            label: this.activeLabel
-          })
-          this.activeItem = null
-        }
-      },
-      onBarTariffClick({ item, type, label }) {
-        if (this.disabled) return
+      }
+    },
+    onBarTariffClick({ item, type, label }) {
+      if (this.disabled) return
+
+      this.$emit('on-bar-tariff-click', {
+        type,
+        item,
+        label
+      })
+
+      this.activeLabel = label
+      this.barOptionsType = type
+      this.showBarOptions = false
+    },
+    setBarOptions(bar) {
+      this.barOptionsList = []
 
-        this.$emit('on-bar-tariff-click', {
-          type,
-          item,
-          label
+      if (this.barOptionsType === 'add') {
+        this.tariffItems.forEach((item) => {
+          if (item.name && item.name.length) {
+            this.barOptionsList.push(item)
+          }
         })
-
-        this.activeLabel = label
-        this.barOptionsType = type
+      } else {
+        // add based on the index in the chart.
+        this.barOptionsList.push({
+          name: bar.name,
+          id: bar.id
+        })
+      }
+    },
+    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
+      event.preventDefault()
+      this.activeLabel = label
+      this.barOptionsType = type
+      this.setBarOptions(bar)
+
+      if (this.barOptionsList.length) {
+        this.showBarOptions = true
+        this.barOptionsPosition = { x: event.clientX, y: event.clientY }
+        document.addEventListener('click', this.handleOutsideClick)
+      } else {
         this.showBarOptions = false
-      },
-      setBarOptions(bar) {
-        this.barOptionsList = []
-
-        if (this.barOptionsType === 'add') {
-          this.tariffItems.forEach((item) => {
-            if (item.name && item.name.length) {
-              this.barOptionsList.push(item)
-            }
-          })
-        } else {
-          // add based on the index in the chart.
-          this.barOptionsList.push({
-            name: bar.name,
-            id: bar.id
+      }
+    },
+    handleOutsideClick(event) {
+      // Check if the click occurred outside the dropdown
+      if (
+        this.$refs.barDropdown &&
+        !this.$refs.barDropdown.$el.contains(event.target)
+      ) {
+        // Hide the dropdown
+        this.showBarOptions = false
+        // Remove the global click event listener
+        document.removeEventListener('click', this.handleOutsideClick)
+      }
+    }
+  },
+  beforeDestroy() {
+    // Remove the global click event listener to prevent memory leaks
+    document.removeEventListener('click', this.handleOutsideClick)
+    document.removeEventListener('keydown', this.onKeyDownDelete)
+  },
+  watch: {
+    labels(newVal, oldVal) {
+      const overlapContainer = []
+
+      //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) => {
+              const hasOverlap = this.checkOverlap(
+                tariff,
+                label.selectedTariffs
+              )
+
+              if (hasOverlap) overlapContainer.push(label.id)
+            })
           })
         }
-      },
-      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
-        event.preventDefault()
-        this.activeLabel = label
-        this.barOptionsType = type
-        this.setBarOptions(bar)
-
-        if (this.barOptionsList.length) {
-          this.showBarOptions = true
-          this.barOptionsPosition = { x: event.clientX, y: event.clientY }
-          document.addEventListener('click', this.handleOutsideClick)
+
+        const hasOverlap = overlapContainer.length > 0
+
+        if (!hasOverlap) {
+          this.OverlapId = []
         } else {
-          this.showBarOptions = false
-        }
-      },
-      handleOutsideClick(event) {
-        // Check if the click occurred outside the dropdown
-        if (
-          this.$refs.barDropdown &&
-          !this.$refs.barDropdown.$el.contains(event.target)
-        ) {
-          // Hide the dropdown
-          this.showBarOptions = false
-          // Remove the global click event listener
-          document.removeEventListener('click', this.handleOutsideClick)
+          this.OverlapId = [...new Set(overlapContainer)]
         }
+
+        this.hasOverlap = hasOverlap
+        this.$emit('has-overlap', hasOverlap)
       }
     }
   }
+}
 </script>