@eturnity/eturnity_reusable_components 7.45.5-EPDM-11313-EPDM-11314.2 → 7.45.5-EPDM-12680.0

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

@@ -1,328 +1,328 @@
-<!-- This is just an example how to use mainTable with collective positioning -->
-<!-- <template>
-  <main-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>
-  </main-table>
-</template>
-
-<script>
-import draggable from "vuedraggable"
-import styled from "vue3-styled-components"
-import MainTable from "@/components/reusable-components/tables/MainTable"
-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,
-    MainTable,
-    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>
--->
+<!-- This is just an example how to use mainTable with collective positioning -->
+<!-- <template>
+  <main-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>
+  </main-table>
+</template>
+
+<script>
+import draggable from "vuedraggable"
+import styled from "vue3-styled-components"
+import MainTable from "@/components/reusable-components/tables/MainTable"
+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,
+    MainTable,
+    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>
+-->