Luca/thetool
1
0
Fork 0
Code Issues 5 Pull Requests 5 Actions Packages Projects Releases Wiki Activity

Feature/tt table move filter reset

Browse Source
This commit is contained in:
Luca Haid
2024-07-24 15:04:03 +00:00
parent 75e8c6b2e7
commit cceb0c3f54
2 changed files with 23 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/plugins/vue/tt-components/tt-autocomplete.js
View File

@@ -11,6 +11,7 @@ Vue.component('tt-autocomplete', {
class="form-control"
:class="{'form-control-sm': sm}"
v-model="displayValue"
:placeholder="placeholder"
@input="onInput"
@focus="onFocus"
@blur="onBlur"
@@ -59,6 +60,7 @@ Vue.component('tt-autocomplete', {
value: { type: [String, Number] },
label: { type: String, required: false },
apiUrl: String,
placeholder: { type: String, default: '' },
items: { type: Array, default: () => [] },
sm: { type: Boolean, default: true },
row: { type: Boolean, default: false },

29
public/plugins/vue/tt-components/tt-table.js
View File

@@ -65,6 +65,7 @@ Vue.component('tt-table-pagination', {
<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>
@@ -124,12 +125,6 @@ Vue.component('tt-table', {
<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;">
<i v-if="!Object.values(columns).every(column => column.filter === false)"
title="Filter zurücksetzen"
@click="resetTable" class="fas fa-times cursor-pointer text-danger"
style="font-size: 24px;margin-right: 6px;cursor: pointer; color: var(--orange)"></i>
<i v-if="excelExport" title="EXCEL Export" @click="exportToExcel" class="fa fa-file-excel"
style="font-size: 24px;margin-right: 6px;cursor: pointer; color: var(--success)"></i>
<h4 style="margin: 0">{{ config.tableHeader }}</h4>
</div>
@@ -250,8 +245,23 @@ Vue.component('tt-table', {
</table>
<!-- Pagination Controls -->
<nav aria-label="Page navigation">
<tt-table-pagination :pagination="pagination" @fetch-rows="fetchRows"
v-if="pagination"></tt-table-pagination>
<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: {
@@ -383,6 +393,7 @@ Vue.component('tt-table', {
}
}, saveSettingsToLocalStorage() {
if (this.isInitialised === false) return;
if (this.disableFiltering) return;
const filters = Object.entries(this.filters).reduce((acc, [key, value]) => {
if (!value) {
@@ -403,6 +414,8 @@ Vue.component('tt-table', {
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;