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

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

@@ -1,66 +1,63 @@
 <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)`
+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) =>
@@ -71,8 +68,8 @@
   `}
 `
 
-  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;
@@ -93,19 +90,19 @@
   }
 `
 
-  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;
@@ -162,7 +159,7 @@
 
   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 {
@@ -381,70 +378,70 @@
   }
 `
 
-  export default {
-    name: 'MainTable',
-    components: {
-      TableScroll,
-      TableWrapper,
-      SpinnerWrapper,
-      Spinner,
-      TableContainer,
-      PageContainer,
-      TableTitle
+export default {
+  name: 'main-table',
+  components: {
+    TableScroll,
+    TableWrapper,
+    SpinnerWrapper,
+    Spinner,
+    TableContainer,
+    PageContainer,
+    TableTitle
+  },
+  props: {
+    fullWidth: {
+      required: false,
+      default: true
     },
-    props: {
-      fullWidth: {
-        required: false,
-        default: true
-      },
-      cellPaddings: {
-        required: false,
-        default: ''
-      },
-      isLoading: {
-        required: false,
-        default: false
-      },
-      titleText: {
-        required: false,
-        default: null
-      },
-      tableCursor: {
-        required: false
-      }
+    cellPaddings: {
+      required: false,
+      default: ''
     },
-    data() {
-      return {
-        tableHeight: 'auto',
-        doesTableContainDraggables: false
-      }
+    isLoading: {
+      required: false,
+      default: false
     },
-    mounted() {
-      this.observeTableHeight()
+    titleText: {
+      required: false,
+      default: null
     },
-    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)
-      }
+    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/tables/viewTable/index.vue

@@ -1,74 +1,61 @@
 <template>
-  <PageWrapper>
-    <TitleText>
+  <page-wrapper>
+    <title-text>
       {{ tableTitle }}
-    </TitleText>
-    <TableScroll>
-      <TableWrapper :full-width="fullWidth">
-        <SpinnerWrapper v-if="isLoading">
-          <Spinner />
-        </SpinnerWrapper>
-        <TableContainer v-else>
+    </title-text>
+    <table-scroll>
+      <table-wrapper :fullWidth="fullWidth">
+        <spinner-wrapper v-if="isLoading">
+          <spinner />
+        </spinner-wrapper>
+        <table-container v-else>
           <thead>
             <tr>
-              <TableHeader
-                v-for="(item, index) in headerItems"
-                :key="index"
-              >
+              <table-header v-for="(item, index) in headerItems" :key="index">
                 {{ item.value }}
-              </TableHeader>
-              <div v-if="showIconsContainer && tableItems.length"></div>
+              </table-header>
+              <div v-if="showIconsContainer && tableItems.length" />
             </tr>
           </thead>
           <tbody>
-            <EmptyTd
-              v-if="!tableItems.length && !isLoading"
-              colspan="100"
-            >
-              <EmptyContainer>
+            <empty-td colspan="100" v-if="!tableItems.length && !isLoading">
+              <empty-container>
                 {{ emptyText }}
-              </EmptyContainer>
-            </EmptyTd>
-            <TableRow
-              v-for="(row, index) in tableItems"
-              v-else
-              :key="index"
-            >
-              <TableItem
-                v-for="(item, idx) in row"
-                :key="idx"
-              >
+              </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">
                 {{ item.value }}
-              </TableItem>
-              <IconsContainer v-if="showIconsContainer">
-                <DeleteIcon
-                  color="gray"
+              </table-item>
+              <icons-container v-if="showIconsContainer">
+                <delete-icon
                   @click="$emit('on-click-delete', index)"
+                  color="gray"
                 />
-              </IconsContainer>
-            </TableRow>
+              </icons-container>
+            </table-row>
           </tbody>
-        </TableContainer>
-      </TableWrapper>
-    </TableScroll>
-  </PageWrapper>
+        </table-container>
+      </table-wrapper>
+    </table-scroll>
+  </page-wrapper>
 </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;
@@ -86,13 +73,13 @@
   }
 `
 
-  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;
@@ -100,30 +87,30 @@
   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;
@@ -134,7 +121,7 @@
   }
 `
 
-  const SpinnerWrapper = styled.div`
+const SpinnerWrapper = styled.div`
   border: 1px solid ${(props) => props.theme.colors.grey3};
   height: 150px;
   display: grid;
@@ -142,67 +129,67 @@
   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: 'ViewTable',
-    components: {
-      TableScroll,
-      TableWrapper,
-      TableContainer,
-      TableHeader,
-      TableItem,
-      TableRow,
-      TitleText,
-      PageWrapper,
-      DeleteIcon,
-      IconsContainer,
-      Spinner,
-      SpinnerWrapper,
-      EmptyContainer,
-      EmptyTd
+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
     },
-    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'
-      }
+    tableTitle: {
+      required: false,
+      default: null
     },
-    computed: {
-      showIconsContainer() {
-        return this.showDeleteButton
-      }
+    showDeleteButton: {
+      required: false,
+      default: false
+    },
+    isLoading: {
+      required: false,
+      default: false
+    },
+    emptyText: {
+      required: false,
+      default: 'There are no items'
+    }
+  },
+  computed: {
+    showIconsContainer() {
+      return this.showDeleteButton
     }
   }
+}
 </script>