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

package/src/components/sideMenu/index.vue

@@ -0,0 +1,270 @@
+<template>
+  <page-container :isLoading="!tabsData.length">
+    <spinner-container v-if="!tabsData.length">
+      <spinner />
+    </spinner-container>
+    <list-container v-else>
+      <template v-for="(item, idx) in tabsData">
+        <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 })"
+        >
+          <icon-container :isActive="activeTab === item.key">
+            <icon :name="item.icon" color="#fff" cursor="pointer" size="18px" />
+          </icon-container>
+          <list-text>{{ $gettext(item.label) }}</list-text>
+        </list-item>
+        <collapse-wrapper v-else :key="idx + item.key">
+          <collapse-container
+            :data-id="`sub_menu_settings_${item.key}`"
+            @click="toggleActiveDropdown(item.key)"
+          >
+            <icon-container :isActive="activeParentTab === item.key">
+              <icon
+                :name="item.icon"
+                color="#fff"
+                cursor="pointer"
+                size="18px"
+              />
+            </icon-container>
+            <list-text>{{ $gettext(item.label) }}</list-text>
+            <arrow-container>
+              <icon
+                :name="activeDropdown === item.key ? 'arrow_up' : 'arrow_down'"
+                color="white"
+                size="10px"
+              />
+            </arrow-container>
+          </collapse-container>
+          <template v-if="activeDropdown === item.key">
+            <sub-router
+              v-for="subItem in item.children"
+              :key="subItem.key"
+              :isActive="activeTab === subItem.key"
+              :data-id="`sub_menu_settings_${subItem.key}`"
+              @click="
+                $emit('tab-click', {
+                  activeKey: subItem.key,
+                  parentKey: item.key
+                })
+              "
+            >
+              {{ $gettext(subItem.label) }}
+            </sub-router>
+          </template>
+        </collapse-wrapper>
+      </template>
+    </list-container>
+    <bottom-section v-if="hasLogout">
+      <icon-container
+        :isActive="false"
+        :isButton="true"
+        data-id="button_settings_logout"
+        @click="$emit('on-logout')"
+      >
+        <rotate-icon
+          name="initial_situation"
+          color="#fff"
+          cursor="pointer"
+          size="18px"
+        />
+      </icon-container>
+      <app-version>{{ appVersion }}</app-version>
+    </bottom-section>
+  </page-container>
+</template>
+
+<script>
+import styled from 'vue-styled-components'
+import Icon from '../icon'
+import Spinner from '../spinner'
+
+const PageAttrs = { isLoading: Boolean }
+const PageContainer = styled('div', PageAttrs)`
+  background-color: ${(props) =>
+    props.isLoading ? props.theme.colors.white : props.theme.colors.grey6};
+  padding: 14px 12px;
+  min-width: 220px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`
+
+const ListContainer = styled.div`
+  display: grid;
+  grid-gap: 6px;
+`
+
+const IconAttrs = { isActive: Boolean, isButton: Boolean }
+
+const ListItem = styled('div', IconAttrs)`
+  display: grid;
+  align-items: center;
+  grid-template-columns: auto 1fr;
+  grid-gap: 20px;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 6px;
+  background-color: ${(props) =>
+    props.isActive ? 'rgba(255, 255, 255, 0.1)' : ''};
+
+  :hover {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+`
+
+const ListText = styled.div`
+  font-size: 16px;
+  font-weight: 700;
+  color: ${(props) => props.theme.colors.white};
+`
+
+const IconContainer = styled('div', IconAttrs)`
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  width: 32px;
+  height: 32px;
+  background-color: ${(props) =>
+    props.isActive ? props.theme.colors.red : 'rgba(255, 255, 255, 0.2)'};
+  border-radius: 6px;
+
+  ${({ isButton = false }) =>
+    isButton &&
+    `
+  cursor: pointer;
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.3);
+  }
+  `}
+`
+
+const SpinnerContainer = styled.div`
+  margin-top: 30px;
+`
+
+const BottomSection = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`
+
+const RotateIcon = styled(Icon)`
+  transform: rotate(-90deg);
+`
+
+const AppVersion = styled.p`
+  font-size: 11px;
+  line-height: 13px;
+  color: ${(props) => props.theme.colors.white};
+  margin-right: 6px;
+`
+
+const SubRouter = styled('div', IconAttrs)`
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 10px;
+  align-items: center;
+  justify-items: flex-start;
+  cursor: pointer;
+  margin-left: 65px;
+  padding: 8px;
+  border-radius: 6px;
+  color: ${(props) => props.theme.colors.white};
+  font-weight: 700;
+  ${({ isActive }) =>
+    isActive &&
+    `
+    background: rgba(255, 255, 255, 0.1);
+  `}
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+`
+
+const CollapseContainer = styled.div`
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  grid-gap: 20px;
+  padding: 4px;
+  border-radius: 6px;
+  align-items: center;
+  cursor: pointer;
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+`
+
+const CollapseWrapper = styled.div`
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 10px;
+  user-select: none;
+  margin-bottom: 2px;
+`
+
+const ArrowContainer = styled.div`
+  padding-bottom: 5px;
+`
+
+export default {
+  name: 'SideMenu',
+  components: {
+    PageContainer,
+    ListContainer,
+    ListItem,
+    ListText,
+    Icon,
+    IconContainer,
+    Spinner,
+    SpinnerContainer,
+    BottomSection,
+    RotateIcon,
+    AppVersion,
+    CollapseWrapper,
+    CollapseContainer,
+    SubRouter,
+    ArrowContainer
+  },
+  data() {
+    return {
+      activeDropdown: null
+    }
+  },
+  mounted() {
+    this.activeDropdown = this.activeParentTab
+  },
+  props: {
+    tabsData: {
+      required: true
+    },
+    activeTab: {
+      required: true
+    },
+    activeParentTab: {
+      required: false
+    },
+    hasLogout: {
+      required: false,
+      default: true
+    },
+    appVersion: {
+      required: false,
+      type: String
+    }
+  },
+  methods: {
+    toggleActiveDropdown(value) {
+      if (this.activeDropdown === value) {
+        this.activeDropdown = null
+      } else {
+        this.activeDropdown = value
+      }
+    }
+  }
+}
+</script>

package/src/components/tables/mainTable/index.vue

@@ -10,7 +10,7 @@
       ref="tableRef"
       :isPositionAbsolute="doesTableContainDraggables"
     >
-      <table-wrapper :fullWidth="fullWidth">
+      <table-wrapper class="main-table-wrapper" :fullWidth="fullWidth">
         <spinner-wrapper v-if="isLoading">
           <spinner />
         </spinner-wrapper>
@@ -72,7 +72,7 @@ const TableWrapper = styled('div', wrapperAttrs)`
   overflow-y: hidden;
 
   ::-webkit-scrollbar {
-    height: 5px; //height of the whole scrollbar area
+    height: 10px; //height of the whole scrollbar area
   }
 
   ::-webkit-scrollbar-track {
@@ -81,7 +81,7 @@ const TableWrapper = styled('div', wrapperAttrs)`
   }
 
   ::-webkit-scrollbar-thumb {
-    border-bottom: 5px solid ${(props) => props.theme.colors.purple}; // width of the actual scrollbar
+    border-bottom: 10px solid ${(props) => props.theme.colors.brightBlue}; // width of the actual scrollbar
     border-radius: 4px;
   }
 `

package/src/components/threeDots/index.vue

@@ -23,40 +23,42 @@
             v-for="child in childOpen"
             :key="child.value"
             @click.stop="
-            onSelect({
-              item: child,
-              hasChildren: hasChildren(child)
-            })
-          "
+              onSelect({
+                item: child,
+                hasChildren: hasChildren(child)
+              })
+            "
             @keyup.enter.stop="
-            onSelect({
-              item: child,
-              hasChildren: hasChildren(child)
-            })
-          "
+              onSelect({
+                item: child,
+                hasChildren: hasChildren(child)
+              })
+            "
           >
             {{ child.name }}
           </option-child>
         </children-container>
-        <options-container v-if="!isLoading">
+        <options-container v-if="!isLoading" :textWrap="textWrap">
           <option-item
             v-for="(item, index) in options"
             :key="item.value"
+            :data-id="item.dataId"
             tabindex="0"
             @click.stop="onSelect({ item: item, hasChildren: hasChildren(item) })"
             @keyup.enter="
-            onSelect({ item: item, hasChildren: hasChildren(item) })
-          "
+              onSelect({ item: item, hasChildren: hasChildren(item) })
+            "
             @mouseover="onItemHover({ index, item })"
             :isDisabled="item.disabled"
+            :title="item.title"
           >
             <arrow-left
               :hasChildren="hasChildren(item)"
               v-if="hasChildren(item)"
             />
             <span>
-            {{ item.name }}
-          </span>
+              {{ item.name }}
+            </span>
           </option-item>
         </options-container>
       </template>
@@ -68,9 +70,10 @@
 // import ThreeDots from "@eturnity/eturnity_reusable_components/src/components/threeDots"
 // To use:
 // <three-dots
+//   :isLoading="true"
 //   :options="listOptions"
+//   @on-click="onClick($event)"
 //   @on-select="onSelect($event)"
-//   :isLoading="true"
 // />
 // options to pass:
 // listOptions: [
@@ -182,19 +185,18 @@ const LoadingContainer = styled.div`
   background: #fff;
 `
 
-const OptionsContainer = styled.div`
+const OptionsContainerAttrs = { textWrap: Boolean }
+const OptionsContainer = styled('div', OptionsContainerAttrs)`
   border: 1px solid ${(props) => props.theme.colors.grey3};
   display: grid;
   grid-template-columns: 1fr;
-  min-width: 220px;
-  max-width: 220px;
-  width: max-content;
+  ${(props) => props.textWrap ? 'width: 220px' : 'width: max-content' };
   border-radius: 4px;
   background-color: #fff;
   max-height: 220px;
   overflow: auto;
   height: max-content;
-  white-space: normal;
+  ${(props) => props.textWrap ? 'white-space: normal' : 'white-space: nowrap'};
 `
 
 const optionAttrs = { isDisabled: Boolean }
@@ -203,6 +205,8 @@ const OptionItem = styled('div', optionAttrs)`
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
   font-size: 13px;
   position: relative;
+  ${(props) => (props.isDisabled ? `background-color: ${ props.theme.colors.grey5 }!important` : '')};
+  ${(props) => (props.isDisabled ? `color: ${ props.theme.colors.grey2 }` : '')};
 
   &:hover {
     background-color: #ebeef4;
@@ -284,6 +288,10 @@ export default {
     isLoading: {
       required: false,
       default: false
+    },
+    textWrap: {
+      required: false,
+      default: true
     }
   },
   data() {
@@ -331,7 +339,7 @@ export default {
     },
     findRelativeParent(element) {
       while (element.parentElement) {
-        if (window.getComputedStyle(element.parentElement).position === 'relative') {
+        if (window.getComputedStyle(element.parentElement).position === 'relative' || window.getComputedStyle(element.parentElement).position === 'absolute') {
           return element.parentElement
         }
         element = element.parentElement
@@ -368,6 +376,7 @@ export default {
     },
     onSelect({ item, hasChildren }) {
       if (hasChildren || item.disabled) {
+        this.$emit('on-click', item)
         return
       }
       this.$emit('on-select', item)

package/src/helpers/numberConverter.js

@@ -18,6 +18,7 @@ export const stringToNumber = ({
     selectedLang === 'de-lu' ||
     selectedLang === 'de-be' ||
     selectedLang === 'es-es' ||
+    selectedLang === 'ca-es' ||
     selectedLang === 'de' ||
     selectedLang === 'de-at' ||
     selectedLang === 'it' ||
@@ -38,7 +39,7 @@ export const stringToNumber = ({
         .replace(/[.\s]/g, '')
         .replace(/[,\s]/, '.')
     }
-  } else if (selectedLang === 'en-us') {
+  } else if (selectedLang === 'en-us' || selectedLang === 'en-gb') {
     // replace commas with blank: 1,234.56 --> 1234.56
     if (allowNegative) {
       newVal = newVal.replace(/[^\d-.,']/g, '').replace(/[,\s]/g, '')
@@ -96,6 +97,7 @@ export const numberToString = ({ value, numberPrecision, minDecimals }) => {
   value = parseFloat(value)
   return value.toLocaleString(langForLocaleString(), {
     minimumFractionDigits: minimumRounding, // removing this for now. Why do we need this to be a minimum amount?
-    maximumFractionDigits: numberPrecision
+    maximumFractionDigits:
+      numberPrecision < minimumRounding ? minimumRounding : numberPrecision
   })
 }

package/src/helpers/translateLang.js

@@ -48,6 +48,8 @@ export const translateLang = (lang) => {
     return 'portuguese'
   } else if (lang === 'es-es') {
     return 'spanish'
+  } else if (lang === 'ca-es') {
+    return 'catalan_es'
   } else {
     return lang
   }
@@ -72,6 +74,8 @@ export const datePickerLang = (lang) => {
     return 'it'
   } else if (lang === 'en-us' || lang === 'en-gb') {
     return 'en'
+  } else if (lang === 'es-es' || lang === 'ca-es' || lang === 'pt-pt') {
+    return 'es'
   } else {
     return lang
   }
@@ -97,6 +101,8 @@ export const tinyLanguage = (lang) => {
     return 'fr_FR'
   } else if (lang === 'it' || lang === 'it-it' || lang === 'it-ch') {
     return 'it'
+  } else if (lang === 'es-es' || lang === 'ca-es') {
+    return 'es'
   } else if (lang === 'en-us') {
     return null
   } else {
@@ -114,7 +120,9 @@ export const langForLocaleString = () => {
           ? 'fr-fr'
           : localStorage.getItem('lang') === 'fr-ch'
               ? 'de-ch'
-              : localStorage.getItem('lang')
+              : localStorage.getItem('lang') === 'ca-es'
+                ? 'es-es'
+                : localStorage.getItem('lang')
       : 'en-US'
   return selectedLang !== 'null' ? selectedLang : 'en-US'
 }