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

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

@@ -1,208 +1,195 @@
-<template>
-  <PageWrapper>
-    <TitleText>
-      {{ tableTitle }}
-    </TitleText>
-    <TableScroll>
-      <TableWrapper :full-width="fullWidth">
-        <SpinnerWrapper v-if="isLoading">
-          <Spinner />
-        </SpinnerWrapper>
-        <TableContainer v-else>
-          <thead>
-            <tr>
-              <TableHeader
-                v-for="(item, index) in headerItems"
-                :key="index"
-              >
-                {{ item.value }}
-              </TableHeader>
-              <div v-if="showIconsContainer && tableItems.length"></div>
-            </tr>
-          </thead>
-          <tbody>
-            <EmptyTd
-              v-if="!tableItems.length && !isLoading"
-              colspan="100"
-            >
-              <EmptyContainer>
-                {{ emptyText }}
-              </EmptyContainer>
-            </EmptyTd>
-            <TableRow
-              v-for="(row, index) in tableItems"
-              v-else
-              :key="index"
-            >
-              <TableItem
-                v-for="(item, idx) in row"
-                :key="idx"
-              >
-                {{ item.value }}
-              </TableItem>
-              <IconsContainer v-if="showIconsContainer">
-                <DeleteIcon
-                  color="gray"
-                  @click="$emit('on-click-delete', index)"
-                />
-              </IconsContainer>
-            </TableRow>
-          </tbody>
-        </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'
-
-  const TableScroll = styled.div`
-  position: relative;
-  max-width: 100%;
-`
-
-  const wrapperAttrs = { fullWidth: Boolean }
-  const TableWrapper = styled('div', wrapperAttrs)`
-  width: ${(props) => (props.fullWidth ? '100%' : 'fit-content')};
-  max-width: 100%;
-  overflow: auto;
-
-  ::-webkit-scrollbar {
-    width: 10px; //width of the whole scrollbar area
-  }
-
-  track ::-webkit-scrollbar-track {
-    background: #fff;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    border-bottom: 2px solid ${(props) => props.theme.colors.grey3}; // width of the actual scrollbar
-  }
-`
-
-  const TableContainer = styled.table`
-  width: 100%;
-  border-collapse: collapse;
-  border: none;
-`
-
-  const TableItem = styled.td`
-  border: 1px solid ${(props) => props.theme.colors.grey3};
-  width: auto;
-  white-space: nowrap;
-  padding: 12px;
-  text-align: right;
-`
-
-  const TableHeader = styled(TableItem)`
-  background-color: #e6e8ee;
-  font-weight: 700;
-  text-align: left;
-`
-
-  const TableRow = styled.tr`
-  &:hover {
-    background-color: #f5f7fa;
-    cursor: pointer;
-  }
-`
-
-  const TitleText = styled.div`
-  font-weight: 700;
-  margin-bottom: 6px;
-`
-
-  const PageWrapper = styled.div`
-  margin: 16px 0;
-  font-size: 13px;
-`
-
-  const IconsContainer = styled.div`
-  width: 100%;
-  display: inline-flex;
-  flex-wrap: nowrap;
-  background-color: #fff;
-
-  &:hover {
-    background-color: #fff;
-  }
-`
-
-  const SpinnerWrapper = styled.div`
-  border: 1px solid ${(props) => props.theme.colors.grey3};
-  height: 150px;
-  display: grid;
-  align-items: center;
-  justify-items: center;
-`
-
-  const EmptyContainer = styled.div`
-  display: grid;
-  align-items: center;
-  justify-items: center;
-  height: 100px;
-`
-
-  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
-    },
-    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'
-      }
-    },
-    computed: {
-      showIconsContainer() {
-        return this.showDeleteButton
-      }
-    }
-  }
-</script>
+<template>
+  <page-wrapper>
+    <title-text>
+      {{ tableTitle }}
+    </title-text>
+    <table-scroll>
+      <table-wrapper :fullWidth="fullWidth">
+        <spinner-wrapper v-if="isLoading">
+          <spinner />
+        </spinner-wrapper>
+        <table-container v-else>
+          <thead>
+            <tr>
+              <table-header v-for="(item, index) in headerItems" :key="index">
+                {{ item.value }}
+              </table-header>
+              <div v-if="showIconsContainer && tableItems.length" />
+            </tr>
+          </thead>
+          <tbody>
+            <empty-td colspan="100" v-if="!tableItems.length && !isLoading">
+              <empty-container>
+                {{ 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">
+                {{ item.value }}
+              </table-item>
+              <icons-container v-if="showIconsContainer">
+                <delete-icon
+                  @click="$emit('on-click-delete', index)"
+                  color="gray"
+                />
+              </icons-container>
+            </table-row>
+          </tbody>
+        </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'
+
+const TableScroll = styled.div`
+  position: relative;
+  max-width: 100%;
+`
+
+const wrapperAttrs = { fullWidth: Boolean }
+const TableWrapper = styled('div', wrapperAttrs)`
+  width: ${(props) => (props.fullWidth ? '100%' : 'fit-content')};
+  max-width: 100%;
+  overflow: auto;
+
+  ::-webkit-scrollbar {
+    width: 10px; //width of the whole scrollbar area
+  }
+
+  track ::-webkit-scrollbar-track {
+    background: #fff;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-bottom: 2px solid ${(props) => props.theme.colors.grey3}; // width of the actual scrollbar
+  }
+`
+
+const TableContainer = styled.table`
+  width: 100%;
+  border-collapse: collapse;
+  border: none;
+`
+
+const TableItem = styled.td`
+  border: 1px solid ${(props) => props.theme.colors.grey3};
+  width: auto;
+  white-space: nowrap;
+  padding: 12px;
+  text-align: right;
+`
+
+const TableHeader = styled(TableItem)`
+  background-color: #e6e8ee;
+  font-weight: 700;
+  text-align: left;
+`
+
+const TableRow = styled.tr`
+  &:hover {
+    background-color: #f5f7fa;
+    cursor: pointer;
+  }
+`
+
+const TitleText = styled.div`
+  font-weight: 700;
+  margin-bottom: 6px;
+`
+
+const PageWrapper = styled.div`
+  margin: 16px 0;
+  font-size: 13px;
+`
+
+const IconsContainer = styled.div`
+  width: 100%;
+  display: inline-flex;
+  flex-wrap: nowrap;
+  background-color: #fff;
+
+  &:hover {
+    background-color: #fff;
+  }
+`
+
+const SpinnerWrapper = styled.div`
+  border: 1px solid ${(props) => props.theme.colors.grey3};
+  height: 150px;
+  display: grid;
+  align-items: center;
+  justify-items: center;
+`
+
+const EmptyContainer = styled.div`
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  height: 100px;
+`
+
+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
+    },
+    tableTitle: {
+      required: false,
+      default: null
+    },
+    showDeleteButton: {
+      required: false,
+      default: false
+    },
+    isLoading: {
+      required: false,
+      default: false
+    },
+    emptyText: {
+      required: false,
+      default: 'There are no items'
+    }
+  },
+  computed: {
+    showIconsContainer() {
+      return this.showDeleteButton
+    }
+  }
+}
+</script>