@eturnity/eturnity_reusable_components 1.0.13 → 1.0.17

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

@@ -0,0 +1,328 @@
+<!-- This is just an example how to use mainTable with collective positioning -->
+<!-- <template>
+  <draggable-table>
+    <thead>
+      <tr>
+        <div />
+        <th v-for="item in headerItems" :key="item.value">
+          {{ item.value }}
+        </th>
+        <th />
+        <div />
+      </tr>
+    </thead>
+    <draggable-container
+      :items="tableList"
+      handle=".drag-container"
+      :options="{ disabled: false }"
+    >
+      <parent-container v-for="el in tableList" :key="el.sales">
+        <tr :class="{ 'no-border': isOpen({ id: el.id }), disabled: true }">
+          <div class="drag-container">
+            <div class="drag-icon" />
+          </div>
+          <td>
+            <div :class="{ 'collective-container': el.children }">
+              <input-text :value="el.description" />
+              <div
+                v-if="el.children"
+                @click="
+                  toggleShowChildren({ id: el.id, length: el.children.length })
+                "
+                :class="{
+                  'collective-box': true,
+                  open: isChildrenOpen({ id: el.id }),
+                }"
+              >
+                {{ el.children.length }}
+              </div>
+            </div>
+          </td>
+          <td>
+            <div v-if="el.children" />
+            <input-text v-else :value="el.cost_price" />
+          </td>
+          <td>
+            <div v-if="el.children" />
+            <input-text v-else :value="el.margin" />
+          </td>
+          <td>
+            <div v-if="el.children" />
+            <input-text v-else :value="el.installation" />
+          </td>
+          <td>
+            <input-text :value="el.sales" />
+          </td>
+          <div class="arrow-container" @click="toggleOpen({ id: el.id })">
+            <div v-if="isOpen({ id: el.id })" class="arrow-up" />
+            <div v-if="!isOpen({ id: el.id })" class="arrow-down" />
+          </div>
+          <div class="icons-container">
+            <three-dots :options="listOptions" />
+            <delete-icon color="gray" />
+          </div>
+        </tr>
+        <tr v-if="isOpen({ id: el.id })" class="container-row">
+          <div />
+          <td class="no-border" colspan="6" v-if="isOpen({ id: el.id })">
+            <div class="open-container">
+              <container-wrapper>
+                <div>hi you</div>
+                <div>Test test</div>
+              </container-wrapper>
+            </div>
+          </td>
+        </tr>
+        <children-wrapper
+          v-if="
+            el.children && el.children.length && isChildrenOpen({ id: el.id })
+          "
+        >
+          <draggable-container :items="el.children" handle=".drag-container">
+            <template v-for="item in el.children">
+              <tr
+                :key="item.sales"
+                :class="{
+                  'no-border': isOpen({ id: item.id }),
+                  disabled: true,
+                }"
+              >
+                <div class="drag-container">
+                  <div class="drag-icon" />
+                </div>
+                <td>
+                  <div class="collective-container">
+                    <span class="subposition-icon" />
+                    <input-text :value="item.description" />
+                  </div>
+                </td>
+                <td>
+                  <input-text :value="item.cost_price" />
+                </td>
+                <td>
+                  <input-text :value="item.margin" />
+                </td>
+                <td>
+                  <input-text :value="item.installation" />
+                </td>
+                <td><input-text :value="item.sales" /></td>
+                <div
+                  class="arrow-container"
+                  @click="toggleOpen({ id: item.id })"
+                >
+                  <div v-if="isOpen({ id: item.id })" class="arrow-up" />
+                  <div v-if="!isOpen({ id: item.id })" class="arrow-down" />
+                </div>
+                <div class="icons-container">
+                  <three-dots :options="listOptions" />
+                  <delete-icon color="gray" />
+                </div>
+              </tr>
+              <tr
+                v-if="isOpen({ id: item.id })"
+                class="container-row"
+                :key="item.sales"
+              >
+                <div />
+                <td
+                  class="no-border"
+                  colspan="6"
+                  v-if="isOpen({ id: item.id })"
+                >
+                  <div class="open-container">
+                    <container-wrapper>
+                      <div>hi you</div>
+                      <div>Test test</div>
+                    </container-wrapper>
+                  </div>
+                </td>
+              </tr>
+            </template>
+          </draggable-container>
+        </children-wrapper>
+      </parent-container>
+    </draggable-container>
+    <tr class="footer">
+      <div />
+      <td class="text bold">
+        Total PV system code
+      </td>
+      <td />
+      <td />
+      <td />
+      <td class="text bold">
+        17.000 CHF
+      </td>
+      <td />
+      <div />
+    </tr>
+  </draggable-table>
+</template>
+
+<script>
+import draggable from "vuedraggable"
+import styled from "vue-styled-components"
+import DraggableTable from "@/components/reusable-components/tables/DraggableTable"
+import InputText from "@eturnity/eturnity_reusable_components/src/components/inputs/inputText"
+import DeleteIcon from "@/components/reusable-components/DeleteIcon"
+import ThreeDots from "@/components/reusable-components/ThreeDots"
+
+const DraggableContainer = styled(draggable)`
+  display: contents;
+`
+
+const ParentContainer = styled.tbody`
+  /* display: contents; */
+`
+
+const ChildrenWrapper = styled.div`
+  display: contents;
+`
+
+const ContainerWrapper = styled.div`
+  display: grid;
+  padding: 12px;
+  grid-template-columns: 1fr 1fr;
+`
+
+export default {
+  name: "nested-table",
+  components: {
+    DraggableContainer,
+    ParentContainer,
+    DraggableTable,
+    InputText,
+    ChildrenWrapper,
+    DeleteIcon,
+    ThreeDots,
+    ContainerWrapper,
+  },
+  data() {
+    return {
+      tableList: [
+        {
+          description: "My Description 1",
+          cost_price: null,
+          margin: null,
+          installation: null,
+          sales: 1000,
+          id: 1,
+          children: [
+            {
+              description: "My Description 2",
+              cost_price: 20,
+              margin: 200,
+              installation: 2000,
+              sales: 20,
+              id: 2,
+              children: [],
+            },
+            {
+              description: "My Description 7",
+              cost_price: 70,
+              margin: 700,
+              installation: 7000,
+              sales: 70,
+              id: 3,
+              children: [],
+            },
+          ],
+        },
+        {
+          description: "My Description 3",
+          cost_price: 30,
+          margin: 300,
+          installation: 3000,
+          sales: 30,
+          id: 4,
+        },
+        {
+          description: "My Description 5",
+          cost_price: 50,
+          margin: 500,
+          installation: 5000,
+          sales: 50,
+          id: 5,
+          children: [
+            {
+              description: "My Description 6",
+              cost_price: 60,
+              margin: 600,
+              installation: 6000,
+              sales: 60,
+              id: 6,
+              children: [],
+            },
+          ],
+        },
+      ],
+      openItem: null,
+      showChildren: [],
+      listOptions: [
+        {
+          name: "Option 1",
+          value: "option_1",
+        },
+        {
+          name: "Option 2",
+          value: "option_2",
+        },
+        {
+          name: "Option 3",
+          value: "option_3",
+        },
+        {
+          name: "Option 4",
+          value: "option_4",
+        },
+      ],
+    }
+  },
+  computed: {
+    headerItems() {
+      const items = [
+        {
+          value: "Description",
+        },
+        {
+          value: "Cost price",
+        },
+        {
+          value: "Calculation surcharge",
+        },
+        {
+          value: "Installation costs",
+        },
+        {
+          value: "Sales price",
+        },
+      ]
+
+      return items
+    },
+  },
+  methods: {
+    toggleOpen({ id }) {
+      this.openItem = this.openItem === id ? null : id
+    },
+    isOpen({ id }) {
+      return this.openItem === id
+    },
+    toggleShowChildren({ id, length }) {
+      if (!length) {
+        return
+      }
+      if (this.isChildrenOpen({ id })) {
+        // if the item is already in the Array
+        this.showChildren = this.showChildren.filter((item) => item !== id)
+      } else {
+        this.showChildren.push(id)
+      }
+    },
+    isChildrenOpen({ id }) {
+      return this.showChildren.length ? this.showChildren.includes(id) : false
+    },
+  },
+}
+</script>
+-->

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

@@ -0,0 +1,264 @@
+<template>
+  <table-scroll>
+    <table-wrapper :fullWidth="fullWidth">
+      <spinner-wrapper v-if="isLoading">
+        <spinner />
+      </spinner-wrapper>
+      <table-container v-else>
+        <slot />
+      </table-container>
+    </table-wrapper>
+  </table-scroll>
+</template>
+
+<script>
+// ToDo: add this to storybook
+// import MainTable from "@eturnity/eturnity_reusable_components/src/components/tables/mainTable"
+import styled from "vue-styled-components"
+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 #b2b9c4; // width of the actual scrollbar
+  }
+`
+
+const SpinnerWrapper = styled.div`
+  height: 150px;
+  display: grid;
+  align-items: center;
+  justify-items: center;
+`
+
+const TableContainer = styled.table`
+  width: 100%;
+  border-collapse: collapse;
+  border: none;
+  font-size: 13px;
+
+  thead {
+    font-weight: bold;
+
+    tr {
+      border-bottom: none !important;
+    }
+  }
+
+  th {
+    padding: 12px 20px;
+    background-color: ${(props) => props.theme.colors.blue1};
+  }
+
+  td {
+    padding: 7px 10px;
+    border-bottom: 1px solid ${(props) => props.theme.colors.grey4};
+
+    &.no-border {
+      border-bottom: none;
+    }
+
+    .collective-container {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      align-items: center;
+      grid-gap: 10px;
+      cursor: pointer;
+    }
+
+    .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};
+      }
+    }
+  }
+
+  td,
+  th {
+    white-space: nowrap;
+    text-align: left;
+
+    &.align {
+      &-left {
+        text-align: left;
+      }
+
+      &-center {
+        text-align: center;
+      }
+
+      &-right {
+        text-align: right;
+      }
+    }
+  }
+
+  tr {
+    &.disabled {
+      cursor: not-allowed;
+    }
+
+    &.footer {
+      td {
+        background-color: ${(props) => props.theme.colors.grey5};
+        border-top: 1px solid ${(props) => props.theme.colors.grey4};
+      }
+    }
+
+    .text {
+      padding: 12px 0 12px 18px;
+      color: ${(props) => props.theme.colors.black};
+    }
+
+    .bold {
+      font-weight: bold;
+    }
+
+    .icons-container {
+      width: 100%;
+      display: inline-flex;
+      flex-wrap: nowrap;
+      background-color: #fff;
+      vertical-align: middle;
+    }
+
+    .arrow-container {
+      display: table-cell;
+      vertical-align: middle;
+      text-align: center;
+      text-align: -webkit-center;
+      cursor: pointer;
+      border-bottom: 1px solid ${(props) => props.theme.colors.grey4};
+    }
+
+    &.container-row td {
+      padding: 0;
+    }
+
+    &.no-border {
+      td,
+      .arrow-container {
+        border-bottom: none;
+      }
+    }
+
+    &:hover {
+      input {
+        background-color: ${(props) => props.theme.colors.grey5};
+      }
+
+      .drag-icon {
+        visibility: visible;
+      }
+    }
+
+    .drag-container {
+      display: table-cell;
+      width: auto;
+      vertical-align: middle;
+    }
+
+    .drag-icon {
+      visibility: hidden;
+      width: 10px;
+      height: 16px;
+      cursor: grab;
+      background-position: center;
+      background-image: ${() =>
+        `url(${require("@/assets/images/drag_icon.svg")})`};
+
+      &:active {
+        cursor: grabbing;
+      }
+    }
+
+    .subposition-icon {
+      width: 14px;
+      height: 11px;
+      background: no-repeat;
+      margin-left: 10px;
+      background-image: ${() =>
+        `url(${require("@/assets/images/subposition_icon.svg")})`};
+    }
+
+    .arrow-down {
+      width: 14px;
+      height: 11px;
+      background: no-repeat;
+      background-position: center;
+      background-image: ${() =>
+        `url(${require("@/assets/images/arrow_down.svg")})`};
+    }
+
+    .arrow-up {
+      width: 14px;
+      height: 11px;
+      background: no-repeat;
+      background-position: center;
+      background-image: ${() =>
+        `url(${require("@/assets/images/arrow_up_red.svg")})`};
+    }
+  }
+
+  input {
+    border: none;
+    font-size: 13px;
+    padding: 5px 10px;
+  }
+
+  .open-container {
+    border: 1px solid ${(props) => props.theme.colors.grey4};
+    border-radius: 4px;
+    margin-bottom: 10px;
+  }
+`
+
+export default {
+  name: "main-table",
+  components: {
+    TableScroll,
+    TableWrapper,
+    SpinnerWrapper,
+    Spinner,
+    TableContainer,
+  },
+  props: {
+    fullWidth: {
+      required: false,
+      default: true,
+    },
+    isLoading: {
+      required: false,
+      default: false,
+    },
+  },
+}
+</script>