@eturnity/eturnity_reusable_components 6.48.2 → 6.50.1-EPDM-9012.0

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

@@ -1,6 +1,11 @@
 <template>
   <container>
-    <flex-wrapper :size="size" :disabled="disabled" @click="onToggleChange">
+    <flex-wrapper
+      :size="size"
+      :disabled="disabled"
+      @click="onToggleChange"
+      :data-id="dataId"
+    >
       <label-container
         v-if="label && labelAlign === 'left'"
         :hasInfoMessage="!!infoTextMessage"
@@ -9,9 +14,6 @@
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
-          size="14px"
-          :alignText="infoTextAlign"
         />
       </label-container>
       <toggle-wrapper
@@ -45,9 +47,6 @@
           @click.native.stop
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
-          size="14px"
-          :alignText="infoTextAlign"
         />
       </label-container>
     </flex-wrapper>
@@ -67,29 +66,29 @@
 //   labelAlign="right"
 //   fontColor="black"
 //   :disabled="true"
-//   infoTextAlign="right" // left by default
 //   infoTextMessage="My info message"
+//   dataId="test_data_id"
 // />
 
-import styled from "vue-styled-components"
-import InfoText from "../../infoText"
+import styled from 'vue-styled-components'
+import InfoText from '../../infoText'
 
 const Container = styled.div`
   display: inline-block;
 `
 
 const flexAttrs = { size: String, disabled: Boolean }
-const FlexWrapper = styled("div", flexAttrs)`
+const FlexWrapper = styled('div', flexAttrs)`
   display: grid;
   grid-template-columns: auto 1fr;
   grid-gap: ${(props) =>
-    props.size === "medium"
-      ? "20px"
-      : props.size === "small"
-      ? "10px"
-      : "20px"};
+    props.size === 'medium'
+      ? '20px'
+      : props.size === 'small'
+      ? '10px'
+      : '20px'};
   align-items: center;
-  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
+  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
 `
 
 const toggleAttrs = {
@@ -97,43 +96,43 @@ const toggleAttrs = {
   fontColor: String,
   disabled: Boolean,
   backgroundColor: String,
-  isChecked: Boolean,
+  isChecked: Boolean
 }
-const LabelText = styled("div", toggleAttrs)`
+const LabelText = styled('div', toggleAttrs)`
   color: ${(props) =>
     props.fontColor ? props.fontColor : props.theme.colors.darkGray};
   font-size: ${(props) =>
-    props.size === "medium"
-      ? "16px"
-      : props.size === "small"
-      ? "13px"
-      : "16px"};
+    props.size === 'medium'
+      ? '16px'
+      : props.size === 'small'
+      ? '13px'
+      : '16px'};
 `
 
-const ToggleWrapper = styled("span", toggleAttrs)`
+const ToggleWrapper = styled('span', toggleAttrs)`
   display: inline-block;
   border: ${(props) =>
     props.disabled
-      ? "1px solid " + props.theme.colors.disabled
+      ? '1px solid ' + props.theme.colors.disabled
       : props.isChecked
       ? props.backgroundColor
-        ? "1px solid " + props.backgroundColor
-        : "1px solid " + props.theme.colors.green
-      : "1px solid " + props.theme.colors.grey3}
+        ? '1px solid ' + props.backgroundColor
+        : '1px solid ' + props.theme.colors.green
+      : '1px solid ' + props.theme.colors.grey3}
   position: relative;
-  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
+  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
   width: ${(props) =>
-    props.size === "medium"
-      ? "50px"
-      : props.size === "small"
-      ? "29px"
-      : "50px"};
+    props.size === 'medium'
+      ? '50px'
+      : props.size === 'small'
+      ? '29px'
+      : '50px'};
   height: ${(props) =>
-    props.size === "medium"
-      ? "24px"
-      : props.size === "small"
-      ? "16px"
-      : "24px"};
+    props.size === 'medium'
+      ? '24px'
+      : props.size === 'small'
+      ? '16px'
+      : '24px'};
   border-radius: 100px;
 
   &:focus {
@@ -149,9 +148,9 @@ const ToggleWrapper = styled("span", toggleAttrs)`
 const backgroundAttrs = {
   backgroundColor: String,
   isChecked: Boolean,
-  disabled: Boolean,
+  disabled: Boolean
 }
-const ToggleBackground = styled("span", backgroundAttrs)`
+const ToggleBackground = styled('span', backgroundAttrs)`
   display: block;
   border-radius: 100px;
   height: 100%;
@@ -171,25 +170,25 @@ const toggleProps = {
   isChecked: Boolean,
   toggleColor: String,
   size: String,
-  disabled: Boolean,
+  disabled: Boolean
 }
-const ToggleDot = styled("span", toggleProps)`
+const ToggleDot = styled('span', toggleProps)`
   position: absolute;
   height: ${(props) =>
-    props.size === "medium"
-      ? "14px"
-      : props.size === "small"
-      ? "10px"
-      : "14px"};
+    props.size === 'medium'
+      ? '14px'
+      : props.size === 'small'
+      ? '10px'
+      : '14px'};
   width: ${(props) =>
-    props.size === "medium"
-      ? "14px"
-      : props.size === "small"
-      ? "10px"
-      : "14px"};
-  left: 3px
+    props.size === 'medium'
+      ? '14px'
+      : props.size === 'small'
+      ? '10px'
+      : '14px'};
+  left: 3px;
   bottom: ${(props) =>
-    props.size === "medium" ? "5px" : props.size === "small" ? "2px" : "5px"};
+    props.size === 'medium' ? '5px' : props.size === 'small' ? '2px' : '5px'};
   background-color: ${(props) =>
     props.disabled
       ? props.theme.colors.disabled
@@ -202,33 +201,33 @@ const ToggleDot = styled("span", toggleProps)`
   transition: transform 0.4s ease;
   transform: ${(props) =>
     props.isChecked
-      ? props.size === "medium"
-        ? "translateX(25px)"
-        : props.size === "small"
-        ? "translateX(12px)"
-        : "translateX(25px)"
-      : "translateX(0)"};
+      ? props.size === 'medium'
+        ? 'translateX(25px)'
+        : props.size === 'small'
+        ? 'translateX(12px)'
+        : 'translateX(25px)'
+      : 'translateX(0)'};
 
   @media (max-width: ${(props) => props.theme.screen.mobile}) {
     height: 24px;
     width: 24px;
     transform: ${(props) =>
-      props.isChecked ? "translateX(25px)" : "translateX(0)"};
+      props.isChecked ? 'translateX(25px)' : 'translateX(0)'};
     bottom: 8px;
   }
 `
 
 const labelAttrs = { hasInfoMessage: Boolean }
-const LabelContainer = styled("div", labelAttrs)`
+const LabelContainer = styled('div', labelAttrs)`
   display: inline-grid;
   grid-template-columns: ${(props) =>
-    props.hasInfoMessage ? "auto 1fr" : "auto"};
+    props.hasInfoMessage ? 'auto 1fr' : 'auto'};
   grid-gap: 12px;
   align-items: center;
 `
 
 export default {
-  name: "toggle",
+  name: 'toggle',
   components: {
     Container,
     ToggleBackground,
@@ -237,52 +236,53 @@ export default {
     FlexWrapper,
     LabelText,
     InfoText,
-    LabelContainer,
+    LabelContainer
   },
   props: {
     label: {
       required: false,
-      default: "",
+      default: ''
     },
     isChecked: {
       required: true,
-      default: false,
+      default: false
     },
     toggleColor: {
-      required: false,
+      required: false
     },
     backgroundColor: {
-      required: false,
+      required: false
     },
     size: {
       required: false,
-      default: "small",
+      default: 'small'
     },
     labelAlign: {
       required: false,
-      default: "right",
+      default: 'right'
     },
     fontColor: {
-      required: false,
+      required: false
     },
     disabled: {
       required: false,
-      default: false,
+      default: false
     },
     infoTextMessage: {
-      required: false,
-    },
-    infoTextAlign: {
-      required: false,
+      required: false
     },
+    dataId: {
+      type: String,
+      default: ''
+    }
   },
   methods: {
     onToggleChange() {
       if (this.disabled) {
         return
       }
-      this.$emit("on-toggle-change", !this.isChecked)
-    },
-  },
+      this.$emit('on-toggle-change', !this.isChecked)
+    }
+  }
 }
 </script>

package/src/components/modals/modal/index.vue

@@ -37,7 +37,7 @@ const ContentContainer = styled('div', contentAttrs)`
   visibility: ${(props) => (props.visible ? 'inherit' : 'hidden')};
 `
 
-const pageAttrs = { isOpen: Boolean, backdrop: String,position:String }
+const pageAttrs = { isOpen: Boolean, backdrop: String, position: String }
 const PageWrapper = styled('div', pageAttrs)`
   position: ${(props) => props.position}
   display: grid;

package/src/components/pageSubtitle/index.vue

@@ -4,11 +4,8 @@
       {{ text }}
     </span>
     <info-text
-      :text="infoText"
       v-if="!!infoText"
-      size="14px"
-      borderColor="#ccc"
-      :alignText="alignInfoText"
+      :text="infoText"
     />
   </subtitle-text>
 </template>
@@ -55,10 +52,6 @@ export default {
       required: false,
       default: null,
     },
-    alignInfoText: {
-      required: false,
-      default: "left",
-    },
     marginBottom: {
       required: false,
       default: "30px",

package/src/components/pageTitle/index.vue

@@ -1,5 +1,13 @@
 <template>
-  <title-text :color="color" :fontSize="fontSize" :uppercase="uppercase">{{ text }}</title-text>
+  <title-wrap :hasInfoText="!!infoText">
+    <title-text :color="color" :fontSize="fontSize" :uppercase="uppercase">
+      {{ text }}
+    </title-text>
+    <info-text
+      v-if="!!infoText"
+      :text="infoText"
+    />
+  </title-wrap>
 </template>
 
 <script>
@@ -10,25 +18,41 @@
 //   color="red"
 // />
 import styled from "vue-styled-components"
+import InfoText from "../infoText"
 
-const textAttrs = { color: String, fontSize: String, uppercase: Boolean }
-const TitleText = styled("div", textAttrs)`
+const wrapAttrs = { hasInfoText: Boolean }
+const TitleWrap = styled("div", wrapAttrs)`
+  display: grid;
+  align-items: center;
+  grid-gap: 12px;
+  grid-template-columns: ${(props) =>
+    props.hasInfoText ? "auto auto 1fr" : "1fr"};
+  margin-bottom: 20px;
+`
+
+const titleAttrs = { color: String, fontSize: String, uppercase: Boolean }
+const TitleText = styled('span', titleAttrs)`
   color: ${(props) => (props.color ? props.color : props.theme.colors.black)};
   font-weight: bold;
   font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
   text-transform: ${(props) => (props.uppercase ? 'uppercase' : 'none')};
-  margin-bottom: 20px;
 `
 
 export default {
   name: "page-title",
   components: {
     TitleText,
+    TitleWrap,
+    InfoText
   },
   props: {
     text: {
       required: true,
     },
+    infoText: {
+      required: false,
+      default: null,
+    },
     color: {
       required: false,
     },

package/src/components/sideMenu/index.vue

@@ -8,6 +8,7 @@
         <list-item
           v-if="!item.children"
           :key="idx"
+          :data-id="`sub_menu_settings_${item.key}`"
           :isActive="activeTab === item.key"
           @click="$emit('tab-click', { activeKey: item.key })"
         >
@@ -57,6 +58,7 @@
       <icon-container
         :isActive="false"
         :isButton="true"
+        data-id="button_settings_logout"
         @click="$emit('on-logout')"
       >
         <rotate-icon

package/src/components/tableDropdown/index.vue

@@ -134,11 +134,13 @@
                   {{ !!item[option] ? item[option] : '-' }}
                 </span>
                 <template-button
+                  :key="idx"
                   @click.stop="onTemplateClick(item)"
                   v-else-if="option === 'template' && item.has_template"
                   >{{ $gettext('Use template...') }}</template-button
                 >
                 <no-template
+                  :key="idx"
                   v-else-if="option === 'template' && !item.has_template"
                 >
                   {{ $gettext('No main component template') }}

package/src/helpers/numberConverter.js

@@ -91,19 +91,12 @@ export const stringToNumber = ({
   return parseFloat(newVal)
 }
 
-export const numberToString = ({ value, numberPrecision = 0 }) => {
+export const numberToString = ({ value, numberPrecision, minDecimals }) => {
+  const minimumRounding = minDecimals ? minDecimals : 0
   value = parseFloat(value)
-  let minNumberPrecision
-  let maxNumberPrecision
-  if (typeof numberPrecision === 'number') {
-    minNumberPrecision = numberPrecision
-    maxNumberPrecision = numberPrecision
-  } else {
-    minNumberPrecision = numberPrecision[0]
-    maxNumberPrecision = numberPrecision[1]
-  }
   return value.toLocaleString(langForLocaleString(), {
-    minimumFractionDigits: minNumberPrecision,
-    maximumFractionDigits: maxNumberPrecision
+    minimumFractionDigits: minimumRounding, // removing this for now. Why do we need this to be a minimum amount?
+    maximumFractionDigits:
+      numberPrecision < minimumRounding ? minimumRounding : numberPrecision
   })
 }