@eturnity/eturnity_reusable_components 8.22.23-EPDM-15547.4 → 8.22.23-EPDM-13618.2

package/src/components/progressBar/index.vue

@@ -1,36 +1,26 @@
 <template>
   <Container>
     <ProgressContainer
-      :background-color="backgroundColor"
-      class="progress-container"
-      :max-width="maxWidth"
-      :min-width="minWidth"
+      :app-theme="appTheme"
+      data-test-id="progress_bar_container"
     >
       <ProgressFill
-        class="progress-bar"
-        :fill-color="fillColor"
+        :app-theme="appTheme"
+        data-test-id="progress_bar_progress"
         :fill-progress="fillProgress"
       />
     </ProgressContainer>
-    <LabelText v-if="stepNumber || labelText" class="progress-text">
-      {{ labelText ? labelText : '' }}
-      {{ stepNumber ? stepNumber : '' }}
+    <LabelText
+      v-if="labelText"
+      :app-theme="appTheme"
+      data-test-id="progress_bar_label"
+    >
+      {{ labelText }}
     </LabelText>
   </Container>
 </template>
 
 <script>
-  // import ProgressBar from "@eturnity/eturnity_reusable_components/src/components/progressBar"
-  //To Use:
-  // <progress-bar
-  //   fillColor="#000"
-  //   backgroundColor="#888"
-  //   minWidth="150px"
-  //   maxWidth="100%"
-  //   :fillProgress="50" //should be a number for percent
-  //   stepNumber="4"
-  //   :labelText="translate('step')"
-  // />
   import styled from 'vue3-styled-components'
 
   const Container = styled.div`
@@ -44,34 +34,34 @@
   `
 
   const containerProps = {
-    backgroundColor: String,
-    maxWidth: String,
-    minWidth: String,
+    appTheme: String,
   }
   const ProgressContainer = styled('div', containerProps)`
     width: 100%;
-    min-width: ${(props) => (props.minWidth ? props.minWidth : 'auto')};
-    max-width: ${(props) => (props.maxWidth ? props.maxWidth : 'none')};
     height: 6px;
     background-color: ${(props) =>
-      props.backgroundColor
-        ? props.backgroundColor
-        : props.theme.colors.lightGray};
+      props.theme.progressBar[props.appTheme].backgroundColor};
     @media (max-width: ${(props) => props.theme.screen.mobile}) {
       height: 4px;
     }
   `
 
-  const fillProps = { fillColor: String, fillProgress: String | Number }
+  const fillProps = {
+    appTheme: String,
+    fillProgress: String | Number,
+  }
   const ProgressFill = styled('div', fillProps)`
     height: 100%;
     width: ${(props) => props.fillProgress + '%'};
     background-color: ${(props) =>
-      props.fillColor ? props.fillColor : props.theme.colors.secondary};
+      props.theme.progressBar[props.appTheme].fillColor};
   `
 
-  const LabelText = styled.div`
-    color: ${(props) => props.theme.colors.darkGray};
+  const labelTextProps = {
+    appTheme: String,
+  }
+  const LabelText = styled('div', labelTextProps)`
+    color: ${(props) => props.theme.progressBar[props.appTheme].labelColor};
     font-size: 16px;
 
     @media (max-width: ${(props) => props.theme.screen.tablet}) {
@@ -88,37 +78,19 @@
       LabelText,
     },
     props: {
-      fillColor: {
-        required: false,
-        type: String,
-        default: null,
-      },
-      backgroundColor: {
-        required: false,
-        type: String,
-        default: null,
-      },
-      minWidth: {
-        required: false,
-        type: String,
-        default: null,
-      },
-      maxWidth: {
-        required: false,
-        type: String,
-        default: null,
-      },
       fillProgress: {
         required: false,
+        type: [String, Number],
         default: 0,
       },
       labelText: {
         required: false,
-        default: null,
+        type: String,
+        default: '',
       },
-      stepNumber: {
-        required: false,
-        default: null,
+      appTheme: {
+        type: String,
+        default: 'light',
       },
     },
   }

package/src/components/progressBar/progressBar.spec.js

@@ -0,0 +1,52 @@
+import { mount } from '@vue/test-utils'
+import RCProgressBar from '@/components/progressBar'
+import defaultProps from './defaultProps'
+import theme from '@/assets/theme'
+
+jest.mock('@/components/icon/iconCache.mjs', () => ({
+  // need to mock this due to how jest handles import.meta
+  fetchIcon: jest.fn(() => Promise.resolve('mocked-icon-url.svg')),
+}))
+
+describe('progressBar/index.vue', () => {
+  it('progress bar is rendered with correct props', async () => {
+    const labelText = 'test_label_text'
+
+    const wrapper = mount(RCProgressBar, {
+      props: { ...defaultProps, labelText },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const progressBarProgress = wrapper.find(
+      '[data-test-id="progress_bar_progress"]'
+    )
+    const progressBarLabel = wrapper.find('[data-test-id="progress_bar_label"]')
+
+    expect(wrapper.vm.fillProgress).toBe(defaultProps.fillProgress)
+    expect(progressBarProgress.exists()).toBe(true)
+    expect(progressBarLabel.exists()).toBe(true)
+
+    expect(progressBarLabel.text()).toContain(labelText)
+  })
+
+  it('progress bar progress changes', async () => {
+    const wrapper = mount(RCProgressBar, {
+      props: {},
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    expect(wrapper.vm.fillProgress).toBe(0)
+
+    await wrapper.setProps({ fillProgress: defaultProps.fillProgress })
+
+    expect(wrapper.vm.fillProgress).toBe(defaultProps.fillProgress)
+  })
+})

package/src/components/progressStep/index.vue

@@ -11,10 +11,10 @@
         >
           <RcIcon
             v-if="stepIndex < currentStepIndex"
-            color="white"
-            hovered-color="white"
-            name="all_good"
-            :size="'20px'"
+            :color="theme.semanticColors.purple[500]"
+            :hovered-color="theme.semanticColors.purple[500]"
+            name="checkmark_thin"
+            size="16px"
           />
           <NumberContainer
             v-else
@@ -44,6 +44,7 @@
   // />
   import styled from 'vue3-styled-components'
   import RcIcon from '../icon'
+  import theme from '@/assets/theme.js'
 
   const StyledComponents = {
     ProgressionStepContainer: styled('div', { numberOfSteps: Number })`
@@ -75,9 +76,9 @@
           ? theme.semanticColors.purple[500]
           : isValid
           ? theme.semanticColors.purple[200]
-          : theme.semanticColors.purple[100]};
+          : theme.semanticColors.grey[200]};
       color: ${({ theme, isValid, isActive }) =>
-        isActive ? theme.colors.white : theme.semanticColors.teal[800]};
+        isActive ? theme.colors.white : theme.semanticColors.grey[800]};
       margin: 0 10px;
       border-radius: 5px;
       cursor: ${({ isValid }) => (isValid ? 'pointer' : 'default')};
@@ -91,10 +92,7 @@
     StepIntermediateLine: styled('div', { isValid: Boolean })`
       height: 2px;
       margin: 0 10px;
-      background-color: ${({ theme, isValid }) =>
-        isValid
-          ? theme.semanticColors.purple[500]
-          : theme.semanticColors.teal[200]};
+      background-color: ${({ theme }) => theme.semanticColors.grey[400]};
     `,
     StepLabel: styled.div`
       max-width: 220px;
@@ -118,6 +116,11 @@
         required: true,
       },
     },
+    data() {
+      return {
+        theme,
+      }
+    },
     computed: {
       currentStepIndex() {
         return this.progressionSteps.findIndex(

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/tableDropdown/index.vue

@@ -78,10 +78,13 @@
               v-else
               class="inputField"
               :disabled="customInputDisabled"
+              :error-message="item.errorMessage"
               :font-color="showArchived ? theme.colors.red : 'black'"
+              :is-error="item.isError"
               :min-width="item.value.length + 'ch'"
-              :no-border="true"
+              :no-border="item.noBorder || item.noBorder === undefined"
               :value="item.value"
+              @input-blur="onCustomInputChange($event.trim())"
               @input-change="onCustomInputChange($event)"
             />
           </InputContainer>
@@ -162,7 +165,7 @@
             </OptionsItem>
           </OptionsWrapper>
           <CustomContainer
-            v-if="inputText.length && allowFreeInputs"
+            v-if="getCustomName.length && allowFreeInputs"
             @click="onCustomNameClick()"
           >
             <CustomName>{{ getCustomName }}</CustomName>
@@ -226,7 +229,6 @@
   const ItemAttrs = { isNested: Boolean, showArchived: Boolean }
   const ComponentItem = styled('td', ItemAttrs)`
     padding-left: ${(props) => (props.isNested ? '14px !important' : '0')};
-    overflow: hidden;
     text-overflow: ellipsis;
     padding-right: 0 !important;
     color: ${(props) =>
@@ -558,7 +560,7 @@
     },
     computed: {
       getCustomName() {
-        return this.inputText
+        return this.inputText.trim()
       },
       theme() {
         return theme
@@ -652,7 +654,7 @@
       },
       onCustomNameClick() {
         this.wasClicked = true
-        this.$emit('on-custom-input-name', this.inputText)
+        this.$emit('on-custom-input-name', this.getCustomName)
         this.$emit('toggle-dropdown-open', { close: true })
         this.inputText = ''
       },