tuned filters

b-a-a-s · May 8, 2023 · 34fe26e · 34fe26e
1 parent cfeaa43
commit 34fe26e
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 95 deletions.
diff --git a/src/containers/MeetingsActions/MeetingsActions.tsx b/src/containers/MeetingsActions/MeetingsActions.tsx
@@ -16,6 +16,9 @@ type MeetingsActionsProps = {
   setFilter: (filter: MeetingFilterType) => void;
   range: DateRange | undefined;
   setRange: (range: DateRange | undefined) => void;
+  selectedAll: boolean;
+  toggleSelectedAll: () => void;
+  invertSelected: () => void;
 };
 
 const FilterOptions = ({ filter, setFilter }: Pick<MeetingsActionsProps, 'filter' | 'setFilter'>) => (
@@ -27,13 +30,15 @@ const FilterOptions = ({ filter, setFilter }: Pick<MeetingsActionsProps, 'filter
   </MenuList>
 );
 
-const ActionsOptions = () => (
+const ActionsOptions = ({
+  selectedAll,
+  toggleSelectedAll,
+  invertSelected,
+}: Pick<MeetingsActionsProps, 'selectedAll' | 'toggleSelectedAll' | 'invertSelected'>) => (
   <MenuList>
-    <MenuItem>Download</MenuItem>
-    <MenuItem>Create a Copy</MenuItem>
-    <MenuItem>Mark as Draft</MenuItem>
-    <MenuItem>Delete</MenuItem>
-    <MenuItem>Attend a Workshop</MenuItem>
+    <MenuItem onClick={toggleSelectedAll}>{selectedAll ? <b>Unselect All</b> : 'Select All'}</MenuItem>
+    <MenuItem onClick={invertSelected}>Invert Selection</MenuItem>
+    <MenuItem>Delete Selected</MenuItem>
   </MenuList>
 );
 
@@ -44,7 +49,17 @@ const SortOptions = ({ sort, setSort }: Pick<MeetingsActionsProps, 'sort' | 'set
   </MenuList>
 );
 
-export const MeetingsActions = ({ sort, setSort, filter, setFilter, range, setRange }: MeetingsActionsProps) => {
+export const MeetingsActions = ({
+  sort,
+  setSort,
+  filter,
+  setFilter,
+  range,
+  setRange,
+  selectedAll,
+  toggleSelectedAll,
+  invertSelected,
+}: MeetingsActionsProps) => {
   let period = 'Period';
   if (range?.from) {
     if (!range.to) {
@@ -78,11 +93,11 @@ export const MeetingsActions = ({ sort, setSort, filter, setFilter, range, setRa
           <MenuButton as={Button} leftIcon={<FiEdit />} rightIcon={<FiChevronDown />} display={{ base: 'none', md: 'flex' }}>
             Actions
           </MenuButton>
-          <ActionsOptions />
+          <ActionsOptions selectedAll={selectedAll} toggleSelectedAll={toggleSelectedAll} invertSelected={invertSelected} />
         </Menu>
         <Menu>
           <MenuButton as={IconButton} aria-label="Options" icon={<FiEdit />} variant="outline" display={{ base: 'flex', md: 'none' }} />
-          <ActionsOptions />
+          <ActionsOptions selectedAll={selectedAll} toggleSelectedAll={toggleSelectedAll} invertSelected={invertSelected} />
         </Menu>
       </Box>
       <Box>

diff --git a/src/containers/MeetingsHeader/MeetingsHeader.tsx b/src/containers/MeetingsHeader/MeetingsHeader.tsx
@@ -1,9 +1,20 @@
-import { DataListHeader, DataListCell } from "../../components/DataList";
-import React from "react";
+import React from 'react';
 
-export const MeetingsHeader = () => {
+import { Checkbox } from '@chakra-ui/react';
+
+import { DataListCell, DataListHeader } from '../../components/DataList';
+
+type MeetingsHeaderProps = {
+  selected: boolean;
+  toggleSelectedAll: () => void;
+};
+
+export const MeetingsHeader = ({ selected, toggleSelectedAll }: MeetingsHeaderProps) => {
   return (
     <DataListHeader isVisible={{ base: false, md: true }}>
+      <DataListCell colName="checkbox" colWidth="2rem">
+        <Checkbox isChecked={selected} onChange={() => toggleSelectedAll()} />
+      </DataListCell>
       <DataListCell colName="name"> Name </DataListCell>
       <DataListCell colName="time" isVisible={{ base: false, lg: true }}>
         Time

diff --git a/src/containers/MeetingsRow/MeetingsRow.tsx b/src/containers/MeetingsRow/MeetingsRow.tsx
@@ -1,97 +1,63 @@
-import { DataListCell, DataListRow } from "../../components/DataList";
-import { Meeting, Contact } from "../../types/meetings.types";
-import {
-  Avatar,
-  Box,
-  HStack,
-  LinkOverlay,
-  Text,
-  LinkBox,
-} from "@chakra-ui/react";
-import React from "react";
-import { Link } from "react-router-dom";
+import React from 'react';
+
+import { Avatar, Box, Checkbox, HStack, Text } from '@chakra-ui/react';
+import { Link } from 'react-router-dom';
+
+import { DataListCell, DataListRow } from '../../components/DataList';
+import { Contact, Meeting } from '../../types/meetings.types';
 
 type MeetingsHeaderProps = {
   meeting: Meeting;
   contacts: Contact[] | undefined;
+  selected: boolean;
+  setSelected: (id: string) => void;
 };
 
-export const MeetingsRow = ({ meeting, contacts }: MeetingsHeaderProps) => {
+export const MeetingsRow = ({ meeting, contacts, selected, setSelected }: MeetingsHeaderProps) => {
   const getContactName = (id: string) => {
     const contact = contacts?.find((contact) => contact.id === id);
-    return contact?.properties?.firstname + " " + contact?.properties?.lastname;
+    return contact?.properties?.firstname + ' ' + contact?.properties?.lastname;
   };
   const getContactEmail = (id: string) => {
     const contact = contacts?.find((contact) => contact.id === id);
     return contact?.properties?.email;
   };
   return (
-    <DataListRow as={LinkBox} key={meeting.id}>
+    <DataListRow key={meeting.id}>
+      <DataListCell colName="checkbox" colWidth="2rem">
+        <Checkbox isChecked={selected} onChange={() => setSelected(meeting.id)} />
+      </DataListCell>
       <DataListCell colName="name">
-        <LinkOverlay as={Link} to={meeting.id}>
+        <Link to={meeting.id}>
           <Text noOfLines={1} maxW="full">
             {meeting.properties.hs_meeting_title}
           </Text>
-        </LinkOverlay>
+        </Link>
       </DataListCell>
-      <DataListCell
-        colName="time"
-        fontSize="sm"
-        position="relative"
-        pointerEvents="none"
-      >
+      <DataListCell colName="time" fontSize="sm" position="relative" pointerEvents="none">
         <Text noOfLines={1} maxW="full">
           {meeting.properties.hs_meeting_start_time}
         </Text>
-        {!!meeting.createdAt && (
-          <Text
-            noOfLines={1}
-            maxW="full"
-            pointerEvents="auto"
-            color="gray.600"
-            _dark={{ color: "gray.300" }}
-          >
-            {meeting.createdAt}
-          </Text>
-        )}
       </DataListCell>
       <DataListCell colName="account">
         <HStack maxW="100%">
           <Avatar size="sm" name={meeting.id} mx="1" />
           <Box minW="0">
             <Text noOfLines={1} maxW="full" fontWeight="bold">
-              {getContactName(
-                meeting.associations?.contacts?.results[0]?.id || ""
-              )}
+              {getContactName(meeting.associations?.contacts?.results[0]?.id || '')}
             </Text>
-            <Text
-              noOfLines={1}
-              maxW="full"
-              fontSize="sm"
-              color="gray.600"
-              _dark={{ color: "gray.300" }}
-            >
-              {getContactEmail(
-                meeting.associations?.contacts?.results[0]?.id || ""
-              )}
+            <Text noOfLines={1} maxW="full" fontSize="sm" color="gray.600" _dark={{ color: 'gray.300' }}>
+              {getContactEmail(meeting.associations?.contacts?.results[0]?.id || '')}
             </Text>
           </Box>
         </HStack>
       </DataListCell>
-      <DataListCell
-        colName="nextSteps"
-        fontSize="sm"
-        position="relative"
-        pointerEvents="none"
-      >
+      <DataListCell colName="nextSteps" fontSize="sm" position="relative" pointerEvents="none">
         <Text noOfLines={1} maxW="full">
-          {meeting.properties.hs_internal_meeting_notes ||
-            meeting.properties.hs_meeting_outcome}
+          {meeting.properties.hs_internal_meeting_notes || meeting.properties.hs_meeting_outcome}
         </Text>
       </DataListCell>
-      <DataListCell colName="actions">
-        {/*  <meetingActions meeting={meeting} /> */}
-      </DataListCell>
+      <DataListCell colName="actions">{/*  <meetingActions meeting={meeting} /> */}</DataListCell>
     </DataListRow>
   );
 };
diff --git a/src/containers/MeetingsView/MeetingsView.tsx b/src/containers/MeetingsView/MeetingsView.tsx
@@ -1,35 +1,33 @@
-import { DataList } from "../../components/DataList";
-import {
-  useMeetingList,
-  sortMeetingList,
-  filterMeetingList,
-  rangeMeetingList,
-} from "../../services/meetings.service";
-import { MeetingSortType, MeetingFilterType } from "../../types/meetings.types";
-import { MeetingsActions } from "../MeetingsActions/MeetingsActions";
-import { MeetingsFooter } from "../MeetingsFooter/MeetingsFooter";
-import { MeetingsHeader } from "../MeetingsHeader/MeetingsHeader";
-import { MeetingsRow } from "../MeetingsRow/MeetingsRow";
-import { Page, PageContent } from "../Page/Page";
-import { usePaginationFromUrl } from "../Router/Router";
-import { Box, HStack, Heading } from "@chakra-ui/react";
-import React, { useContext, useMemo, useState } from "react";
-import { DateRange } from "react-day-picker";
+import React, { useContext, useMemo, useState } from 'react';
+
+import { Box, HStack, Heading } from '@chakra-ui/react';
+import { DateRange } from 'react-day-picker';
+
+import { DataList } from '../../components/DataList';
+import { filterMeetingList, rangeMeetingList, sortMeetingList, useMeetingList } from '../../services/meetings.service';
+import { Meeting, MeetingFilterType, MeetingSortType } from '../../types/meetings.types';
+import { MeetingsActions } from '../MeetingsActions/MeetingsActions';
+import { MeetingsFooter } from '../MeetingsFooter/MeetingsFooter';
+import { MeetingsHeader } from '../MeetingsHeader/MeetingsHeader';
+import { MeetingsRow } from '../MeetingsRow/MeetingsRow';
+import { Page, PageContent } from '../Page/Page';
+import { usePaginationFromUrl } from '../Router/Router';
 
 const MeetingsView = () => {
   const { page, setPage } = usePaginationFromUrl();
-  const [sort, setSort] = useState<MeetingSortType>("NEWEST");
-  const [filter, setFilter] = useState<MeetingFilterType>("ALL");
+  const [sort, setSort] = useState<MeetingSortType>('NEWEST');
+  const [filter, setFilter] = useState<MeetingFilterType>('ALL');
   const [range, setRange] = useState<DateRange | undefined>();
+  const [selected, setSelected] = useState<string[]>([]);
   const pageSize = 20;
   const data = useMeetingList({ page: page - 1, size: pageSize });
   const sortedMeetings = sortMeetingList(data?.meetings || [], sort);
   const filteredMeetings = filterMeetingList(sortedMeetings, filter);
   const rangedMeetings = rangeMeetingList(filteredMeetings, range);
-  const pagedMeetings = rangedMeetings.slice(
-    pageSize * (page - 1),
-    pageSize * page
-  );
+  const pagedMeetings = rangedMeetings.slice(pageSize * (page - 1), pageSize * page);
+  const selectedAll = selected.length === rangedMeetings.length;
+  const toggleSelectedAll = () => (selectedAll ? setSelected([]) : setSelected(rangedMeetings.map((m: Meeting) => m.id)));
+  const invertSelected = () => setSelected(rangedMeetings.map((m: Meeting) => m.id).filter((id) => !selected.includes(id)));
 
   return (
     <Page containerSize="xl">
@@ -46,11 +44,21 @@ const MeetingsView = () => {
           setFilter={setFilter}
           range={range}
           setRange={setRange}
+          selectedAll={selectedAll}
+          toggleSelectedAll={toggleSelectedAll}
+          invertSelected={invertSelected}
         />
         <DataList>
-          <MeetingsHeader />
+          <MeetingsHeader selected={selectedAll} toggleSelectedAll={toggleSelectedAll} />
           {pagedMeetings.map((meeting) => (
-            <MeetingsRow meeting={meeting} contacts={data.contacts} />
+            <MeetingsRow
+              meeting={meeting}
+              contacts={data.contacts}
+              selected={selected.includes(meeting.id)}
+              setSelected={(id: string) =>
+                selected.includes(id) ? setSelected([...selected.filter((i) => i != id)]) : setSelected([id, ...selected])
+              }
+            />
           ))}
           <MeetingsFooter
             isLoadingPage={data?.isLoading}