838 lines
42 KiB
JavaScript
838 lines
42 KiB
JavaScript
/**
|
|
* @typedef {Object} ttTableColumnConfig
|
|
* @property {string} text - The display text of the column header.
|
|
* @property {string} key - The unique key of the column (used for data access and filtering).
|
|
* @property {string} [filter] - (Optional) Determines the type of filter applied to the column. Default is 'search'.
|
|
* Possible values:
|
|
* - 'search': Basic text search (case-insensitive).
|
|
* - 'iconSelect': Filter with icons and associated text (requires 'filterOptions').
|
|
* - 'numberRange': Filter with numeric ranges (e.g., ">5", "10-20", etc.).
|
|
* - 'select': Dropdown filter with predefined options (requires 'filterOptions').
|
|
* - 'date': Date range filter.
|
|
* - 'false': Disables filtering for the column.
|
|
* @property {Array} [filterOptions] - (Optional) An array of filter options for 'iconSelect' or 'select' filters.
|
|
* Each option should be an object with 'text' (display text) and 'value' (filter value) properties.
|
|
* For 'iconSelect', an additional 'icon' property (CSS class for the icon) is required.
|
|
* @property {boolean} [sortable=true] - (Optional) Indicates whether the column is sortable. Default is true.
|
|
* @property {string} [class] - (Optional) Additional CSS classes to apply to the column.
|
|
* @property {string} [headerClass] - (Optional) Additional CSS classes to apply to the column header.
|
|
* @property {string} [suffix] - (Optional) Additional CSS classes to apply to the column.
|
|
* @property {string} [prefix] - (Optional) Additional CSS classes to apply to the column.
|
|
* */
|
|
|
|
/**
|
|
* @typedef {Object} ttTableConfig
|
|
* @property {string} key - A unique key for the table instance (used for saving/loading settings).
|
|
* @property {string} tableHeader - The main header text displayed above the table.
|
|
* @property {ttTableColumnConfig[]} headers - An array of column configuration objects (see `ttTableColumnConfig` typedef).
|
|
* @property {Function} [customRowClass] - (Optional) A function that returns a CSS class string based on row data.
|
|
* @property {Function} [expandCondition] - (Optional) A function that determines if a row is expandable.
|
|
* @property {number} [defaultPageSize=10] - (Optional) The default number of rows to display per page.
|
|
* @property {Function} [customExcelProcessor] - (Optional) A function to preprocess row data before exporting to Excel.
|
|
*/
|
|
|
|
|
|
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);
|
|
|
|
if (!this.pagination.filtered_available) this.pagination.filtered_available = 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="tt-table-container" ref="tableContainer">
|
|
<!-- Top Buttons -->
|
|
<div class="tt-table-top-buttons-container">
|
|
<slot name="top-buttons"></slot>
|
|
</div>
|
|
<!-- Pagination Controls -->
|
|
<nav aria-label="Page navigation">
|
|
<div class="tt-table-top-pagination-container">
|
|
<!-- if excelExport is true, show the export button fontawesome icon excel -->
|
|
<div style="display:flex;align-items: center;">
|
|
<h4 style="margin: 0">{{ config.tableHeader }}</h4>
|
|
</div>
|
|
|
|
<tt-table-pagination :pagination="pagination" @fetch-rows="fetchRows"
|
|
v-if="pagination"></tt-table-pagination>
|
|
</div>
|
|
</nav>
|
|
<!-- Table -->
|
|
<table
|
|
ref="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"
|
|
:ref="'table_header_'+column.key"
|
|
:class="column.headerClass ? column.headerClass : 'tt-table-header'"
|
|
v-if="!hiddenColumns.includes(column.key)"
|
|
:style="(column.filter === 'dateRange' ? 'min-width: 260px;' : '') +
|
|
(originalColumnWidths[column.key] ? 'width: ' + originalColumnWidths[column.key] + 'px;' : '')"
|
|
>
|
|
<div
|
|
style="white-space: nowrap;word-break: keep-all;user-select: none;"
|
|
:style="{ 'cursor': column.sortable ? 'pointer' : 'default' }"
|
|
@click="column.sortable && !disableFiltering ? setOrder(column.key) : undefined">
|
|
{{ column.text }}
|
|
<i v-if="column.sortable && !disableFiltering"
|
|
:class="getSortIconClass(column.key)"></i>
|
|
</div>
|
|
<!-- @formatter:off -->
|
|
<tt-input v-if="column.filter === 'search' && !disableFiltering" v-model="filters[column.key]" sm/>
|
|
<tt-icon-select v-else-if="column.filter === 'iconSelect' && !disableFiltering" :options="column.filterOptions" v-model="filters[column.key]" sm/>
|
|
<tt-number-range v-else-if="column.filter === 'numberRange' && !disableFiltering" :returnText="!ssr" v-model="filters[column.key]" sm/>
|
|
<tt-select v-else-if="column.filter === 'select' && !disableFiltering" :options="[{text: 'Alle', value: undefined}, ...column.filterOptions]" v-model="filters[column.key]" sm/>
|
|
<tt-autocomplete v-else-if="column.filter === 'autocomplete' && !disableFiltering" :api-url="column.filterOptions" v-model="filters[column.key]" sm/>
|
|
<tt-date-picker v-else-if="column.filter === 'date' && !disableFiltering" v-model="filters[column.key]"/>
|
|
<!-- @formatter:on -->
|
|
</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, index) in (ssr === false ? visibleRows : rows)">
|
|
<tr :class="typeof config.customRowClass === 'function' ? config.customRowClass(row) : ''"
|
|
@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,
|
|
//'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)"
|
|
|
|
@click.stop="toggleExpand(index)"
|
|
:class="isExpanded(index) ? '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-if="column.filter === 'autocomplete'">
|
|
{{ autoCompleteData[key] && autoCompleteData[key][row[key]] ? autoCompleteData[key][row[key]]['title'] : row[key] }}
|
|
|
|
|
|
</span>
|
|
<span v-else-if="key === 'create'">{{ window.moment(row[key] * 1000).format('DD.MM.YYYY HH:mm:ss') }}</span>
|
|
<span v-else-if="row[key] !== null"
|
|
v-html="(column.prefix) + (row[key] === null || typeof row[key] === 'undefined' ? '' : row[key]?.toString()?.replace('\\\\n', '<br>')) + (column.suffix )"></span>
|
|
|
|
</slot>
|
|
</td>
|
|
</template>
|
|
</tr>
|
|
<tr v-if="isExpanded(index) && ($scopedSlots.expandedRow|| hiddenColumns.length > 0)">
|
|
<td :colspan="Object.keys(columns).length">
|
|
|
|
<!-- display ul with li for each column in hiddenColumns with slot name key.toLowerCase() or span with value of row[key] -->
|
|
<ul v-if="hiddenColumns.length > 0" style="list-style-type: none;padding: 0;margin: 0;">
|
|
<li v-for="(column, key) in columns" :key="'hiddenColumn-'+key">
|
|
<template v-if="hiddenColumns.includes(key)">
|
|
<strong>{{ column.text }}:</strong>
|
|
<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-if="column.filter === 'autocomplete'">
|
|
{{ autoCompleteData[key] && autoCompleteData[key][row[key]] ? autoCompleteData[key][row[key]]['title'] : row[key] }}</span>
|
|
|
|
<span v-else-if="row[key] !== null"
|
|
v-html="(column.prefix) + (row[key] === null || typeof row[key] === 'undefined' ? '' : row[key]?.toString()?.replace('\\\\n', '<br>')) + (column.suffix )">
|
|
</span>
|
|
</slot>
|
|
</template>
|
|
</li>
|
|
</ul>
|
|
|
|
<slot name="expandedRow" :row="row"></slot>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
</table>
|
|
<!-- Pagination Controls -->
|
|
<nav aria-label="Page navigation">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<button v-if="!Object.values(columns).every(column => column.filter === false) || disableFiltering"
|
|
@click="resetTable" class="btn btn-outline-secondary mr-2"
|
|
>
|
|
<i class="fas fa-filter"></i>
|
|
Filter zurücksetzen
|
|
</button>
|
|
<button v-if="excelExport" title="EXCEL Export" @click="exportToExcel" class="btn btn-outline-success">
|
|
<i class="fa fa-file-excel" style="color: var(--success)"></i>
|
|
Excel Export
|
|
</button>
|
|
</div>
|
|
|
|
<tt-table-pagination :pagination="pagination" @fetch-rows="fetchRows"
|
|
v-if="pagination"></tt-table-pagination>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
`, props: {
|
|
fetchUrl: String,
|
|
data: Array,
|
|
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},
|
|
disableFiltering: {type: Boolean, default: false}
|
|
}, data() {
|
|
return {
|
|
window: window,
|
|
moment: window.moment,
|
|
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,
|
|
hiddenColumns: [],
|
|
originalColumnWidths: {},
|
|
originalTableWidth: null,
|
|
debouncedHandleResize: null,
|
|
autoCompleteData: {}
|
|
};
|
|
},
|
|
|
|
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);
|
|
}
|
|
}, refreshTable() {
|
|
this.loading = true;
|
|
this.fetchData(this.pagination.page).then()
|
|
}, /**
|
|
* Fetches and updates data for a specified page.
|
|
*
|
|
* @param {number} page The page number to fetch data for.
|
|
* @async
|
|
*/
|
|
async fetchData(page = 0) {
|
|
this.expandedRows = {};
|
|
|
|
try {
|
|
if (this.ssr === false) {
|
|
if (this.data) {
|
|
this.rawRows = this.data;
|
|
} else {
|
|
const response = await axios.get(this.fetchUrl);
|
|
this.rawRows = response.data
|
|
}
|
|
|
|
this.pagination = {
|
|
page: Math.max(page, 1),
|
|
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.autoCompleteData = response.data.autoCompleteData;
|
|
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;
|
|
if (this.disableFiltering) 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,
|
|
}));
|
|
}, parseSettingsFromLocalStorage() {
|
|
if (this.disableFiltering) return false;
|
|
|
|
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'};
|
|
}
|
|
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() {
|
|
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);
|
|
})
|
|
|
|
function defaultExcelProcessor(rows) {
|
|
return rows.map(row => {
|
|
const parsedRow = {};
|
|
|
|
for (const key in row) {
|
|
if (!this.columns[key]) continue;
|
|
|
|
if (this.columns[key] && this.columns[key].filter === 'iconSelect') {
|
|
parsedRow[this.columns[key].text] =
|
|
this.columns[key].filterOptions.find(option => option.value.toString() === row[key].toString())?.text;
|
|
} else if (this.columns[key] && this.columns[key].filter === 'date') {
|
|
parsedRow[this.columns[key].text] = this.moment(row[key]).format('DD.MM.YYYY HH:mm');
|
|
} else {
|
|
parsedRow[this.columns[key].text] = row[key];
|
|
}
|
|
|
|
}
|
|
return parsedRow;
|
|
});
|
|
}
|
|
|
|
const wb = this.window.XLSX.utils.book_new();
|
|
|
|
|
|
let data = typeof this.config.customExcelProcessor ===
|
|
'function' ? this.config.customExcelProcessor(JSON.parse(JSON.stringify(this.computedRows))) : defaultExcelProcessor.call(this,
|
|
JSON.parse(JSON.stringify(this.computedRows)));
|
|
|
|
const ws = this.window.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.window.XLSX.utils.book_append_sheet(wb, ws, "Export");
|
|
this.window.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];
|
|
}, async handleResponsiveColumns() {
|
|
if (!this.$refs.tableContainer) return;
|
|
const tableContainer = this.$refs.tableContainer;
|
|
const {paddingLeft, paddingRight} = window.getComputedStyle(tableContainer);
|
|
|
|
let viewportWidth = tableContainer.offsetWidth - parseInt(paddingLeft) - parseInt(paddingRight);
|
|
this.originalColumnWidths = {}
|
|
this.hiddenColumns = []
|
|
await this.$nextTick()
|
|
|
|
for (let i = 0; i < Object.keys(this.columns).length; i++) {
|
|
const column = Object.keys(this.columns)[i]
|
|
this.originalColumnWidths[column] = this.$refs[`table_header_${column}`][0].offsetWidth
|
|
}
|
|
|
|
// Create an array of columns sorted by priority
|
|
const columns = Object.values(this.columns).sort((a, b) => b.priority - a.priority);
|
|
|
|
// Iterate over all columns and check if the viewport width is smaller than the column width and hide the column
|
|
for (let i = 0; i < columns.length; i++) {
|
|
viewportWidth -= this.originalColumnWidths[columns[i].key];
|
|
|
|
if (i === 0) continue;
|
|
|
|
else if (viewportWidth + 10 < 0) {
|
|
this.hiddenColumns.push(columns[i].key)
|
|
}
|
|
}
|
|
}
|
|
|
|
}, watch: {
|
|
filters: {
|
|
handler: function () {
|
|
if (!this.isInitialised) return;
|
|
|
|
// go through filters and if there is a set value in filters and the filter of the column is select or autocomplete then parse the value to int
|
|
for (const key in this.filters) {
|
|
if (this.filters[key] && (this.columns[key].filter === 'select' || this.columns[key].filter === 'autocomplete')) {
|
|
// only if first character is a number
|
|
if (!isNaN(this.filters[key][0])) {
|
|
this.filters[key] = parseInt(this.filters[key]);
|
|
}
|
|
}
|
|
}
|
|
|
|
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 () {
|
|
if (!this.isInitialised) return;
|
|
|
|
if (this.ssr) {
|
|
this.fetchRows(this.pagination?.page || 1, true).then();
|
|
}
|
|
this.saveSettingsToLocalStorage();
|
|
}, deep: true
|
|
}, expandedRows: {
|
|
handler: function () {
|
|
if (!this.isInitialised) return;
|
|
|
|
this.saveSettingsToLocalStorage();
|
|
}, deep: true
|
|
}, rows: {
|
|
handler: async function () {
|
|
this.$nextTick(() => {
|
|
this.handleResponsiveColumns()
|
|
})
|
|
}, deep: true
|
|
}, computedRows: {
|
|
handler: async function () {
|
|
this.$nextTick(() => {
|
|
this.handleResponsiveColumns()
|
|
})
|
|
}, deep: true
|
|
}
|
|
}, computed: {
|
|
/**
|
|
* Returns an object containing the columns' configuration.
|
|
* @return {ttTableColumnConfig} The columns configuration.
|
|
*/
|
|
columns() {
|
|
let i = this.config.headers.length;
|
|
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 : '',
|
|
headerClass: column.headerClass || false,
|
|
prefix: column.prefix || '',
|
|
suffix: column.suffix || '',
|
|
priority: column.priority + 100 || i--
|
|
};
|
|
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 (filterValue === "!") continue;
|
|
|
|
if (header.filter === 'search') {
|
|
|
|
const isNegated = filterValue.startsWith('!');
|
|
const substrings = (isNegated ? filterValue.slice(1) : filterValue).split(' ')
|
|
.map(s => s.toLowerCase());
|
|
|
|
const targetValue = !row[header.key] ? '' : typeof row[header.key] === 'object' ? Object.values(row[header.key])
|
|
.join(' ')
|
|
.toLowerCase() : row[header.key].toString().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' || header.filter === 'autocomplete') {
|
|
if (filterValue === '') continue;
|
|
if (filterValue !== row[header.key]?.toString()) {
|
|
match = false;
|
|
break;
|
|
}
|
|
} else if (header.filter === 'date') {
|
|
if (!filterValue.from || !filterValue.to) continue;
|
|
|
|
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;
|
|
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.toString().localeCompare(b.toString(), 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].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;
|
|
|
|
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');
|
|
return output;
|
|
}, visibleRows() {
|
|
if (!this.rawRows || this.ssr === true) return null;
|
|
// Pagination and slice logic
|
|
this.pagination.total_pages = Math.ceil(this.computedRows.length / this.pagination.per_page);
|
|
this.pagination.filtered_available = this.computedRows.length;
|
|
const perPage = this.pagination.per_page;
|
|
const page = this.pagination.page;
|
|
const startIndex = (page - 1) * perPage;
|
|
const endIndex = startIndex + perPage;
|
|
this.rows = this.computedRows.slice(startIndex, Math.min(endIndex, this.computedRows.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');
|
|
// use header#topnav as top to stick to but if window is resized then check if header#topnav height is changed
|
|
|
|
const headerHeight = document.querySelector('header#topnav')?.offsetHeight || 0;
|
|
style.innerHTML = `table thead th { position: sticky; top: ${headerHeight}px; z-index: 1; background-color: white; }`;
|
|
style.id = 'tt-table-sticky-header';
|
|
|
|
window.addEventListener('resize', () => {
|
|
const headerHeight = document.querySelector('header#topnav')?.offsetHeight || 0;
|
|
style.innerHTML = `table thead th { position: sticky; top: ${headerHeight}px; z-index: 1; background-color: white; }`;
|
|
})
|
|
|
|
document.head.appendChild(style);
|
|
}
|
|
|
|
this.debouncedHandleResize = this.debounce(this.handleResponsiveColumns, 100);
|
|
window.addEventListener('resize', this.debouncedHandleResize);
|
|
}, beforeDestroy() {
|
|
window.removeEventListener('resize', this.debouncedHandleResize);
|
|
}
|
|
})
|
|
|
|
Vue.config.errorHandler = function (err, vm, info) {
|
|
// still log errors to the console
|
|
console.error(info, err, vm);
|
|
|
|
if (typeof vm.config.key === 'string') {
|
|
// check if document.querySelector table.tt-table exists aswell if it has atleast 3 <tr> elements
|
|
const table = document.querySelector('table.tt-table');
|
|
if (!table || !table.querySelectorAll('tr').length > 2) {
|
|
// localStorage.removeItem(`tt-table-${vm.config.key}`);
|
|
// window.location.reload();
|
|
}
|
|
}
|
|
} |