From cceb0c3f54b4ecae60911830cc3dfc7d7f5bf5fb Mon Sep 17 00:00:00 2001
From: Luca Haid <luca.haid@xinon.eu>
Date: Wed, 24 Jul 2024 15:04:03 +0000
Subject: [PATCH] Feature/tt table move filter reset

---
 .../vue/tt-components/tt-autocomplete.js      |  2 ++
 public/plugins/vue/tt-components/tt-table.js  | 29 ++++++++++++++-----
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/public/plugins/vue/tt-components/tt-autocomplete.js b/public/plugins/vue/tt-components/tt-autocomplete.js
index 099b1ef2a..b214800b5 100644
--- a/public/plugins/vue/tt-components/tt-autocomplete.js
+++ b/public/plugins/vue/tt-components/tt-autocomplete.js
@@ -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 },
diff --git a/public/plugins/vue/tt-components/tt-table.js b/public/plugins/vue/tt-components/tt-table.js
index 7e6bfe15a..ca0423d0d 100644
--- a/public/plugins/vue/tt-components/tt-table.js
+++ b/public/plugins/vue/tt-components/tt-table.js
@@ -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;