682 lines
31 KiB
JavaScript
682 lines
31 KiB
JavaScript
/**
|
|
* @typedef {Object} ttTableColumnConfig
|
|
* @property {string} text - The display text of the column.
|
|
* @property {string} key - The unique key of the column.
|
|
* @property {string} filter - Indicates if filtering is enabled for the column.
|
|
* @property {boolean} sortable - Indicates if sorting is enabled for the column.
|
|
* @property {string} class - The CSS class(es) applied to the column.
|
|
*/
|
|
|
|
Vue.component('tt-table-pagination', {
|
|
props: {
|
|
pagination: {
|
|
type: Object,
|
|
required: true,
|
|
default: () => ({page: 1, per_page: 10, total_rows: 0, filtered_available: 0, total_pages: 1})
|
|
},
|
|
reverse: {type: Boolean, default: false}
|
|
},
|
|
computed: {
|
|
pagesToDisplay() {
|
|
const range = 2;
|
|
const start = Math.max(this.pagination.page - range, 1);
|
|
const end = Math.min(this.pagination.page + range, this.pagination.total_pages);
|
|
let pages = [];
|
|
for (let i = start; i <= end; i++) {
|
|
pages.push(i);
|
|
}
|
|
return pages.length === 0 ? [1] : pages;
|
|
},
|
|
pageInfoText() {
|
|
const start = Math.min(this.pagination.page * this.pagination.per_page - this.pagination.per_page + 1, this.pagination.total_rows);
|
|
const end = Math.min(this.pagination.page * this.pagination.per_page, this.pagination.total_rows);
|
|
const total = this.pagination.total_rows === this.pagination.filtered_available
|
|
? this.pagination.total_rows
|
|
: `${this.pagination.filtered_available} (${this.pagination.total_rows})`;
|
|
return `${start} bis ${end} von ${total}`;
|
|
}
|
|
},
|
|
methods: {
|
|
fetchRows(page) {
|
|
this.$emit('fetch-rows', page);
|
|
}
|
|
},
|
|
template: `
|
|
<div class="tt-table-pagination-container">
|
|
<div v-if="pagination && typeof pagination.total_rows === 'number'" class="tt-table-pagination-wrapper">
|
|
<span class="tt-table-text-center" v-text="pageInfoText"
|
|
:style="{ 'grid-row': reverse ? 2 : 1, 'grid-column': 1 }"></span>
|
|
|
|
|
|
<ul class="pagination tt-table-pagination" :style="{ 'grid-row': reverse ? 1 : 2, 'grid-column': 1 }">
|
|
<li class="page-item tt-table-page-item" v-bind:class="{ disabled: pagination.page === 1 }">
|
|
<a class="page-link" href="#" v-on:click.prevent="fetchRows(1)" aria-label="First">
|
|
<span aria-hidden="true">«</span>
|
|
<span class="sr-only">First</span>
|
|
</a>
|
|
</li>
|
|
<li class="page-item tt-table-page-item" v-for="pageNumber in pagesToDisplay"
|
|
v-bind:class="{ 'active': pageNumber === pagination.page, 'disabled': pageNumber === pagination.page }">
|
|
<a class="page-link"
|
|
v-bind:class="{ 'active': pageNumber === pagination.page, 'disabled': pageNumber === pagination.page }"
|
|
href="#"
|
|
v-on:click.prevent="fetchRows(pageNumber)">{{ pageNumber }}</a>
|
|
</li>
|
|
<li class="page-item tt-table-page-item"
|
|
v-bind:class="{ disabled: pagination.page === pagination.total_pages }">
|
|
<a class="page-link" href="#" v-on:click.prevent="fetchRows(pagination.total_pages)"
|
|
aria-label="Last">
|
|
<span aria-hidden="true">»</span>
|
|
<span class="sr-only">Last</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
<span class="tt-table-text-center" :style="{ 'grid-row': reverse ? 2 : 1, 'grid-column': 2 }">Einträge pro Seite</span>
|
|
|
|
|
|
<select v-model="pagination.per_page" v-on:change="fetchRows(1)"
|
|
class="form-control form-control-sm tt-table-select"
|
|
:style="{ 'grid-row': reverse ? 1 : 2, 'grid-column': 2 }">
|
|
<option value="10">10</option>
|
|
<option value="25">25</option>
|
|
<option value="50">50</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
`
|
|
})
|
|
|
|
|
|
Vue.component('tt-table', {
|
|
template: `
|
|
<div class="card tt-table-card" v-if="columns && pagination">
|
|
<div class="card-body">
|
|
<!-- Top Buttons -->
|
|
<div
|
|
style="display:grid; grid-template-columns: auto auto auto auto auto; grid-gap: 8px; padding-bottom: 8px">
|
|
<slot name="top-buttons"></slot>
|
|
</div>
|
|
<!-- Pagination Controls -->
|
|
<nav aria-label="Page navigation">
|
|
<div
|
|
style="display:grid; grid-template-columns: 1fr 1fr;padding-bottom: 8px;align-items:center; justify-content: space-between">
|
|
<!-- if excelExport is true, show the export button fontawesome icon excel -->
|
|
<div style="display:flex;align-items: center;">
|
|
<i v-if="!Object.values(columns).every(column => column.filter === false)" title="Filter zurücksetzen"
|
|
@click="resetTable" class="fa-solid fa-trash-undo"
|
|
style="font-size: 24px;margin-right: 8px;cursor: pointer; color: var(--orange)"></i>
|
|
<h4 style="margin: 0">{{ config.tableHeader }}</h4>
|
|
<i v-if="excelExport" title="EXCEL Export" @click="exportToExcel" class="fa fa-file-excel"
|
|
style="font-size: 24px;margin-left: 8px;cursor: pointer; color: var(--success)"></i>
|
|
</div>
|
|
|
|
<div v-if="pagination && typeof pagination.total_rows === 'number'"
|
|
style="display:grid; grid-template-rows: auto auto; grid-template-columns: auto auto; grid-auto-flow: column; grid-gap: 4px; justify-content: end">
|
|
<ul class="pagination" style="margin: 0">
|
|
<li class="page-item" v-bind:class="{ disabled: pagination.page === 1 }">
|
|
<a class="page-link" href="#" v-on:click.prevent="fetchRows(1)" aria-label="First">
|
|
<span aria-hidden="true">«</span>
|
|
<span class="sr-only">First</span>
|
|
</a>
|
|
</li>
|
|
<li class="page-item" v-for="pageNumber in pagesToDisplay"
|
|
v-bind:class="{ 'active disabled': pageNumber === pagination.page }">
|
|
<a class="page-link" v-bind:class="{ 'active disabled': pageNumber === pagination.page }" href="#"
|
|
v-on:click.prevent="fetchRows(pageNumber)">{{ pageNumber }}</a>
|
|
</li>
|
|
<li class="page-item" v-bind:class="{ disabled: pagination.page === pagination.total_pages }">
|
|
<a class="page-link" href="#" v-on:click.prevent="fetchRows(pagination.total_pages)"
|
|
aria-label="Last">
|
|
<span aria-hidden="true">»</span>
|
|
<span class="sr-only">Last</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<span class="text-center"
|
|
v-text="Math.min(pagination.page * pagination.per_page - pagination.per_page + 1, pagination.filtered_available)
|
|
+ ' bis ' + Math.min(pagination.page * pagination.per_page, pagination.filtered_available) + ' von ' + (pagination.total_rows === pagination.filtered_available ? pagination.total_rows : pagination.filtered_available + ' ('+pagination.total_rows+')')"></span>
|
|
<select v-model="pagination.per_page" v-on:change="fetchRows(1)" class="form-control form-control-sm">
|
|
<option value="10">10</option>
|
|
<option value="25">25</option>
|
|
<option value="50">50</option>
|
|
</select>
|
|
<span class="text-center">Einträge pro Seite</span>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<!-- Table -->
|
|
<table
|
|
:class="['table','tt-table','table-condensed',{ 'loading': loading },{ 'table-striped': striped },{ 'table-bordered': bordered },{ 'table-hover': hover },{ 'table-sm': small }]">
|
|
<thead style="border-width: 2px">
|
|
<tr>
|
|
<th scope="col" v-for="column in columns"
|
|
:style="'vertical-align: top; text-align: center;' + (column.filter === 'dateRange' ? 'min-width: 260px;' : '')">
|
|
<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">
|
|
{{ column.text }}
|
|
<i
|
|
v-if="column.sortable"
|
|
:class="getSortIconClass(column.key)"></i>
|
|
</div>
|
|
<tt-input v-if="column.filter === 'search'" sm v-model="filters[column.key]"></tt-input>
|
|
<tt-icon-select v-else-if="column.filter === 'iconSelect'" :options="column.filterOptions"
|
|
v-model="filters[column.key]"></tt-icon-select>
|
|
<tt-number-range v-else-if="column.filter === 'numberRange'" :returnText="!ssr"
|
|
v-model="filters[column.key]"></tt-number-range>
|
|
<tt-select v-else-if="column.filter === 'select'"
|
|
:options="[{text: 'Alle', value: undefined}, ...column.filterOptions]"
|
|
v-model="filters[column.key]"></tt-select>
|
|
<tt-date-picker v-else-if="column.filter === 'date'" v-model="filters[column.key]"></tt-date-picker>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-if="pagination?.filtered_available === 0" style="height: 150px">
|
|
<td :colspan="Object.keys(columns).length" :rowspan="5" class="text-center">Keine Ergebnisse!</td>
|
|
</tr>
|
|
<tr v-else-if="(pagination === null && ssr === true) || rows === null"
|
|
style="height: 150px">
|
|
<td :colspan="Object.keys(columns).length" class="text-center">Laden...</td>
|
|
</tr>
|
|
<template v-for="(row) in (ssr === false ? computedRows : rows)">
|
|
<tr :class="typeof config.customRowClass === 'function' ? config.customRowClass(row) : ''"
|
|
@click="$emit('row-click', row)"
|
|
>
|
|
<template v-for="(column, key) in columns">
|
|
<td :class="{ 'text-center': column.filter === 'iconSelect', [columns[key].class]: true }">
|
|
<!-- 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))"
|
|
@click.stop="toggleExpand(row.id)"
|
|
:class="isExpanded(row.id) ? 'fas fa-chevron-down' : 'fas fa-chevron-right'"
|
|
style="cursor: pointer;font-size: 14px;padding-right: 8px;user-select: none"></i>
|
|
<slot :name="key.toLowerCase()" :value="row[key]" :row="row">
|
|
<span
|
|
v-if="column.filter === 'date'">{{ row[key] ? (moment.unix(row[key]).isValid() ? moment.unix(row[key]).format('DD.MM.YYYY HH:mm') : moment(row[key]).format('DD.MM.YYYY HH:mm')) : '' }}</span>
|
|
<i v-else-if="column.filter === 'iconSelect'"
|
|
:title="columns[key].filterOptions.find(option => option.value.toString() === row[key].toString())?.text"
|
|
:class="columns[key].filterOptions.find(option => option.value.toString() === row[key].toString())?.icon"></i>
|
|
<span v-else
|
|
v-html="row[key] === null || typeof row[key] === 'undefined' ? null : row[key]?.toString()?.replace('\\n', '<br>')"></span>
|
|
</slot>
|
|
</td>
|
|
</template>
|
|
</tr>
|
|
<tr v-if="isExpanded(row.id) && $scopedSlots.expandedRow">
|
|
<td :colspan="Object.keys(columns).length">
|
|
<slot name="expandedRow" :row="row"></slot>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
</table>
|
|
<!-- Pagination Controls -->
|
|
<nav aria-label="Page navigation">
|
|
<tt-table-pagination :pagination="pagination" @fetch-rows="fetchRows"
|
|
v-if="pagination"></tt-table-pagination>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
`, props: {
|
|
fetchUrl: String,
|
|
striped: {type: Boolean, default: true},
|
|
bordered: {type: Boolean, default: true},
|
|
hover: {type: Boolean, default: true},
|
|
sticky: {type: Boolean, default: true},
|
|
small: {type: Boolean, default: true},
|
|
excelExport: {type: Boolean, default: false},
|
|
config: {type: Object, default: () => ({}), required: true},
|
|
ssr: {type: Boolean, default: false},
|
|
disableInitialFetch: {type: Boolean, default: false}
|
|
}, data() {
|
|
return {
|
|
window: window,
|
|
moment: window.moment,
|
|
XLSX: window.XLSX,
|
|
loading: false,
|
|
rows: null,
|
|
rawRows: null,
|
|
pagination: {},
|
|
filters: {},
|
|
debounceTimeout: null,
|
|
disableDebounce: false,
|
|
latestFetchTimestamp: null,
|
|
order: {
|
|
key: null,
|
|
order: 'asc' // default sort order
|
|
},
|
|
expandedRows: {},
|
|
isInitialised: false
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
/**
|
|
* Creates a debounced function that delays invoking `fn` until after `wait` milliseconds
|
|
* have elapsed since the last time the debounced function was invoked.
|
|
*
|
|
* @param {Function} fn The function to debounce.
|
|
* @param {number} wait The number of milliseconds to delay.
|
|
* @return {Function} The debounced function.
|
|
*/
|
|
debounce(fn, wait) {
|
|
return function (...args) {
|
|
const context = this;
|
|
if (this.debounceTimeout) clearTimeout(this.debounceTimeout);
|
|
this.debounceTimeout = setTimeout(() => fn.apply(context, args), wait);
|
|
}
|
|
}, /**
|
|
* Fetches and updates data for a specified page.
|
|
*
|
|
* @param {number} page The page number to fetch data for.
|
|
* @async
|
|
*/
|
|
async fetchData(page = 0) {
|
|
try {
|
|
if (this.ssr === false) {
|
|
const response = await axios.get(this.fetchUrl);
|
|
this.rawRows = response.data
|
|
|
|
|
|
this.pagination = {
|
|
page: page++,
|
|
per_page: this.pagination?.per_page ? parseInt(this.pagination.per_page) : 10,
|
|
total_rows: this.rawRows.length || 0,
|
|
total_pages: this.rawRows.length / this.pagination?.per_page,
|
|
filtered_available: this.rawRows.length
|
|
};
|
|
this.loading = false;
|
|
return
|
|
}
|
|
|
|
const fetchTimestamp = Date.now();
|
|
this.latestFetchTimestamp = fetchTimestamp;
|
|
const response = await axios.post(this.fetchUrl, {
|
|
pagination: {
|
|
page: Math.max(page, 1), per_page: this.pagination?.per_page ? this.pagination.per_page : 10,
|
|
}, filters: this.filters, order: this.order
|
|
});
|
|
|
|
if (fetchTimestamp !== this.latestFetchTimestamp) return;
|
|
|
|
if (typeof response.data !== 'object') { // if the response is not an object
|
|
this.rows = [];
|
|
this.pagination = {page: 1, per_page: 10, total_rows: 0, total_pages: 1};
|
|
} else {
|
|
this.rows = response.data.rows;
|
|
this.pagination = response.data.pagination;
|
|
}
|
|
this.loading = false;
|
|
this.isInitialised = true;
|
|
} catch (error) {
|
|
console.error('Error fetching data:', error);
|
|
}
|
|
}, /**
|
|
* Fetches rows for a given page, with an option to debounce the fetch operation.
|
|
*
|
|
* @param {number} page The page number to fetch. Defaults to 1.
|
|
* @param {boolean} debounce Whether to debounce the fetch operation. Defaults to false.
|
|
*/
|
|
async fetchRows(page = 1, debounce = false) {
|
|
|
|
if (this.disableDebounce === true) {
|
|
debounce = false;
|
|
this.disableDebounce = false;
|
|
}
|
|
|
|
this.loading = true
|
|
if (debounce) {
|
|
this.debounce(this.fetchData.bind(this), 300)(page);
|
|
} else {
|
|
await this.fetchData(page); // Directly call fetchData without debounce
|
|
}
|
|
},
|
|
saveSettingsToLocalStorage() {
|
|
if (this.isInitialised === false) return;
|
|
|
|
const filters = Object.entries(this.filters).reduce((acc, [key, value]) => {
|
|
if (!value) {
|
|
return acc; // Skip empty strings
|
|
}
|
|
value = JSON.parse(JSON.stringify(value)); // Deep copy to avoid Vue reactivity
|
|
if (typeof value === 'object' && value !== null && Object.keys(value).length === 0) {
|
|
return acc; // Skip empty objects
|
|
}
|
|
acc[key] = value; // Add non-empty properties to accumulator
|
|
return acc;
|
|
}, {});
|
|
|
|
localStorage.setItem(`tt-table-${this.config.key}`, JSON.stringify({
|
|
// filter filters with empty values or empty objects
|
|
filters,
|
|
paginationPerPage: this.pagination.per_page,
|
|
order: this.order.key ? this.order : undefined,
|
|
expandedRows: this.expandedRows
|
|
}));
|
|
},
|
|
parseSettingsFromLocalStorage() {
|
|
const settings = JSON.parse(localStorage.getItem(`tt-table-${this.config.key}`) || '{}');
|
|
if (settings) {
|
|
this.disableDebounce = true;
|
|
this.filters = settings.filters || {};
|
|
this.pagination.per_page = parseInt(settings.paginationPerPage) || this.config.defaultPageSize || 10;
|
|
this.order = settings.order || {key: null, order: 'asc'};
|
|
this.expandedRows = settings.expandedRows || {};
|
|
}
|
|
return !!settings;
|
|
},
|
|
setOrder(key) {
|
|
if (this.order.key === key) {
|
|
// if current order is desc then set key to null
|
|
if (this.order.order === 'desc') {
|
|
this.order.key = null;
|
|
this.order.order = 'asc';
|
|
} else {
|
|
// if current order is asc then set order to desc
|
|
this.order.order = 'desc';
|
|
}
|
|
} else {
|
|
// Set new key and default to ascending
|
|
this.order.key = key;
|
|
this.order.order = 'asc';
|
|
}
|
|
},
|
|
getSortIconClass(key) {
|
|
if (this.order.key === key) {
|
|
return this.order.order === 'asc' ? 'fa fa-sort-asc' : 'fa fa-sort-desc';
|
|
}
|
|
return 'fa fa-sort'; // default icon when not sorted
|
|
},
|
|
async exportToExcel() {
|
|
|
|
// create script and await downloading: /plugins/xlsx/xlsx.min.js
|
|
await new Promise((resolve, reject) => {
|
|
const script = document.createElement('script');
|
|
script.src = '/plugins/xlsx/xlsx.min.js';
|
|
script.onload = resolve;
|
|
script.onerror = reject;
|
|
document.head.appendChild(script);
|
|
})
|
|
|
|
|
|
const wb = this.XLSX.utils.book_new();
|
|
|
|
let data = typeof this.config.customExcelProcessor === 'function' ? this.config.customExcelProcessor(this.rawRows) : JSON.parse(JSON.stringify(this.rawRows));
|
|
|
|
// convert all columns with date with momentjs
|
|
|
|
data = data.map(row => {
|
|
for (const key in row) {
|
|
if (this.columns[key].filter === 'date') {
|
|
row[key] = this.moment(row[key]).format('DD.MM.YYYY HH:mm');
|
|
}
|
|
}
|
|
return row;
|
|
});
|
|
|
|
const ws = this.XLSX.utils.json_to_sheet(data);
|
|
|
|
for (const cell in ws) {
|
|
if (cell.startsWith('!')) continue; // Skip non-cell properties like '!ref'
|
|
const cellValue = ws[cell].v;
|
|
if (cellValue.toString().includes('\n')) {
|
|
console.log('Found newline in cell:', cell, cellValue);
|
|
if (!ws[cell].s) ws[cell].s = {};
|
|
ws[cell].s.alignment = {wrapText: true, vertical: 'center'};
|
|
} else {
|
|
ws[cell].s = {alignment: {vertical: 'center'}};
|
|
}
|
|
}
|
|
|
|
this.XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
|
|
this.XLSX.writeFile(wb, 'export.xlsx');
|
|
},
|
|
resetTable() {
|
|
this.$emit('reset-table');
|
|
this.filters = {};
|
|
this.order = {key: null, order: 'asc'};
|
|
this.expandedRows = {};
|
|
this.disableDebounce = true;
|
|
window.notify('success', 'Filter zurückgesetzt');
|
|
},
|
|
toggleExpand(index) {
|
|
this.expandedRows[index] ? this.$delete(this.expandedRows, index) : this.$set(this.expandedRows, index, true);
|
|
},
|
|
isExpanded(index) {
|
|
return !!this.expandedRows[index];
|
|
}
|
|
}, watch: {
|
|
filters: {
|
|
handler: function (newVal, oldVal) {
|
|
if (!this.isInitialised) return;
|
|
|
|
if (this.ssr) {
|
|
this.fetchRows(this.pagination?.page || 1, true).then();
|
|
}
|
|
this.saveSettingsToLocalStorage();
|
|
}, deep: true
|
|
},
|
|
'pagination.per_page': {
|
|
handler: function (newVal, oldVal) {
|
|
if (!this.isInitialised) return;
|
|
if (newVal === oldVal) return
|
|
|
|
this.saveSettingsToLocalStorage();
|
|
}, deep: true
|
|
},
|
|
order: {
|
|
handler: function (newVal, oldVal) {
|
|
if (!this.isInitialised) return;
|
|
|
|
if (this.ssr) {
|
|
this.fetchRows(this.pagination?.page || 1, true).then();
|
|
}
|
|
this.saveSettingsToLocalStorage();
|
|
}, deep: true
|
|
},
|
|
expandedRows: {
|
|
handler: function (newVal, oldVal) {
|
|
if (!this.isInitialised) return;
|
|
|
|
this.saveSettingsToLocalStorage();
|
|
}, deep: true
|
|
}
|
|
}, computed: {
|
|
/**
|
|
* Returns an object containing the columns' configuration.
|
|
* @return {ttTableColumnConfig} The columns configuration.
|
|
*/
|
|
columns() {
|
|
return this.config.headers.reduce((columns, column) => {
|
|
if (!column.key) {
|
|
console.warn('WARN: tt-table: Column text or key is not defined:', column);
|
|
return columns; // Continue to the next iteration without modifying the accumulator
|
|
}
|
|
columns[column.key] = {
|
|
text: column.text,
|
|
key: column.key,
|
|
filter: column.filter !== undefined ? column.filter : 'search',
|
|
filterOptions: column.filterOptions || undefined,
|
|
sortable: column.sortable !== undefined ? column.sortable : true,
|
|
class: column.class !== undefined ? column.class : ''
|
|
};
|
|
return columns;
|
|
}, {});
|
|
|
|
}, pagesToDisplay() {
|
|
let range = 2; // Number of pages before and after the current page
|
|
let start = (this.pagination.page < 4 ? 1 : this.pagination.page - range);
|
|
let end = (this.pagination.page + range > this.pagination.total_pages ? this.pagination.total_pages : this.pagination.page + range);
|
|
if (end < 5) end = 5;
|
|
|
|
// Adjust start and end if they are out of bounds
|
|
end = end > this.pagination.total_pages ? this.pagination.total_pages : end;
|
|
|
|
// Adjust the start and end if we are at the end of the page range
|
|
if (this.pagination.page > this.pagination.total_pages - 2) {
|
|
start = this.pagination.total_pages - 4 < 1 ? 1 : this.pagination.total_pages - 4;
|
|
}
|
|
|
|
// Create an array of page numbers to display
|
|
let pagesArray = [];
|
|
for (let i = start; i <= end; i++) {
|
|
pagesArray.push(i);
|
|
}
|
|
|
|
return pagesArray.length === 0 ? [1] : pagesArray;
|
|
},
|
|
computedRows() {
|
|
if (!this.rawRows || this.ssr === true) return null;
|
|
console.time('Filtering and pagination');
|
|
|
|
function handleRangeFilter(filter, value) {
|
|
if (filter[0] === '<') {
|
|
const bound = parseFloat(filter.slice(1));
|
|
return value <= bound;
|
|
} else if (filter[0] === '>') {
|
|
const bound = parseFloat(filter.slice(1));
|
|
return value >= bound;
|
|
} else if (filter.includes('-')) {
|
|
const bounds = filter.split('-').map(Number);
|
|
return value >= bounds[0] && value <= bounds[1];
|
|
}
|
|
return false; // Fallback for any non-matching cases
|
|
}
|
|
|
|
|
|
const data = this.rawRows;
|
|
const output = [];
|
|
const filters = this.filters;
|
|
const filtersLength = Object.keys(filters).length;
|
|
const headers = this.columns;
|
|
const dataLength = data.length;
|
|
|
|
for (var i = 0; i < dataLength; ++i) {
|
|
const row = data[i];
|
|
if (Object.keys(filters).length === 0) {
|
|
output.push(row);
|
|
continue;
|
|
}
|
|
|
|
let match = true;
|
|
for (var j = 0; j < filtersLength; ++j) {
|
|
// find header by filter key
|
|
const filter = Object.keys(filters)[j];
|
|
const header = headers[filter];
|
|
|
|
const filterValue = filters[filter];
|
|
if (filterValue === '') continue;
|
|
if (filterValue === "!") continue;
|
|
|
|
if (header.filter === 'search') {
|
|
|
|
const isNegated = filterValue.startsWith('!');
|
|
const targetValue = (row[header.key] ? row[header.key].toString().toLowerCase() : '');
|
|
const substrings = (isNegated ? filterValue.slice(1) : filterValue).split(' ').map(s => s.toLowerCase());
|
|
|
|
let substringMatch = true;
|
|
for (var k = 0, klen = substrings.length; k < klen; ++k) {
|
|
if (!targetValue.includes(substrings[k])) {
|
|
substringMatch = false;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if ((isNegated && substringMatch) || (!isNegated && !substringMatch)) {
|
|
match = false;
|
|
break;
|
|
}
|
|
|
|
|
|
} else if (header.filter === 'numberRange') {
|
|
const rangeMatch = handleRangeFilter(filterValue, parseFloat(row[header.key]));
|
|
if (!rangeMatch) {
|
|
match = false;
|
|
break;
|
|
}
|
|
} else if (header.filter === 'select' || header.filter === 'iconSelect') {
|
|
if (filterValue === '') continue;
|
|
if (filterValue !== row[header.key].toString()) {
|
|
match = false;
|
|
break;
|
|
}
|
|
} else if (header.filter === 'date') {
|
|
if (!filterValue.from || !filterValue.to) continue;
|
|
|
|
let rowDate = new Date(row[header.key]).getTime() / 1000;
|
|
|
|
if (rowDate < filterValue.from || rowDate > filterValue.to) {
|
|
match = false;
|
|
break;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
if (match) {
|
|
output.push(row);
|
|
}
|
|
}
|
|
|
|
// order the output using this.order in most performant way
|
|
if (this.order.key) {
|
|
function naturalSort(a, b) {
|
|
return a.localeCompare(b, undefined, {numeric: true, sensitivity: 'base'});
|
|
}
|
|
|
|
const isDateColumn = this.columns[this.order.key].filter === 'date';
|
|
|
|
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];
|
|
|
|
if (valueA === valueB) return 0;
|
|
|
|
if (this.order.order === 'asc') {
|
|
return typeof valueA === 'string' ? naturalSort(valueA, valueB) : (valueA < valueB ? -1 : 1);
|
|
} else {
|
|
return typeof valueA === 'string' ? naturalSort(valueB, valueA) : (valueA > valueB ? -1 : 1);
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
console.timeEnd('Filtering and pagination');
|
|
// Pagination and slice logic
|
|
this.pagination.total_pages = Math.ceil(output.length / this.pagination.per_page);
|
|
this.pagination.filtered_available = output.length;
|
|
const perPage = this.pagination.per_page;
|
|
const page = this.pagination.page;
|
|
const startIndex = (page - 1) * perPage;
|
|
const endIndex = startIndex + perPage;
|
|
this.rows = output.slice(startIndex, Math.min(endIndex, output.length));
|
|
return this.rows;
|
|
}
|
|
|
|
},
|
|
async created() {
|
|
if (this.config.hasOwnProperty('defaultPageSize') && this.config.defaultPageSize) {
|
|
this.pagination = {page: 1, per_page: this.config.defaultPageSize, total_rows: null, total_pages: 1};
|
|
}
|
|
|
|
|
|
|
|
this.parseSettingsFromLocalStorage()
|
|
|
|
if (!this.disableInitialFetch) {
|
|
this.disableDebounce = true;
|
|
await this.fetchRows()
|
|
this.isInitialised = true;
|
|
}
|
|
|
|
// if sticky is true then add style element to style thead sticky
|
|
if (this.sticky) {
|
|
const style = document.createElement('style');
|
|
style.innerHTML = `table thead th { position: sticky; top: 0; z-index: 1; background-color: white; }`;
|
|
document.head.appendChild(style);
|
|
}
|
|
},
|
|
}) |