@eturnity/eturnity_reusable_components 7.24.3-EPDM-10576.1 → 7.24.3-EPDM-11320.0

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

@@ -1,63 +1,66 @@
 <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"
+          :cell-paddings="cellPaddings"
+          :table-cursor="tableCursor"
         >
-          <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)`
+  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'};
+  props.shouldSetCustomHeight ? props.tableHeight : 'auto'};
 `
 
-const TableTitle = styled.div`
+  const TableTitle = styled.div`
   margin-bottom: 16px;
   font-weight: bold;
   font-size: 14px;
   text-transform: uppercase;
 `
 
-const tableScrollProps = {
-  isPositionAbsolute: Boolean
-}
+  const tableScrollProps = {
+    isPositionAbsolute: Boolean
+  }
 
-const TableScroll = styled('div', tableScrollProps)`
+  const TableScroll = styled('div', tableScrollProps)`
   max-width: 100%;
   height: auto;
   ${(props) =>
@@ -68,8 +71,8 @@ const TableScroll = styled('div', tableScrollProps)`
   `}
 `
 
-const wrapperAttrs = { fullWidth: Boolean }
-const TableWrapper = styled('div', wrapperAttrs)`
+  const wrapperAttrs = { fullWidth: Boolean }
+  const TableWrapper = styled('div', wrapperAttrs)`
   width: ${(props) => (props.fullWidth ? '100%' : 'fit-content')};
   max-width: 100%;
   overflow-x: auto;
@@ -90,19 +93,19 @@ const TableWrapper = styled('div', wrapperAttrs)`
   }
 `
 
-const SpinnerWrapper = styled.div`
+  const SpinnerWrapper = styled.div`
   height: 150px;
   display: grid;
   align-items: center;
   justify-items: center;
 `
 
-const containerAttrs = {
-  cellPaddings: String,
-  tableCursor: String
-}
+  const containerAttrs = {
+    cellPaddings: String,
+    tableCursor: String
+  }
 
-const TableContainer = styled('table', containerAttrs)`
+  const TableContainer = styled('table', containerAttrs)`
   width: 100%;
   border-collapse: collapse;
   border: none;
@@ -159,7 +162,7 @@ const TableContainer = styled('table', containerAttrs)`
 
   td {
     padding: ${(props) =>
-      props.cellPaddings ? props.cellPaddings : '6px 6px 7px 4px'};
+  props.cellPaddings ? props.cellPaddings : '6px 6px 7px 4px'};
     border-bottom: 1px solid ${(props) => props.theme.colors.grey4};
 
     &.empty {
@@ -378,70 +381,70 @@ const TableContainer = styled('table', containerAttrs)`
   }
 `
 
-export default {
-  name: 'main-table',
-  components: {
-    TableScroll,
-    TableWrapper,
-    SpinnerWrapper,
-    Spinner,
-    TableContainer,
-    PageContainer,
-    TableTitle
-  },
-  props: {
-    fullWidth: {
-      required: false,
-      default: true
+  export default {
+    name: 'MainTable',
+    components: {
+      TableScroll,
+      TableWrapper,
+      SpinnerWrapper,
+      Spinner,
+      TableContainer,
+      PageContainer,
+      TableTitle
     },
-    cellPaddings: {
-      required: false,
-      default: ''
+    props: {
+      fullWidth: {
+        required: false,
+        default: true
+      },
+      cellPaddings: {
+        required: false,
+        default: ''
+      },
+      isLoading: {
+        required: false,
+        default: false
+      },
+      titleText: {
+        required: false,
+        default: null
+      },
+      tableCursor: {
+        required: false
+      }
     },
-    isLoading: {
-      required: false,
-      default: false
+    data() {
+      return {
+        tableHeight: 'auto',
+        doesTableContainDraggables: false
+      }
     },
-    titleText: {
-      required: false,
-      default: null
+    mounted() {
+      this.observeTableHeight()
     },
-    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)
+    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/tables/viewTable/index.vue

@@ -1,61 +1,74 @@
 <template>
-  <page-wrapper>
-    <title-text>
+  <PageWrapper>
+    <TitleText>
       {{ tableTitle }}
-    </title-text>
-    <table-scroll>
-      <table-wrapper :fullWidth="fullWidth">
-        <spinner-wrapper v-if="isLoading">
-          <spinner />
-        </spinner-wrapper>
-        <table-container v-else>
+    </TitleText>
+    <TableScroll>
+      <TableWrapper :full-width="fullWidth">
+        <SpinnerWrapper v-if="isLoading">
+          <Spinner />
+        </SpinnerWrapper>
+        <TableContainer v-else>
           <thead>
             <tr>
-              <table-header v-for="(item, index) in headerItems" :key="index">
+              <TableHeader
+                v-for="(item, index) in headerItems"
+                :key="index"
+              >
                 {{ item.value }}
-              </table-header>
-              <div v-if="showIconsContainer && tableItems.length" />
+              </TableHeader>
+              <div v-if="showIconsContainer && tableItems.length"></div>
             </tr>
           </thead>
           <tbody>
-            <empty-td colspan="100" v-if="!tableItems.length && !isLoading">
-              <empty-container>
+            <EmptyTd
+              v-if="!tableItems.length && !isLoading"
+              colspan="100"
+            >
+              <EmptyContainer>
                 {{ emptyText }}
-              </empty-container>
-            </empty-td>
-            <table-row v-for="(row, index) in tableItems" :key="index" v-else>
-              <table-item v-for="(item, idx) in row" :key="idx">
+              </EmptyContainer>
+            </EmptyTd>
+            <TableRow
+              v-for="(row, index) in tableItems"
+              v-else
+              :key="index"
+            >
+              <TableItem
+                v-for="(item, idx) in row"
+                :key="idx"
+              >
                 {{ item.value }}
-              </table-item>
-              <icons-container v-if="showIconsContainer">
-                <delete-icon
-                  @click="$emit('on-click-delete', index)"
+              </TableItem>
+              <IconsContainer v-if="showIconsContainer">
+                <DeleteIcon
                   color="gray"
+                  @click="$emit('on-click-delete', index)"
                 />
-              </icons-container>
-            </table-row>
+              </IconsContainer>
+            </TableRow>
           </tbody>
-        </table-container>
-      </table-wrapper>
-    </table-scroll>
-  </page-wrapper>
+        </TableContainer>
+      </TableWrapper>
+    </TableScroll>
+  </PageWrapper>
 </template>
 
 <script>
 // This is a read only table. Pass it data, and it displays it
 // ToDo: add this to storybook
 // import ViewTable from "@eturnity/eturnity_reusable_components/src/components/tables/viewTable"
-import styled from 'vue3-styled-components'
-import DeleteIcon from '../../deleteIcon'
-import Spinner from '../../spinner'
+  import styled from 'vue3-styled-components'
+  import DeleteIcon from '../../deleteIcon'
+  import Spinner from '../../spinner'
 
-const TableScroll = styled.div`
+  const TableScroll = styled.div`
   position: relative;
   max-width: 100%;
 `
 
-const wrapperAttrs = { fullWidth: Boolean }
-const TableWrapper = styled('div', wrapperAttrs)`
+  const wrapperAttrs = { fullWidth: Boolean }
+  const TableWrapper = styled('div', wrapperAttrs)`
   width: ${(props) => (props.fullWidth ? '100%' : 'fit-content')};
   max-width: 100%;
   overflow: auto;
@@ -73,13 +86,13 @@ const TableWrapper = styled('div', wrapperAttrs)`
   }
 `
 
-const TableContainer = styled.table`
+  const TableContainer = styled.table`
   width: 100%;
   border-collapse: collapse;
   border: none;
 `
 
-const TableItem = styled.td`
+  const TableItem = styled.td`
   border: 1px solid ${(props) => props.theme.colors.grey3};
   width: auto;
   white-space: nowrap;
@@ -87,30 +100,30 @@ const TableItem = styled.td`
   text-align: right;
 `
 
-const TableHeader = styled(TableItem)`
+  const TableHeader = styled(TableItem)`
   background-color: #e6e8ee;
   font-weight: 700;
   text-align: left;
 `
 
-const TableRow = styled.tr`
+  const TableRow = styled.tr`
   &:hover {
     background-color: #f5f7fa;
     cursor: pointer;
   }
 `
 
-const TitleText = styled.div`
+  const TitleText = styled.div`
   font-weight: 700;
   margin-bottom: 6px;
 `
 
-const PageWrapper = styled.div`
+  const PageWrapper = styled.div`
   margin: 16px 0;
   font-size: 13px;
 `
 
-const IconsContainer = styled.div`
+  const IconsContainer = styled.div`
   width: 100%;
   display: inline-flex;
   flex-wrap: nowrap;
@@ -121,7 +134,7 @@ const IconsContainer = styled.div`
   }
 `
 
-const SpinnerWrapper = styled.div`
+  const SpinnerWrapper = styled.div`
   border: 1px solid ${(props) => props.theme.colors.grey3};
   height: 150px;
   display: grid;
@@ -129,67 +142,67 @@ const SpinnerWrapper = styled.div`
   justify-items: center;
 `
 
-const EmptyContainer = styled.div`
+  const EmptyContainer = styled.div`
   display: grid;
   align-items: center;
   justify-items: center;
   height: 100px;
 `
 
-const EmptyTd = styled.td`
+  const EmptyTd = styled.td`
   border: 1px solid ${(props) => props.theme.colors.grey3};
 `
 
-export default {
-  name: 'view-table',
-  components: {
-    TableScroll,
-    TableWrapper,
-    TableContainer,
-    TableHeader,
-    TableItem,
-    TableRow,
-    TitleText,
-    PageWrapper,
-    DeleteIcon,
-    IconsContainer,
-    Spinner,
-    SpinnerWrapper,
-    EmptyContainer,
-    EmptyTd
-  },
-  props: {
-    headerItems: {
-      required: true
-    },
-    tableItems: {
-      required: true
-    },
-    fullWidth: {
-      required: false,
-      default: true
+  export default {
+    name: 'ViewTable',
+    components: {
+      TableScroll,
+      TableWrapper,
+      TableContainer,
+      TableHeader,
+      TableItem,
+      TableRow,
+      TitleText,
+      PageWrapper,
+      DeleteIcon,
+      IconsContainer,
+      Spinner,
+      SpinnerWrapper,
+      EmptyContainer,
+      EmptyTd
     },
-    tableTitle: {
-      required: false,
-      default: null
+    props: {
+      headerItems: {
+        required: true
+      },
+      tableItems: {
+        required: true
+      },
+      fullWidth: {
+        required: false,
+        default: true
+      },
+      tableTitle: {
+        required: false,
+        default: null
+      },
+      showDeleteButton: {
+        required: false,
+        default: false
+      },
+      isLoading: {
+        required: false,
+        default: false
+      },
+      emptyText: {
+        required: false,
+        default: 'There are no items'
+      }
     },
-    showDeleteButton: {
-      required: false,
-      default: false
-    },
-    isLoading: {
-      required: false,
-      default: false
-    },
-    emptyText: {
-      required: false,
-      default: 'There are no items'
-    }
-  },
-  computed: {
-    showIconsContainer() {
-      return this.showDeleteButton
+    computed: {
+      showIconsContainer() {
+        return this.showDeleteButton
+      }
     }
   }
-}
 </script>