@eturnity/eturnity_reusable_components 7.30.3 → 7.32.0

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

@@ -1,493 +1,510 @@
 <template>
-  <page-container
-    :tableHeight="tableHeight"
-    :shouldSetCustomHeight="doesTableContainDraggables"
+  <PageContainer
+    :should-set-custom-height="doesTableContainDraggables"
+    :table-height="tableHeight"
   >
-    <table-title v-if="titleText">
+    <TableTitle v-if="titleText">
       {{ titleText }}
-    </table-title>
-    <table-scroll
+    </TableTitle>
+    <TableScroll
       ref="tableRef"
-      :isPositionAbsolute="doesTableContainDraggables"
+      :is-position-absolute="doesTableContainDraggables"
     >
-      <table-wrapper class="main-table-wrapper" :fullWidth="fullWidth">
-        <spinner-wrapper v-if="isLoading">
-          <spinner />
-        </spinner-wrapper>
-        <table-container
+      <TableWrapper class="main-table-wrapper" :full-width="fullWidth">
+        <SpinnerWrapper v-if="isLoading">
+          <Spinner />
+        </SpinnerWrapper>
+        <TableContainer
           v-else
-          :cellPaddings="cellPaddings"
-          :tableCursor="tableCursor"
-          @mouseover="hasAimHover ? setHovers($event) : null"
+          :cell-paddings="cellPaddings"
+          :table-cursor="tableCursor"
           @mouseleave="hasAimHover ? removeHoverClass() : null"
+          @mouseover="hasAimHover ? setHovers($event) : null"
         >
-          <slot />
-        </table-container>
-      </table-wrapper>
-    </table-scroll>
-  </page-container>
+          <slot></slot>
+        </TableContainer>
+      </TableWrapper>
+    </TableScroll>
+  </PageContainer>
 </template>
 
 <script>
-// ToDo: add this to storybook
-// import MainTable from "@eturnity/eturnity_reusable_components/src/components/tables/mainTable"
-import styled from 'vue3-styled-components'
-import Spinner from '../../spinner'
-import dragIconSvg from '../../../assets/icons/drag_icon.svg?url'
-import subpositionIconSvg from '../../../assets/icons/subposition_icon.svg?url'
-import arrowDownSvg from '../../../assets/icons/arrow_down.svg?url'
-import arrowUpRedSvg from '../../../assets/icons/arrow_up_red.svg?url'
-
-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;
-  font-weight: bold;
-  font-size: 14px;
-  text-transform: uppercase;
-`
-
-const tableScrollProps = {
-  isPositionAbsolute: Boolean
-}
-
-const TableScroll = styled('div', tableScrollProps)`
-  max-width: 100%;
-  height: auto;
-  ${(props) =>
-    props.isPositionAbsolute &&
-    `
+  // ToDo: add this to storybook
+  // import MainTable from "@eturnity/eturnity_reusable_components/src/components/tables/mainTable"
+  import styled from 'vue3-styled-components'
+  import Spinner from '../../spinner'
+  import dragIconSvg from '../../../assets/icons/drag_icon.svg?url'
+  import subpositionIconSvg from '../../../assets/icons/subposition_icon.svg?url'
+  import arrowDownSvg from '../../../assets/icons/arrow_down.svg?url'
+  import arrowUpRedSvg from '../../../assets/icons/arrow_up_red.svg?url'
+
+  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;
+    font-weight: bold;
+    font-size: 14px;
+    text-transform: uppercase;
+  `
+
+  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-x: auto;
-  overflow-y: hidden;
-
-  ::-webkit-scrollbar {
-    height: 10px; //height of the whole scrollbar area
-  }
+  const wrapperAttrs = { fullWidth: Boolean }
+  const TableWrapper = styled('div', wrapperAttrs)`
+    width: ${(props) => (props.fullWidth ? '100%' : 'fit-content')};
+    max-width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
 
-  ::-webkit-scrollbar-track {
-    background: ${(props) => props.theme.colors.grey2};
-    border-radius: 4px;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    border-bottom: 10px solid ${(props) => props.theme.colors.brightBlue}; // width of the actual scrollbar
-    border-radius: 4px;
-  }
-`
-
-const SpinnerWrapper = styled.div`
-  height: 150px;
-  display: grid;
-  align-items: center;
-  justify-items: center;
-`
-
-const containerAttrs = {
-  cellPaddings: String,
-  tableCursor: String
-}
-
-const TableContainer = styled('table', containerAttrs)`
-  width: 100%;
-  border-collapse: collapse;
-  border: none;
-  font-size: 13px;
-
-  thead {
-    font-weight: bold;
+    ::-webkit-scrollbar {
+      height: 10px; //height of the whole scrollbar area
+    }
 
-    tr {
-      border-bottom: none !important;
+    ::-webkit-scrollbar-track {
+      background: ${(props) => props.theme.colors.grey2};
+      border-radius: 4px;
     }
-  }
 
-  .collective-row-toggle {
-    cursor: pointer !important;
+    ::-webkit-scrollbar-thumb {
+      border-bottom: 10px solid ${(props) => props.theme.colors.brightBlue}; // width of the actual scrollbar
+      border-radius: 4px;
+    }
+  `
+
+  const SpinnerWrapper = styled.div`
+    height: 150px;
+    display: grid;
+    align-items: center;
+    justify-items: center;
+  `
+
+  const containerAttrs = {
+    cellPaddings: String,
+    tableCursor: String,
   }
 
-  tbody {
-    tr {
-      &:hover, td.hovered-column {
-        background-color: ${(props) => props.theme.colors.white};
-        cursor: ${(props) => (props.tableCursor ? props.tableCursor : 'auto')};
-
-        .select-button,
-        .arrow-container,
-        .input-placeholder,
-        .table-dropdown-item {
-          background-color: ${(props) => props.theme.colors.grey5};
-        }
+  const TableContainer = styled('table', containerAttrs)`
+    width: 100%;
+    border-collapse: collapse;
+    border: none;
+    font-size: 13px;
 
-        input {
-          background-color: ${(props) => props.theme.colors.grey5};
-        }
-      }
+    thead {
+      font-weight: bold;
 
-      td {
-        height: 40px;
+      tr {
+        border-bottom: none !important;
       }
     }
-  }
-
-  th {
-    padding: 11px 15px;
-    background-color: ${(props) => props.theme.colors.blue1};
-    cursor: auto;
-    height: 40px;
 
-    .ordering {
-      display: grid;
-      grid-template-columns: 1fr auto;
-      grid-gap: 6px;
+    .collective-row-toggle {
+      cursor: pointer !important;
     }
-  }
-
-  td {
-    padding: ${(props) =>
-      props.cellPaddings ? props.cellPaddings : '6px 6px 7px 4px'};
-    border-bottom: 1px solid ${(props) => props.theme.colors.grey4};
 
-    &.empty {
-      height: 100px;
-      text-align: center;
-      cursor: default;
-      background-color: #fff !important;
-    }
+    tbody {
+      tr {
+        &:hover,
+        td.hovered-column {
+          background-color: ${(props) => props.theme.colors.white};
+          cursor: ${(props) =>
+            props.tableCursor ? props.tableCursor : 'auto'};
+
+          .select-button,
+          .arrow-container,
+          .input-placeholder,
+          .table-dropdown-item {
+            background-color: ${(props) => props.theme.colors.grey5};
+          }
 
-    &.no-border {
-      border-bottom: none;
-    }
+          input {
+            background-color: ${(props) => props.theme.colors.grey5};
+          }
+        }
 
-    .collective-container {
-      display: grid;
-      grid-template-columns: auto 1fr;
-      align-items: center;
-      grid-gap: 10px;
-      cursor: ${(props) => (props.tableCursor ? props.tableCursor : 'pointer')};
+        td {
+          height: 40px;
+        }
+      }
     }
 
-    .collective-box {
-      width: 22px;
-      height: 22px;
-      border-radius: 4px;
-      color: #fff;
-      background-color: ${(props) => props.theme.colors.grey3};
-      font-size: 13px;
-      font-weight: normal;
-      display: grid;
-      align-items: center;
-      justify-items: center;
+    th {
+      padding: 11px 15px;
+      background-color: ${(props) => props.theme.colors.blue1};
+      cursor: auto;
+      height: 40px;
 
-      &.open {
-        background-color: ${(props) => props.theme.colors.green};
+      .ordering {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        grid-gap: 6px;
       }
     }
-  }
 
-  td,
-  th {
-    white-space: nowrap;
-    text-align: left;
+    td {
+      padding: ${(props) =>
+        props.cellPaddings ? props.cellPaddings : '6px 6px 7px 4px'};
+      border-bottom: 1px solid ${(props) => props.theme.colors.grey4};
 
-    &.align {
-      &-left {
-        text-align: left;
+      &.empty {
+        height: 100px;
+        text-align: center;
+        cursor: default;
+        background-color: #fff !important;
       }
 
-      &-center {
-        text-align: center;
+      &.no-border {
+        border-bottom: none;
       }
 
-      &-right {
-        text-align: right;
+      .collective-container {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        align-items: center;
+        grid-gap: 10px;
+        cursor: ${(props) =>
+          props.tableCursor ? props.tableCursor : 'pointer'};
       }
-    }
 
-    &.checkbox {
-      padding: 7px 15px !important;
-      width: 40px;
+      .collective-box {
+        width: 22px;
+        height: 22px;
+        border-radius: 4px;
+        color: #fff;
+        background-color: ${(props) => props.theme.colors.grey3};
+        font-size: 13px;
+        font-weight: normal;
+        display: grid;
+        align-items: center;
+        justify-items: center;
+
+        &.open {
+          background-color: ${(props) => props.theme.colors.green};
+        }
+      }
     }
 
-    &.checkbox-header {
-      min-width: 40px;
-      display: flex;
-      gap: 10px;
-    }
-  }
+    td,
+    th {
+      white-space: nowrap;
+      text-align: left;
 
-  tr {
-    &.disabled {
-      cursor: not-allowed !important;
-    }
+      &.align {
+        &-left {
+          text-align: left;
+        }
 
-    .arrow-dropdown {
-      visibility: hidden;
-    }
+        &-center {
+          text-align: center;
+        }
 
-    &.footer {
-      td {
-        background-color: ${(props) => props.theme.colors.grey5};
-        /* border-top: 1px solid ${(props) => props.theme.colors.grey4}; */
+        &-right {
+          text-align: right;
+        }
       }
 
-      .text {
-        cursor: auto !important;
+      &.checkbox {
+        padding: 7px 15px !important;
+        width: 40px;
       }
-    }
 
-    .text {
-      padding: 10px 15px 10px 15px;
-      color: ${(props) => props.theme.colors.black};
-      cursor: ${(props) => (props.tableCursor ? props.tableCursor : 'auto')};
+      &.checkbox-header {
+        min-width: 40px;
+        display: flex;
+        gap: 10px;
+      }
     }
 
-    .bold {
-      font-weight: bold;
-    }
+    tr {
+      &.disabled {
+        cursor: not-allowed !important;
+      }
 
-    .icons-container {
-      padding-right: 2px; // so that the icons are not cut off when hovering
-      width: 1%; // necessary so it doesn't take up too much white space
-      display: table-cell;
-      flex-wrap: nowrap;
-      background-color: #fff;
-      vertical-align: middle;
-    }
+      .arrow-dropdown {
+        visibility: hidden;
+      }
 
-    .arrow-container {
-      display: table-cell;
-      vertical-align: middle;
-      cursor: ${(props) => (props.tableCursor ? props.tableCursor : 'pointer')};
-      border-bottom: 1px solid ${(props) => props.theme.colors.grey4};
-    }
+      &.footer {
+        td {
+          background-color: ${(props) => props.theme.colors.grey5};
+          /* border-top: 1px solid ${(props) => props.theme.colors.grey4}; */
+        }
 
-    &.container-row td {
-      padding: 0;
-    }
+        .text {
+          cursor: auto !important;
+        }
+      }
 
-    &.no-border {
-      td,
-      .arrow-container {
-        border-bottom: none;
+      .text {
+        padding: 10px 15px 10px 15px;
+        color: ${(props) => props.theme.colors.black};
+        cursor: ${(props) => (props.tableCursor ? props.tableCursor : 'auto')};
       }
-    }
 
-    &:hover {
-      input:disabled {
-        background-color: ${(props) => props.theme.colors.grey5 + '!important'};
+      .bold {
+        font-weight: bold;
       }
 
-      .drag-icon {
-        visibility: visible;
+      .icons-container {
+        padding-right: 2px; // so that the icons are not cut off when hovering
+        width: 1%; // necessary so it doesn't take up too much white space
+        display: table-cell;
+        flex-wrap: nowrap;
+        background-color: #fff;
+        vertical-align: middle;
       }
 
-      .drag-wrapper {
-        background-color: ${(props) => props.theme.colors.grey5};
+      .arrow-container {
+        display: table-cell;
+        vertical-align: middle;
+        cursor: ${(props) =>
+          props.tableCursor ? props.tableCursor : 'pointer'};
+        border-bottom: 1px solid ${(props) => props.theme.colors.grey4};
       }
 
-      .arrow-dropdown {
-        visibility: visible;
+      &.container-row td {
+        padding: 0;
       }
-    }
 
-    .drag-container {
-      display: table-cell;
-      width: 20px;
-      min-width: 20px;
-      height: 40px;
-    }
+      &.no-border {
+        td,
+        .arrow-container {
+          border-bottom: none;
+        }
+      }
 
-    .drag-wrapper {
-      width: 16px;
-      height: 36px;
-      display: grid;
-      align-items: center;
-      justify-items: center;
-      border-radius: 4px;
-    }
+      &:hover {
+        input:disabled {
+          background-color: ${(props) =>
+            props.theme.colors.grey5 + '!important'};
+        }
+
+        .drag-icon {
+          visibility: visible;
+        }
 
-    .drag-icon {
-      visibility: hidden;
-      width: 10px;
-      height: 16px;
-      cursor: grab;
-      background-position: center;
-      background-image: ${() => `url(${dragIconSvg})`};
+        .drag-wrapper {
+          background-color: ${(props) => props.theme.colors.grey5};
+        }
 
-      &:active {
-        cursor: grabbing;
+        .arrow-dropdown {
+          visibility: visible;
+        }
       }
-    }
 
-    .subposition-icon {
-      width: 14px;
-      height: 11px;
-      background: no-repeat;
-      margin-left: 10px;
-      background-image: ${() => `url(${subpositionIconSvg})`};
-    }
+      .drag-container {
+        display: table-cell;
+        width: 20px;
+        min-width: 20px;
+        height: 40px;
+      }
 
-    .arrow-down {
-      width: 14px;
-      height: 11px;
-      background: no-repeat;
-      background-position: center;
-      background-image: ${() => `url(${arrowDownSvg})`};
-    }
+      .drag-wrapper {
+        width: 16px;
+        height: 36px;
+        display: grid;
+        align-items: center;
+        justify-items: center;
+        border-radius: 4px;
+      }
+
+      .drag-icon {
+        visibility: hidden;
+        width: 10px;
+        height: 16px;
+        cursor: grab;
+        background-position: center;
+        background-image: ${() => `url(${dragIconSvg})`};
+
+        &:active {
+          cursor: grabbing;
+        }
+      }
 
-    .arrow-up {
-      width: 14px;
-      height: 11px;
-      background: no-repeat;
-      background-position: center;
-      background-image: ${() => `url(${arrowUpRedSvg})`};
+      .subposition-icon {
+        width: 14px;
+        height: 11px;
+        background: no-repeat;
+        margin-left: 10px;
+        background-image: ${() => `url(${subpositionIconSvg})`};
+      }
+
+      .arrow-down {
+        width: 14px;
+        height: 11px;
+        background: no-repeat;
+        background-position: center;
+        background-image: ${() => `url(${arrowDownSvg})`};
+      }
+
+      .arrow-up {
+        width: 14px;
+        height: 11px;
+        background: no-repeat;
+        background-position: center;
+        background-image: ${() => `url(${arrowUpRedSvg})`};
+      }
     }
-  }
 
-  input {
-    font-size: 13px;
-    padding: 5px 10px;
-    background: #fff;
-    height: unset;
+    input {
+      font-size: 13px;
+      padding: 5px 10px;
+      background: #fff;
+      height: unset;
 
-    &:focus {
-      background: ${(props) => props.theme.colors.grey5};
+      &:focus {
+        background: ${(props) => props.theme.colors.grey5};
+      }
     }
-  }
 
-  .open-container {
-    border: 1px solid ${(props) => props.theme.colors.grey4};
-    border-radius: 4px;
-    margin-bottom: 5px;
-    cursor: auto;
-  }
-`
-
-export default {
-  name: 'main-table',
-  components: {
-    TableScroll,
-    TableWrapper,
-    SpinnerWrapper,
-    Spinner,
-    TableContainer,
-    PageContainer,
-    TableTitle
-  },
-  props: {
-    fullWidth: {
-      required: false,
-      default: true
-    },
-    cellPaddings: {
-      required: false,
-      default: ''
+    .open-container {
+      border: 1px solid ${(props) => props.theme.colors.grey4};
+      border-radius: 4px;
+      margin-bottom: 5px;
+      cursor: auto;
+    }
+  `
+
+  export default {
+    name: 'MainTable',
+    components: {
+      TableScroll,
+      TableWrapper,
+      SpinnerWrapper,
+      Spinner,
+      TableContainer,
+      PageContainer,
+      TableTitle,
     },
-    isLoading: {
-      required: false,
-      default: false
+    props: {
+      fullWidth: {
+        required: false,
+        default: true,
+      },
+      cellPaddings: {
+        required: false,
+        default: '',
+      },
+      isLoading: {
+        required: false,
+        default: false,
+      },
+      titleText: {
+        required: false,
+        default: null,
+      },
+      hasAimHover: {
+        required: false,
+        default: false,
+      },
+      tableCursor: {
+        required: false,
+      },
     },
-    titleText: {
-      required: false,
-      default: null
+    data() {
+      return {
+        tableHeight: 'auto',
+        doesTableContainDraggables: false,
+      }
     },
-    hasAimHover: {
-      required: false,
-      default: false
+    mounted() {
+      this.observeTableHeight()
     },
-    tableCursor: {
-      required: false
-    }
-  },
-  data() {
-    return {
-      tableHeight: 'auto',
-      doesTableContainDraggables: false
-    }
-  },
-  mounted() {
-    this.observeTableHeight()
-  },
-  beforeDestroy() {
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect()
-    }
-  },
-  methods: {
-    findParentElementByTagName(element, tagName) {
-      let currentParentElement = element.parentElement
-      while (currentParentElement && currentParentElement.tagName !== tagName) {
-        currentParentElement = currentParentElement.parentElement
+    beforeUnmount() {
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect()
       }
-
-      return currentParentElement && currentParentElement.tagName === tagName ? currentParentElement : null
-    },
-    removeHoverClass() {
-      const hoveredItems = document.querySelectorAll('.hovered-column')
-      hoveredItems.forEach((el) => {
-        el.classList.remove('hovered-column')
-      })
     },
-    setHovers(event) {
-      this.removeHoverClass()
-      if (event.target.tagName !== 'TABLE' && event.target.tagName !== 'TH' && event.target.tagName !== 'TR') {
-        let hoveredCell = event.target
-
-        if (hoveredCell.tagName !== 'TD') {
-          // Looking for hovered TD element
-          hoveredCell = this.findParentElementByTagName(hoveredCell, 'TD')
+    methods: {
+      findParentElementByTagName(element, tagName) {
+        let currentParentElement = element.parentElement
+        while (
+          currentParentElement &&
+          currentParentElement.tagName !== tagName
+        ) {
+          currentParentElement = currentParentElement.parentElement
         }
 
-        if (hoveredCell) {
-          const rowChildren = Array.from(hoveredCell.parentElement.children)
-          const hoveredCellIndex = rowChildren.indexOf(hoveredCell)
-          const currentTable = this.findParentElementByTagName(hoveredCell, 'TABLE')
-          if (currentTable) {
-            const rowList = Array.from(currentTable.querySelectorAll('tr'))
-            rowList.forEach((el) => {
-              const cells = Array.from(el.children)
-              if (cells[hoveredCellIndex]) {
-                cells[hoveredCellIndex].classList.add('hovered-column')
-              }
-            })
+        return currentParentElement && currentParentElement.tagName === tagName
+          ? currentParentElement
+          : null
+      },
+      removeHoverClass() {
+        const hoveredItems = document.querySelectorAll('.hovered-column')
+        hoveredItems.forEach((el) => {
+          el.classList.remove('hovered-column')
+        })
+      },
+      setHovers(event) {
+        this.removeHoverClass()
+        if (
+          event.target.tagName !== 'TABLE' &&
+          event.target.tagName !== 'TH' &&
+          event.target.tagName !== 'TR'
+        ) {
+          let hoveredCell = event.target
+
+          if (hoveredCell.tagName !== 'TD') {
+            // Looking for hovered TD element
+            hoveredCell = this.findParentElementByTagName(hoveredCell, 'TD')
+          }
+
+          if (hoveredCell) {
+            const rowChildren = Array.from(hoveredCell.parentElement.children)
+            const hoveredCellIndex = rowChildren.indexOf(hoveredCell)
+            const currentTable = this.findParentElementByTagName(
+              hoveredCell,
+              'TABLE'
+            )
+            if (currentTable) {
+              const rowList = Array.from(currentTable.querySelectorAll('tr'))
+              rowList.forEach((el) => {
+                const cells = Array.from(el.children)
+                if (cells[hoveredCellIndex]) {
+                  cells[hoveredCellIndex].classList.add('hovered-column')
+                }
+              })
+            }
           }
         }
-      }
+      },
+      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)
+      },
     },
-    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>