@eturnity/eturnity_reusable_components 7.24.2 → 7.24.3

package/src/components/rangeSlider/index.vue

@@ -0,0 +1,517 @@
+<template>
+  <RangeSliderContainer>
+    <Labels v-if="topLabels && topLabels.length > 0">
+      <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">
+        <VerticalLabel>{{ label.name }}</VerticalLabel>
+        <BarSlider>
+          <Bar
+            @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"
+                :max="bar.max"
+                :z="index"
+                :step="step"
+                :stepCount="stepCount"
+                :subStepCount="subStepCount"
+                @dragStop="
+                  onChange('drag', {
+                    itemId: bar.id,
+                    parentId: bar.parentId,
+                    entityId: label.id,
+                    ...$event
+                  })
+                "
+                @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 />
+                </template>
+                <template #ml>
+                  <HandleIcon />
+                </template>
+              </Slider>
+            </SliderWrapper>
+          </Bar>
+          <Ruler>
+            <RulerRule v-for="n in stepCount" :key="n"></RulerRule>
+          </Ruler>
+          <SubRuler>
+            <RulerSubRule v-for="n in subStepCount" :key="n"></RulerSubRule>
+          </SubRuler>
+          <ErrorMessage
+            v-if="!canOverlap && hasOverlap && OverlapId.includes(label.id)"
+          >
+            *{{ $gettext('overlap_error_message') }}
+          </ErrorMessage>
+        </BarSlider>
+      </BarWrapper>
+    </BarContainer>
+    <bar-options-container
+      v-if="showBarOptions"
+      :top="barOptionsPosition.y"
+      :left="barOptionsPosition.x"
+      ref="barDropdown"
+    >
+      <bar-item-container
+        v-for="item in barOptionsList"
+        :key="item.id"
+        @click="
+          onBarTariffClick({ item, type: barOptionsType, label: activeLabel })
+        "
+      >
+        <AddIcon />
+        <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 SliderComponent from './Slider'
+
+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)`
+  cursor: ${(props) => (props.draggable ? 'pointer' : 'not-allowed')};
+  opacity: 0.7;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: unset !important;
+  background-color: ${(props) => props.color};
+`
+
+const ErrorMessage = styled.p`
+  color: ${(props) => props.theme.colors.red};
+  font-style: italic;
+  font-size: 13px;
+  margin-top: 5px;
+`
+
+const Bar = styled.div`
+  display: flex;
+  margin-bottom: -30px;
+  margin-left: 1px;
+  background-color: #f6faff;
+  width: 100%;
+  background-color: ${(props) => props.theme.colors.gray1};
+`
+
+const Ruler = styled.div`
+  margin: 10px 0px -5px 0px;
+  display: flex;
+  overflow: hidden;
+`
+
+const RulerRule = styled.div`
+  border-left: solid 1px ${(props) => props.theme.colors.grey2};
+  border-bottom: solid 1px ${(props) => props.theme.colors.grey2};
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 1;
+  padding: 10px 0px;
+
+  &:last-child {
+    border-right: solid 1px ${(props) => props.theme.colors.grey2};
+  }
+`
+
+const SubRuler = styled.div`
+  margin: -7px 0px -5px 0px;
+  display: flex;
+`
+
+const RulerSubRule = styled.div`
+  border-left: solid 1px ${(props) => props.theme.colors.grey2};
+  border-bottom: solid 1px ${(props) => props.theme.colors.grey2};
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 1;
+  padding: 3px 0px;
+
+  &:last-child {
+    border-right: solid 1px ${(props) => props.theme.colors.grey2};
+  }
+
+  &:nth-child(odd) {
+    margin-top: -5px;
+    padding: 5px 0px;
+  }
+`
+
+const BarSlider = styled.div`
+  width: 100%;
+`
+
+const BarContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+const BarWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin: 20px 0px;
+  align-items: center;
+`
+
+const RangeSliderContainer = styled.div`
+  display: flex;
+  position: relative;
+  padding: 20px 10px;
+  flex-direction: column;
+  user-select: none;
+  width: 100%;
+`
+
+const Labels = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 0px;
+  margin: 10px -100px 0px 100px;
+  width: calc(100% - 100px);
+`
+
+const Label = styled.div`
+  font-size: 80%;
+  display: flex;
+  width: 1px;
+  justify-content: center;
+`
+
+const VerticalLabel = styled.div`
+  text-align: left;
+  min-width: 100px;
+  font-size: 13px;
+`
+
+const AddIcon = styled(add)`
+    width: 33px;
+    height: 29px;
+    fill: black
+    margin-left: -17px;
+    margin-top: -10px;
+`
+
+const HandleIcon = styled(handleSVG)`
+  width: 13px;
+  min-width: 0;
+  margin: -6px;
+`
+
+const BarOptionAttrs = { top: Number, left: Number }
+const BarOptionsContainer = styled('div', BarOptionAttrs)`
+  display: grid;
+  position: fixed;
+  z-index: 9999;
+  border-radius: 4px;
+  background-color: ${(props) => props.theme.colors.white};
+  padding: 6px 10px;
+  border: 1px solid ${(props) => props.theme.colors.grey4};
+  top: ${(props) => props.top + 'px'};
+  left: ${(props) => props.left + 'px'};
+`
+
+const BarItemContainer = styled.div`
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-gap: 12px;
+  align-items: center;
+  cursor: pointer;
+  padding: 6px 10px;
+  border-radius: 4px;
+
+  &:hover {
+    background-color: ${(props) => props.theme.colors.lightGray};
+  }
+`
+
+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)
+    },
+    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
+      }
+
+      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
+      }
+
+      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}`
+
+      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
+
+      this.$emit('on-bar-tariff-click', {
+        type,
+        item,
+        label
+      })
+
+      this.activeLabel = label
+      this.barOptionsType = type
+      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
+        })
+      }
+    },
+    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.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)
+            })
+          })
+        }
+
+        const hasOverlap = overlapContainer.length > 0
+
+        if (!hasOverlap) {
+          this.OverlapId = []
+        } else {
+          this.OverlapId = [...new Set(overlapContainer)]
+        }
+
+        this.hasOverlap = hasOverlap
+        this.$emit('has-overlap', hasOverlap)
+      }
+    }
+  }
+}
+</script>

package/src/components/rangeSlider/utils/dom.js

@@ -0,0 +1,49 @@
+import { isFunction } from './fns'
+
+export function matchesSelectorToParentElements (el, selector, baseNode) {
+  let node = el
+
+  const matchesSelectorFunc = [
+    'matches',
+    'webkitMatchesSelector',
+    'mozMatchesSelector',
+    'msMatchesSelector',
+    'oMatchesSelector'
+  ].find(func => isFunction(node[func]))
+
+  if (!isFunction(node[matchesSelectorFunc])) return false
+
+  do {
+    if (node[matchesSelectorFunc](selector)) return true
+    if (node === baseNode) return false
+    node = node.parentNode
+  } while (node)
+
+  return false
+}
+
+export function addEvent (el, event, handler) {
+  if (!el) {
+    return
+  }
+  if (el.attachEvent) {
+    el.attachEvent('on' + event, handler)
+  } else if (el.addEventListener) {
+    el.addEventListener(event, handler, true)
+  } else {
+    el['on' + event] = handler
+  }
+}
+
+export function removeEvent (el, event, handler) {
+  if (!el) {
+    return
+  }
+  if (el.detachEvent) {
+    el.detachEvent('on' + event, handler)
+  } else if (el.removeEventListener) {
+    el.removeEventListener(event, handler, true)
+  } else {
+    el['on' + event] = null
+  }
+}

package/src/components/rangeSlider/utils/fns.js

@@ -0,0 +1,26 @@
+export function isFunction(func) {
+  return (
+    typeof func === 'function' ||
+    Object.prototype.toString.call(func) === '[object Function]'
+  )
+}
+
+export function snapToGrid(grid, pendingX) {
+  return Math.round(pendingX / grid) * grid
+}
+
+export function computeWidth(left, right) {
+  return right - left
+}
+
+export function restrictToBounds(value, min, max) {
+  if (min !== null && value < min) {
+    return min
+  }
+
+  if (max !== null && max < value) {
+    return max
+  }
+
+  return value
+}

package/src/components/threeDots/index.vue

@@ -1,5 +1,9 @@
 <template>
-  <page-container @click="toggleButton()" ref="pageContainer" :activated="isOpen">
+  <page-container
+    @click="toggleButton()"
+    ref="pageContainer"
+    :activated="isOpen"
+  >
     <button-container ref="dropdownItem">
       <dot-item />
       <dot-item />
@@ -44,7 +48,9 @@
             :key="item.value"
             :data-id="item.dataId"
             tabindex="0"
-            @click.stop="onSelect({ item: item, hasChildren: hasChildren(item) })"
+            @click.stop="
+              onSelect({ item: item, hasChildren: hasChildren(item) })
+            "
             @keyup.enter="
               onSelect({ item: item, hasChildren: hasChildren(item) })
             "
@@ -136,7 +142,8 @@ const PageContainer = styled('div', PageContainerAttrs)`
   width: 30px;
   height: 30px;
   border-radius: 4px;
-  background-color: ${(props) => props.activated ? props.theme.colors.grey5 : ''};
+  background-color: ${(props) =>
+    props.activated ? props.theme.colors.grey5 : ''};
 
   &:hover {
     background-color: ${(props) => props.theme.colors.grey5};
@@ -325,21 +332,28 @@ export default {
       const positionArray = this.determineElementQuarter(button, rectButton)
       contextMenu.style.transform = ''
       if (positionArray.includes('left')) {
-        contextMenu.style.left = (rectButton.right - rectRelativeParent.left + 5) + 'px'
+        contextMenu.style.left =
+          rectButton.right - rectRelativeParent.left + 5 + 'px'
       } else {
-        contextMenu.style.left = (rectButton.left - rectRelativeParent.left - 5) + 'px'
+        contextMenu.style.left =
+          rectButton.left - rectRelativeParent.left - 5 + 'px'
         contextMenu.style.transform = 'translateX(-100%)'
       }
       if (positionArray.includes('top')) {
-        contextMenu.style.top = (rectButton.top - rectRelativeParent.top) + 'px'
+        contextMenu.style.top = rectButton.top - rectRelativeParent.top + 'px'
       } else {
-        contextMenu.style.top = (rectButton.bottom - rectRelativeParent.top) + 'px'
+        contextMenu.style.top =
+          rectButton.bottom - rectRelativeParent.top + 'px'
         contextMenu.style.transform += ' translateY(-100%)'
       }
     },
     findRelativeParent(element) {
       while (element.parentElement) {
-        if (window.getComputedStyle(element.parentElement).position === 'relative' || window.getComputedStyle(element.parentElement).position === 'absolute') {
+        if (
+          window.getComputedStyle(element.parentElement).position ===
+            'relative' ||
+          window.getComputedStyle(element.parentElement).position === 'absolute'
+        ) {
           return element.parentElement
         }
         element = element.parentElement

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