From 35cf3ee80129e9240cd3f3c6618699cb4270ffff Mon Sep 17 00:00:00 2001
From: Sammy Teillet <sammy.teillet@gmail.com>
Date: Wed, 26 Apr 2023 19:10:05 +0200
Subject: [PATCH] Sammy/t 138 when i select an option i see it (#84)

* feature: remove selected filter item

* feature: add searchable field in dropdown
---
 .../table/table-header/DropdownButton.tsx     | 29 +++++++++++++++++++
 .../table-header/FilterDropdownButton.tsx     | 15 ++--------
 2 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/front/src/components/table/table-header/DropdownButton.tsx b/front/src/components/table/table-header/DropdownButton.tsx
index 4de33b618..aab382c25 100644
--- a/front/src/components/table/table-header/DropdownButton.tsx
+++ b/front/src/components/table/table-header/DropdownButton.tsx
@@ -111,6 +111,34 @@ const StyledIcon = styled.div`
   justify-content: center;
 `;
 
+const StyledSearchField = styled.li`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  background: rgba(0, 0, 0, 0.04);
+  cursor: pointer;
+  color: ${(props) => props.theme.text60};
+  font-weight: ${(props) => props.theme.fontWeightBold};
+
+  border-radius: 0%;
+  border-bottom: 1px solid ${(props) => props.theme.primaryBorder};
+  input {
+    height: 36px;
+    width: 100%;
+    border: none;
+    padding: 8px;
+    box-sizing: border-box;
+    &:hover {
+      background: rgba(0, 0, 0, 0.04);
+    }
+  }
+  input::placeholder {
+    color: ${(props) => props.theme.text40};
+    font-weight: ${(props) => props.theme.fontWeightBold};
+  }
+`;
+
 function DropdownButton({
   label,
   isActive,
@@ -160,6 +188,7 @@ function DropdownTopOptionAngleDown() {
   );
 }
 DropdownButton.StyledDropdownItem = StyledDropdownItem;
+DropdownButton.StyledSearchField = StyledSearchField;
 DropdownButton.StyledDropdownTopOption = StyledDropdownTopOption;
 DropdownButton.StyledDropdownTopOptionAngleDown = DropdownTopOptionAngleDown;
 DropdownButton.StyledIcon = StyledIcon;
diff --git a/front/src/components/table/table-header/FilterDropdownButton.tsx b/front/src/components/table/table-header/FilterDropdownButton.tsx
index ffb78f5c4..c4337faa3 100644
--- a/front/src/components/table/table-header/FilterDropdownButton.tsx
+++ b/front/src/components/table/table-header/FilterDropdownButton.tsx
@@ -81,18 +81,6 @@ export function FilterDropdownButton({
 
   function renderFilterDropdown(selectedFilter: FilterType) {
     return [
-      <DropdownButton.StyledDropdownTopOption
-        key={'selected-filter'}
-        onClick={() => setSelectedFilter(undefined)}
-      >
-        <DropdownButton.StyledIcon>
-          {selectedFilter.icon && (
-            <FontAwesomeIcon icon={selectedFilter.icon} />
-          )}
-        </DropdownButton.StyledIcon>
-        {selectedFilter.label}
-        <DropdownButton.StyledDropdownTopOptionAngleDown />
-      </DropdownButton.StyledDropdownTopOption>,
       <DropdownButton.StyledDropdownTopOption
         key={'selected-filter-operand'}
         onClick={() => setIsOptionUnfolded(true)}
@@ -101,6 +89,9 @@ export function FilterDropdownButton({
 
         <DropdownButton.StyledDropdownTopOptionAngleDown />
       </DropdownButton.StyledDropdownTopOption>,
+      <DropdownButton.StyledSearchField key={'search-filter'}>
+        <input type="text" placeholder={selectedFilter.label} />
+      </DropdownButton.StyledSearchField>,
       someFieldRandomValue.map((value, index) => (
         <DropdownButton.StyledDropdownItem
           key={`fields-value-${index}`}