sorting implemented on members table.

Author: talhainvenxion

src/ui/layouts/settings/Organization/ForSorting/SortingHeader.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { iconColors, iconSizes } from '../../../../../constants';
+import { Box, FlexBox, icons, If, LinkBox } from '../../../../components';
+import { Sorting, SortingDirection } from './types';
+
+import styles from './index.module.scss';
+
+export const SortingHeader: React.FC<{
+  sortMethod: void;
+  activeSorting: Sorting | null;
+  activeSortingDirection: SortingDirection | null;
+  sorting: Sorting;
+}> = ({
+  children,
+  sortMethod,
+  activeSorting,
+  activeSortingDirection,
+  sorting,
+}) => {
+  return (
+    <LinkBox className={styles.sortingBox} onClick={sortMethod}>
+      <FlexBox alignItems="center">
+        {children}
+        <If
+          condition={
+            !!activeSorting &&
+            activeSorting === sorting &&
+            activeSortingDirection === 'DESC'
+          }
+        >
+          {() => (
+            <Box paddingLeft="xs">
+              <icons.chevronDownLight
+                color={iconColors.darkGrey}
+                size={iconSizes.xs}
+              />
+            </Box>
+          )}
+        </If>
+        <If
+          condition={
+            !!activeSorting &&
+            activeSorting === sorting &&
+            activeSortingDirection === 'ASC'
+          }
+        >
+          {() => (
+            <Box paddingLeft="xs">
+              <icons.chevronUpLight
+                color={iconColors.darkGrey}
+                size={iconSizes.xs}
+              />
+            </Box>
+          )}
+        </If>
+      </FlexBox>
+    </LinkBox>
+  );
+};

src/ui/layouts/settings/Organization/ForSorting/index.module.scss

@@ -0,0 +1,41 @@
+@import '../../../../globalStyles';
+
+.checkbox {
+  height: 1.4rem;
+  width: 1.4rem;
+  border-radius: 2px;
+  border: 1px solid $darkGreyColor;
+  cursor: pointer;
+  position: relative;
+}
+
+.checkedCheckbox {
+  background: $greenColor;
+  border: 1px solid $greenColor;
+  &:before {
+    position: absolute;
+    content: '';
+    display: inline-block;
+    transform: rotate(45deg);
+    height: 10px;
+    width: 5px;
+    border-bottom: 2px solid $whiteColor;
+    border-right: 2px solid $whiteColor;
+    left: 4px;
+    bottom: 2px;
+  }
+}
+
+.sortingBox {
+  user-select: none;
+
+  & p {
+    transition: 0.2s ease-in all;
+  }
+
+  &:hover {
+    & p {
+      color: $darkGreyColor;
+    }
+  }
+}

src/ui/layouts/settings/Organization/ForSorting/types.ts

@@ -0,0 +1,8 @@
+export type Sorting =
+  | 'id'
+  | 'name'
+  | 'status'
+  | 'datasourceCommit'
+  | 'createdAt';
+
+export type SortingDirection = 'ASC' | 'DESC';

src/ui/layouts/settings/Organization/ForSorting/useServiceForSorting.ts

@@ -0,0 +1,115 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { stackPagesActions } from '../../../../../redux/actions';
+import { stackPagesSelectors } from '../../../../../redux/selectors';
+import { Sorting, SortingDirection } from './types';
+
+export type SortMethod = (
+  sorting: Sorting,
+  {
+    asc,
+    desc,
+  }: {
+    asc: (members: TMember[]) => TMember[];
+    desc: (members: TMember[]) => TMember[];
+  },
+) => void;
+
+interface ServiceInterface {
+  toggleSelectRun: (members: TMember) => void;
+  isRunSelected: (members: TMember) => boolean;
+  allRunsSelected: (members: TMember[]) => boolean;
+  selectRuns: (members: TMember[]) => void;
+  unselectRuns: (members: TMember[]) => void;
+  sortMethod: SortMethod;
+}
+
+export const useService = ({
+  activeSorting,
+  activeSortingDirection,
+  setActiveSortingDirection,
+  setActiveSorting,
+  setFilteredMembers,
+  filteredMembers,
+}: {
+  activeSorting: Sorting | null;
+  activeSortingDirection: SortingDirection | null;
+  setActiveSortingDirection: (arg: SortingDirection | null) => void;
+  setActiveSorting: (arg: Sorting | null) => void;
+  setFilteredMembers: (members: TMember[]) => void;
+  filteredMembers: TMember[];
+}): ServiceInterface => {
+  const dispatch = useDispatch();
+
+  const setSelectedRunIds = (ids: TId[]) => {
+    dispatch(stackPagesActions.setSelectedRunIds({ runIds: ids }));
+  };
+
+  const selectedRunIds = useSelector(stackPagesSelectors.selectedRunIds);
+
+  const toggleSelectRun = (member: TMember): void => {
+    if (selectedRunIds.indexOf(member.id) === -1) {
+      setSelectedRunIds([...selectedRunIds, member.id]);
+    } else {
+      setSelectedRunIds(selectedRunIds.filter((id: TId) => id !== member.id));
+    }
+  };
+
+  const isRunSelected = (member: TMember): boolean => {
+    return selectedRunIds.indexOf(member.id) !== -1;
+  };
+
+  const selectRuns = (members: TMember[]): void => {
+    setSelectedRunIds([
+      ...selectedRunIds,
+      ...members.map((member: TMember) => member.id),
+    ]);
+  };
+
+  const unselectRuns = (members: TMember[]): void => {
+    const runIdsToUnselect = members.map((member: TMember) => member.id);
+
+    const newRunIds = selectedRunIds.filter(
+      (id: TId) => !runIdsToUnselect.includes(id),
+    );
+
+    setSelectedRunIds(newRunIds);
+  };
+
+  const allRunsSelected = (members: TMember[]): boolean => {
+    return members.every((member: TMember) => isRunSelected(member));
+  };
+
+  const sortMethod = (
+    sorting: Sorting,
+    sort?: {
+      asc: (members: TMember[]) => TMember[];
+      desc: (members: TMember[]) => TMember[];
+    },
+  ) => () => {
+    if (sorting === activeSorting) {
+      if (!!activeSortingDirection && activeSortingDirection === 'ASC') {
+        sort && setFilteredMembers(sort.desc(filteredMembers));
+        setActiveSortingDirection('DESC');
+      } else if (
+        !!activeSortingDirection &&
+        activeSortingDirection === 'DESC'
+      ) {
+        sort && setFilteredMembers(sort.asc(filteredMembers));
+        setActiveSortingDirection('ASC');
+      }
+    } else {
+      sort && setFilteredMembers(sort.desc(filteredMembers));
+      setActiveSortingDirection('DESC');
+    }
+    setActiveSorting(sorting);
+  };
+
+  return {
+    toggleSelectRun,
+    isRunSelected,
+    unselectRuns,
+    selectRuns,
+    allRunsSelected,
+    sortMethod,
+  };
+};

src/ui/layouts/settings/Organization/index.tsx

@@ -15,44 +15,58 @@ import { Table } from '../../common/Table';
 import { translate } from './translate';
 import { useMemberHeaderCols } from './useHeaderCols';
 import { InvitePopup } from './InvitePopup';
+import { useService } from './useService';
 
 type Table = 'members' | 'invites';
 
 export const Organization: React.FC = () => {
-  
-  const dispatch = useDispatch()
+  const dispatch = useDispatch();
 
   const [fetchingMembers, setFetchingMembers] = useState(true);
 
   const [popupOpen, setPopupOpen] = useState(false);
   const [currentTable, setCurrentTable] = useState('members');
 
   const organization = useSelector(organizationSelectors.myOrganization);
-  const members = useSelector(organizationSelectors.myMembers);
-  const memberHeaderCols = useMemberHeaderCols();
+  // const members = useSelector(organizationSelectors.myMembers);
 
-  // useRequestOnMount(organizationActions.getMy); 
+  const {
+    filteredMembers,
+    setFilteredMembers,
+    activeSorting,
+    setActiveSorting,
+    activeSortingDirection,
+    setActiveSortingDirection,
+    setSelectedRunIds,
+  } = useService();
+
+  const memberHeaderCols = useMemberHeaderCols({
+    filteredMembers,
+    setFilteredMembers: setFilteredMembers,
+    activeSorting,
+    setActiveSorting,
+    activeSortingDirection,
+    setActiveSortingDirection,
+  });
+  // useRequestOnMount(organizationActions.getMy);
   useRequestOnMount(organizationActions.getRoles);
 
   useEffect(() => {
-    dispatch(organizationActions.getMembers({
+    dispatch(
+      organizationActions.getMembers({
         onSuccess: () => setFetchingMembers(false),
         onFailure: () => setFetchingMembers(false),
       }),
     );
-  }, [dispatch])
+  }, [dispatch]);
 
   if (!organization) return null;
 
   return (
     <>
-      {popupOpen && (
-        <InvitePopup
-          setPopupOpen={setPopupOpen}
-          />
-      )}
+      {popupOpen && <InvitePopup setPopupOpen={setPopupOpen} />}
       <FlexBox.Column flex={1} style={{ width: '100%', marginLeft: '40px' }}>
-        <FlexBox.Row marginTop='lg' alignItems="center" justifyContent="end">
+        <FlexBox.Row marginTop="lg" alignItems="center" justifyContent="end">
           <Box>
             <PrimaryButton onClick={() => setPopupOpen(true)}>
               {translate('button.text')}
@@ -67,7 +81,7 @@ export const Organization: React.FC = () => {
                   bold
                   color={currentTable === 'members' ? 'primary' : 'darkGrey'}
                 >
-                  {translate('members')} {`(${members.length})`}
+                  {translate('members')} {`(${filteredMembers.length})`}
                 </Paragraph>
               </LinkBox>
             </Box>
@@ -78,7 +92,7 @@ export const Organization: React.FC = () => {
               headerCols={memberHeaderCols}
               loading={fetchingMembers}
               showHeader={true}
-              tableRows={members}
+              tableRows={filteredMembers}
               emptyState={{ text: translate('emptyState.text') }}
             />
           )}