@eturnity/eturnity_reusable_components 6.37.0-EPDM-8148.7 → 6.37.0-EPDM-2198.1

package/src/components/card/index.vue

@@ -0,0 +1,95 @@
+<template>
+    <Wrapper
+      v-show="!isLoading"
+      :class="viewCardClass"
+      :width="width"
+      :minWidth="minWidth"
+    >
+      <Spinner v-if="isLoading" size="50px" :limitedToModal="true" />
+      <CardWrapper v-else>
+        <CardTitle :class="titleClass" >
+          {{ $gettext(title) }}
+          <et-popover
+            v-if="showPopover && popoverText !== ''"
+            :text="popoverText"
+          ></et-popover>
+        </CardTitle>
+        <slot></slot>
+      </CardWrapper>
+    </Wrapper>
+</template>
+
+<script>
+import styled from 'vue-styled-components'
+import Spinner from '../spinner'
+
+const WrapperProps = { width: [Number, String], minWidth: [Number, String] }
+const Wrapper = styled('div', WrapperProps)`
+  max-width: ${(props) => props.width};
+  min-width: ${(props) => props.minWidth};
+  padding: 20px;
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 4px;
+  background-color: ${props => props.theme.colors.white};
+  height: 100%;
+`
+
+const CardWrapper = styled('div')`
+  height: 100%;
+  width: auto;
+`
+
+const CardTitle = styled('p')`
+  font-size: 14px;
+  line-height: 1;
+  color: ${props => props.theme.colors.black};
+  font-weight: 700;
+  margin-bottom: 10px;
+`
+
+export default {
+  name: 'Card',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    width: {
+      type: [Number, String],
+      required: false,
+      default: '400px'
+    },
+    minWidth: {
+      type: [Number, String],
+      required: false,
+      default: null
+    },
+    titleClass: {
+      type: String,
+      default: ''
+    },
+    showPopover: {
+      type: Boolean,
+      default: false
+    },
+    viewCardClass: {
+      type: String,
+      default: ''
+    },
+    popoverText: {
+      type: String,
+      default: ''
+    },
+    isLoading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {
+    Spinner,
+    Wrapper,
+    CardTitle,
+    CardWrapper,
+  }
+}
+</script>

package/src/components/draggableInputHandle/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <Handle :height = "height" class="handle">
+    <Dot></Dot>
+    <Dot></Dot>
+    <Dot></Dot>
+  </Handle>
+</template>
+
+<script>
+
+import styled from 'vue-styled-components'
+
+const Handle = styled('div',{ height : String })`
+  position:absolute;
+  left:0;
+  margin-right:10px;
+    display: flex;
+    align-items: stretch;
+    flex-direction: column;
+    justify-content: center;
+    width: 14px;
+    height:${props=> props.height};
+    padding: 0 5px;
+    background-color: #f3f3f7;
+    cursor: pointer;
+    align-items: center;
+  `
+const Dot = styled.div`
+    display: inline-block;
+    width: 4px;
+    height: 4px;
+    margin:2px;
+    background-color: #0068de;
+  `
+
+export default {
+  name: 'draggableInputHandle',
+  props:['height'],
+  components: {
+    Handle,
+    Dot
+  },
+  data() {
+    return {}
+  }
+}
+</script>

package/src/components/errorMessage/index.vue

@@ -9,9 +9,7 @@
 <script>
 // import ErrorMessage from "@eturnity/eturnity_reusable_components/src/components/errorMessage"
 //To use:
-// <error-message
-//     alignText="right" // default is left
-// />
+// <error-message />
 
 import styled from 'vue-styled-components'
 

package/src/components/filter/filterSettings.vue

@@ -1,5 +1,5 @@
 <template>
-  <container-wrapper>
+  <container-wrapper @click="$emit('on-container-click')">
     <upper-container v-if="filterViews && filterViews.length">
       <view-container :maxWidth="activeView.length">
         <select-component
@@ -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="
@@ -125,7 +127,7 @@
                       ? $gettext('min') + ' (' + filter.unit + ')'
                       : $gettext('min')
                   "
-                  :numberPrecision="2"
+                  :numberPrecision="isIntegerRange(filter.filter_type) ? 0 : 2"
                   :value="filter.range.start"
                   @input-change="
                     onChange({
@@ -145,7 +147,7 @@
                       ? $gettext('max') + ' (' + filter.unit + ')'
                       : $gettext('max')
                   "
-                  :numberPrecision="2"
+                  :numberPrecision="isIntegerRange(filter.filter_type) ? 0 : 2"
                   :value="filter.range.end"
                   @input-change="
                     onChange({
@@ -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')"
@@ -338,7 +340,7 @@ const DragContainer = styled.div`
 
 const RowContainer = styled('div', TitleAttrs)`
   padding: 10px 14px;
-  width: 300px;
+  min-width: 300px;
 
   ${({ showBorder, theme }) =>
     showBorder &&
@@ -613,6 +615,9 @@ export default {
       return type === 'multi_select_integer' || type === 'multi_select_string'
     },
     isRangeSelector(type) {
+      return type === 'integer_range' || type === 'number_range'
+    },
+    isIntegerRange(type) {
       return type === 'integer_range'
     },
     isDateSelector(type) {

package/src/components/filter/index.vue

@@ -19,6 +19,7 @@
       @on-apply-current-view="onApplyCurrentView()"
       @on-prevent-close="onPreventClose($event)"
       @on-reset-filters="onResetFilters()"
+      @on-container-click="onContainerClick()"
       :hasActiveView="hasActiveView"
       :activeView="activeView"
       :activeLanguage="activeLanguage"
@@ -82,9 +83,19 @@ export default {
     onToggleDropdown() {
       this.isDropdownOpen = !this.isDropdownOpen
     },
+    onContainerClick() {
+      // due to newer versions of Chrome (121), contains() is not always working.
+      // So, we need to add this so that the filter modal won't close
+      // when we open a dropdown. EPDM-9732
+      this.preventOutsideClick = true
+      setTimeout(() => {
+        this.preventOutsideClick = false
+      }, 100)
+    },
     clickOutside(event) {
+      const target = event.target
       if (
-        !this.$refs.dropdown.$el.contains(event.target) &&
+        !this.$refs.dropdown.$el.contains(target) &&
         !this.preventOutsideClick
       ) {
         this.isDropdownOpen = false

package/src/components/icon/iconCollection.vue

@@ -20,13 +20,13 @@ import styled from 'vue-styled-components'
 
 const Wrapper = styled.div`
   display: block;
-  text-align:center;
-  justify-items:center
-  width:100%;
-  background-color:#ccc;
+  text-align: center;
+  justify-items: center;
+  width: 100%;
+  background-color: #ccc;
 `
 const IconWrapper = styled.div`
-  display:inline-flex
+  display: inline-flex;
   flex-direction: column;
   background-color: white;
   border-radius: 6px;

package/src/components/icon/index.vue

@@ -5,6 +5,7 @@
       :size="size"
       :color="color"
       :hoveredColor="hoveredColor"
+      :backgroundColor="backgroundColor"
       v-html="
         require(`!html-loader!./../../assets/svgIcons/${name.toLowerCase()}.svg`)
       "
@@ -30,7 +31,7 @@ import styled from 'vue-styled-components'
 const wrapperAttrs = { isDisabled: Boolean, size: String, cursor: String }
 const Wrapper = styled('div', wrapperAttrs)`
   display: flex;
-  position:relative
+  position: relative;
   align-content: center;
   justify-content: center;
   width: ${(props) => props.size};
@@ -40,6 +41,7 @@ const Wrapper = styled('div', wrapperAttrs)`
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : props.cursor)};
   line-height: 0;
 `
+
 const strikedAttrs = { isDisabled: Boolean, color: String, hoveredColor: String }
 const strikedLine = styled('div', strikedAttrs)`
   display: flex;
@@ -56,11 +58,14 @@ const strikedLine = styled('div', strikedAttrs)`
   transform-origin: 0% 100%;
   transform: rotate(-45deg);
 `
-const IconImageProps = { color: String, hoveredColor: String, size: String }
+const IconImageProps = { color: String, hoveredColor: String, size: String, backgroundColor: String}
 const IconImage = styled('div', IconImageProps)`
+  width: 100%;
   svg {
     width: 100%;
     height: 100%;
+    background-color: ${(props) => props.backgroundColor};
+    padding: ${(props) => props.backgroundColor ? '3px' : '0'};
   }
   svg path {
     ${(props) =>
@@ -92,6 +97,9 @@ export default {
     color: {
       required: false
     },
+    backgroundColor: {
+      required: false
+    },
     hoveredColor: {
       required: false
     },

package/src/components/iconWrapper/index.vue

@@ -8,6 +8,7 @@
     :color="iconColor"
     :hoveredBackgroundColor="hoveredBackgroundColor"
     :isHovered="isHovered"
+    :data-id="dataId"
   >
     <icon
       :disabled="disabled"
@@ -110,14 +111,14 @@ export default {
       required: false
     },
     backgroundColor: {
-      required: false,
-      },
-      hasBorder: {
-        required: false,
+      required: false
+    },
+    hasBorder: {
+      required: false
     },
     hoveredBackgroundColor: {
       required: false,
-      default: 'transparentWhite1'
+      default: 'transparentWhite2'
     },
     size: {
       required: false,
@@ -135,13 +136,17 @@ export default {
       required: false,
       default: '6px'
     },
-    isHovered:{
-      required:false,
-      default:false
-      },
-      isStriked:{
-        required:false,
-        default:false
+    dataId: {
+      type: String,
+      default: ''
+    },
+    isHovered: {
+      required: false,
+      default: false
+    },
+    isStriked: {
+      required: false,
+      default: false
     }
   },
   data() {

package/src/components/infoCard/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <info-container>
+    <icon name="info" size="24px" />
+    <text-container>
+      <slot />
+    </text-container>
+  </info-container>
+</template>
+
+<script>
+import styled from 'vue-styled-components'
+import Icon from '../icon'
+
+const InfoContainer = styled.div`
+  display: flex;
+  gap: 15px;
+  padding: 20px;
+  border: 1px dashed ${(props) => props.theme.colors.grey4};
+  border-radius: 4px;
+`
+
+const TextContainer = styled.div`
+  font-size: 13px;
+  width: 100%;
+`
+
+
+export default {
+  name: 'InfoCard',
+  components: {
+    Icon,
+    InfoContainer,
+    TextContainer
+  }
+}
+</script>

package/src/components/infoText/index.vue

@@ -10,7 +10,6 @@
       </icon-img>
       <text-overlay
         v-if="showInfo"
-        :borderColor="borderColor"
         :width="width"
         :halfComputedTextInfoWidth="halfComputedTextInfoWidth"
         :alignArrow="alignArrow"
@@ -27,7 +26,6 @@
 //To use:
 // <info-text
 //     text="Veritatis et quasi architecto beatae vitae"
-//     borderColor="#ccc"
 //     size="20"
 //     alignArrow="right" // which side the arrow should be on
 // />
@@ -37,7 +35,6 @@ import icon from '../icon'
 
 const textAttrs = {
   iconSize: String,
-  borderColor: String,
   alignArrow: String,
   width: String,
   halfComputedTextInfoWidth: Number
@@ -58,6 +55,7 @@ const TextOverlay = styled('div', textAttrs)`
   max-width: 400px;
   font-size: 13px;
   font-weight: 400;
+  line-height: normal;
   border-radius: 4px;
   z-index: 99;
   color: ${(props) => props.theme.colors.white};
@@ -111,10 +109,6 @@ export default {
     text: {
       required: false
     },
-    borderColor: {
-      required: false,
-      default: null
-    },
     size: {
       required: false,
       default: '14px'
@@ -156,11 +150,7 @@ export default {
   },
   computed: {
     iconColor() {
-      return this.isActive
-        ? this.borderColor
-          ? this.borderColor
-          : theme.colors.secondary
-        : theme.colors.mediumGray
+      return theme.colors.mediumGray
     },
     halfComputedTextInfoWidth() {
       return parseInt(this.width) / 2

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

@@ -11,6 +11,7 @@
       <input-checkbox
         type="checkbox"
         :checked="isChecked"
+        :data-id="dataId"
         @change="onChangeHandler(!isChecked)"
       />
       <div>
@@ -168,6 +169,10 @@ export default {
     isDisabled: {
       required: false,
       default: false
+    },
+    dataId: {
+      type: String,
+      default: ''
     }
   },
   methods: {

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

@@ -13,15 +13,14 @@
     </label-slot-wrapper>
 
     <label-wrapper v-if="labelText">
-      <label-text :labelFontColor="labelFontColor">
+      <label-text :labelFontColor="labelFontColor" :data-id="labelDataId">
         {{ labelText }}
       </label-text>
+
       <info-text
         v-if="labelInfoText"
         :text="labelInfoText"
-        borderColor="#ccc"
-        size="14px"
-        :alignText="labelInfoAlign"
+        :alignArrow="labelInfoAlign"
       />
     </label-wrapper>
     <input-wrapper>
@@ -37,7 +36,7 @@
         :value="formatWithCurrency(value)"
         @blur="onInputBlur($event)"
         @focus="focusInput()"
-        @keyup.enter="$emit('on-enter-click')"
+        @keyup.enter="onEnterPress"
         @input="onInput($event)"
         :disabled="disabled"
         :isDisabled="disabled"
@@ -53,6 +52,7 @@
         :hasLabelSlot="hasLabelSlot"
         :slotSize="slotSize"
         :showLinearUnitName="showLinearUnitName"
+        :data-id="inputDataId"
       />
       <slot-container v-if="hasSlot" :slotSize="slotSize" :isError="isError">
         <slot></slot>
@@ -82,6 +82,7 @@
 //     inputWidth="150px" //by default, this is 100%
 //     minWidth="100px"
 //     :numberPrecision="3"
+//     minDecimals="2"
 //     unitName="pc"
 //     :value="inputValue" //required -- String
 //     @input-change="onInputChange($event)" //required
@@ -97,7 +98,9 @@
 //     labelInfoAlign="left"
 //     :minNumber="0"
 //     fontColor="blue"
-// />
+// >
+//<template name=label><img>....</template>
+//</inputNumber>
 import styled from 'vue-styled-components'
 import {
   stringToNumber,
@@ -356,6 +359,10 @@ export default {
       required: false,
       default: 0
     },
+    minDecimals: {
+      required: false,
+      default: 0
+    },
     unitName: {
       required: false,
       default: ''
@@ -437,6 +444,14 @@ export default {
     focus: {
       required: false,
       default: false
+    },
+    labelDataId: {
+      required: false,
+      default: ''
+    },
+    inputDataId: {
+      required: false,
+      default: ''
     }
   },
   computed: {
@@ -454,6 +469,10 @@ export default {
     }
   },
   methods: {
+    onEnterPress(){
+      this.$emit('on-enter-click')
+      this.$refs.inputField1.$el.blur()
+    },
     onChangeHandler(event) {
       if (isNaN(event) || event === '') {
         event = this.defaultNumber
@@ -462,7 +481,7 @@ export default {
           ? this.minNumber
           : event
       }
-      if (!this.allowNegative && typeof event === 'number') {
+      if (!this.allowNegative) {
         event = Math.abs(event)
       }
       event = parseFloat(event)
@@ -488,7 +507,8 @@ export default {
         } else {
           let num = stringToNumber({
             value: item,
-            numberPrecision: false
+            numberPrecision: false,
+            minDecimals: this.minDecimals
           })
           return num
         }
@@ -499,7 +519,8 @@ export default {
       if (typeof evaluated === 'string') {
         evaluated = stringToNumber({
           value: evaluated,
-          numberPrecision: this.numberPrecision
+          numberPrecision: this.numberPrecision,
+          minDecimals: this.minDecimals
         })
       } else if (typeof evaluated === 'number') {
         evaluated = evaluated.toFixed(this.numberPrecision)
@@ -528,6 +549,9 @@ export default {
       return array
     },
     onInput(value) {
+      // if(!this.isFocused){
+      //   return
+      // }
       if (this.isBlurred) {
         this.isBlurred = false
         return
@@ -559,7 +583,8 @@ export default {
               : this.defaultNumber
               ? this.defaultNumber
               : this.minNumber,
-          numberPrecision: this.numberPrecision
+          numberPrecision: this.numberPrecision,
+          minDecimals: this.minDecimals
         })
       }
       let adjustedMinValue =
@@ -604,7 +629,8 @@ export default {
         let input = this.numberToStringEnabled
           ? numberToString({
               value: adjustedMinValue,
-              numberPrecision: this.numberPrecision
+              numberPrecision: this.numberPrecision,
+              minDecimals: this.minDecimals
             })
           : adjustedMinValue
         let unit = this.showLinearUnitName ? '' : this.unitName
@@ -616,7 +642,8 @@ export default {
         return this.numberToStringEnabled
           ? numberToString({
               value: adjustedMinValue,
-              numberPrecision: this.numberPrecision
+              numberPrecision: this.numberPrecision,
+              minDecimals: this.minDecimals
             })
           : adjustedMinValue
       }
@@ -631,11 +658,12 @@ export default {
       e.preventDefault()
       let value = parseFloat(this.value || 0)
       value += parseFloat(this.interactionStep) * parseInt(e.movementX)
-      this.$emit('on-input', value)
+      this.$emit('on-input-drag', value)
 
       this.textInput = numberToString({
         value: value && value.length ? value : this.minNumber,
-        numberPrecision: this.numberPrecision
+        numberPrecision: this.numberPrecision,
+        minDecimals: this.minDecimals
       })
       //this.value=value
     },
@@ -650,17 +678,20 @@ export default {
     if (this.value) {
       this.textInput = numberToString({
         value: this.value,
-        numberPrecision: this.numberPrecision
+        numberPrecision: this.numberPrecision,
+        minDecimals: this.minDecimals
       })
     } else if (this.defaultNumber !== null) {
       this.textInput = numberToString({
         value: this.defaultNumber,
-        numberPrecision: this.numberPrecision
+        numberPrecision: this.numberPrecision,
+        minDecimals: this.minDecimals
       })
     } else if (this.minNumber !== null) {
       this.textInput = numberToString({
         value: this.minNumber,
-        numberPrecision: this.numberPrecision
+        numberPrecision: this.numberPrecision,
+        minDecimals: this.minDecimals
       })
     }
   },