Reworked Device Module and Vue Components

public/plugins/vue/tt-components/css/tt-table.css

@@ -21,11 +21,7 @@
 }
 
 
-.tt-table-card {
-    /*overflow: auto;*/
-}
-
-.tt-table-card .page-link {
+.tt-table-container .page-link {
     padding: 5px .75rem !important;
 }
 
@@ -112,12 +108,24 @@ input[type=number]::-webkit-outer-spin-button {
 
 .tt-table-top-pagination-container {
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: auto auto;
     padding-bottom: 8px;
     align-items: center;
     justify-content: space-between
 }
 
+.tt-table-top-buttons-container {
+    display: grid;
+    grid-template-columns: auto auto auto auto auto;
+    grid-gap: 8px;
+    padding-bottom: 8px
+}
+
+.tt-table-top-buttons-container > button > i {
+    font-size: 17px;
+    margin-right: 4px;
+}
+
 @media (max-width: 486px) {
     .tt-table-top-pagination-container {
         grid-template-columns: 1fr;

public/plugins/vue/tt-components/tt-autocomplete.js

@@ -72,8 +72,6 @@ Vue.component('tt-autocomplete', {
             this.displayValue = selectedItem ? selectedItem.text : '';
         }
 
-        console.log(this.$slots.append ? 'append' : 'no append');
-
     },
     data() {
         return {

public/plugins/vue/tt-components/tt-card.js

@@ -0,0 +1,16 @@
+Vue.component('tt-card', {
+    //language=Vue
+    template: `
+      <div class="card">
+        <div class="card-header" v-if="$slots.header">
+          <slot name="header"></slot>
+        </div>
+        <div class="card-body">
+          <slot></slot>
+        </div>
+        <div class="card-footer" v-if="$slots.footer">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    `,
+})

public/plugins/vue/tt-components/tt-datepicker.js

@@ -99,5 +99,6 @@ Vue.component('tt-date-picker', {
     },
     beforeDestroy() {
         $(this.$refs.input).off('apply.daterangepicker');
+        $('.daterangepicker').remove();
     },
 })

public/plugins/vue/tt-components/tt-table.js

@@ -109,11 +109,9 @@ Vue.component('tt-table-pagination', {
 
 Vue.component('tt-table', {
     template: `
-      <div class="card tt-table-card" v-if="columns && pagination">
-        <div class="card-body" ref="tableContainer">
+    <div class="tt-table-container" ref="tableContainer">
           <!-- Top Buttons -->
-          <div
-              style="display:grid; grid-template-columns: auto auto auto auto auto; grid-gap: 8px; padding-bottom: 8px">
+          <div class="tt-table-top-buttons-container">
             <slot name="top-buttons"></slot>
           </div>
           <!-- Pagination Controls -->
@@ -142,7 +140,10 @@ Vue.component('tt-table', {
               <th scope="col" v-for="column in columns" 
                   :ref="'table_header_'+column.key"
                   v-if="!hiddenColumns.includes(column.key)"
-                  :style="'vertical-align: top; text-align: center;' + (column.filter === 'dateRange' ? 'min-width: 260px;' : '')">
+                  :style="'vertical-align: top; text-align: center;' + 
+                  (column.filter === 'dateRange' ? 'min-width: 260px;' : '') + 
+                  (originalColumnWidths[column.key] ? 'width: ' + originalColumnWidths[column.key] + 'px;' : '')"
+              >
                 <div style="text-align:center; white-space: nowrap;word-break: keep-all;"
                      :style="{ 'cursor': column.sortable ? 'pointer' : 'default' }"
                      @click="column.sortable ? setOrder(column.key) : undefined">
@@ -180,7 +181,8 @@ Vue.component('tt-table', {
                   @click="$emit('row-click', row)"
               >
                 <template v-for="(column, key) in columns" v-if="!hiddenColumns.includes(column.key)">
-                  <td :class="{ 'text-center': column.filter === 'iconSelect', [columns[key].class]: true }">
+                  <td :class="{ 'text-center': column.filter === 'iconSelect', 
+                  [columns[key].class]: true, 'text-nowrap': !originalColumnWidths[column.key] }">
                     <!-- If td is first of row then check isExpanded and display fas.fa-chevron-right or fas.fa-chevron-down with cursor pointer -->
                     <i v-if="key === Object.keys(columns)[0] && 
                     ($scopedSlots.expandedRow && (typeof config.expandCondition !== 'function' || config.expandCondition(row)) || hiddenColumns.length > 0)"
@@ -236,9 +238,9 @@ Vue.component('tt-table', {
                                  v-if="pagination"></tt-table-pagination>
           </nav>
         </div>
-      </div>
     `, props: {
         fetchUrl: String,
+        data: Array,
         striped: {type: Boolean, default: true},
         bordered: {type: Boolean, default: true},
         hover: {type: Boolean, default: true},
@@ -293,13 +295,17 @@ Vue.component('tt-table', {
          * @async
          */
         async fetchData(page = 0) {
+            console.log('Fetching data...');
             this.expandedRows = {};
 
             try {
                 if (this.ssr === false) {
-                    const response = await axios.get(this.fetchUrl);
-                    this.rawRows = response.data
-
+                    if (this.data) {
+                        this.rawRows = this.data;
+                    } else {
+                        const response = await axios.get(this.fetchUrl);
+                        this.rawRows = response.data
+                    }
 
                     this.pagination = {
                         page: page++,
@@ -673,7 +679,8 @@ Vue.component('tt-table', {
                     } else if (header.filter === 'date') {
                         if (!filterValue.from || !filterValue.to) continue;
 
-                        let rowDate = new Date(row[header.key]).getTime() / 1000;
+                        const dateInt = row[header.key].length === 10 ? parseInt(row[header.key]) * 1000 : parseInt(row[header.key]);
+                        let rowDate = new Date(dateInt).getTime() / 1000;
 
                         if (rowDate < filterValue.from || rowDate > filterValue.to) {
                             match = false;
@@ -698,8 +705,13 @@ Vue.component('tt-table', {
 
                 output.sort((a, b) => {
 
-                    let valueA = isDateColumn ? new Date(a[this.order.key]).getTime() : a[this.order.key];
-                    let valueB = isDateColumn ? new Date(b[this.order.key]).getTime() : b[this.order.key];
+
+                    let valueA = isDateColumn ?
+                        new Date(a[this.order.key].length === 10 ? parseInt(a[this.order.key]) * 1000 : parseInt(a[this.order.key])).getTime() :
+                        a[this.order.key];
+                    let valueB = isDateColumn ?
+                        new Date(b[this.order.key].length === 10 ? parseInt(b[this.order.key]) * 1000 : parseInt(b[this.order.key])).getTime() :
+                        b[this.order.key];
 
                     if (valueA === valueB) return 0;