@eturnity/eturnity_reusable_components 8.22.23-EPDM-14087.2 → 8.26.0

package/src/components/rangeSlider/RangeSlider.spec.js

@@ -0,0 +1,178 @@
+// Mock SVG components
+const SvgMock = {
+  name: 'SvgMock',
+  template: '<div class="mock-svg"></div>',
+}
+
+// Mock Slider component
+const Slider = {
+  name: 'Slider',
+  template: '<div class="mock-slider"></div>',
+  props: [
+    'color',
+    'draggable',
+    'max',
+    'min',
+    'minWidth',
+    'resizable',
+    'step',
+    'stepCount',
+    'subStepCount',
+    'z',
+  ],
+  emits: ['drag-stop', 'resize-stop', 'activated', 'deactivated'],
+}
+
+jest.mock('../../assets/svgIcons/handle.svg', () => SvgMock)
+jest.mock('../../assets/svgIcons/add_icon.svg', () => SvgMock)
+jest.mock('./Slider', () => Slider)
+
+import { mount } from '@vue/test-utils'
+import RangeSlider from './index.vue'
+
+const baseProps = {
+  dataLocation: 'test',
+  tariffItems: [
+    { id: 1, name: 'Tariff A', color: '#4CAF50' },
+    { id: 2, name: 'Tariff B', color: '#2196F3' },
+  ],
+  labels: [
+    {
+      placement: 'top',
+      value: ['00:00', '12:00', '24:00'],
+    },
+    {
+      placement: 'left',
+      value: [
+        {
+          id: 1,
+          name: 'Group 1',
+          selectedTariffs: [
+            {
+              id: 1,
+              name: 'Tariff A',
+              min: 0,
+              max: 12,
+              color: '#4CAF50',
+              parentId: 1,
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  rangeMargin: 1,
+  step: 1,
+  minWidth: 1,
+  canOverlap: true,
+  disabled: false,
+}
+
+describe('RangeSlider', () => {
+  it('renders top and left labels', () => {
+    const wrapper = mount(RangeSlider, { props: baseProps })
+    expect(wrapper.text()).toContain('00:00')
+    expect(wrapper.text()).toContain('Group 1')
+  })
+
+  it('renders sliders for selected tariffs', () => {
+    const wrapper = mount(RangeSlider, { props: baseProps })
+    // Should render one slider for Tariff A
+    expect(wrapper.findAll('[data-id^="slider_bar_item_"]').length).toBe(1)
+  })
+
+  it('emits onChange when slider is dragged or resized', async () => {
+    const wrapper = mount(RangeSlider, { props: baseProps })
+    // Simulate drag-stop event on Slider
+    await wrapper
+      .findComponent({ name: 'Slider' })
+      .vm.$emit('drag-stop', { min: 2, max: 10 })
+    expect(wrapper.emitted().drag).toBeTruthy()
+  })
+
+  it('shows error message when overlap is detected and canOverlap is false', async () => {
+    const overlappingLabels = [
+      baseProps.labels[0],
+      {
+        placement: 'left',
+        value: [
+          {
+            id: 1,
+            name: 'Group 1',
+            selectedTariffs: [
+              {
+                id: 1,
+                name: 'Tariff A',
+                min: 0,
+                max: 12,
+                color: '#4CAF50',
+                parentId: 1,
+              },
+              {
+                id: 2,
+                name: 'Tariff B',
+                min: 10,
+                max: 20,
+                color: '#2196F3',
+                parentId: 1,
+              },
+            ],
+          },
+        ],
+      },
+    ]
+
+    // First mount with non-overlapping labels
+    const wrapper = mount(RangeSlider, {
+      props: {
+        ...baseProps,
+        canOverlap: false,
+        labels: baseProps.labels, // Start with non-overlapping labels
+      },
+      global: {
+        mocks: {
+          $gettext: (msg) => msg,
+        },
+      },
+    })
+
+    // Wait for initial mount
+    await wrapper.vm.$nextTick()
+
+    // Now update with overlapping labels
+    await wrapper.setProps({ labels: overlappingLabels })
+
+    // Wait for all updates to complete
+    await wrapper.vm.$nextTick()
+    await new Promise((resolve) => setTimeout(resolve, 0))
+
+    // Verify the overlap state
+    expect(wrapper.vm.hasOverlap).toBe(true)
+    expect(wrapper.vm.OverlapId).toContain(1)
+
+    // Check for error message
+    expect(wrapper.text()).toContain('overlap_error_message')
+  })
+
+  it('does not allow interaction when disabled', async () => {
+    const wrapper = mount(RangeSlider, {
+      props: { ...baseProps, disabled: true },
+    })
+    // Try to click on a bar
+    await wrapper.find('[data-id^="slider_bar_"]').trigger('click')
+    // Should not emit any events
+    expect(wrapper.emitted()['on-bar-tariff-click']).toBeFalsy()
+  })
+
+  it('emits on-bar-tariff-click when a bar is clicked', async () => {
+    const wrapper = mount(RangeSlider, { props: baseProps })
+    await wrapper.find('[data-id^="slider_bar_item_"]').trigger('click')
+    expect(wrapper.emitted()['on-bar-tariff-click']).toBeTruthy()
+  })
+
+  it('renders nothing if labels are empty', () => {
+    const wrapper = mount(RangeSlider, { props: { ...baseProps, labels: [] } })
+    expect(wrapper.html()).toContain('<div') // Should still render container
+    expect(wrapper.text()).not.toContain('00:00')
+  })
+})

package/src/components/rangeSlider/RangeSlider.stories.js

@@ -0,0 +1,159 @@
+import RangeSlider from './index.vue'
+
+export default {
+  title: 'Components/RangeSlider',
+  component: RangeSlider,
+  argTypes: {
+    dataLocation: { control: 'text' },
+    tariffItems: { control: 'array' },
+    labels: { control: 'array' },
+    rangeMargin: { control: 'number' },
+    step: { control: 'number' },
+    minWidth: { control: 'number' },
+    canOverlap: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    onChange: { action: 'changed' },
+    onBarTariffClick: { action: 'barTariffClicked' },
+    activate: { action: 'activated' },
+    deactivate: { action: 'deactivated' },
+    hasOverlap: { action: 'overlapDetected' },
+  },
+}
+
+const Template = (args) => ({
+  components: { RangeSlider },
+  setup() {
+    return { args }
+  },
+  template: '<RangeSlider v-bind="args" />',
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  dataLocation: 'default',
+  tariffItems: [
+    { id: 1, name: 'Tariff A', color: '#4CAF50' },
+    { id: 2, name: 'Tariff B', color: '#2196F3' },
+    { id: 3, name: 'Tariff C', color: '#FFC107' },
+  ],
+  labels: [
+    {
+      placement: 'top',
+      value: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
+    },
+    {
+      placement: 'left',
+      value: [
+        {
+          id: 1,
+          name: 'Group 1',
+          selectedTariffs: [
+            {
+              id: 1,
+              name: 'Tariff A',
+              min: 0,
+              max: 8,
+              color: '#4CAF50',
+              parentId: 1,
+            },
+          ],
+        },
+        {
+          id: 2,
+          name: 'Group 2',
+          selectedTariffs: [
+            {
+              id: 2,
+              name: 'Tariff B',
+              min: 8,
+              max: 16,
+              color: '#2196F3',
+              parentId: 2,
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  rangeMargin: 1,
+  step: 1,
+  minWidth: 1,
+  canOverlap: true,
+  disabled: false,
+}
+
+export const WithOverlap = Template.bind({})
+WithOverlap.args = {
+  ...Default.args,
+  labels: [
+    {
+      placement: 'top',
+      value: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
+    },
+    {
+      placement: 'left',
+      value: [
+        {
+          id: 1,
+          name: 'Group 1',
+          selectedTariffs: [
+            {
+              id: 1,
+              name: 'Tariff A',
+              min: 0,
+              max: 8,
+              color: '#4CAF50',
+              parentId: 1,
+            },
+            {
+              id: 2,
+              name: 'Tariff B',
+              min: 6,
+              max: 14,
+              color: '#2196F3',
+              parentId: 1,
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  canOverlap: false,
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  ...Default.args,
+  disabled: true,
+}
+
+export const CustomSteps = Template.bind({})
+CustomSteps.args = {
+  ...Default.args,
+  step: 2,
+  labels: [
+    {
+      placement: 'top',
+      value: ['00:00', '06:00', '12:00', '18:00', '24:00'],
+    },
+    {
+      placement: 'left',
+      value: [
+        {
+          id: 1,
+          name: 'Group 1',
+          selectedTariffs: [
+            {
+              id: 1,
+              name: 'Tariff A',
+              min: 0,
+              max: 12,
+              color: '#4CAF50',
+              parentId: 1,
+            },
+          ],
+        },
+      ],
+    },
+  ],
+}

package/src/components/rangeSlider/index.vue

@@ -322,42 +322,37 @@
     },
     computed: {
       maximum() {
-        if (!this.labels.length) return
-
-        return this.topLabels.at(-1)
+        if (!this.labels?.length) return 0
+        const labels = this.topLabels
+        return labels?.length ? labels[labels.length - 1] : 0
       },
       minimum() {
-        if (!this.labels.length) return
-
-        return this.topLabels[0]
+        if (!this.labels?.length) return 0
+        const labels = this.topLabels
+        return labels?.length ? labels[0] : 0
       },
       topLabels() {
-        if (!this.labels.length) return
+        if (!this.labels?.length) return []
         const labels = this.labels.find((label) => label.placement === 'top')
-
-        return labels ? labels.value : []
+        return labels?.value || []
       },
       leftLabels() {
-        if (!this.labels.length) return
+        if (!this.labels?.length) return []
         const labels = this.labels.find((label) => label.placement === 'left')
-        return labels ? labels.value : []
+        return labels?.value || []
       },
       stepCount() {
-        let labels = this.topLabels || []
-
+        const labels = this.topLabels || []
         if (labels.length) {
           return labels.length - 1
         }
-
-        return Math.floor((this.maximum - this.minimum) / this.step)
+        return Math.floor((this.maximum - this.minimum) / this.step) || 0
       },
       subStepCount() {
-        let labels = this.topLabels || []
-
+        const labels = this.topLabels || []
         if (labels.length && this.step) {
-          return (this.maximum - this.minimum) / this.step
+          return Math.floor((this.maximum - this.minimum) / this.step) || 0
         }
-
         return 0
       },
     },
@@ -395,7 +390,7 @@
         }
       },
     },
-    beforeDestroy() {
+    beforeUnmount() {
       // Remove the global click event listener to prevent memory leaks
       document.removeEventListener('click', this.handleOutsideClick)
       document.removeEventListener('keydown', this.onKeyDownDelete)

package/src/components/tabsHeader/index.vue

@@ -5,6 +5,7 @@
         v-for="item in tabsData"
         :key="item.id"
         :data-id="item.dataId"
+        :data-qa-id="item.dataId"
         :data-test-active="activeTab === item.id"
         data-test-id="tab-item"
         :full-size="fullSize"

package/dist/main.es727.js

@@ -1,4 +0,0 @@
-const __vite_glob_0_347 = "data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI2IiB2aWV3Ym94PSI3IDcgMjYgMjYiIHdpZHRoPSIyNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMxLjYxOTYgMjAuNTIzMVYxOS40NjYzSDI5LjY4NTZMMzIgMTcuMTYyNUwzMS4yNDk3IDE2LjQxMjJMMjguMTk1NSAxOS40NjYzSDIxLjI3MzRMMjYuMTY2NCAxNC41NzMzSDMwLjQ4ODhWMTMuNTE2NUgyNy4yMjMzTDI4LjU4NjUgMTIuMTUzMkwyNy44NDY4IDExLjQwMjlMMjYuNDcyOSAxMi43NzY4VjkuNTExMjNIMjUuNDE2MVYxMy44MzM2TDIwLjUyMzEgMTguNzI2NlYxMS44MDQ1TDIzLjU4NzggOC43NTAzM0wyMi44Mzc1IDhMMjAuNTIzMSAxMC4zMTQ0VjguMzY5ODhIMTkuNDY2M1YxMC4zMTQ0TDE3LjE2MjUgOEwxNi40MTIyIDguNzUwMzNMMTkuNDY2MyAxMS44MDQ1VjE4LjcyNjZMMTQuNTczMyAxMy44MzM2VjkuNTExMjNIMTMuNTE2NVYxMi43NzY4TDEyLjE1MzIgMTEuNDAyOUwxMS40MDI5IDEyLjE1MzJMMTIuNzc2OCAxMy41MTY1SDkuNTExMjNWMTQuNTczM0gxMy44MzM2TDE4LjcyNjYgMTkuNDY2M0gxMS44MDQ1TDguNzUwMzMgMTYuNDEyMkw4IDE3LjE2MjVMMTAuMzE0NCAxOS40NjYzSDguMzY5ODhWMjAuNTIzMUgxMC4zMTQ0TDggMjIuODM3NUw4Ljc1MDMzIDIzLjU3NzNMMTEuODA0NSAyMC41MjMxSDE4LjcyNjZMMTMuODMzNiAyNS40MTYxSDkuNTExMjNWMjYuNDcyOUgxMi43NzY4TDExLjQwMjkgMjcuODQ2OEwxMi4xNTMyIDI4LjU4NjVMMTMuNTE2NSAyNy4yMjMzVjMwLjQ4ODhIMTQuNTczM1YyNi4xNjY0TDE5LjQ2NjMgMjEuMjczNFYyOC4xOTU1TDE2LjQxMjIgMzEuMjQ5N0wxNy4xNjI1IDMyTDE5LjQ2NjMgMjkuNjg1NlYzMS42MTk2SDIwLjUyMzFWMjkuNjg1NkwyMi44Mzc1IDMyTDIzLjU4NzggMzEuMjQ5N0wyMC41MjMxIDI4LjE5NTVWMjEuMjczNEwyNS40MTYxIDI2LjE2NjRWMzAuNDg4OEgyNi40NzI5VjI3LjIyMzNMMjcuODQ2OCAyOC41ODY1TDI4LjU4NjUgMjcuODQ2OEwyNy4yMjMzIDI2LjQ3MjlIMzAuNDg4OFYyNS40MTYxSDI2LjE2NjRMMjEuMjczNCAyMC41MjMxSDI4LjE5NTVMMzEuMjQ5NyAyMy41NzczTDMyIDIyLjgzNzVMMjkuNjg1NiAyMC41MjMxSDMxLjYxOTZaIiBmaWxsPSIjMjBBNENBIj48L3BhdGg+Cjwvc3ZnPgo=";
-export {
-  __vite_glob_0_347 as default
-};

package/dist/main.es728.js

@@ -1,4 +0,0 @@
-const __vite_glob_0_348 = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxOCAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMi40IDEuMkMyLjQgMS44NjI3NCAxLjg2Mjc0IDIuNCAxLjIgMi40QzAuNTM3MjU4IDIuNCAwIDEuODYyNzQgMCAxLjJDMCAwLjUzNzI1OCAwLjUzNzI1OCAwIDEuMiAwQzEuODYyNzQgMCAyLjQgMC41MzcyNTggMi40IDEuMloiIGZpbGw9IiMyNjMyMzgiIC8+CiAgPHBhdGggZD0iTTYgMS4yQzYgMS44NjI3NCA1LjQ2Mjc0IDIuNCA0LjggMi40QzQuMTM3MjYgMi40IDMuNiAxLjg2Mjc0IDMuNiAxLjJDMy42IDAuNTM3MjU4IDQuMTM3MjYgMCA0LjggMEM1LjQ2Mjc0IDAgNiAwLjUzNzI1OCA2IDEuMloiIGZpbGw9IiMyNjMyMzgiIC8+CiAgPHBhdGggZD0iTTIuNCA0LjhDMi40IDUuNDYyNzQgMS44NjI3NCA2IDEuMiA2QzAuNTM3MjU4IDYgMCA1LjQ2Mjc0IDAgNC44QzAgNC4xMzcyNiAwLjUzNzI1OCAzLjYgMS4yIDMuNkMxLjg2Mjc0IDMuNiAyLjQgNC4xMzcyNiAyLjQgNC44WiIgZmlsbD0iIzI2MzIzOCIgLz4KICA8cGF0aCBkPSJNNiA0LjhDNiA1LjQ2Mjc0IDUuNDYyNzQgNiA0LjggNkM0LjEzNzI2IDYgMy42IDUuNDYyNzQgMy42IDQuOEMzLjYgNC4xMzcyNiA0LjEzNzI2IDMuNiA0LjggMy42QzUuNDYyNzQgMy42IDYgNC4xMzcyNiA2IDQuOFoiIGZpbGw9IiMyNjMyMzgiIC8+CiAgPHBhdGggZmlsbD0iIzI2MzIzOCIgZD0iTTEwIDFoNnMyIDAgMiAydjBzMCAyIC0yIDJoLTZzLTIgMCAtMiAtMnYwczAgLTIgMiAtMiIgLz4KICA8cGF0aCBkPSJNMi40IDExLjJDMi40IDExLjg2MjcgMS44NjI3NCAxMi40IDEuMiAxMi40QzAuNTM3MjU4IDEyLjQgMCAxMS44NjI3IDAgMTEuMkMwIDEwLjUzNzMgMC41MzcyNTggMTAgMS4yIDEwQzEuODYyNzQgMTAgMi40IDEwLjUzNzMgMi40IDExLjJaIiBmaWxsPSIjMjYzMjM4IiAvPgogIDxwYXRoIGQ9Ik02IDExLjJDNiAxMS44NjI3IDUuNDYyNzQgMTIuNCA0LjggMTIuNEM0LjEzNzI2IDEyLjQgMy42IDExLjg2MjcgMy42IDExLjJDMy42IDEwLjUzNzMgNC4xMzcyNiAxMCA0LjggMTBDNS40NjI3NCAxMCA2IDEwLjUzNzMgNiAxMS4yWiIgZmlsbD0iIzI2MzIzOCIgLz4KICA8cGF0aCBkPSJNMi40IDE0LjhDMi40IDE1LjQ2MjcgMS44NjI3NCAxNiAxLjIgMTZDMC41MzcyNTggMTYgMCAxNS40NjI3IDAgMTQuOEMwIDE0LjEzNzMgMC41MzcyNTggMTMuNiAxLjIgMTMuNkMxLjg2Mjc0IDEzLjYgMi40IDE0LjEzNzMgMi40IDE0LjhaIiBmaWxsPSIjMjYzMjM4IiAvPgogIDxwYXRoIGQ9Ik02IDE0LjhDNiAxNS40NjI3IDUuNDYyNzQgMTYgNC44IDE2QzQuMTM3MjYgMTYgMy42IDE1LjQ2MjcgMy42IDE0LjhDMy42IDE0LjEzNzMgNC4xMzcyNiAxMy42IDQuOCAxMy42QzUuNDYyNzQgMTMuNiA2IDE0LjEzNzMgNiAxNC44WiIgZmlsbD0iIzI2MzIzOCIgLz4KICA8cGF0aCBmaWxsPSIjMjYzMjM4IiBkPSJNMTAgMTFoNnMyIDAgMiAydjBzMCAyIC0yIDJoLTZzLTIgMCAtMiAtMnYwczAgLTIgMiAtMiIgLz4KPC9zdmc+";
-export {
-  __vite_glob_0_348 as default
-};

package/src/assets/svgIcons/house_dropper.svg

@@ -1,3 +0,0 @@
-<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13.7808 0.416296C13.0817 -0.160599 12.0473 -0.0615408 11.4704 0.637553L9.97281 2.45234L9.69833 2.22583C9.48534 2.05007 9.1702 2.08025 8.99444 2.29324C8.81868 2.50623 8.84886 2.82137 9.06185 2.99713L9.33633 3.22363L7.11244 5.91858C7.07195 5.96765 7.0412 6.02398 7.02183 6.08457L6.0862 9.01132C6.02394 9.20607 6.08652 9.4191 6.24421 9.54922C6.40191 9.67935 6.62294 9.70037 6.80233 9.60228L9.4983 8.12817C9.55412 8.09766 9.60359 8.05677 9.64408 8.00771L11.868 5.31275L12.1424 5.53926C12.3554 5.71502 12.6706 5.68484 12.8463 5.47185C13.0221 5.25886 12.9919 4.94372 12.7789 4.76796L12.5044 4.54146L14.002 2.72668C14.5789 2.02758 14.4798 0.993191 13.7808 0.416296ZM7.94502 6.48079L10.1076 3.86011L11.0967 4.67628L8.93407 7.29696L7.41933 8.12519L7.94502 6.48079ZM10.7441 3.08881L11.7332 3.90498L13.2307 2.0902C13.4561 1.81708 13.4174 1.41297 13.1443 1.18759C12.8712 0.962212 12.467 1.00091 12.2417 1.27403L10.7441 3.08881ZM4.17261 7.95832C4.36097 7.79136 4.64409 7.79046 4.83352 7.95621L5.17075 8.25129C5.37857 8.43313 5.69445 8.41207 5.87629 8.20425C6.05813 7.99643 6.03707 7.68055 5.82925 7.49871L5.49202 7.20363C4.92373 6.70638 4.0744 6.7091 3.5093 7.20998L0.505039 9.87285C0.183852 10.1575 0 10.5662 0 10.9954V12.5C0 12.7761 0.223858 13 0.5 13C0.776142 13 1 12.7761 1 12.5V10.9954C1 10.8523 1.06128 10.7161 1.16835 10.6212L4.17261 7.95832ZM8.32925 9.68621C8.12143 9.50437 7.80555 9.52543 7.62371 9.73325C7.44187 9.94106 7.46293 10.2569 7.67075 10.4388L7.82925 10.5775C7.93776 10.6724 8 10.8096 8 10.9538V12.5C8 12.7761 8.22386 13 8.5 13C8.77614 13 9 12.7761 9 12.5V10.9538C9 10.5212 8.81328 10.1097 8.48776 9.8249L8.32925 9.68621Z" fill="black"/>
-</svg>