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

package/src/components/rangeSlider/index.vue

@@ -1,41 +1,52 @@
 <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
                 "
-                :minWidth="minWidth"
-                :min="bar.min"
+                :data-id="`slider_bar_item_${dataLocation}_${label.id}_${bar.name}`"
+                :draggable="!disabled"
                 :max="bar.max"
-                :z="index"
+                :min="bar.min"
+                :min-width="minWidth"
+                :resizable="!disabled"
                 :step="step"
-                :stepCount="stepCount"
-                :subStepCount="subStepCount"
-                @dragStop="
+                :step-count="stepCount"
+                :sub-step-count="subStepCount"
+                :z="index"
+                @activated="onActivateBar({ item: bar })"
+                @click.native.stop="
+                  onBarTariffClick({ item: bar, type: 'delete', label })
+                "
+                @deactivated="onDeactivateBar()"
+                @drag-stop="
                   onChange('drag', {
                     itemId: bar.id,
                     parentId: bar.parentId,
@@ -43,18 +54,13 @@
                     ...$event
                   })
                 "
-                @resizeStop="
+                @resize-stop="
                   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 />
@@ -66,10 +72,16 @@
             </SliderWrapper>
           </Bar>
           <Ruler>
-            <RulerRule v-for="n in stepCount" :key="n"></RulerRule>
+            <RulerRule
+              v-for="n in stepCount"
+              :key="n"
+            />
           </Ruler>
           <SubRuler>
-            <RulerSubRule v-for="n in subStepCount" :key="n"></RulerSubRule>
+            <RulerSubRule
+              v-for="n in subStepCount"
+              :key="n"
+            />
           </SubRuler>
           <ErrorMessage
             v-if="!canOverlap && hasOverlap && OverlapId.includes(label.id)"
@@ -79,13 +91,13 @@
         </BarSlider>
       </BarWrapper>
     </BarContainer>
-    <bar-options-container
+    <BarOptionsContainer
       v-if="showBarOptions"
-      :top="barOptionsPosition.y"
-      :left="barOptionsPosition.x"
       ref="barDropdown"
+      :left="barOptionsPosition.x"
+      :top="barOptionsPosition.y"
     >
-      <bar-item-container
+      <BarItemContainer
         v-for="item in barOptionsList"
         :key="item.id"
         @click="
@@ -93,29 +105,29 @@
         "
       >
         <AddIcon />
-        <bar-item-text>{{ item.name }}</bar-item-text>
-      </bar-item-container>
-    </bar-options-container>
+        <BarItemText>{{ item.name }}</BarItemText>
+      </BarItemContainer>
+    </BarOptionsContainer>
   </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;
@@ -125,14 +137,14 @@ const Slider = styled(SliderComponent, sliderAttrs)`
   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;
@@ -141,13 +153,13 @@ const Bar = styled.div`
   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;
@@ -160,12 +172,12 @@ const RulerRule = styled.div`
   }
 `
 
-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;
@@ -183,23 +195,23 @@ const RulerSubRule = styled.div`
   }
 `
 
-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;
@@ -208,7 +220,7 @@ const RangeSliderContainer = styled.div`
   width: 100%;
 `
 
-const Labels = styled.div`
+  const Labels = styled.div`
   display: flex;
   justify-content: space-between;
   padding: 0px;
@@ -216,20 +228,20 @@ const Labels = styled.div`
   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
@@ -237,14 +249,14 @@ const AddIcon = styled(add)`
     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;
@@ -256,7 +268,7 @@ const BarOptionsContainer = styled('div', BarOptionAttrs)`
   left: ${(props) => props.left + 'px'};
 `
 
-const BarItemContainer = styled.div`
+  const BarItemContainer = styled.div`
   display: grid;
   grid-template-columns: auto 1fr;
   grid-gap: 12px;
@@ -270,248 +282,248 @@ const BarItemContainer = styled.div`
   }
 `
 
-const BarItemText = styled.div`
+  const BarItemText = styled.div`
   font-size: 13px;
 `
 
-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)
+  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
     },
-    minimum() {
-      if (!this.labels.length) return
-
-      return this.topLabels[0]
+    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 }
     },
-    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 : []
+    data() {
+      return {
+        showBarOptions: false,
+        barOptionsPosition: { x: 0, y: 0 },
+        barOptionsList: [],
+        barOptionsType: null, // can be "add" or "delete"
+        activeLabel: null,
+        activeItem: null,
+        OverlapId: [],
+        hasOverlap: false
+      }
     },
-    stepCount() {
-      let labels = this.topLabels || []
+    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
+        }
 
-      if (labels.length) {
-        return labels.length - 1
-      }
+        return Math.floor((this.maximum - this.minimum) / this.step)
+      },
+      subStepCount() {
+        let labels = this.topLabels || []
 
-      return Math.floor((this.maximum - this.minimum) / this.step)
-    },
-    subStepCount() {
-      let labels = this.topLabels || []
+        if (labels.length && this.step) {
+          return (this.maximum - this.minimum) / this.step
+        }
 
-      if (labels.length && this.step) {
-        return (this.maximum - this.minimum) / this.step
+        return 0
       }
-
-      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}`
+    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)
+              })
+            })
+          }
 
-      return `${this.$gettext('Remove')} ${value}`
-    },
-    onActivateBar({ item }) {
-      this.$emit('activate')
-      this.activeItem = item
-      document.addEventListener('keydown', this.onKeyDownDelete)
+          const hasOverlap = overlapContainer.length > 0
+
+          if (!hasOverlap) {
+            this.OverlapId = []
+          } else {
+            this.OverlapId = [...new Set(overlapContainer)]
+          }
+
+          this.hasOverlap = hasOverlap
+          this.$emit('has-overlap', hasOverlap)
+        }
+      }
     },
-    onDeactivateBar() {
-      this.$emit('deactivate')
-      this.activeItem = null
+    beforeDestroy() {
+      // Remove the global click event listener to prevent memory leaks
+      document.removeEventListener('click', this.handleOutsideClick)
       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
+    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}`
+
+        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
-      }
-    },
-    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 = []
+        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
 
-      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
+        this.$emit('on-bar-tariff-click', {
+          type,
+          item,
+          label
         })
-      }
-    },
-    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
-      }
-    },
-    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.activeLabel = label
+        this.barOptionsType = type
         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)
-            })
+      },
+      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
           })
         }
-
-        const hasOverlap = overlapContainer.length > 0
-
-        if (!hasOverlap) {
-          this.OverlapId = []
+      },
+      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.OverlapId = [...new Set(overlapContainer)]
+          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.hasOverlap = hasOverlap
-        this.$emit('has-overlap', hasOverlap)
       }
     }
   }
-}
 </script>