From d2ceeddf9efc0f72b01b822f694571b0d00ffe27 Mon Sep 17 00:00:00 2001
From: Charles Bochet <charles@twenty.com>
Date: Wed, 19 Apr 2023 15:21:40 +0200
Subject: [PATCH] Filter ongoing

---
 .../table/table-header/DropdownButton.tsx     |  9 ++-
 .../table/table-header/SortAndFilterBar.tsx   | 27 +++++++++
 .../table/table-header/TableHeader.tsx        | 56 +++++++++++++------
 front/src/hooks/useOutsideAlerter.ts          |  2 -
 4 files changed, 73 insertions(+), 21 deletions(-)
 create mode 100644 front/src/components/table/table-header/SortAndFilterBar.tsx

diff --git a/front/src/components/table/table-header/DropdownButton.tsx b/front/src/components/table/table-header/DropdownButton.tsx
index 6aac67046231d..4a1b462754e15 100644
--- a/front/src/components/table/table-header/DropdownButton.tsx
+++ b/front/src/components/table/table-header/DropdownButton.tsx
@@ -7,7 +7,12 @@ import { modalBackground } from '../../../layout/styles/themes';
 
 type OwnProps = {
   label: string;
-  options: Array<{ label: string; icon: IconProp }>;
+  options: Array<{
+    id: string;
+    label: string;
+    icon: IconProp;
+    action: () => void;
+  }>;
 };
 
 const StyledDropdownButtonContainer = styled.div`
@@ -90,7 +95,7 @@ function DropdownButton({ label, options }: OwnProps) {
       {isUnfolded && options.length > 0 && (
         <StyledDropdown ref={dropdownRef}>
           {options.map((option, index) => (
-            <StyledDropdownItem key={index}>
+            <StyledDropdownItem key={index} onClick={option.action}>
               <StyledIcon>
                 <FontAwesomeIcon icon={option.icon} />
               </StyledIcon>
diff --git a/front/src/components/table/table-header/SortAndFilterBar.tsx b/front/src/components/table/table-header/SortAndFilterBar.tsx
new file mode 100644
index 0000000000000..1d2eb8473b16d
--- /dev/null
+++ b/front/src/components/table/table-header/SortAndFilterBar.tsx
@@ -0,0 +1,27 @@
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  sorts: SortsType;
+};
+
+export type SortsType = Array<{ label: string; order: string }>;
+
+const StyledBar = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  height: 40px;
+`;
+
+function SortAndFilterBar({ sorts }: OwnProps) {
+  return (
+    <StyledBar>
+      {sorts.map((sort) => {
+        return <div>{sort.label}</div>;
+      })}
+    </StyledBar>
+  );
+}
+
+export default SortAndFilterBar;
diff --git a/front/src/components/table/table-header/TableHeader.tsx b/front/src/components/table/table-header/TableHeader.tsx
index ac1f3c5f67639..12236d42f397f 100644
--- a/front/src/components/table/table-header/TableHeader.tsx
+++ b/front/src/components/table/table-header/TableHeader.tsx
@@ -3,13 +3,20 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import DropdownButton from './DropdownButton';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { faCalendar } from '@fortawesome/pro-regular-svg-icons';
+import SortAndFilterBar, { SortsType } from './SortAndFilterBar';
+import { useState } from 'react';
 
 type OwnProps = {
   viewName: string;
   viewIcon?: IconProp;
 };
 
-const StyledTitle = styled.div`
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const StyledTableHeader = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -36,23 +43,38 @@ const StyledFilters = styled.div`
 `;
 
 function TableHeader({ viewName, viewIcon }: OwnProps) {
+  const [sorts, setSorts] = useState([] as SortsType);
+  const onSortItemSelect = () => {
+    console.log('test');
+    setSorts([{ label: 'Created at', order: 'asc' }]);
+  };
+
+  const sortsAvailable = [
+    {
+      id: 'created_at',
+      label: 'Created at',
+      icon: faCalendar,
+      action: onSortItemSelect,
+    },
+  ];
+
   return (
-    <StyledTitle>
-      <StyledViewSection>
-        <StyledIcon>
-          {viewIcon && <FontAwesomeIcon icon={viewIcon} size="lg" />}
-        </StyledIcon>
-        {viewName}
-      </StyledViewSection>
-      <StyledFilters>
-        <DropdownButton label="Filter" options={[]} />
-        <DropdownButton
-          label="Sort"
-          options={[{ label: 'Created at', icon: faCalendar }]}
-        />
-        <DropdownButton label="Settings" options={[]} />
-      </StyledFilters>
-    </StyledTitle>
+    <StyledContainer>
+      <StyledTableHeader>
+        <StyledViewSection>
+          <StyledIcon>
+            {viewIcon && <FontAwesomeIcon icon={viewIcon} size="lg" />}
+          </StyledIcon>
+          {viewName}
+        </StyledViewSection>
+        <StyledFilters>
+          <DropdownButton label="Filter" options={[]} />
+          <DropdownButton label="Sort" options={sortsAvailable} />
+          <DropdownButton label="Settings" options={[]} />
+        </StyledFilters>
+      </StyledTableHeader>
+      <SortAndFilterBar sorts={sorts} />
+    </StyledContainer>
   );
 }
 
diff --git a/front/src/hooks/useOutsideAlerter.ts b/front/src/hooks/useOutsideAlerter.ts
index 746c44afba444..742b123378179 100644
--- a/front/src/hooks/useOutsideAlerter.ts
+++ b/front/src/hooks/useOutsideAlerter.ts
@@ -8,8 +8,6 @@ export function useOutsideAlerter(
 ) {
   useEffect(() => {
     function handleClickOutside(event: Event) {
-      console.log('test3');
-
       const target = event.target as HTMLButtonElement;
       if (ref.current && !ref.current.contains(target)) {
         callback();