Filter ongoing

twentyhq · Apr 19, 2023 · d2ceedd · d2ceedd
1 parent ff90a3c
commit d2ceedd
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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();