Imlemented sortBy newest&oldest filter on org page

stakwork · Jan 31, 2024 · f8794be · f8794be
1 parent 7720eb3
commit f8794be
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 12 deletions.
diff --git a/src/config/ModeDispatcher.tsx b/src/config/ModeDispatcher.tsx
@@ -7,7 +7,7 @@ export enum AppMode {
 }
 
 const hosts: { [k: string]: AppMode } = {
-  'localhost:3000': AppMode.COMMUNITY,
+  'localhost:3000': AppMode.TRIBES,
   'localhost:13000': AppMode.TRIBES,
   'localhost:23000': AppMode.TRIBES,
   'tribes.sphinx.chat': AppMode.TRIBES,

diff --git a/src/pages/tickets/org/orgHeader/index.tsx b/src/pages/tickets/org/orgHeader/index.tsx
@@ -412,6 +412,17 @@ const StatusContainer = styled.div<styledProps>`
 `;
 
 const Status = ['Open', 'Assigned', 'Completed', 'Paid'];
+const sortByArr = [{
+  id: "desc",
+  label: 'Newest First'
+}, 
+{
+  id: "asc",
+  label: "Oldest First"
+}
+]
+
+const color = colors['light'];
 export const OrgHeader = ({
   onChangeLanguage,
   checkboxIdToSelectedMapLanguage,
@@ -425,11 +436,20 @@ export const OrgHeader = ({
   const [isPostBountyModalOpen, setIsPostBountyModalOpen] = useState(false);
   const [filterClick, setFilterClick] = useState(false);
   const [isStatusPopoverOpen, setIsStatusPopoverOpen] = useState<boolean>(false);
+  const [isSortByPopoverOpen, setIsSortByPopoverOpen] = useState(false)
+  const [sortBy, setSortBy] = useState<string>("desc")
+
   const onButtonClick = async () => {
     setIsStatusPopoverOpen((isPopoverOpen: any) => !isPopoverOpen);
   };
   const closeStatusPopover = () => setIsStatusPopoverOpen(false);
 
+  const onSortButtonClick = async () => {
+    setIsSortByPopoverOpen((isPopoverOpen: any) => !isPopoverOpen);
+  };
+
+  const closeSortByPopover = () => setIsSortByPopoverOpen(false);
+
   const selectedWidget = 'wanted';
   const filterRef = useRef<HTMLDivElement | null>(null);
   const { website, github } = organizationUrls;
@@ -453,10 +473,11 @@ export const OrgHeader = ({
         page: 1,
         resetPage: true,
         ...checkboxIdToSelectedMap,
-        languageString
+        languageString,
+        direction: sortBy
       });
     }
-  }, [org_uuid, checkboxIdToSelectedMap, main, languageString]);
+  }, [org_uuid, checkboxIdToSelectedMap, sortBy, main, languageString]);
 
   const handleClick = () => {
     setFilterClick(!filterClick);
@@ -598,15 +619,65 @@ export const OrgHeader = ({
               <Icon src={searchIcon} alt="Search" />
             </SearchWrapper>
           </FiltersRight>
-          <FiltersLeft>
-            <SoryByContainer>
-              <FilterLabel>Sort by:Newest First</FilterLabel>
-              <DropDownButton>
-                {' '}
-                <Img src={dropdown} alt="" />
-              </DropDownButton>
-            </SoryByContainer>
-          </FiltersLeft>
+          <SoryByContainer>
+          <EuiPopover 
+            button={
+              <StatusContainer onClick={onSortButtonClick} className="CheckboxOuter" color={color}>
+                <div style={{minWidth: '145px'}}>
+                  <EuiText
+                  className="statusText"
+                  style={{
+                    color: isSortByPopoverOpen ? color.grayish.G10 : ''
+                  }}>
+                  Sort By: {sortBy === "asc" ? "Oldest First" : "Newest First"}
+                </EuiText> 
+                </div>
+
+                <div className="filterStatusIconContainer">
+                  <MaterialIcon
+                    className="materialStatusIcon"
+                    icon={`${isSortByPopoverOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}`}
+                    style={{
+                      color: isSortByPopoverOpen ? color.grayish.G10 : ''
+                    }}
+                  />
+                </div>
+              </StatusContainer>
+            }
+            panelStyle={{
+              border: 'none',
+              boxShadow: `0px 1px 20px ${color.black90}`,
+              background: `${color.pureWhite}`,
+              borderRadius: '0px 0px 6px 6px',
+              maxWidth: '140px',
+              marginTop: '0px',
+              marginRight: '30px'
+            }}
+            isOpen={isSortByPopoverOpen}
+            closePopover={closeSortByPopover}
+            panelClassName="yourClassNameHere"
+            panelPaddingSize="none"
+            anchorPosition="downLeft"
+          >
+             <div
+                style={{
+                  display: 'flex',
+                  flexDirection: 'row'
+                }}
+              >
+                <EuiPopOverCheckbox className="CheckboxOuter" color={color}>
+                  <EuiCheckboxGroup
+                  style={{}}
+                    options={sortByArr}
+                   idToSelectedMap={{[sortBy]: true}}
+                    onChange={(id: any) => {
+                      onChangeStatus(setSortBy(id));
+                    }}
+                  />
+                </EuiPopOverCheckbox>
+              </div>
+          </EuiPopover>
+          </SoryByContainer>
         </Filters>
       </FillContainer>
       <NumberOfBounties>