@eturnity/eturnity_reusable_components 6.43.9-EPDM-6751.1 → 6.43.9-qa-16-11.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "6.43.9-EPDM-6751.1",
+  "version": "6.43.9-qa-16-11.06.1",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",
@@ -63,4 +63,4 @@
   "author": "Aaron Enser",
   "license": "ISC",
   "homepage": "https://bitbucket.org/eturnitydevs/eturnity_reusable_components#readme"
-}
+}

package/src/components/filter/filterSettings.vue

@@ -338,7 +338,7 @@ const DragContainer = styled.div`
 
 const RowContainer = styled('div', TitleAttrs)`
   padding: 10px 14px;
-  min-width: 300px;
+  width: 300px;
 
   ${({ showBorder, theme }) =>
     showBorder &&
@@ -613,7 +613,7 @@ export default {
       return type === 'multi_select_integer' || type === 'multi_select_string'
     },
     isRangeSelector(type) {
-      return type === 'integer_range' || type === 'number_range'
+      return type === 'integer_range'
     },
     isDateSelector(type) {
       return type === 'datetime'

package/src/components/iconWrapper/index.vue

@@ -120,11 +120,10 @@ export default {
       isStriked:{
         required:false,
         default:false
-    
-      }
-    },
-    data() {
-      return {}
     }
+  },
+  data() {
+    return {}
   }
+}
 </script>

package/src/components/projectMarker/index.vue

@@ -2,7 +2,6 @@
   <page-container :withDate="!!date">
     <marker-container
       v-if="markerData"
-      :hasBorderRadius="hasBorderRadius"
       :backgroundColor="markerData.color"
       :hasIcon="!!iconName"
       :isEditionAllowed="editionAllowed"
@@ -120,7 +119,6 @@ const CtaContainer = styled.div`
 `
 
 const MarkerAttrs = {
-  hasBorderRadius: Boolean,
   backgroundColor: String,
   hasIcon: Boolean,
   isEditionAllowed: Boolean,
@@ -138,7 +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-radius: ${(props) => (props.hasBorderRadius ? '4px' : '0')};
+  border-radius: 4px;
   white-space: nowrap;
   cursor: ${(props) => props.isEditionAllowed ? 'pointer' : props.cursor};
 
@@ -244,10 +242,6 @@ export default {
     cursor: {
       required: false,
       default: 'default'
-    },
-    hasBorderRadius: {
-      required: false,
-      default: true
     }
   },
   data() {

package/src/components/tableDropdown/index.vue

@@ -104,12 +104,7 @@
             :src="require('../../assets/icons/collapse_arrow_icon.svg')"
           />
         </arrow-wrapper>
-        <options-container
-          v-if="isOpen"
-          :top="getItemLocation('top')"
-          :left="getItemLocation('left')"
-          ref="optionsContainer"
-        >
+        <options-container v-if="isOpen" ref="optionsContainer">
           <options-wrapper @click.prevent.stop>
             <search-container @click.prevent.stop>
               <search-input
@@ -288,8 +283,7 @@ const OptionsContainer = styled('div', optionsAttrs)`
   position: absolute;
   display: grid;
   grid-template-rows: 1fr auto;
-  top: ${(props) => props.top + 'px'};
-  left: ${(props) => props.left + 'px'};
+  left: 20px;
   width: auto;
   max-height: 360px;
   min-height: 200px;
@@ -510,8 +504,13 @@ export default {
     }
   },
   methods: {
-    toggleOpen() {
-      if (this.disabled) {
+    toggleOpen(event) {
+      if (
+        this.disabled ||
+        (event &&
+          !(event.target === this.$el) &&
+          !this.$el.contains(event.target))
+      ) {
         return
       }
       this.wasClicked = false
@@ -558,14 +557,6 @@ export default {
       this.inputText = value
       this.$emit('dropdown-search', value)
     },
-    getItemLocation(value) {
-      let ref = this.$refs.dropdownItem[0]
-      let location = ref.$el.getBoundingClientRect()[value]
-      if (value === 'top') {
-        location = location + window.scrollY + 40
-      }
-      return location
-    },
     clickOutside(event) {
       if (event.target === this.$el || this.$el.contains(event.target)) {
         return

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

@@ -1,9 +1,15 @@
 <template>
-  <page-container>
+  <page-container
+    :tableHeight="tableHeight"
+    :shouldSetCustomHeight="doesTableContainDraggables"
+  >
     <table-title v-if="titleText">
       {{ titleText }}
     </table-title>
-    <table-scroll>
+    <table-scroll
+      ref="tableRef"
+      :isPositionAbsolute="doesTableContainDraggables"
+    >
       <table-wrapper :fullWidth="fullWidth">
         <spinner-wrapper v-if="isLoading">
           <spinner />
@@ -26,7 +32,15 @@
 import styled from 'vue-styled-components'
 import Spinner from '../../spinner'
 
-const PageContainer = styled.div``
+const pageContainerProps = {
+  tableHeight: String,
+  shouldSetCustomHeight: Boolean
+}
+const PageContainer = styled('div', pageContainerProps)`
+  position: relative;
+  height: ${(props) =>
+    props.shouldSetCustomHeight ? props.tableHeight : 'auto'};
+`
 
 const TableTitle = styled.div`
   margin-bottom: 16px;
@@ -35,15 +49,27 @@ const TableTitle = styled.div`
   text-transform: uppercase;
 `
 
-const TableScroll = styled.div`
+const tableScrollProps = {
+  isPositionAbsolute: Boolean
+}
+
+const TableScroll = styled('div', tableScrollProps)`
   max-width: 100%;
+  height: auto;
+  ${(props) =>
+    props.isPositionAbsolute &&
+    `
+    position: absolute;
+    left: -20px;
+  `}
 `
 
 const wrapperAttrs = { fullWidth: Boolean }
 const TableWrapper = styled('div', wrapperAttrs)`
   width: ${(props) => (props.fullWidth ? '100%' : 'fit-content')};
   max-width: 100%;
-  overflow: auto;
+  overflow-x: auto;
+  overflow-y: hidden;
 
   ::-webkit-scrollbar {
     height: 5px; //height of the whole scrollbar area
@@ -67,7 +93,11 @@ const SpinnerWrapper = styled.div`
   justify-items: center;
 `
 
-const containerAttrs = { cellPaddings: String, tableCursor: String }
+const containerAttrs = {
+  cellPaddings: String,
+  tableCursor: String
+}
+
 const TableContainer = styled('table', containerAttrs)`
   width: 100%;
   border-collapse: collapse;
@@ -378,6 +408,39 @@ export default {
     tableCursor: {
       required: false
     }
+  },
+  data() {
+    return {
+      tableHeight: 'auto',
+      doesTableContainDraggables: false
+    }
+  },
+  mounted() {
+    this.observeTableHeight()
+  },
+  beforeDestroy() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect()
+    }
+  },
+  methods: {
+    observeTableHeight() {
+      if (!this.$refs.tableRef) return
+
+      const tableElement = this.$refs.tableRef.$el
+
+      this.resizeObserver = new ResizeObserver(() => {
+        const newTableHeight = this.titleText
+          ? tableElement.offsetHeight + 33
+          : tableElement.offsetHeight
+        this.tableHeight = `${newTableHeight}px`
+        this.doesTableContainDraggables = Boolean(
+          tableElement.querySelector('.drag-container')
+        )
+      })
+
+      this.resizeObserver.observe(tableElement)
+    }
   }
 }
 </script>

package/src/components/threeDots/index.vue

@@ -8,8 +8,6 @@
     <dropdown-container
       v-if="isOpen"
       @click.stop
-      :top="getItemLocation('top')"
-      :right="getItemLocation('right')"
       :containerWidth="childOpen ? 440 : 240"
       ref="dropdownContainer"
     >
@@ -130,6 +128,7 @@ const PageContainer = styled.div`
   justify-items: center;
   width: 30px;
   height: 30px;
+  position: relative;
 
   &:hover {
     background-color: ${(props) => props.theme.colors.grey5};
@@ -158,12 +157,15 @@ const DotItem = styled.div`
   border-radius: 50%;
 `
 
-const dropdownAttrs = { top: Number, right: Number, containerWidth: Number }
+const dropdownAttrs = {
+  containerWidth: Number
+}
 const DropdownContainer = styled('div', dropdownAttrs)`
   z-index: 99;
   height: 200px;
-  top: ${(props) => props.top + 'px'};
-  left: ${(props) => props.right - props.containerWidth + 'px'};
+  top: 0;
+  right: 27px;
+
   position: absolute;
   display: grid;
   grid-template-columns: auto auto;
@@ -299,14 +301,6 @@ export default {
         document.removeEventListener('click', this.clickOutside)
       }
     },
-    getItemLocation(value) {
-      let ref = this.$refs.dropdownItem
-      let location = ref.$el.getBoundingClientRect()[value]
-      if (value === 'top') {
-        location = location + window.scrollY
-      }
-      return location
-    },
     hasChildren(item) {
       return !!item.children && !!item.children.length
     },

package/src/assets/svgIcons/collections.svg

@@ -1,3 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M17 10H1C0.45 10 0 10.45 0 11V17C0 17.55 0.45 18 1 18H17C17.55 18 18 17.55 18 17V11C18 10.45 17.55 10 17 10ZM4 16C2.9 16 2 15.1 2 14C2 12.9 2.9 12 4 12C5.1 12 6 12.9 6 14C6 15.1 5.1 16 4 16ZM17 0H1C0.45 0 0 0.45 0 1V7C0 7.55 0.45 8 1 8H17C17.55 8 18 7.55 18 7V1C18 0.45 17.55 0 17 0ZM4 6C2.9 6 2 5.1 2 4C2 2.9 2.9 2 4 2C5.1 2 6 2.9 6 4C6 5.1 5.1 6 4 6Z" fill="white"/>
-</svg>

package/src/assets/svgIcons/dashboard.svg

@@ -1,3 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 10H8V0H0V10ZM0 18H8V12H0V18ZM10 18H18V8H10V18ZM10 0V6H18V0H10Z" fill="white"/>
-</svg>

package/src/assets/svgIcons/subscriptions.svg

@@ -1,3 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 12H8V10H0V12ZM0 16H8V14H0V16ZM0 8H8V6H0V8ZM0 2V4H8V2H0ZM10 2H18V16H10V2Z" fill="white"/>
-</svg>

package/src/components/sideMenu/index.vue

@@ -1,262 +0,0 @@
-<template>
-  <page-container>
-    <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"
-          :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 @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"
-              @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"
-        @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 PageContainer = styled.div`
-  background-color: ${(props) => 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>