@eturnity/eturnity_reusable_components 8.16.2--EPDM-14330.4 → 8.16.2--EPDM-14330.6

package/src/components/filterComponent/viewSort.vue

@@ -10,6 +10,148 @@
     <ButtonWrapper v-if="isOptionsVisible">
       <BoxContainer class="box-container">
         <BoxTitle>{{ $gettext('sort') }}</BoxTitle>
+        <SortOptionsContainer>
+          <template v-if="selectedSort.length > 0">
+            <SortDropdownContainer
+              v-for="(item, index) in selectedSort"
+              :key="index"
+            >
+              <SelectComponent
+                ref="selectSortDropdown"
+                align-items="vertical"
+                class="sort-dropdown"
+                :dropdown-auto-close="false"
+                select-height="40px"
+                @click.stop
+                @input-change="
+                  onSelectSort({
+                    type: 'column',
+                    value: $event,
+                    index: index,
+                  })
+                "
+              >
+                <template #selector>
+                  <SelectedText>{{
+                    getSelectedLabel({ type: 'column', value: item.column }) ||
+                    $gettext('category')
+                  }}</SelectedText>
+                </template>
+                <template #dropdown>
+                  <SelectOption
+                    v-for="(item, index) in sortOptions"
+                    :key="item.value"
+                    :value="item.value"
+                  >
+                    {{ item.label }}
+                  </SelectOption>
+                </template>
+              </SelectComponent>
+              <SelectComponent
+                ref="selectSortDropdown"
+                align-items="vertical"
+                class="sort-dropdown"
+                :dropdown-auto-close="false"
+                select-height="40px"
+                @click.stop
+                @input-change="
+                  onSelectSort({
+                    type: 'direction',
+                    value: $event,
+                    index: index,
+                  })
+                "
+              >
+                <template #selector>
+                  <SelectedText>{{
+                    getSelectedLabel({
+                      type: 'direction',
+                      value: item.direction,
+                    }) || $gettext('constraint')
+                  }}</SelectedText>
+                </template>
+                <template #dropdown>
+                  <SelectOption
+                    v-for="(item, index) in directionOptions"
+                    :key="item.value"
+                    :value="item.value"
+                  >
+                    {{ item.label }}
+                  </SelectOption>
+                </template>
+              </SelectComponent>
+              <IconContainer>
+                <RCIcon
+                  :color="theme.semanticColors.teal[800]"
+                  cursor="pointer"
+                  name="close"
+                  size="14px"
+                  @click.stop="removeItem(index)"
+                />
+              </IconContainer>
+            </SortDropdownContainer>
+          </template>
+          <template v-else>
+            <SortDropdownContainer>
+              <SelectComponent
+                ref="selectSortDropdown"
+                align-items="vertical"
+                class="sort-dropdown"
+                :dropdown-auto-close="false"
+                select-height="40px"
+                @click.stop
+                @input-change="
+                  onSelectSort({
+                    type: 'column',
+                    value: $event,
+                    index: 0,
+                  })
+                "
+              >
+                <template #selector>
+                  <SelectedText>{{ $gettext('category') }}</SelectedText>
+                </template>
+                <template #dropdown>
+                  <SelectOption
+                    v-for="(item, index) in sortOptions"
+                    :key="item.value"
+                    :value="item.value"
+                  >
+                    {{ item.label }}
+                  </SelectOption>
+                </template>
+              </SelectComponent>
+              <SelectComponent
+                ref="selectSortDropdown"
+                align-items="vertical"
+                class="sort-dropdown"
+                :dropdown-auto-close="false"
+                select-height="40px"
+                @click.stop
+                @input-change="
+                  onSelectSort({
+                    type: 'direction',
+                    value: $event,
+                    index: 0,
+                  })
+                "
+              >
+                <template #selector>
+                  <SelectedText>{{ $gettext('constraint') }}</SelectedText>
+                </template>
+                <template #dropdown>
+                  <SelectOption
+                    v-for="(item, index) in directionOptions"
+                    :key="item.value"
+                    :value="item.value"
+                  >
+                    {{ item.label }}
+                  </SelectOption>
+                </template>
+              </SelectComponent>
+            </SortDropdownContainer>
+          </template>
+        </SortOptionsContainer>
       </BoxContainer>
     </ButtonWrapper>
   </PageContainer>
@@ -18,6 +160,10 @@
 <script>
   import styled from 'vue3-styled-components'
   import ButtonIcon from '../buttons/buttonIcon/index.vue'
+  import SelectComponent from '../inputs/select/index.vue'
+  import SelectOption from '../inputs/select/option/index.vue'
+  import RCIcon from '../icon'
+  import theme from '../../assets/theme'
 
   const PageContainer = styled.div``
 
@@ -45,6 +191,30 @@
     margin-bottom: 16px;
   `
 
+  const SortOptionsContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    white-space: nowrap;
+  `
+
+  const SortDropdownContainer = styled.div`
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    align-items: center;
+  `
+
+  const SelectedText = styled.div`
+    font-size: 14px;
+    font-weight: 400;
+    color: ${(props) => props.theme.semanticColors.grey[800]};
+  `
+
+  const IconContainer = styled.div`
+    margin-left: 12px;
+  `
+
   export default {
     name: 'ViewSettings',
     components: {
@@ -53,40 +223,100 @@
       ButtonWrapper,
       BoxContainer,
       BoxTitle,
+      SortOptionsContainer,
+      SortDropdownContainer,
+      SelectComponent,
+      SelectOption,
+      SelectedText,
+      RCIcon,
+      IconContainer,
+    },
+    props: {
+      sortOptions: {
+        type: Array,
+        required: true,
+      },
+      selectedSort: {
+        type: Array,
+        required: true,
+      },
     },
-    props: {},
     data() {
       return {
         isOptionsVisible: false,
       }
     },
-    mounted() {
-      // Remove the mounted event listener since we now handle it in toggleOptions
+    computed: {
+      directionOptions() {
+        return [
+          {
+            value: 'ascending',
+            label: this.$gettext('ascending'),
+          },
+          {
+            value: 'descending',
+            label: this.$gettext('descending'),
+          },
+        ]
+      },
+      theme() {
+        return theme
+      },
     },
+    mounted() {},
     beforeUnmount() {
       document.removeEventListener('click', this.handleClickOutside)
     },
     methods: {
-      toggleOptions() {
-        this.isOptionsVisible = !this.isOptionsVisible
-        if (this.isOptionsVisible) {
-          document.addEventListener('click', this.handleClickOutside)
-        } else {
-          document.removeEventListener('click', this.handleClickOutside)
-        }
-      },
       handleClickOutside(event) {
         const buttonIcon = this.$el.querySelector('.button-icon')
         const boxContainer = this.$el.querySelector('.box-container')
+        const isClickInSelect =
+          event.target.closest('.sort-dropdown') ||
+          event.target.closest('.rc-select-dropdown') ||
+          event.target.closest('.select-button') ||
+          event.target.closest('.caret_dropdown')
 
         if (
           !buttonIcon.contains(event.target) &&
-          !boxContainer.contains(event.target)
+          !boxContainer.contains(event.target) &&
+          !isClickInSelect
         ) {
           this.isOptionsVisible = false
           document.removeEventListener('click', this.handleClickOutside)
         }
       },
+      toggleOptions() {
+        this.isOptionsVisible = !this.isOptionsVisible
+        if (this.isOptionsVisible) {
+          document.addEventListener('click', this.handleClickOutside)
+        } else {
+          document.removeEventListener('click', this.handleClickOutside)
+        }
+      },
+      getSelectedLabel({ type, value }) {
+        if (!value) return
+        if (type === 'column') {
+          return this.sortOptions.find((option) => option.value === value).label
+        } else if (type === 'direction') {
+          return this.directionOptions.find((option) => option.value === value)
+            .label
+        }
+      },
+      onSelectSort({ type, value, index }) {
+        this.$emit('on-sort-change', {
+          type,
+          value,
+          index,
+        })
+        this.isOptionsVisible = true
+      },
+      removeItem(index) {
+        this.$emit('on-sort-change', {
+          type: 'remove',
+          index,
+        })
+      },
     },
   }
 </script>

package/src/components/icon/index.vue

@@ -3,13 +3,15 @@
     :cursor="cursor"
     data-test-id="icon_wrapper"
     :disabled="disabled"
-    :size="size"
+    :height="height ? height : size"
+    :width="width ? width : size"
   >
     <IconImage
       :animation="animation"
       :background-color="backgroundColor"
       :color="color"
       data-test-id="icon_image"
+      :disable-hover="disableHover"
       :fill-type="fillType"
       :hovered-color="hoveredColor"
     >
@@ -67,6 +69,16 @@
       default: '30px',
       type: String,
     },
+    width: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    height: {
+      type: String,
+      required: false,
+      default: '',
+    },
     cursor: {
       required: false,
       default: null,
@@ -97,10 +109,15 @@
       default: 'fill',
       type: String,
     },
+    disableHover: {
+      type: Boolean,
+      default: false,
+    },
   })
 
   const Wrapper = styled('div', {
-    size: String,
+    height: String,
+    width: String,
     disabled: Boolean,
     cursor: String,
   })`
@@ -108,10 +125,10 @@
     position: relative;
     align-content: center;
     justify-content: center;
-    width: ${(props) => props.size};
-    height: ${(props) => props.size};
-    min-width: ${(props) => props.size};
-    min-height: ${(props) => props.size};
+    width: ${(props) => props.width};
+    height: ${(props) => props.height};
+    min-width: ${(props) => props.width};
+    min-height: ${(props) => props.height};
     cursor: ${(props) => (props.disabled ? 'not-allowed' : props.cursor)};
     line-height: 0;
   `
@@ -152,6 +169,7 @@
     hoveredColor: String,
     animation: String,
     fillType: String,
+    disableHover: Boolean,
   }
   const IconImage = styled('div', IconImageAttrs)`
     animation: ${(props) => props.animation};
@@ -168,12 +186,17 @@
       ${({ theme, color, fillType }) =>
         color && `${fillType}: ${theme.colors[color] || color};`}
     }
-    &:hover svg path:not(.fix) {
-      ${(props) => `${props.fillType}: ${props.hoveredColor || props.color};`}
+    ${(props) =>
+      !props.disableHover &&
+      `
+     &:hover svg path:not(.fix) {
+      ${`${props.fillType}: ${props.hoveredColor || props.color};`}
     }
     &:hover + div {
-      background-color: ${(props) => props.hoveredColor};
+      background-color: ${props.hoveredColor};
     }
+    `}
+
     @keyframes fade {
       50% {
         opacity: 0.3;

package/src/components/infoText/index.vue

@@ -46,7 +46,7 @@
       </IconWrapper>
     </div>
     <Teleport v-if="isVisible" to="body">
-      <TextWrapper :style="wrapperStyle">
+      <TextWrapper data-test-id="info_text_wrapper" :style="wrapperStyle">
         <TextOverlay
           ref="infoBox"
           :app-theme="appTheme"
@@ -137,7 +137,7 @@
   `
 
   const TextWrapper = styled('div')`
-    z-index: 99999;
+    z-index: 9999999999;
     position: absolute;
   `
 

package/src/components/infoText/infoText.spec.js

@@ -29,6 +29,9 @@ describe('InfoText Component', () => {
         provide: {
           theme,
         },
+        stubs: {
+          teleport: true
+        }
       },
     })
   })
@@ -38,7 +41,6 @@ describe('InfoText Component', () => {
     expect(wrapper.vm.text).toContain('default text')
     expect(wrapper.vm.size).toContain('14px')
     expect(wrapper.vm.infoPosition).toContain('bottom')
-    expect(wrapper.vm.alignArrow).toContain('center')
   })
 
   test('openTrigger prop is set to onClick', async () => {
@@ -48,8 +50,11 @@ describe('InfoText Component', () => {
     expect(wrapper.find('[data-test-id="info_text_wrapper"]').exists()).toBe(
       false
     )
+
     //should see text upon click
     await wrapper.find('[data-test-id="infoText_trigger"]').trigger('click')
+    expect(wrapper.vm.isVisible).toBe(true)
+
     expect(wrapper.find('[data-test-id="info_text_wrapper"]').exists()).toBe(
       true
     )

package/src/components/inputs/inputNumber/index.vue

@@ -56,6 +56,7 @@
         :min-width="minWidth"
         :no-border="noBorder"
         :placeholder="displayedPlaceholder"
+        :read-only="isReadOnly"
         :show-arrow-controls="showArrowControls"
         :show-linear-unit-name="showLinearUnitName"
         :slot-size="slotSize"
@@ -163,6 +164,7 @@
   //     labelInfoAlign="left"
   //     :minNumber="0"
   //     fontColor="blue"
+  //     :isReadOnly="true"
   //     colorMode="transparent" // Makes background transparent, border white, and font white
   // >
   //<template name=label><img>....</template>
@@ -202,6 +204,7 @@
     showLinearUnitName: Boolean,
     colorMode: String,
     showArrowControls: Boolean,
+    readOnly: Boolean,
   }
 
   const Container = styled('div', inputProps)`
@@ -250,7 +253,8 @@
         ? '0 4px 4px 0'
         : '4px'};
     text-align: ${(props) => props.textAlign};
-    cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
+    cursor: ${(props) =>
+      props.isDisabled || props.readOnly ? 'not-allowed' : 'auto'};
     font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
     color: ${(props) =>
       props.isError
@@ -263,7 +267,9 @@
         ? props.fontColor + ' !important'
         : props.theme.colors.black};
     background-color: ${(props) =>
-      props.isDisabled
+      props.readOnly
+        ? props.theme.semanticColors.grey[300]
+        : props.isDisabled
         ? props.colorMode === 'transparent'
           ? 'transparent'
           : props.theme.colors.grey5
@@ -276,6 +282,8 @@
     box-sizing: border-box;
     opacity: ${(props) =>
       props.isDisabled && props.colorMode === 'transparent' ? '0.4' : '1'};
+    pointer-events: ${(props) => (props.readOnly ? 'none' : 'auto')};
+    user-select: ${(props) => (props.readOnly ? 'none' : 'auto')};
 
     &::placeholder {
       color: ${(props) => props.theme.colors.grey2};
@@ -686,6 +694,10 @@
         type: Boolean,
         default: false,
       },
+      isReadOnly: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {

package/src/components/inputs/searchInput/index.vue

@@ -1,6 +1,10 @@
 <template>
   <Container :input-width="inputWidth">
-    <InputWrapper :icon-color="iconColor" :icon-position="iconPosition">
+    <InputWrapper
+      :icon-color="iconColor"
+      :icon-position="iconPosition"
+      :is-full-height="isFullHeight"
+    >
       <SearchIconSvg class="search-icn" />
       <InputContainer
         ref="inputElement"
@@ -11,6 +15,7 @@
         :input-width="inputWidth"
         :is-disabled="disabled"
         :is-filter="isFilter"
+        :is-full-height="isFullHeight"
         :placeholder="placeholder"
         :value="value"
         @input="onChangeHandler($event)"
@@ -41,6 +46,7 @@
     isDisabled: Boolean,
     inputWidth: String,
     isFilter: Boolean,
+    isFullHeight: Boolean,
   }
   const Container = styled('div', inputAttrs)`
     width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
@@ -55,6 +61,7 @@
     font-size: 13px;
     color: ${(props) => props.theme.colors.black};
     width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
+    height: ${(props) => (props.isFullHeight ? '100%' : 'auto')};
     box-sizing: border-box;
     cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'auto')};
     background: ${(props) => props.theme.colors.white} !important;
@@ -67,9 +74,14 @@
     }
   `
 
-  const wrapperAttrs = { iconColor: String, iconPosition: String }
+  const wrapperAttrs = {
+    iconColor: String,
+    iconPosition: String,
+    isFullHeight: Boolean,
+  }
   const InputWrapper = styled('div', wrapperAttrs)`
     position: relative;
+    height: ${(props) => (props.isFullHeight ? '100%' : 'auto')};
 
     svg {
       position: absolute;
@@ -142,6 +154,10 @@
         type: String,
         default: 'black',
       },
+      isFullHeight: {
+        type: Boolean,
+        default: false,
+      },
     },
     emits: ['on-change'],
     watch: {