@tekkare/auriga 0.1.0

package/dist/runtime/components/argTable.vue

@@ -0,0 +1,863 @@
+<template>
+  <div class="flex-table">
+    <arg-search-input
+      v-if="search"
+      v-model:Value="searchKey"
+      :placeHolderValue="getPlaceHolder"
+      :value="searchKey"
+      class="table_input"
+      @submitSearch="searchSubmit = true"
+    />
+    <div class="rcd_scrollTable">
+      <table id="rcd_table">
+        <thead>
+          <tr>
+            <th
+              v-for="(head, keyIndex) in heads"
+              :key="keyIndex"
+              :class="[
+                columnStyle.size && columnStyle.size[keyIndex]
+                  ? `oip_column is-${columnStyle.size[keyIndex]}`
+                  : 'oip_column',
+                columnStyle.align && columnStyle.align[keyIndex]
+                  ? `column_align ${columnStyle.align[keyIndex]}`
+                  : '',
+              ]"
+            >
+              <div
+                class="rcd-table-header oip_row gap-8"
+                :class="
+                  columnStyle.align && columnStyle.align[keyIndex]
+                    ? `column_align ${columnStyle.align[keyIndex]}`
+                    : ''
+                "
+              >
+                <div class="rcd-col-title">
+                  <p>{{ head }}</p>
+                </div>
+                <div
+                  v-if="head !== 'More'"
+                  class="rcd-table-sort"
+                  @click="sortDatas(keyIndex)"
+                  v-show="sort"
+                >
+                  <arg-icon
+                    name="CaretUp"
+                    :color="changeColorAsc(keyIndex)"
+                    size="12"
+                    class="sort_up_icon"
+                    thickness="36"
+                  ></arg-icon>
+                  <arg-icon
+                    name="CaretDown"
+                    :color="changeColorDesc(keyIndex)"
+                    size="12"
+                    class="sort_down_icon"
+                    thickness="36"
+                  ></arg-icon>
+                </div>
+                <arg-tooltip
+                  v-if="tooltipHeader[keyIndex]"
+                  :tooltip-text="tooltipHeader[keyIndex]"
+                  dir="bottom"
+                  class="filter_tooltip"
+                  :sideLimit="keyIndex === heads.length - 1"
+                >
+                  <arg-icon name="Info" size="16" color="var(--primary)" />
+                </arg-tooltip>
+              </div>
+            </th>
+          </tr>
+        </thead>
+        <tbody v-if="finalTable.length > 0">
+          <template
+            v-for="(content, contIndex, rowIndex) in finalTable"
+            :key="contIndex"
+          >
+            <tr
+              :id="`${contIndex}-row`"
+              :class="isOdd(contIndex) ? 'white_bg' : 'grey_bg'"
+            >
+              <td
+                v-for="(value, valIndex) in content"
+                :key="valIndex"
+                :class="[
+                  { 'rcd-NA': isNA(value) },
+                  columnStyle.align && columnStyle.align[valIndex]
+                    ? `column_align ${columnStyle.align[valIndex]}`
+                    : '',
+                ]"
+              >
+                <arg-icon
+                  v-if="columnTypeNonProps[valIndex] === 'More'"
+                  name="CaretCircleRight"
+                  @click.native="openLine(contIndex)"
+                  :class="[
+                    'icon-show-more',
+                    showLine === contIndex ? 'icon_rotate' : '',
+                  ]"
+                />
+                <slot
+                  v-if="columnTypeNonProps[valIndex] !== ''"
+                  :name="columnTypeNonProps[valIndex]"
+                  v-bind:value="value"
+                ></slot>
+                <p v-else>{{ value }}</p>
+              </td>
+            </tr>
+            <tr
+              v-if="showLine === contIndex"
+              class="more_row"
+              :key="rowIndex"
+              :class="greyBG(contIndex) ? 'grey_bg' : 'white_bg'"
+            >
+              <td class="more_section" :colspan="heads.length.toString()">
+                <slot name="showMore" v-bind:value="contIndex" />
+              </td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+      <div v-if="finalTable.length === 0" class="empty_table">
+        <arg-no-data :text="noDataValues[0]" :sub-text="noDataValues[1]" />
+      </div>
+      <div v-else-if="loadingData" class="empty_table">
+        <arg-tekkare-loader v-if="loaderType === 'tekkare'" />
+        <arg-data-loader v-else />
+      </div>
+      <div
+        v-if="saveTable.length > savePageSize && finalTable.length > 0"
+        :class="`rcd-datas align-${pagesPosition}`"
+      >
+        <div @click="prevPage" class="rcd-pagination-navigate">
+          <arg-icon
+            name="CaretLeft"
+            color="var(--independance)"
+            size="20"
+          ></arg-icon>
+        </div>
+        <div
+          v-for="(pageNumber, pageIndex) in totalPages"
+          :key="pageIndex"
+          class="rcd-rows"
+        >
+          <p v-show="!showPage(pageNumber) && limitB(pageNumber)">...</p>
+          <p
+            class="rcd-pagination"
+            v-show="showPage(pageNumber)"
+            @click="setPage(pageNumber)"
+            :class="{ 'rcd-current': currentPage === pageNumber }"
+          >
+            {{ pageNumber }}
+          </p>
+          <p v-show="!showPage(pageNumber) && limitA(pageNumber)">...</p>
+        </div>
+        <div @click="nextPage" class="rcd-pagination-navigate">
+          <arg-icon
+            name="CaretRight"
+            color="var(--independance)"
+            size="20"
+          ></arg-icon>
+        </div>
+      </div>
+    </div>
+    <div class="show_full_table">
+      <arg-btn
+        v-if="
+          (saveTable.length > savePageSize || showFull) &&
+          finalTable.length > 0 &&
+          showToggle
+        "
+        btn-style="skeleton"
+        prefix-icon="Table"
+        @click.native="showFull = !showFull"
+        >{{ showFull ? "Show with pagination" : "Show full table" }}</arg-btn
+      >
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "argTable"
+};
+</script>
+<script setup lang="ts">
+import argIcon from "./argIcon.vue";
+import argNoData from "./argNoData.vue";
+import argDataLoader from "./argDataLoader.vue";
+import argTekkareLoader from "./argTekkareLoader.vue";
+import { onMounted, ref, computed, defineProps, defineEmits, watch } from "vue";
+const props = defineProps({
+  heads: {
+    type: Array<string>,
+    required: true,
+  }, // column values
+  contents: {
+    type: Array<Object>,
+    required: true,
+    default: () => [{ values: Array<any> }],
+  }, // data values
+  pageSize: { type: Number, default: 3 }, // number of rows to be displayed in table
+  sort: { type: Boolean, default: true }, // allow for table sorting
+  search: { type: Boolean, default: false }, // allow for table filtering by keyword
+  searchColumns: { type: Array<number>, default: null },
+  columnType: {
+    type: Array<string>,
+    default: () => [],
+  },
+  columnStyle: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
+  tooltipHeader: {
+    type: Array<string>,
+    default() {
+      return [];
+    },
+  },
+  searchFullWord: {
+    type: Boolean,
+    default: false,
+  },
+  toggleDisplay: {
+    type: Boolean,
+    default: false,
+  },
+  pagesPosition: {
+    type: String,
+    default: "right",
+  },
+  noDataValues: {
+    type: Array,
+    default: () => [
+      "No content found for your search.",
+      "Change or empty your search.",
+    ],
+  },
+  loadingData: {
+    type: Boolean,
+    default: false,
+  },
+  loaderType: {
+    type: String,
+    default: "data",
+  },
+});
+
+var dataValues = ref();
+var sortCol = ref();
+var sortDir = ref();
+var currentPage = ref();
+var sortIndex = ref();
+var searchIndex = ref();
+var searchKey = ref();
+var showSearch = ref(false);
+var saveTable = ref([]);
+var columnTypeNonProps = ref();
+var searchSubmit = ref(false);
+var showFull = ref(false);
+var savePageSize = ref(0);
+var showToggle = ref(false);
+var showLine = ref();
+
+watch(
+  () => props.contents,
+  (newContent: Object[]) => {
+    saveTable.value = Object.assign([], [...new Set(fillTable.value)]);
+    dataValues.value = fillTable.value;
+    currentPage.value = 1;
+  }
+);
+
+watch(
+  () => props.heads,
+  (newHeads: string[]) => {
+    getColumnTypes();
+  }
+);
+
+watch(searchKey, (newSearchKey: string) => {
+  setPage(1);
+  if (newSearchKey.length === 0) {
+    searchSubmit.value = false;
+  }
+});
+
+watch(showFull, (newShowValue: boolean) => {
+  if (newShowValue) {
+    savePageSize.value = saveTable.value.length;
+  } else savePageSize.value = props.pageSize;
+});
+
+watch(
+  () => props.toggleDisplay,
+  (newToggle: boolean) => {
+    showToggle.value = newToggle;
+  }
+);
+
+watch(
+  () => props.pageSize,
+  (newPageSize: number) => {
+    savePageSize.value = newPageSize;
+  }
+);
+
+function openLine(index: number) {
+  if (showLine.value === index) {
+    showLine.value = null;
+  } else showLine.value = index;
+}
+
+function getTooltipDir(index: number) {
+  if (index === props.heads.length - 1) {
+    return "left";
+  } else return "bottom";
+}
+function getColumnTypes() {
+  if (props.columnType.length <= 1) {
+    columnTypeNonProps.value = new Array(props.heads.length);
+    columnTypeNonProps.value.fill("", 0);
+  } else {
+    columnTypeNonProps.value = props.columnType;
+  }
+}
+function isNA(val: string) {
+  // check for null values
+  if (val === "-") {
+    return true;
+  }
+  return false;
+}
+
+function sortDatas(index: number) {
+  // sort Table - column to sort and sorting order
+  if (sortCol.value === props.heads[index]) {
+    sortDir.value =
+      sortDir.value === "asc"
+        ? "desc"
+        : sortDir.value === "desc"
+        ? "none"
+        : "asc";
+  } else {
+    sortDir.value = "asc";
+  }
+  sortCol.value = props.heads[index];
+  sortIndex.value = index;
+}
+
+function nextPage() {
+  // go to next page
+  if (currentPage.value * savePageSize.value < filteredTable.value.length) {
+    currentPage.value += 1;
+  }
+}
+
+function prevPage() {
+  // go to previous page
+  if (currentPage.value > 1) {
+    currentPage.value -= 1;
+  }
+}
+
+function setPage(pageNumber: number) {
+  // set current page
+  currentPage.value = pageNumber;
+}
+
+function showPage(pageNumber: number) {
+  // display or hide page number
+  if (
+    currentPage.value === pageNumber ||
+    pageNumber === totalPages.value ||
+    pageNumber === 1 ||
+    Math.abs(pageNumber - currentPage.value) < 2 ||
+    totalPages.value === 3
+  ) {
+    return true;
+  }
+  return false;
+}
+
+function limitA(pageNumber: number) {
+  // display '...' once instead of page number (after page number)
+  if (pageNumber === 2 && currentPage.value >= 4) {
+    return true;
+  }
+  return false;
+}
+
+function limitB(pageNumber: number) {
+  // display '...' once instead of page number (before page number)
+  if (Math.abs(pageNumber - totalPages.value) > 1) {
+    return false;
+  }
+  return true;
+}
+
+function toggle(index: number) {
+  // toggle input for searchKey: show/hide on click, show if new column chosen
+  if (searchIndex.value === index) {
+    showSearch.value = !showSearch.value;
+  } else {
+    showSearch.value = true;
+    searchKey.value = "";
+  }
+  searchIndex.value = index;
+}
+
+function viewSearchInput(index: number) {
+  // show searchKey input
+  if (searchIndex.value === index && showSearch) {
+    return true;
+  }
+  return false;
+}
+
+function changeColorAsc(index: number) {
+  // icon color change for asc sorting
+  if (sortIndex.value === index && sortDir.value !== "none") {
+    if (sortDir.value === "asc") {
+      return "var(--accent)";
+    }
+    return "transparent";
+  }
+  return "var(--lavendar-grey)";
+}
+
+function changeColorDesc(index: number) {
+  // icon color change for desc sorting
+  if (sortIndex.value === index && sortDir.value !== "none") {
+    if (sortDir.value === "desc") {
+      return "var(--accent)";
+    }
+    return "transparent";
+  }
+  return "var(--lavendar-grey)";
+}
+
+function greyBG(index: number) {
+  const myDivObj = document?.getElementById(`${index}-row`);
+  if (myDivObj) {
+    const color = window?.getComputedStyle(myDivObj).backgroundColor;
+    if (color === "rgb(255, 255, 255)") {
+      return false;
+    } else return true;
+  }
+}
+
+function isOdd(contIndex: number) {
+  if (contIndex % 2 == 0) {
+    return false;
+  } else return true;
+}
+
+var fillTable = computed(() => {
+  let row = [];
+  const result = [];
+  const nullValue = "-";
+  for (let i = 0; i < props.contents.length; i += 1) {
+    for (let j = 0; j < props.contents[i].values.length; j += 1) {
+      if (props.contents[i].values[j] !== null) {
+        row.push(props.contents[i].values[j]);
+      } else {
+        row.push(nullValue);
+      }
+    }
+    result.push(row);
+    row = [];
+  }
+  return result;
+});
+
+var filteredTable = computed(() => {
+  if (
+    (props.searchFullWord && searchSubmit.value === false) ||
+    (!props.searchFullWord && searchKey.value.length === 0)
+  ) {
+    return dataValues.value;
+  } else {
+    const tempTable = [];
+    let row = [];
+    if (props.searchColumns !== null) {
+      for (let i = 0; i < dataValues.value.length; i += 1) {
+        let j = 0;
+        while (j < props.searchColumns.length) {
+          if (
+            dataValues.value[i][props.searchColumns[j]]
+              .toString()
+              .toLowerCase()
+              .includes(searchKey.value.toLowerCase())
+          ) {
+            row = dataValues.value[i];
+            tempTable.push(row);
+            row = [];
+            j = props.searchColumns.length;
+          } else j += 1;
+        }
+      }
+    } else {
+      for (let i = 0; i < dataValues.value.length; i += 1) {
+        for (let j = 0; j < dataValues.value[i].length; j++) {
+          if (
+            dataValues.value[i][j]
+              .toString()
+              .toLowerCase()
+              .includes(searchKey.value.toLowerCase())
+          ) {
+            row = dataValues.value[i];
+            tempTable.push(row);
+            row = [];
+            j = dataValues.value[i].length;
+          }
+        }
+      }
+    }
+    return tempTable;
+  }
+});
+
+const sortedTable = computed(() => {
+  // sort table depending on selected order: asc/desc
+  const sorted = filteredTable.value;
+  if (sortDir.value === "none") {
+    return sorted;
+  }
+  return sorted.sort((a: any, b: any) => {
+    if (sortDir.value === "asc") {
+      if (a[sortIndex.value] < b[sortIndex.value]) {
+        if (navigator.userAgent.indexOf("Firefox") !== -1) {
+          return 1;
+        } else {
+          return -1;
+        }
+      }
+    }
+    if (sortDir.value === "desc") {
+      if (a[sortIndex.value] > b[sortIndex.value]) {
+        if (navigator.userAgent.indexOf("Firefox") !== -1) {
+          return 1;
+        } else {
+          return -1;
+        }
+      }
+    }
+    return 0;
+  });
+});
+
+var finalTable = computed(() => {
+  const sorted = sortedTable;
+  // final data sorted by order, filtered by keyword and displayed according to page size
+  return sorted.value.filter((row: any, index: number) => {
+    const start = (currentPage.value - 1) * savePageSize.value;
+    const end = currentPage.value * savePageSize.value;
+    if (index >= start && index < end) return true;
+    return false;
+  });
+});
+
+var resultCount = computed(() => {
+  // total data length
+  return sortedTable.value.length;
+});
+
+var totalPages = computed(() => {
+  // total number of pages for table depending on length and page size
+  return Math.ceil(resultCount.value / savePageSize.value);
+});
+
+var getPlaceHolder = computed(() => {
+  if (props.searchColumns !== null) {
+    let columnNames = `Search by ${props.heads[props.searchColumns[0]]}`;
+    for (let i = 1; i < props.searchColumns.length; i++) {
+      if (i === props.searchColumns.length - 1) {
+        columnNames += ` or ${props.heads[props.searchColumns[i]]}...`;
+      } else columnNames += `, ${props.heads[props.searchColumns[i]]}`;
+    }
+    return columnNames;
+  } else return "Search all";
+});
+
+getColumnTypes();
+dataValues.value = fillTable.value;
+saveTable.value = Object.assign(
+  [],
+  [...new Set(fillTable.value)] // eslint-disable-line
+);
+sortDir.value = "none";
+currentPage.value = 1;
+sortIndex.value = null;
+searchKey.value = "";
+showSearch.value = false;
+searchIndex.value = null;
+
+savePageSize.value = props.pageSize;
+showToggle.value = props.toggleDisplay;
+</script>
+
+<style scoped>
+.empty_table {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.filter_tooltip {
+  cursor: pointer;
+}
+.sort_up_icon {
+  position: relative;
+  top: 3px;
+}
+.sort_down_icon {
+  position: relative;
+  top: -2px;
+}
+
+.table_input {
+  width: auto !important;
+  align-self: stretch !important;
+  margin: 0px 24px !important;
+}
+.oip_column {
+  display: table-cell;
+  padding-left: 0px;
+}
+
+.rcd_scrollTable {
+  overflow-x: auto;
+  gap: 8px;
+  padding-top: 8px;
+}
+
+td {
+  font-size: 14px;
+}
+tr {
+  position: relative;
+}
+
+table {
+  width: 100%;
+  padding: 0px;
+  border-collapse: collapse;
+}
+
+thead tr th {
+  background-color: transparent;
+  height: 35px;
+}
+
+/* .simple_row:nth-of-type(even) {
+  background: var(--pure-white);
+}
+
+.simple_row:nth-of-type(odd) {
+  background: var(--demi-fond);
+} */
+
+td,
+th {
+  padding: 10px 24px;
+}
+
+tr,
+th {
+  height: 43px;
+  text-align: start;
+}
+
+th {
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 14px;
+  order: 0;
+  flex-grow: 0;
+}
+
+th:last-child div.rcd-table-header,
+td:last-child {
+  text-align: end;
+  justify-content: end;
+}
+
+th:last-child div.show .rcd-searchInput {
+  margin-left: auto;
+}
+
+.rcd-table-header {
+  margin-left: 24px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.rcd-col-title {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+}
+
+.rcd-table-sort {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  cursor: pointer;
+  text-align-last: right;
+}
+
+.rcd-NA {
+  color: var(--independance);
+  font-weight: normal;
+  font-style: italic;
+}
+
+.rcd-pagination {
+  display: flex;
+  padding: 10px 16px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  border-radius: 8px;
+  background: transparent;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+}
+
+.rcd-pagination:hover {
+  color: var(--primary) !important;
+}
+
+.rcd-pagination-navigate {
+  cursor: pointer;
+}
+.rcd-pagination-navigate:hover svg {
+  color: var(--primary) !important;
+}
+.rcd-current:hover {
+  color: var(--pure-white) !important;
+}
+
+.rcd-datas {
+  display: flex;
+  align-items: center;
+  margin: 10px 10px 15px 10px;
+  gap: 10px;
+}
+.align-left {
+  justify-content: left;
+}
+.align-center {
+  justify-content: center;
+}
+.align-right {
+  justify-content: right;
+}
+
+.rcd-rows {
+  display: flex;
+  justify-content: right;
+  align-items: center;
+}
+
+.rcd-current {
+  background: var(--primary);
+  color: var(--pure-white);
+  box-shadow: 4px 7px 12px 0px rgba(33, 118, 255, 0.2);
+}
+
+.rcd-searchInput {
+  border: 1px solid var(--nested-table-bg);
+  border-radius: 4px;
+  margin: 0px 5px 5px 0px;
+  padding: 3px;
+}
+
+.rcd-searchInput:focus-visible {
+  outline: none !important;
+}
+
+.hideInput {
+  display: none;
+  visibility: hidden;
+}
+
+.showInput {
+  display: flex;
+  visibility: visible;
+}
+
+.rcd-search {
+  cursor: pointer;
+  margin-right: 5px;
+}
+
+.column_align.left {
+  text-align: left !important;
+  justify-content: left !important;
+}
+.column_align.center {
+  text-align: center !important;
+  justify-content: center !important;
+}
+.column_align.right {
+  text-align: right !important;
+  justify-content: right !important;
+}
+
+.show_full_table {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-table {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  width: 100%;
+}
+
+.rcd_scrollTable {
+  width: 100%;
+}
+
+.more_section {
+  width: 100%;
+  padding: 24px;
+  text-align: start !important;
+}
+.more_row {
+  border-top: 1px solid var(--dividers, #ececf2);
+  border-bottom: 1px solid var(--dividers, #ececf2);
+}
+.grey_bg,
+.grey_bg > td {
+  background: var(--demi-fond) !important;
+}
+.white_bg,
+.white_bg td {
+  background: var(--pure-white) !important;
+}
+.icon-show-more {
+  cursor: pointer;
+  transition: transform 0.3s;
+}
+.icon-show-more:hover {
+  color: var(--primary) !important;
+}
+.icon_rotate {
+  transform: rotate(90deg);
+  color: var(--primary) !important;
+}
+</style>