@eturnity/eturnity_reusable_components 7.4.4-EPDM-9677.0 → 7.4.4-EPDM-7260.2

package/src/components/rangeSlider/index.vue

@@ -0,0 +1,488 @@
+<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
+            @contextmenu="
+              onBarRightClick({ event: $event, label, type: 'add' })
+            "
+          >
+            <SliderWrapper>
+              <Slider
+                v-for="(bar, index) in label.selectedTariffs"
+                :key="index"
+                :active="!disabled"
+                :draggable="!disabled"
+                :resizable="!disabled"
+                :color="
+                  hasOverlap && OverlapId === 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
+                    },
+                    label.id,
+                    label.selectedTariffs
+                  )
+                "
+                @resizeStop="
+                  onChange(
+                    'resize',
+                    {
+                      itemId: bar.id,
+                      entityId: label.id,
+                      ...$event
+                    },
+                    label.id,
+                    label.selectedTariffs
+                  )
+                "
+                @contextmenu.native.stop="
+                  onBarRightClick({
+                    event: $event,
+                    label,
+                    type: 'delete',
+                    bar
+                  })
+                "
+                @activated="onActivateBar({ item: bar })"
+                @deactivated="onDeactivateBar()"
+              >
+                <template #mr>
+                  <HandleIcon name="handle" size="50px" cursor="pointer" />
+                </template>
+                <template #ml>
+                  <HandleIcon name="handle" size="50px" cursor="pointer" />
+                </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 === 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 })"
+      >
+        <icon
+          :name="barOptionsType === 'add' ? 'add_icon' : 'delete'"
+          size="14px"
+        />
+        <bar-item-text>{{ item.name }}</bar-item-text>
+      </bar-item-container>
+    </bar-options-container>
+  </RangeSliderContainer>
+</template>
+
+<script>
+import styled from 'vue-styled-components'
+
+import SliderComponent from './Slider'
+import Icon from '../icon'
+
+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 }
+const Slider = styled(SliderComponent, sliderAttrs)`
+  cursor: pointer;
+  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 HandleIcon = styled(Icon)`
+  width: auto;
+  min-width: 0;
+  margin: -12px;
+`
+
+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: {
+    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,
+    SubRuler,
+    BarSlider,
+    RulerRule,
+    HandleIcon,
+    BarWrapper,
+    ErrorMessage,
+    RulerSubRule,
+    BarContainer,
+    SliderWrapper,
+    VerticalLabel,
+    RangeSliderContainer,
+    BarOptionsContainer,
+    BarItemContainer,
+    BarItemText,
+    Icon
+  },
+  data() {
+    return {
+      showBarOptions: false,
+      barOptionsPosition: { x: 0, y: 0 },
+      barOptionsList: [],
+      barOptionsType: null, // can be "add" or "delete"
+      activeLabel: null,
+      activeItem: null,
+      OverlapId: null,
+      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, entityId, tariffs) {
+      this.$emit(type, value)
+
+      this.hasOverlap = this.checkOverlap(value, tariffs)
+      this.OverlapId = this.hasOverlap ? entityId : null
+    },
+    checkOverlap(value, tariffs) {
+      // Check if the tariffs overlap
+      const { itemId, min, max } = value
+
+      return tariffs.some((tariff) => {
+        if (tariff.id === itemId) return false
+
+        return (
+          (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.activeItem = item
+      document.addEventListener('keydown', this.onKeyDownDelete)
+    },
+    onDeactivateBar() {
+      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 }) {
+      this.$emit('on-bar-tariff-click', {
+        type: this.barOptionsType,
+        item,
+        label: this.activeLabel
+      })
+      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,
+          index: bar.index
+        })
+      }
+    },
+    onBarRightClick({ event, label, type, bar }) {
+      // 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
+      // 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 }
+        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)
+  },
+  mounted() {
+    // TODO: remove
+    // this.tariffItems.forEach((item) => {
+    //   item.tariff_time_mfr.forEach((tariff) => {
+    //     tariff.time_to = '12:00:00'
+    //     tariff.time_up_to = '12:00:00'
+    //   })
+    // })
+    console.log('mounted tariffItems', this.tariffItems)
+  }
+}
+</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/selectedOptions/index.vue

@@ -0,0 +1,145 @@
+<template>
+  <page-container>
+    <box-container>
+      <selected-container
+        >{{ numberSelected }} {{ $gettext('selected') }}</selected-container
+      >
+      <list-container v-if="optionsList.length">
+        <list-item
+          v-for="item in optionsList"
+          :key="item.type"
+          :hoverColor="item.hoverColor"
+          @click="$emit('on-' + item.type)"
+        >
+          {{ item.name }}
+        </list-item>
+      </list-container>
+      <empty-text v-if="!optionsList.length">
+        {{ $gettext('no_batch_actions_available') }}
+      </empty-text>
+      <icon-container @click="$emit('on-close')">
+        <icon
+          name="close_for_modals,_tool_tips"
+          color="white"
+          size="14px"
+          cursor="pointer"
+        />
+      </icon-container>
+    </box-container>
+  </page-container>
+</template>
+
+<script>
+// import SelectedOptions from "@eturnity/eturnity_reusable_components/src/components/selectedOptions"
+// optionsList = [
+//   {
+//     type: 'export',
+//     name: 'Export'
+//   },
+//   {
+//     type: 'delete',
+//     name: 'Delete',
+//     hoverColor: 'red' // default is green
+//   }
+// ]
+// @on-${type}="function" should $emit the callback for the 'type' in the optionsList
+// <selected-options
+//   :numberSelected="numberSelected"
+//   :optionsList="optionsList"
+//   @on-close="onCloseFunction()"
+//   @on-export="function()" @on-delete="function()"
+// />
+import styled from 'vue-styled-components'
+import Icon from '../icon'
+
+const PageContainer = styled.div`
+  position: fixed;
+  bottom: 30px;
+  left: 50%;
+  transform: translateX(-50%);
+`
+
+const SelectedContainer = styled.div`
+  display: grid;
+  align-items: center;
+  height: 100%;
+  padding-right: 20px;
+  border-right: 1px solid rgba(255, 255, 255, 0.2);
+`
+
+const BoxContainer = styled.div`
+  display: flex;
+  align-items: center;
+  background-color: ${(props) => props.theme.colors.black};
+  opacity: 90%;
+  color: ${(props) => props.theme.colors.white};
+  border-radius: 4px;
+  padding: 8px 10px 8px 20px;
+  font-size: 14px;
+  height: 40px;
+`
+
+const ListContainer = styled.div`
+  padding: 0 20px;
+  display: flex;
+  gap: 20px;
+  color: ${(props) => props.theme.colors.white};
+`
+
+const ListAttrs = {
+  hoverColor: String
+}
+const ListItem = styled('div', ListAttrs)`
+  cursor: pointer;
+  &:hover {
+    color: ${(props) =>
+      props.hoverColor
+        ? props.theme.colors[props.hoverColor]
+        : props.theme.colors.green};
+  }
+`
+
+const IconContainer = styled.div`
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  height: 30px;
+  width: 30px;
+  cursor: pointer;
+  margin-left: 20px;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+  }
+`
+
+const EmptyText = styled.div`
+  color: ${(props) => props.theme.colors.white};
+  font-size: 13px;
+  padding-left: 16px;
+`
+
+export default {
+  name: 'selected-options',
+  components: {
+    PageContainer,
+    BoxContainer,
+    SelectedContainer,
+    ListContainer,
+    ListItem,
+    Icon,
+    IconContainer,
+    EmptyText
+  },
+  props: {
+    optionsList: {
+      required: true
+    },
+    numberSelected: {
+      required: true,
+      default: 0
+    }
+  }
+}
+</script>