From 672d8bd4ef6fbb2eba01418cea9fa99fe41914c3 Mon Sep 17 00:00:00 2001
From: maks <mojpo4tovik@gmail.com>
Date: Thu, 7 Nov 2024 17:04:43 +0000
Subject: [PATCH] feat: hide filters from panel

---
 src/plugins/filter/filter.panel.tsx | 12 ++++++------
 src/plugins/filter/filter.types.ts  | 13 +++++++++++++
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/plugins/filter/filter.panel.tsx b/src/plugins/filter/filter.panel.tsx
index 5dc6c87a..bc4b0083 100644
--- a/src/plugins/filter/filter.panel.tsx
+++ b/src/plugins/filter/filter.panel.tsx
@@ -130,29 +130,29 @@ export class FilterPanel {
     const prop = this.changes?.prop;
     if (typeof prop === 'undefined') return '';
 
-    const propFilters = this.filterItems[prop] || [];
+    const propFilters = this.filterItems[prop]?.filter(f => !f.hidden) || [];
     const capts = Object.assign(
       this.filterCaptionsInternal,
       this.filterCaptions,
     );
     return (
       <div key={this.filterId}>
-        {propFilters.map((d, index) => {
+        {propFilters.map((filter, index) => {
           let andOrButton;
 
           // hide toggle button if there is only one filter and the last one
           if (index !== this.filterItems[prop].length - 1) {
             andOrButton = (
-              <div onClick={() => this.toggleFilterAndOr(d.id)}>
+              <div onClick={() => this.toggleFilterAndOr(filter.id)}>
                 <AndOrButton
-                  text={d.relation === 'and' ? capts.and : capts.or}
+                  text={filter.relation === 'and' ? capts.and : capts.or}
                 />
               </div>
             );
           }
 
           return (
-            <div key={d.id} class={FILTER_LIST_CLASS}>
+            <div key={filter.id} class={FILTER_LIST_CLASS}>
               <div class={{ 'select-input': true }}>
                 <select
                   class="select-css select-filter"
@@ -164,7 +164,7 @@ export class FilterPanel {
                   )}
                 </select>
                 <div class={FILTER_LIST_CLASS_ACTION}>{andOrButton}</div>
-                <div onClick={() => this.onRemoveFilter(d.id)}>
+                <div onClick={() => this.onRemoveFilter(filter.id)}>
                   <TrashButton />
                 </div>
               </div>
diff --git a/src/plugins/filter/filter.types.ts b/src/plugins/filter/filter.types.ts
index 0def20ab..f4ee9877 100644
--- a/src/plugins/filter/filter.types.ts
+++ b/src/plugins/filter/filter.types.ts
@@ -112,8 +112,21 @@ export type FilterItem = {
 
 export type FilterData = {
   id: number;
+  /**
+   * Filter type
+   */
   type: FilterType;
+  /**
+   * Filter value
+   */
   value?: any;
+  /**
+   * Filter invisible in filter panel
+   */
+  hidden?: boolean;
+  /**
+   * Filter relation
+   */
   relation: 'and' | 'or';
 };