Merge pull request stakwork#25 from MahtabBukhari/org-page-status-filter

implement the status filter on the org homepage
gouravmpk · Jan 25, 2024 · be2ef45 · be2ef45
2 parents e9a9a6f + e683204
commit be2ef45
Show file tree

Hide file tree

Showing 7 changed files with 381 additions and 24 deletions.
diff --git a/src/pages/tickets/org/OrgTickets.tsx b/src/pages/tickets/org/OrgTickets.tsx
@@ -10,6 +10,7 @@ import { colors } from '../../../config/colors';
 import { useIsMobile } from '../../../hooks';
 import { useStores } from '../../../store';
 import { OrgBody, Body, Backdrop } from '../style';
+import { defaultOrgBountyStatus } from '../../../store/main';
 import api from '../../../api';
 import { OrgHeader } from './orgHeader';
 
@@ -19,8 +20,9 @@ function OrgBodyComponent() {
   const [showDropdown, setShowDropdown] = useState(false);
   const selectedWidget = 'wanted';
   const [scrollValue, setScrollValue] = useState<boolean>(false);
-  const [checkboxIdToSelectedMap, setCheckboxIdToSelectedMap] = useState({});
+  const [checkboxIdToSelectedMap, setCheckboxIdToSelectedMap] = useState(defaultOrgBountyStatus);
   const [checkboxIdToSelectedMapLanguage, setCheckboxIdToSelectedMapLanguage] = useState({});
+  const [languageString, setLanguageString] = useState('');
   const { uuid } = useParams<{ uuid: string; bountyId: string }>();
   const [organizationUrls, setOrganizationUrls] = useState({});
 
@@ -35,7 +37,7 @@ function OrgBodyComponent() {
       await main.getBadgeList();
       await main.getPeople();
       if (uuid) {
-        await main.getOrganizationBounties(uuid, { page: 1, resetPage: true });
+        await main.getSpecificOrganizationBounties(uuid, { page: 1, resetPage: true });
         const orgUrls = await api.get(`organizations/${uuid}`);
         setOrganizationUrls(orgUrls);
       }
@@ -45,9 +47,10 @@ function OrgBodyComponent() {
 
   useEffect(() => {
     setCheckboxIdToSelectedMap({
-      Open: true,
+      Open: false,
       Assigned: false,
-      Paid: false
+      Paid: false,
+      Completed: false
     });
   }, [loading]);
 
@@ -155,7 +158,13 @@ function OrgBodyComponent() {
           height: 'calc(100% - 65px)'
         }}
       >
-        <OrgHeader organizationUrls={organizationUrls} />
+        <OrgHeader
+          onChangeStatus={onChangeStatus}
+          checkboxIdToSelectedMap={checkboxIdToSelectedMap}
+          org_uuid={uuid}
+          languageString={languageString}
+          organizationUrls={organizationUrls}
+        />
         <>
           <div
             style={{
@@ -184,6 +193,7 @@ function OrgBodyComponent() {
                 fromBountyPage={true}
                 selectedWidget={selectedWidget}
                 loading={loading}
+                org_uuid={uuid}
               />
             </div>
           </div>

diff --git a/src/pages/tickets/org/orgHeader/Icons/checkboxImage.svg b/src/pages/tickets/org/orgHeader/Icons/checkboxImage.svg
diff --git a/src/pages/tickets/org/orgHeader/index.tsx b/src/pages/tickets/org/orgHeader/index.tsx
@@ -1,13 +1,22 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
+import { EuiCheckboxGroup, EuiPopover, EuiText } from '@elastic/eui';
+import MaterialIcon from '@material/react-material-icon';
 import { PostModal } from 'people/widgetViews/postBounty/PostModal';
-import { OrgBountyHeaderProps } from '../../../../people/interfaces.ts';
+import { colors } from '../../../../config';
+import { OrgBountyHeaderProps } from '../../../../people/interfaces';
+import { useStores } from '../../../../store';
 import addBounty from './Icons/addBounty.svg';
 import searchIcon from './Icons/searchIcon.svg';
 import file from './Icons/file.svg';
+import checkboxImage from './Icons/checkboxImage.svg';
 import githubIcon from './Icons/githubIcon.svg';
 import websiteIcon from './Icons/websiteIcon.svg';
 
+interface styledProps {
+  color?: any;
+}
+
 const Header = styled.div`
   display: flex;
   height: 130px;
@@ -56,15 +65,7 @@ const FiltersRight = styled.span`
   flex: 1 0 0;
   width: 1366px;
 `;
-const StatusContainer = styled.span`
-  padding: 10px 0px;
-  align-items: center;
-  gap: 4px;
-`;
-const Status = styled.select`
-  background-color: transparent;
-  border: none;
-`;
+
 const SkillContainer = styled.span`
   padding: 10px 0px;
   align-items: center;
@@ -203,8 +204,141 @@ const Img = styled.img`
   padding-bottom: 10px;
 `;
 
-export const OrgHeader = ({ organizationUrls }: OrgBountyHeaderProps) => {
+const EuiPopOverCheckbox = styled.div<styledProps>`
+  width: 147px;
+  height: auto;
+  padding: 15px 18px;
+  border-right: 1px solid ${(p: any) => p.color && p.color.grayish.G700};
+  user-select: none;
+  .leftBoxHeading {
+    font-family: 'Barlow';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 32px;
+    text-transform: uppercase;
+    color: ${(p: any) => p.color && p.color.grayish.G100};
+    margin-bottom: 10px;
+  }
+
+  &.CheckboxOuter > div {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+
+    .euiCheckboxGroup__item {
+      .euiCheckbox__square {
+        top: 5px;
+        border: 1px solid ${(p: any) => p?.color && p?.color?.grayish.G500};
+        border-radius: 2px;
+      }
+      .euiCheckbox__input + .euiCheckbox__square {
+        background: ${(p: any) => p?.color && p?.color?.pureWhite} no-repeat center;
+      }
+      .euiCheckbox__input:checked + .euiCheckbox__square {
+        border: 1px solid ${(p: any) => p?.color && p?.color?.blue1};
+        background: ${(p: any) => p?.color && p?.color?.blue1} no-repeat center;
+        background-size: contain;
+        background-image: url(${checkboxImage});
+      }
+      .euiCheckbox__label {
+        font-family: 'Barlow';
+        font-style: normal;
+        font-weight: 500;
+        font-size: 13px;
+        line-height: 16px;
+        color: ${(p: any) => p?.color && p?.color?.grayish.G50};
+        &:hover {
+          color: ${(p: any) => p?.color && p?.color?.grayish.G05};
+        }
+      }
+      input.euiCheckbox__input:checked ~ label {
+        color: ${(p: any) => p?.color && p?.color?.grayish.G05};
+      }
+    }
+  }
+`;
+
+const StatusContainer = styled.div<styledProps>`
+  width: 70px;
+  height: 48px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin-left: 19px;
+  margin-top: 4px;
+  cursor: pointer;
+  user-select: none;
+  .filterStatusIconContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 48px;
+    width: 38px;
+    .materialStatusIcon {
+      color: ${(p: any) => p.color && p.color.grayish.G200};
+      cursor: pointer;
+      font-size: 18px;
+      margin-top: 5px;
+    }
+  }
+  .statusText {
+    font-family: 'Barlow';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 15px;
+    line-height: 17px;
+    letter-spacing: 0.15px;
+    display: flex;
+    align-items: center;
+    color: ${(p: any) => p.color && p.color.grayish.G200};
+  }
+  &:hover {
+    .filterStatusIconContainer {
+      .materialStatusIcon {
+        color: ${(p: any) => p.color && p.color.grayish.G50} !important;
+        cursor: pointer;
+        font-size: 18px;
+        margin-top: 5px;
+      }
+    }
+    .statusText {
+      color: ${(p: any) => p.color && p.color.grayish.G50};
+    }
+  }
+  &:active {
+    .filterStatusIconContainer {
+      .materialStatusIcon {
+        color: ${(p: any) => p.color && p.color.grayish.G10} !important;
+        cursor: pointer;
+        font-size: 18px;
+        margin-top: 5px;
+      }
+    }
+    .statusText {
+      color: ${(p: any) => p.color && p.color.grayish.G10};
+    }
+  }
+`;
+
+const Status = ['Open', 'Assigned', 'Completed', 'Paid'];
+const color = colors['light'];
+export const OrgHeader = ({
+  onChangeStatus,
+  checkboxIdToSelectedMap,
+  org_uuid,
+  languageString,
+  organizationUrls
+}: OrgBountyHeaderProps) => {
+  const { main } = useStores();
   const [isPostBountyModalOpen, setIsPostBountyModalOpen] = useState(false);
+  const [isStatusPopoverOpen, setIsStatusPopoverOpen] = useState<boolean>(false);
+  const onButtonClick = async () => {
+    setIsStatusPopoverOpen((isPopoverOpen: any) => !isPopoverOpen);
+  };
+  const closeStatusPopover = () => setIsStatusPopoverOpen(false);
+
   const selectedWidget = 'wanted';
   const { website, github } = organizationUrls;
   const handlePostBountyClick = () => {
@@ -221,6 +355,17 @@ export const OrgHeader = ({ organizationUrls }: OrgBountyHeaderProps) => {
     window.open(githubUrl, '_blank');
   };
 
+  useEffect(() => {
+    if (org_uuid) {
+      main.getSpecificOrganizationBounties(org_uuid, {
+        page: 1,
+        resetPage: true,
+        ...checkboxIdToSelectedMap,
+        languageString
+      });
+    }
+  }, [org_uuid, checkboxIdToSelectedMap]);
+
   return (
     <>
       <FillContainer>
@@ -252,10 +397,64 @@ export const OrgHeader = ({ organizationUrls }: OrgBountyHeaderProps) => {
       <FillContainer>
         <Filters>
           <FiltersRight>
-            <StatusContainer>
-              <Label htmlFor="statusSelect">Status</Label>
-              <Status id="statusSelect" />
-            </StatusContainer>
+            <EuiPopover
+              button={
+                <StatusContainer onClick={onButtonClick} color={color}>
+                  <EuiText
+                    className="statusText"
+                    style={{
+                      color: isStatusPopoverOpen ? color.grayish.G10 : ''
+                    }}
+                  >
+                    Status
+                  </EuiText>
+                  <div className="filterStatusIconContainer">
+                    <MaterialIcon
+                      className="materialStatusIcon"
+                      icon={`${isStatusPopoverOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}`}
+                      style={{
+                        color: isStatusPopoverOpen ? color.grayish.G10 : ''
+                      }}
+                    />
+                  </div>
+                </StatusContainer>
+              }
+              panelStyle={{
+                border: 'none',
+                boxShadow: `0px 1px 20px ${color.black90}`,
+                background: `${color.pureWhite}`,
+                borderRadius: '0px 0px 6px 6px',
+                maxWidth: '140px',
+                minHeight: '160px',
+                marginTop: '0px',
+                marginLeft: '20px'
+              }}
+              isOpen={isStatusPopoverOpen}
+              closePopover={closeStatusPopover}
+              panelClassName="yourClassNameHere"
+              panelPaddingSize="none"
+              anchorPosition="downLeft"
+            >
+              <div
+                style={{
+                  display: 'flex',
+                  flexDirection: 'row'
+                }}
+              >
+                <EuiPopOverCheckbox className="CheckboxOuter" color={color}>
+                  <EuiCheckboxGroup
+                    options={Status.map((status: any) => ({
+                      label: `${status}`,
+                      id: status
+                    }))}
+                    idToSelectedMap={checkboxIdToSelectedMap}
+                    onChange={(id: any) => {
+                      onChangeStatus(id);
+                    }}
+                  />
+                </EuiPopOverCheckbox>
+              </div>
+            </EuiPopover>
             <SkillContainer>
               <Label htmlFor="statusSelect">Skill</Label>
               <Skill id="statusSelect" />

diff --git a/src/people/interfaces.ts b/src/people/interfaces.ts
@@ -422,6 +422,12 @@ export interface BountyHeaderProps {
   checkboxIdToSelectedMapLanguage: any;
 }
 
+export interface OrgBountyHeaderProps {
+  onChangeStatus: (number) => void;
+  checkboxIdToSelectedMap?: any;
+  languageString?: string;
+  org_uuid?: string;
+}
 export interface PeopleHeaderProps {
   onChangeLanguage: (number) => void;
   checkboxIdToSelectedMapLanguage: any;

diff --git a/src/people/widgetViews/WidgetSwitchViewer.tsx b/src/people/widgetViews/WidgetSwitchViewer.tsx
@@ -96,7 +96,7 @@ function WidgetSwitchViewer(props: any) {
 
   const { peoplePosts, peopleBounties, peopleOffers } = main;
 
-  const { selectedWidget, onPanelClick } = props;
+  const { selectedWidget, onPanelClick, org_uuid } = props;
 
   if (!selectedWidget) {
     return <div style={{ height: 200 }} />;
@@ -110,6 +110,9 @@ function WidgetSwitchViewer(props: any) {
 
   const activeList = [...listSource[selectedWidget]].filter(({ body }: any) => {
     const value = { ...body };
+    if (org_uuid) {
+      return value.org_uuid === org_uuid;
+    }
     return value;
   });