@infineon/infineon-vue-datatable 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Infineon Technologies AG
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@infineon/infineon-vue-datatable",
+  "version": "0.0.0",
+  "private": false,
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/ "
+  },
+  "repository": "git://github.com/infineon/infineon-vue-datable",
+  "description": "",
+  "main": "src/index.js",
+  "files": [
+    "/src/**/*"
+  ],
+  "scripts": {
+  },
+  "keywords": [
+    "vue3"
+  ],
+  "author": "Verena Lechner, Kai Werther",
+  "license": "MIT",
+  "dependencies": {
+  },
+  "devDependencies": {
+    "auto": "^10.37.4",
+    "vue": ">= 3.0.2",
+    "eslint": "^7.28.0",
+    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-vue": "^9.1.1"
+  },
+  "peerDependencies": {
+    "vue": ">= 3.0.2",
+    "bootstrap": "^5.1.3",
+    "json2csv": "^5.0.6"
+  },
+  "auto": {
+    "plugins": [
+      "npm",
+      "released"
+    ],
+    "onlyPublishWithReleaseLabel": true
+  }
+}

package/src/datatable/InfineonDatatable.vue

@@ -0,0 +1,278 @@
+<template>
+  <div
+    class="d-flex flex-column justify-content-center flex-grow-1 pt-3"
+    style="overflow:auto"
+  >
+    <div
+      class="flex-grow-1 table-responsive"
+      style="overflow:auto"
+    >
+      <table
+        class="table table-sm table-hover"
+        style="border-collapse: separate;border-spacing: 0;"
+      >
+        <thead>
+          <tr>
+            <th
+              v-if="canEdit"
+              class="stickyHeader"
+            >
+              Actions
+            </th>
+            <th
+              v-for="(column, index) in shownColumns"
+              :key="index"
+              class="stickyHeader text-nowrap"
+              scope="col"
+            >
+              {{ column.title }}
+              <DatatableSortIcon
+                v-model:sort-column="sortColumn"
+                :column="column"
+              />
+              <a
+                v-if="column.hidable"
+                href="#"
+                @click="changeColumnVisibility(column.key)"
+              >
+                <font-awesome-icon
+                  class="fa-sm ms-2"
+                  :icon="['fas', 'times']"
+                />
+              </a>
+            </th>
+          </tr>
+        </thead>
+
+        <tbody>
+          <DatatableRow
+
+            v-for="(row,idx) in processedData"
+            :key="row.id"
+            :row-index="idx"
+
+            :row="row"
+            :columns="realColumns"
+            :hidden-column-keys="hiddenColumnKeys"
+            :row-is-in-edit-mode="(row.id) === (rowInEditMode?.id)"
+            :can-edit="canEdit"
+            :additional-actions="additionalActions"
+            @startEditRow="startEditRow"
+            @saveRow="saveRow"
+            @cancelRow="cancelRow"
+          >
+            <template
+              v-for="(_, name) in $slots"
+              #[name]="slotData"
+            >
+              <slot
+                :name="name"
+                v-bind="slotData || {}"
+              />
+            </template>
+          </DatatableRow>
+        </tbody>
+      </table>
+    </div>
+    <div class="mt-1 d-flex flex-row">
+      <DatatablePager
+        v-model:currentPage="currentPage"
+        class="flex-grow-1"
+        :page-size="pageSize"
+        :count="count"
+        @updatePageSize="updatePageSize"
+      />
+      <DatatableShowColumnsPicker
+        style="max-width:15em"
+        :columns="realColumns"
+        :hidden-column-keys="hiddenColumnKeys"
+        @changeColumnVisibility="changeColumnVisibility"
+      />
+      <div
+        v-if="exportable"
+        class="mt-1 ms-1"
+      >
+        <button
+          class="btn btn-sm btn-primary"
+          title="Download CSV File"
+          @click="exportCSV"
+        >
+          <font-awesome-icon :icon="['fas', 'file-download']" />
+          Download
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+// style="max-width: 13em"
+import {
+  toRefs, computed, ref, onMounted, watch,
+} from 'vue';
+import json2Csv from 'json2csv/dist/json2csv.umd';
+import DatatableRow from './InfineonDatatableRow.vue';
+import DatatablePager from './InfineonDatatablePager.vue';
+import DatatableSortIcon from './InfineonDatatableSortIcon.vue';
+import DatatableShowColumnsPicker from './InfineonDatatableShowColumnsPicker.vue';
+
+const props = defineProps({
+  canEdit: Boolean,
+  data: { type: Array, default: () => [] },
+  columns: { type: Array, default: () => [] },
+  exportable: Boolean,
+  defaultSort: { type: Object, default: () => {} }, // {key: '', type: 'A/D'}
+  additionalActions: { type: Object, default: () => {} },
+  // [ { label: '', action: (row) => {}, icon: ['fas', 'list-ol'] } ]
+});
+const emit = defineEmits(['saveRow']);
+
+const { data, columns } = toRefs(props);
+
+const sortColumn = ref(props.defaultSort);
+const currentPage = ref(0);
+const pageSize = ref(10);
+const rowInEditMode = ref(undefined);
+const count = ref(0);
+
+const hiddenColumnKeys = ref([]);
+
+const realColumns = computed(() => columns.value
+  .filter((c) => c.visible === undefined || c.visible === false));
+
+const shownColumns = computed(() => realColumns.value
+  .filter((c) => !c.hidable || !hiddenColumnKeys.value.includes(c.key)));
+
+// reset page & item count when data changes
+watch(
+  data,
+  (newData) => {
+    count.value = newData ? newData.length : 0;
+    if (count.value / pageSize.value < currentPage.value) {
+      currentPage.value = parseInt(count.value / pageSize.value, 10);
+    }
+  },
+  { immediate: true },
+);
+
+const processedData = computed(() => {
+  const sortedData = data.value.slice(0);
+  if (sortColumn.value && sortColumn.value.key) {
+    const { key, type } = sortColumn.value;
+    const {
+      sortType,
+      valueResolver,
+      filterResolverKey,
+    } = realColumns.value.find((c) => c.key === key);
+
+    if (filterResolverKey || !valueResolver) {
+      const vKey = filterResolverKey || key;
+
+      if (sortType === 'NUMBER' && type === 'D') {
+        sortedData.sort((a, b) => b[vKey] - a[vKey]);
+      } else if (sortType === 'NUMBER' && type === 'A') {
+        sortedData.sort((a, b) => a[vKey] - b[vKey]);
+      } else if (sortType === 'STRING' && type === 'D') {
+        sortedData.sort((a, b) => b[vKey]?.localeCompare(a[vKey]));
+      } else if (sortType === 'STRING' && type === 'A') {
+        sortedData.sort((a, b) => a[vKey]?.localeCompare(b[vKey]));
+      }
+    } else if (valueResolver) {
+      if (sortType === 'NUMBER' && type === 'D') {
+        sortedData.sort((a, b) => valueResolver(b) - valueResolver(a));
+      } else if (sortType === 'NUMBER' && type === 'A') {
+        sortedData.sort((a, b) => valueResolver(a) - valueResolver(b));
+      } else if (sortType === 'STRING' && type === 'D') {
+        sortedData.sort((a, b) => valueResolver(b)?.localeCompare(valueResolver(a)));
+      } else if (sortType === 'STRING' && type === 'A') {
+        sortedData.sort((a, b) => valueResolver(a)?.localeCompare(valueResolver(b)));
+      }
+    }
+  }
+
+  const sliced = sortedData.slice(
+    currentPage.value * pageSize.value,
+    (currentPage.value + 1) * pageSize.value,
+  );
+
+  return sliced;
+});
+
+// we listen to column changes. so each table will have it's own storage key
+const hiddenColumnsLocalStorageKey = computed(() => realColumns
+  .value.map((c) => c.key).sort().join());
+onMounted(() => {
+  if (localStorage.getItem(hiddenColumnsLocalStorageKey.value)) {
+    try {
+      hiddenColumnKeys.value = JSON
+        .parse(localStorage.getItem(hiddenColumnsLocalStorageKey.value));
+    } catch (e) {
+      localStorage.removeItem(hiddenColumnsLocalStorageKey.value);
+    }
+  } else {
+    hiddenColumnKeys.value = realColumns.value.filter((c) => c.defaultHidden).map((c) => c.key);
+  }
+});
+
+function changeColumnVisibility(columnKey) {
+  if (hiddenColumnKeys.value.includes(columnKey)) {
+    const index = hiddenColumnKeys.value.indexOf(columnKey);
+    hiddenColumnKeys.value.splice(index, 1);
+  } else {
+    hiddenColumnKeys.value.push(columnKey);
+  }
+  localStorage.setItem(hiddenColumnsLocalStorageKey.value, JSON.stringify(hiddenColumnKeys.value));
+}
+
+function startEditRow(row) {
+  rowInEditMode.value = row ? { ...row } : undefined;
+}
+async function saveRow(row) {
+  emit('saveRow', row);
+  rowInEditMode.value = undefined;
+}
+function cancelRow() {
+  rowInEditMode.value = undefined;
+}
+function updatePageSize(size) {
+  pageSize.value = size;
+}
+
+async function exportCSV() {
+  const fields = shownColumns.value.map((col) => ({ label: col.title, value: col.key }));
+  const transforms = (row) => Object.fromEntries(
+    shownColumns.value.map((col) => [
+      col.key,
+      col.valueResolver ? col.valueResolver(row) : row[col.key],
+    ]),
+  );
+
+  const opts = { fields, transforms };
+
+  json2Csv.parseAsync(data.value, opts)
+    .then((csv) => {
+      const sep = 'sep=,\r\n';
+      const BOM = new Uint8Array([0xEF, 0xBB, 0xBF]);
+      const blob = new Blob([BOM, csv], { type: 'text/csv;charset=utf-8' });
+      const link = document.createElement('a');
+      link.href = URL.createObjectURL(blob);
+      link.download = 'download.csv';
+      link.click();
+      URL.revokeObjectURL(link.href);
+    }).catch((err) => console.log('Error downloading file!'));
+}
+</script>
+
+<style scoped>
+.oddRow {
+  --bs-table-accent-bg: var(--bs-table-striped-bg);
+  color: var(--bs-table-striped-color);
+}
+
+.stickyHeader {
+  position:sticky;
+  top:0;
+  border-bottom: 2px solid black;
+  background-color: white
+}
+</style>

package/src/datatable/InfineonDatatablePager.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="text-center">
+    <nav
+      aria-label="Page navigation example"
+      class="d-inline-block"
+    >
+      <ul class="pagination justify-content-center mb-0">
+        <li
+          :class="{'invisible': currentPage <= 0}"
+          class="page-item"
+        >
+          <a
+            class="page-link"
+            href="#"
+            @click="changePage(0)"
+          ><font-awesome-icon
+            :icon="['fas', 'angle-double-left']"
+          /></a>
+        </li>
+        <li
+          :class="{'invisible': currentPage <= 0}"
+          class="page-item"
+        >
+          <a
+            class="page-link"
+            href="#"
+            @click="changePage(currentPage+-1)"
+          ><font-awesome-icon
+            :icon="['fas', 'angle-left']"
+          /></a>
+        </li>
+        <li
+          :class="{'invisible': currentPage - 2 <= 0}"
+          class="page-item disabled"
+        >
+          <a
+            class="page-link"
+            href="#"
+          >...</a>
+        </li>
+        <template
+          v-for="index in 5"
+          :key="index"
+        >
+          <li
+            class="page-item"
+            :class="{active: currentPage+index-3 === currentPage,
+                     'invisible': currentPage+index - 2 <= 0 || currentPage+index-4 >= pageCount}"
+          >
+            <a
+              class="page-link"
+              href="#"
+              @click="changePage(currentPage+index-3)"
+            >{{ currentPage+index - 2 }}</a>
+          </li>
+        </template>
+        <li
+          :class="{'invisible': currentPage + 2 >= pageCount}"
+          class="page-item disabled"
+        >
+          <a
+            class="page-link"
+            href="#"
+          >...</a>
+        </li>
+        <li
+          :class="{'invisible': currentPage >= pageCount}"
+          class="page-item"
+        >
+          <a
+            class="page-link"
+            href="#"
+            @click="changePage(currentPage+1)"
+          ><font-awesome-icon
+            :icon="['fas', 'angle-right']"
+          /></a>
+        </li>
+        <li
+          :class="{'invisible': currentPage >= pageCount}"
+          class="page-item"
+        >
+          <a
+            class="page-link"
+            href="#"
+            @click="changePage(pageCount)"
+          >
+            <font-awesome-icon
+              :icon="['fas', 'angle-double-right']"
+            />
+          </a>
+        </li>
+        <li class="page-item">
+          <select
+            id="pageSizeSelect"
+            :value="pageSize"
+            class="form-select mx-2"
+            style="width:75px;"
+            @change="updateSize($event)"
+          >
+            <option
+              v-for="size in sizeList"
+              :key="size"
+            >
+              {{ size }}
+            </option>
+          </select>
+        </li>
+      </ul>
+    </nav>
+    <div>
+      <span class="small text-muted">
+        displaying page {{ currentPage+1 }} of {{ pageCount+1 }}. Total messages: {{ count }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  defineProps, toRefs, ref, computed, defineEmits,
+} from 'vue';
+
+const props = defineProps({
+  currentPage: { type: Number, default: 0 },
+  count: { type: Number, default: 0 },
+  pageSize: { type: Number, default: 5 },
+});
+
+const {
+  pageSize, count, currentPage,
+} = toRefs(props);
+
+const sizeList = ref([5, 10, 25, 50, 100]);
+const pageCount = computed(() => parseInt((count.value - 1) / pageSize.value, 10));
+
+const emit = defineEmits(['update:currentPage', 'updatePageSize']);
+
+function changePage(newPage) {
+  emit('update:currentPage', newPage);
+}
+
+function updateSize(event) {
+  emit('updatePageSize', parseInt(event.target.value, 10));
+}
+
+</script>