@tekkare/auriga 0.1.0 → 0.1.4

package/dist/runtime/components/argTable.vue

@@ -176,426 +176,415 @@
     </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 {};
+import {
+  ref,
+  computed,
+  watch,
+  defineComponent
+} from "vue";
+export default defineComponent({
+  name: "argTable",
+  components: { argIcon, argNoData, argDataLoader, argTekkareLoader },
+  props: {
+    heads: {
+      type: Array,
+      required: true
     },
-  },
-  tooltipHeader: {
-    type: Array<string>,
-    default() {
-      return [];
+    // column values
+    contents: {
+      type: Array,
+      required: true,
+      default: () => [{ values: Array }]
     },
+    // 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, default: null },
+    columnType: {
+      type: Array,
+      default: () => []
+    },
+    columnStyle: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    tooltipHeader: {
+      type: Array,
+      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"
+    }
   },
-  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)";
+  setup(props) {
+    const dataValues = ref();
+    const sortCol = ref();
+    const sortDir = ref();
+    const currentPage = ref();
+    const sortIndex = ref();
+    const searchIndex = ref();
+    const searchKey = ref();
+    const showSearch = ref(false);
+    const saveTable = ref([]);
+    const columnTypeNonProps = ref();
+    const searchSubmit = ref(false);
+    const showFull = ref(false);
+    const savePageSize = ref(0);
+    const showToggle = ref(false);
+    const showLine = ref();
+    watch(
+      () => props.contents,
+      (newContent) => {
+        saveTable.value = Object.assign([], [...new Set(fillTable.value)]);
+        dataValues.value = fillTable.value;
+        currentPage.value = 1;
+      }
+    );
+    watch(
+      () => props.heads,
+      (newHeads) => {
+        getColumnTypes();
+      }
+    );
+    watch(searchKey, (newSearchKey) => {
+      setPage(1);
+      if (newSearchKey.length === 0) {
+        searchSubmit.value = false;
+      }
+    });
+    watch(showFull, (newShowValue) => {
+      if (newShowValue) {
+        savePageSize.value = saveTable.value.length;
+      } else
+        savePageSize.value = props.pageSize;
+    });
+    watch(
+      () => props.toggleDisplay,
+      (newToggle) => {
+        showToggle.value = newToggle;
+      }
+    );
+    watch(
+      () => props.pageSize,
+      (newPageSize) => {
+        savePageSize.value = newPageSize;
+      }
+    );
+    function openLine(index) {
+      if (showLine.value === index) {
+        showLine.value = null;
+      } else
+        showLine.value = index;
     }
-    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)";
+    function getTooltipDir(index) {
+      if (index === props.heads.length - 1) {
+        return "left";
+      } else
+        return "bottom";
     }
-    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)") {
+    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) {
+      if (val === "-") {
+        return true;
+      }
       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]);
+    }
+    function sortDatas(index) {
+      if (sortCol.value === props.heads[index]) {
+        sortDir.value = sortDir.value === "asc" ? "desc" : sortDir.value === "desc" ? "none" : "asc";
       } else {
-        row.push(nullValue);
+        sortDir.value = "asc";
       }
+      sortCol.value = props.heads[index];
+      sortIndex.value = index;
     }
-    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;
-        }
+    function nextPage() {
+      if (currentPage.value * savePageSize.value < filteredTable.value.length) {
+        currentPage.value += 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;
-          }
-        }
+    }
+    function prevPage() {
+      if (currentPage.value > 1) {
+        currentPage.value -= 1;
       }
     }
-    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;
+    function setPage(pageNumber) {
+      currentPage.value = pageNumber;
+    }
+    function showPage(pageNumber) {
+      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) {
+      if (pageNumber === 2 && currentPage.value >= 4) {
+        return true;
+      }
+      return false;
+    }
+    function limitB(pageNumber) {
+      if (Math.abs(pageNumber - totalPages.value) > 1) {
+        return false;
+      }
+      return true;
+    }
+    function toggle(index) {
+      if (searchIndex.value === index) {
+        showSearch.value = !showSearch.value;
+      } else {
+        showSearch.value = true;
+        searchKey.value = "";
+      }
+      searchIndex.value = index;
+    }
+    function viewSearchInput(index) {
+      if (searchIndex.value === index && showSearch) {
+        return true;
+      }
+      return false;
+    }
+    function changeColorAsc(index) {
+      if (sortIndex.value === index && sortDir.value !== "none") {
+        if (sortDir.value === "asc") {
+          return "var(--accent)";
         }
+        return "transparent";
       }
+      return "var(--lavendar-grey)";
     }
-    if (sortDir.value === "desc") {
-      if (a[sortIndex.value] > b[sortIndex.value]) {
-        if (navigator.userAgent.indexOf("Firefox") !== -1) {
-          return 1;
-        } else {
-          return -1;
+    function changeColorDesc(index) {
+      if (sortIndex.value === index && sortDir.value !== "none") {
+        if (sortDir.value === "desc") {
+          return "var(--accent)";
         }
+        return "transparent";
       }
+      return "var(--lavendar-grey)";
     }
-    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]]}`;
+    function greyBG(index) {
+      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) {
+      if (contIndex % 2 == 0) {
+        return false;
+      } else
+        return true;
     }
-    return columnNames;
-  } else return "Search all";
+    const 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;
+    });
+    const 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(() => {
+      const sorted = filteredTable.value;
+      if (sortDir.value === "none") {
+        return sorted;
+      }
+      return sorted.sort((a, b) => {
+        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;
+      });
+    });
+    const finalTable = computed(() => {
+      const sorted = sortedTable;
+      return sorted.value.filter((row, index) => {
+        const start = (currentPage.value - 1) * savePageSize.value;
+        const end = currentPage.value * savePageSize.value;
+        if (index >= start && index < end)
+          return true;
+        return false;
+      });
+    });
+    const resultCount = computed(() => {
+      return sortedTable.value.length;
+    });
+    const totalPages = computed(() => {
+      return Math.ceil(resultCount.value / savePageSize.value);
+    });
+    const 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;
+    return {
+      sortCol,
+      sortDir,
+      currentPage,
+      sortIndex,
+      searchIndex,
+      searchKey,
+      showSearch,
+      saveTable,
+      columnTypeNonProps,
+      searchSubmit,
+      showFull,
+      savePageSize,
+      showToggle,
+      showLine,
+      openLine,
+      getTooltipDir,
+      getColumnTypes,
+      isNA,
+      sortDatas,
+      nextPage,
+      prevPage,
+      setPage,
+      showPage,
+      limitA,
+      limitB,
+      toggle,
+      viewSearchInput,
+      changeColorAsc,
+      changeColorDesc,
+      greyBG,
+      isOdd,
+      fillTable,
+      finalTable,
+      resultCount,
+      totalPages,
+      getPlaceHolder
+    };
+  }
 });
-
-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>