@eturnity/eturnity_reusable_components 6.46.5-EPDM-9185.0 → 6.46.5-qa-16-11.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "6.46.5-EPDM-9185.0",
+  "version": "6.46.5-qa-16-11.27",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/components/filter/filterSettings.vue

@@ -40,7 +40,10 @@
         v-for="(item, idx) in filterData"
         :key="idx + '_filterdata'"
       >
-        <column-title :showBorder="idx + 1 !== filterData.length">
+        <column-title
+          :showBorder="idx + 1 !== filterData.length"
+          :data-id="`filter_label_project_view_file_manager_${item.type}`"
+        >
           {{ item.columnName }}
         </column-title>
         <row-container v-if="item.type === 'columns'">
@@ -88,13 +91,12 @@
               selectHeight="36px"
               fontSize="13px"
               :label="filter.label"
+              :labelDataId="filter.dataId"
               alignItems="vertical"
               :disabled="!filter.choices.length"
             >
               <template #selector>
-                <option-title>
-                  {{ filter.selectedText }}
-                </option-title>
+                <option-title> {{ filter.selectedText }} </option-title>
               </template>
               <template #dropdown>
                 <dropdown-checkbox-container @click.stop>
@@ -117,7 +119,7 @@
               </template>
             </select-component>
             <section-container v-else-if="isRangeSelector(filter.filter_type)">
-              <row-label>{{ filter.label }}</row-label>
+              <row-label :data-id="filter.dataId">{{ filter.label }}</row-label>
               <grid-container>
                 <input-number
                   :placeholder="
@@ -165,7 +167,7 @@
               v-else-if="isDateSelector(filter.filter_type)"
               @click.stop
             >
-              <row-label>{{ filter.label }}</row-label>
+              <row-label :data-id="filter.dataId">{{ filter.label }}</row-label>
               <grid-container>
                 <date-picker-input
                   :placeholder="$gettext('Date from')"

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

@@ -13,7 +13,7 @@
     </label-slot-wrapper>
 
     <label-wrapper v-if="labelText">
-      <label-text :labelFontColor="labelFontColor">
+      <label-text :labelFontColor="labelFontColor" :data-id="labelDataId">
         {{ labelText }}
       </label-text>
       <info-text
@@ -53,6 +53,7 @@
         :hasLabelSlot="hasLabelSlot"
         :slotSize="slotSize"
         :showLinearUnitName="showLinearUnitName"
+        :data-id="inputDataId"
       />
       <slot-container v-if="hasSlot" :slotSize="slotSize" :isError="isError">
         <slot></slot>
@@ -437,6 +438,14 @@ export default {
     focus: {
       required: false,
       default: false
+    },
+    labelDataId: {
+      required: false,
+      default: ''
+    },
+    inputDataId: {
+      required: false,
+      default: ''
     }
   },
   computed: {

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

@@ -5,9 +5,15 @@
       :alignItems="alignItems"
     >
       <label-wrapper v-if="label">
-        <input-label :labelFontColor="labelFontColor" :fontSize="fontSize">{{
-          label
-        }} <optionalLabel v-if="labelOptional">({{ $gettext('Optional') }})</optionalLabel></input-label>
+        <input-label
+          :labelFontColor="labelFontColor"
+          :fontSize="fontSize"
+          :dataId="labelDataId"
+          >{{ label }}
+          <optionalLabel v-if="labelOptional"
+            >({{ $gettext('Optional') }})</optionalLabel
+          ></input-label
+        >
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
@@ -38,6 +44,7 @@
             :hasFocus="hasFocus"
             :backgroundColor="backgroundColor"
             :disabledBackgroundColor="disabledBackgroundColor"
+            :dataId="inputDataId"
           />
           <icon-wrapper
             v-if="inputType === 'password' && !isError"
@@ -310,6 +317,14 @@ export default {
     },
     borderColor: {
       required: false
+    },
+    labelDataId: {
+      required: false,
+      default: ''
+    },
+    inputDataId: {
+      required: false,
+      default: ''
     }
   },
   methods: {

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

@@ -11,6 +11,7 @@
         :inputWidth="inputWidth"
         :isFilter="isFilter"
         :hasFocus="hasFocus"
+        :dataId="dataId"
       />
       <img
         class="search-icn"
@@ -30,6 +31,7 @@
 //   inputWidth="250px"
 //   @on-change="function($event)"
 //   :isFilter="true" // to set the height at 30px
+//   dataId="test-data-id"
 // />
 import styled from 'vue-styled-components'
 
@@ -104,6 +106,10 @@ export default {
     hasFocus: {
       required: false,
       default: false
+    },
+    dataId: {
+      required: false,
+      default: ''
     }
   },
   methods: {

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

@@ -8,7 +8,7 @@
       :hasLabel="!!label && label.length > 0"
       :alignItems="alignItems"
     >
-      <label-wrapper v-if="label">
+      <label-wrapper v-if="label" :data-id="labelDataId">
         <input-label
           :fontColor="
             labelFontColor || colorMode == 'dark' ? 'white' : 'eturnityGrey'
@@ -121,6 +121,7 @@
 //     optionWidth="50%"
 //     label="that is a label"
 //     alignItems="vertical"
+//     label-data-id="test-data-id"
 //     >
 //     <template #selector="{selectedValue}">
 //     value selected: {{selectedValue}}
@@ -304,6 +305,10 @@ export default {
       required: false,
       default: false
     },
+    labelDataId: {
+      required: false,
+      default: ''
+    },
     infoTextMessage: {
       required: false
     },
@@ -408,7 +413,7 @@ export default {
       isActive: false,
       textSearch: '',
       hoveredIndex: 0,
-      hoveredValue:null,
+      hoveredValue: null,
       isClickOutsideActive: false
     }
   },
@@ -447,7 +452,7 @@ export default {
       this.$emit('input-change', e)
     },
     optionHovered(e) {
-      this.hoveredValue=e
+      this.hoveredValue = e
     },
     mouseEnterHandler() {
       if (this.hoverDropdown) {
@@ -502,14 +507,16 @@ export default {
     },
     onArrowPress(dir) {
       let newHoveredElem
-      const currentHoveredElem=this.$refs.dropdown.$el.querySelector(`[data-value="${this.hoveredValue}"]`);
-      if(currentHoveredElem){
-        if(dir>0){
-          newHoveredElem=currentHoveredElem.nextElementSibling
-        }else{
-          newHoveredElem=currentHoveredElem.previousElementSibling
+      const currentHoveredElem = this.$refs.dropdown.$el.querySelector(
+        `[data-value="${this.hoveredValue}"]`
+      )
+      if (currentHoveredElem) {
+        if (dir > 0) {
+          newHoveredElem = currentHoveredElem.nextElementSibling
+        } else {
+          newHoveredElem = currentHoveredElem.previousElementSibling
         }
-        if(newHoveredElem){
+        if (newHoveredElem) {
           this.hoveredValue = newHoveredElem.getAttribute('data-value')
           const topPos = newHoveredElem.offsetTop
           this.$refs.dropdown.$el.scrollTop = topPos

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

@@ -5,7 +5,9 @@
       :hasLabel="label && label.length > 0"
     >
       <label-wrapper v-if="label">
-        <input-label :fontSize="fontSize">{{ label }}</input-label>
+        <input-label :fontSize="fontSize" :data-id="labelDataId">{{
+          label
+        }}</input-label>
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
@@ -27,6 +29,7 @@
           :disabled="isDisabled"
           @input="onChangeHandler"
           :resize="resize"
+          :data-id="inputDataId"
         />
       </input-container>
     </input-wrapper>
@@ -181,6 +184,14 @@ export default {
     resize: {
       required: false,
       default: 'none'
+    },
+    labelDataId: {
+      required: false,
+      default: ''
+    },
+    inputDataId: {
+      required: false,
+      default: ''
     }
   },
   methods: {

package/src/components/projectMarker/index.vue

@@ -1,8 +1,7 @@
 <template>
-  <page-container>
+  <page-container :withDate="!!date">
     <marker-container
       v-if="markerData"
-      :withDate="!!date"
       :backgroundColor="markerData.color"
       :hasIcon="!!iconName"
       :isEditionAllowed="editionAllowed"
@@ -97,9 +96,13 @@ import DeleteIcon from '../deleteIcon'
 import PageSubtitle from '../pageSubtitle'
 import MainButton from '../buttons/mainButton'
 
-const PageContainer = styled.div`
+const PageContainerAttrs = {
+  withDate: Boolean
+}
+const PageContainer = styled('div', PageContainerAttrs)`
   display: flex;
   align-items: center;
+  gap: 10px;
   font-size: 12px;
   line-height: 14px;
 `
@@ -117,7 +120,6 @@ const CtaContainer = styled.div`
 
 const MarkerAttrs = {
   backgroundColor: String,
-  withDate: Boolean,
   hasIcon: Boolean,
   isEditionAllowed: Boolean,
   isActive: Boolean,
@@ -134,8 +136,7 @@ const MarkerContainer = styled('div', MarkerAttrs)`
   color: ${(props) => props.theme.colors.white};
   background-color: ${(props) =>
   props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
-  border: 1px solid ${(props) => props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
-  border-radius: ${(props) => props.withDate ? '4px 0 0 4px' : '4px'};
+  border-radius: 4px;
   white-space: nowrap;
   cursor: ${(props) => props.isEditionAllowed ? 'pointer' : props.cursor};
 
@@ -193,12 +194,7 @@ const IconContainer = styled.div`
   line-height: 0;
 `
 
-const Date = styled.div`
-  padding: 2px 5px;
-  border: 1px solid ${(props) => props.theme.colors.grey4};
-  border-left: none;
-  border-radius: 0 4px 4px 0;
-`
+const Date = styled.div``
 
 export default {
   name: "project-marker",