@eturnity/eturnity_reusable_components 7.24.3-EPDM-11320.3 → 7.24.3-qa-elisee-7.32.0

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

@@ -1,451 +1,447 @@
 <template>
-  <PageContainer
-    :should-set-custom-height="doesTableContainDraggables"
-    :table-height="tableHeight"
+  <page-container
+    :tableHeight="tableHeight"
+    :shouldSetCustomHeight="doesTableContainDraggables"
   >
-    <TableTitle v-if="titleText">
+    <table-title v-if="titleText">
       {{ titleText }}
-    </TableTitle>
-    <TableScroll
+    </table-title>
+    <table-scroll
       ref="tableRef"
-      :is-position-absolute="doesTableContainDraggables"
+      :isPositionAbsolute="doesTableContainDraggables"
     >
-      <TableWrapper class="main-table-wrapper" :full-width="fullWidth">
-        <SpinnerWrapper v-if="isLoading">
-          <Spinner />
-        </SpinnerWrapper>
-        <TableContainer
+      <table-wrapper class="main-table-wrapper" :fullWidth="fullWidth">
+        <spinner-wrapper v-if="isLoading">
+          <spinner />
+        </spinner-wrapper>
+        <table-container
           v-else
-          :cell-paddings="cellPaddings"
-          :table-cursor="tableCursor"
+          :cellPaddings="cellPaddings"
+          :tableCursor="tableCursor"
         >
-          <slot></slot>
-        </TableContainer>
-      </TableWrapper>
-    </TableScroll>
-  </PageContainer>
+          <slot />
+        </table-container>
+      </table-wrapper>
+    </table-scroll>
+  </page-container>
 </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;
+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
-    }
+  ::-webkit-scrollbar {
+    height: 10px; //height of the whole scrollbar area
+  }
 
-    ::-webkit-scrollbar-track {
-      background: ${(props) => props.theme.colors.grey2};
-      border-radius: 4px;
-    }
+  ::-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;
+  ::-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;
+
+    tr {
+      border-bottom: none !important;
     }
-  `
-
-  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;
+  .collective-row-toggle {
+    cursor: pointer !important;
+  }
 
-    thead {
-      font-weight: bold;
+  tbody {
+    tr {
+      &:hover {
+        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};
+        }
 
-      tr {
-        border-bottom: none !important;
+        input {
+          background-color: ${(props) => props.theme.colors.grey5};
+        }
+      }
+
+      td {
+        height: 40px;
       }
     }
+  }
 
-    .collective-row-toggle {
-      cursor: pointer !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;
     }
+  }
 
-    tbody {
-      tr {
-        &:hover {
-          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};
-          }
-
-          input {
-            background-color: ${(props) => props.theme.colors.grey5};
-          }
-        }
+  td {
+    padding: ${(props) =>
+      props.cellPaddings ? props.cellPaddings : '6px 6px 7px 4px'};
+    border-bottom: 1px solid ${(props) => props.theme.colors.grey4};
 
-        td {
-          height: 40px;
-        }
-      }
+    &.empty {
+      height: 100px;
+      text-align: center;
+      cursor: default;
+      background-color: #fff !important;
     }
 
-    th {
-      padding: 11px 15px;
-      background-color: ${(props) => props.theme.colors.blue1};
-      cursor: auto;
-      height: 40px;
+    &.no-border {
+      border-bottom: none;
+    }
 
-      .ordering {
-        display: grid;
-        grid-template-columns: 1fr auto;
-        grid-gap: 6px;
-      }
+    .collective-container {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      align-items: center;
+      grid-gap: 10px;
+      cursor: ${(props) => (props.tableCursor ? props.tableCursor : 'pointer')};
     }
 
-    td {
-      padding: ${(props) =>
-        props.cellPaddings ? props.cellPaddings : '6px 6px 7px 4px'};
-      border-bottom: 1px solid ${(props) => props.theme.colors.grey4};
+    .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;
 
-      &.empty {
-        height: 100px;
-        text-align: center;
-        cursor: default;
-        background-color: #fff !important;
+      &.open {
+        background-color: ${(props) => props.theme.colors.green};
       }
+    }
+  }
 
-      &.no-border {
-        border-bottom: none;
+  td,
+  th {
+    white-space: nowrap;
+    text-align: left;
+
+    &.align {
+      &-left {
+        text-align: left;
       }
 
-      .collective-container {
-        display: grid;
-        grid-template-columns: auto 1fr;
-        align-items: center;
-        grid-gap: 10px;
-        cursor: ${(props) =>
-          props.tableCursor ? props.tableCursor : 'pointer'};
+      &-center {
+        text-align: center;
       }
 
-      .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};
-        }
+      &-right {
+        text-align: right;
       }
     }
 
-    td,
-    th {
-      white-space: nowrap;
-      text-align: left;
-
-      &.align {
-        &-left {
-          text-align: left;
-        }
-
-        &-center {
-          text-align: center;
-        }
+    &.checkbox {
+      padding: 7px 15px !important;
+      width: 40px;
+    }
 
-        &-right {
-          text-align: right;
-        }
-      }
+    &.checkbox-header {
+      min-width: 40px;
+      display: flex;
+      gap: 10px;
+    }
+  }
 
-      &.checkbox {
-        padding: 7px 15px !important;
-        width: 40px;
-      }
+  tr {
+    &.disabled {
+      cursor: not-allowed !important;
+    }
 
-      &.checkbox-header {
-        min-width: 40px;
-        display: flex;
-        gap: 10px;
-      }
+    .arrow-dropdown {
+      visibility: hidden;
     }
 
-    tr {
-      &.disabled {
-        cursor: not-allowed !important;
+    &.footer {
+      td {
+        background-color: ${(props) => props.theme.colors.grey5};
+        /* border-top: 1px solid ${(props) => props.theme.colors.grey4}; */
       }
 
-      .arrow-dropdown {
-        visibility: hidden;
+      .text {
+        cursor: auto !important;
       }
+    }
 
-      &.footer {
-        td {
-          background-color: ${(props) => props.theme.colors.grey5};
-          /* border-top: 1px solid ${(props) => props.theme.colors.grey4}; */
-        }
+    .text {
+      padding: 10px 15px 10px 15px;
+      color: ${(props) => props.theme.colors.black};
+      cursor: ${(props) => (props.tableCursor ? props.tableCursor : 'auto')};
+    }
 
-        .text {
-          cursor: auto !important;
-        }
-      }
+    .bold {
+      font-weight: bold;
+    }
 
-      .text {
-        padding: 10px 15px 10px 15px;
-        color: ${(props) => props.theme.colors.black};
-        cursor: ${(props) => (props.tableCursor ? props.tableCursor : 'auto')};
-      }
+    .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;
+    }
 
-      .bold {
-        font-weight: bold;
-      }
+    .arrow-container {
+      display: table-cell;
+      vertical-align: middle;
+      cursor: ${(props) => (props.tableCursor ? props.tableCursor : 'pointer')};
+      border-bottom: 1px solid ${(props) => props.theme.colors.grey4};
+    }
 
-      .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;
-      }
+    &.container-row td {
+      padding: 0;
+    }
 
+    &.no-border {
+      td,
       .arrow-container {
-        display: table-cell;
-        vertical-align: middle;
-        cursor: ${(props) =>
-          props.tableCursor ? props.tableCursor : 'pointer'};
-        border-bottom: 1px solid ${(props) => props.theme.colors.grey4};
+        border-bottom: none;
       }
+    }
 
-      &.container-row td {
-        padding: 0;
+    &:hover {
+      input:disabled {
+        background-color: ${(props) => props.theme.colors.grey5 + '!important'};
       }
 
-      &.no-border {
-        td,
-        .arrow-container {
-          border-bottom: none;
-        }
+      .drag-icon {
+        visibility: visible;
       }
 
-      &:hover {
-        input:disabled {
-          background-color: ${(props) =>
-            props.theme.colors.grey5 + '!important'};
-        }
-
-        .drag-icon {
-          visibility: visible;
-        }
-
-        .drag-wrapper {
-          background-color: ${(props) => props.theme.colors.grey5};
-        }
-
-        .arrow-dropdown {
-          visibility: visible;
-        }
+      .drag-wrapper {
+        background-color: ${(props) => props.theme.colors.grey5};
       }
 
-      .drag-container {
-        display: table-cell;
-        width: 20px;
-        min-width: 20px;
-        height: 40px;
+      .arrow-dropdown {
+        visibility: visible;
       }
+    }
 
-      .drag-wrapper {
-        width: 16px;
-        height: 36px;
-        display: grid;
-        align-items: center;
-        justify-items: center;
-        border-radius: 4px;
-      }
+    .drag-container {
+      display: table-cell;
+      width: 20px;
+      min-width: 20px;
+      height: 40px;
+    }
 
-      .drag-icon {
-        visibility: hidden;
-        width: 10px;
-        height: 16px;
-        cursor: grab;
-        background-position: center;
-        background-image: ${() => `url(${dragIconSvg})`};
-
-        &:active {
-          cursor: grabbing;
-        }
-      }
+    .drag-wrapper {
+      width: 16px;
+      height: 36px;
+      display: grid;
+      align-items: center;
+      justify-items: center;
+      border-radius: 4px;
+    }
 
-      .subposition-icon {
-        width: 14px;
-        height: 11px;
-        background: no-repeat;
-        margin-left: 10px;
-        background-image: ${() => `url(${subpositionIconSvg})`};
-      }
+    .drag-icon {
+      visibility: hidden;
+      width: 10px;
+      height: 16px;
+      cursor: grab;
+      background-position: center;
+      background-image: ${() => `url(${dragIconSvg})`};
 
-      .arrow-down {
-        width: 14px;
-        height: 11px;
-        background: no-repeat;
-        background-position: center;
-        background-image: ${() => `url(${arrowDownSvg})`};
+      &: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})`};
     }
 
-    input {
-      font-size: 13px;
-      padding: 5px 10px;
-      background: #fff;
-      height: unset;
+    .arrow-down {
+      width: 14px;
+      height: 11px;
+      background: no-repeat;
+      background-position: center;
+      background-image: ${() => `url(${arrowDownSvg})`};
+    }
 
-      &:focus {
-        background: ${(props) => props.theme.colors.grey5};
-      }
+    .arrow-up {
+      width: 14px;
+      height: 11px;
+      background: no-repeat;
+      background-position: center;
+      background-image: ${() => `url(${arrowUpRedSvg})`};
     }
+  }
 
-    .open-container {
-      border: 1px solid ${(props) => props.theme.colors.grey4};
-      border-radius: 4px;
-      margin-bottom: 5px;
-      cursor: auto;
+  input {
+    font-size: 13px;
+    padding: 5px 10px;
+    background: #fff;
+    height: unset;
+
+    &:focus {
+      background: ${(props) => props.theme.colors.grey5};
     }
-  `
-
-  export default {
-    name: 'MainTable',
-    components: {
-      TableScroll,
-      TableWrapper,
-      SpinnerWrapper,
-      Spinner,
-      TableContainer,
-      PageContainer,
-      TableTitle,
-    },
-    props: {
-      fullWidth: {
-        required: false,
-        default: true,
-      },
-      cellPaddings: {
-        required: false,
-        default: '',
-      },
-      isLoading: {
-        required: false,
-        default: false,
-      },
-      titleText: {
-        required: false,
-        default: null,
-      },
-      tableCursor: {
-        required: false,
-      },
-    },
-    data() {
-      return {
-        tableHeight: 'auto',
-        doesTableContainDraggables: false,
-      }
+  }
+
+  .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
     },
-    mounted() {
-      this.observeTableHeight()
+    cellPaddings: {
+      required: false,
+      default: ''
     },
-    beforeDestroy() {
-      if (this.resizeObserver) {
-        this.resizeObserver.disconnect()
-      }
+    isLoading: {
+      required: false,
+      default: false
     },
-    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)
-      },
+    titleText: {
+      required: false,
+      default: null
     },
+    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>