fix: [272] add deselect option for selects (#300)

* fix: [272] add deselect option for selects and set it to true for structure select * fix: 272 - allow deselect on RSVP answers --------- Co-authored-by: Andrew Radulescu <[email protected]>
code4romania · Jul 16, 2024 · 229c2b8 · 229c2b8
1 parent 97ad9fc
commit 229c2b8
Show file tree

Hide file tree

Showing 11 changed files with 60 additions and 47 deletions.
diff --git a/frontend/src/components/ActivityLogTable.tsx b/frontend/src/components/ActivityLogTable.tsx
@@ -370,9 +370,9 @@ const ActivityLogTable = ({
     });
   };
 
-  const onStatusChange = (status: SelectItem<ActivityLogStatus>) => {
+  const onStatusChange = (status: SelectItem<ActivityLogStatus> | undefined) => {
     setStatus(status);
-    setQuery({ status: status.key });
+    setQuery({ status: status?.key });
   };
 
   const onExecutionOnRangeChange = ([executionDateStart, executionDateEnd]: Date[]) => {
@@ -479,12 +479,12 @@ const ActivityLogTable = ({
           <h2>
             {resolutionStatus === ActivityLogResolutionStatus.NEW
               ? i18n.t('activity_log:pending_header', {
-                  hours: counters?.pending ?? '-',
-                })
+                hours: counters?.pending ?? '-',
+              })
               : `${i18n.t('activity_log:past_header', {
-                  hours: counters?.approved ?? '-',
-                  rejected: counters?.rejected ?? '-',
-                })}`}
+                hours: counters?.approved ?? '-',
+                rejected: counters?.rejected ?? '-',
+              })}`}
           </h2>
           {resolutionStatus === ActivityLogResolutionStatus.SOLVED && (
             <div className="flex gap-2 lg:gap-6 flex-wrap">

diff --git a/frontend/src/components/ContractsTable.tsx b/frontend/src/components/ContractsTable.tsx
@@ -389,8 +389,8 @@ const ContractsTable = ({ query, setQuery, volunteerName, volunteerId }: Contrac
     });
   };
 
-  const onStatusChange = (item: SelectItem<ContractStatus>) => {
-    setQuery({ status: item.key });
+  const onStatusChange = (item: SelectItem<ContractStatus> | undefined) => {
+    setQuery({ status: item?.key });
   };
 
   const onCloseSidePanel = (shouldRefetch?: boolean) => {

diff --git a/frontend/src/components/LineChartCard.tsx b/frontend/src/components/LineChartCard.tsx
@@ -40,13 +40,13 @@ const YearXAxisTick = (props: any) => {
 };
 
 const LineChartCard = () => {
-  const [chartFilter, setChartFilter] = useState<SelectItem<LineChartOption>>(
+  const [chartFilter, setChartFilter] = useState<SelectItem<LineChartOption> | undefined>(
     LINE_CHART_FILTER_OPTIONS[0],
   );
 
-  const { data, isLoading } = useVolunteerLineChartQuery(chartFilter.key);
+  const { data, isLoading } = useVolunteerLineChartQuery(chartFilter?.key || LINE_CHART_FILTER_OPTIONS[0].key);
 
-  const switchXAxisTick = (option: LineChartOption) => {
+  const switchXAxisTick = (option: LineChartOption | undefined) => {
     switch (option) {
       case LineChartOption.YEARLY: {
         return <YearXAxisTick />;
@@ -73,7 +73,7 @@ const LineChartCard = () => {
         {data && (
           <LineChart
             data={data}
-            xAxisTicx={switchXAxisTick(chartFilter.key)}
+            xAxisTicx={switchXAxisTick(chartFilter?.key)}
             tooltipItemStyle={{
               fontStyle: 'normal',
               fontWeight: '500',

diff --git a/frontend/src/components/PieChartCard.tsx b/frontend/src/components/PieChartCard.tsx
@@ -14,11 +14,11 @@ import LoadingContent from './LoadingContent';
 import PieChart from './PieChart';
 
 const PieChartCard = () => {
-  const [chartFilter, setChartFilter] = useState<SelectItem<PieChartOption>>(
+  const [chartFilter, setChartFilter] = useState<SelectItem<PieChartOption> | undefined>(
     PIE_CHART_FILTER_OPTIONS[0],
   );
 
-  const { data, isLoading } = useVolunteerPieChartQuery(chartFilter.key);
+  const { data, isLoading } = useVolunteerPieChartQuery(chartFilter?.key || PIE_CHART_FILTER_OPTIONS[0].key);
 
   return (
     <Card>
@@ -42,7 +42,7 @@ const PieChartCard = () => {
                     className={`h-3.5 w-3.5 border-solid ${PIE_CHART_LEGEND_COLORS[index]} rounded-full self-center`}
                   />
                   <small>
-                    {chartFilter.key === PieChartOption.AGE
+                    {chartFilter?.key === PieChartOption.AGE
                       ? i18n.t('general:years_old', { age: item.name })
                       : i18n.t('general:sex', { sex_type: i18n.t(`general:${item.name}`) })}
                   </small>

diff --git a/frontend/src/components/RsvpTable.tsx b/frontend/src/components/RsvpTable.tsx
@@ -116,8 +116,8 @@ const RsvpTable = ({ eventId, query, setQuery }: RsvpTableProps) => {
     );
   };
 
-  const onResponseChange = (response: SelectItem<string>) => {
-    setQuery({ going: response.key as RSVPGoingEnum }, 'replaceIn');
+  const onResponseChange = (response: SelectItem<string> | undefined) => {
+    setQuery({ going: response?.key as RSVPGoingEnum }, 'replaceIn');
   };
 
   const onResetFilters = () => {
@@ -142,7 +142,7 @@ const RsvpTable = ({ eventId, query, setQuery }: RsvpTableProps) => {
     downloadExcel(eventRSVPsData as BlobPart, i18n.t('events:download_rsvp'));
   };
 
-  const onSetBranchFilter = (branch: SelectItem<string>) => {
+  const onSetBranchFilter = (branch: SelectItem<string> | undefined) => {
     setBranch(branch);
     setQuery(
       {
@@ -152,7 +152,7 @@ const RsvpTable = ({ eventId, query, setQuery }: RsvpTableProps) => {
     );
   };
 
-  const onSetDepartmentFilter = (department: SelectItem<string>) => {
+  const onSetDepartmentFilter = (department: SelectItem<string> | undefined) => {
     setDepartment(department);
     setQuery(
       {
@@ -162,7 +162,7 @@ const RsvpTable = ({ eventId, query, setQuery }: RsvpTableProps) => {
     );
   };
 
-  const onSetRoleFilter = (role: SelectItem<string>) => {
+  const onSetRoleFilter = (role: SelectItem<string> | undefined) => {
     setRole(role);
     setQuery(
       {
@@ -238,6 +238,7 @@ const RsvpTable = ({ eventId, query, setQuery }: RsvpTableProps) => {
           onChange={onResponseChange}
           options={ResponseSelectOptions}
           defaultValue={query.going}
+          allowDeselect
         />
       </DataTableFilters>
       <Card>

diff --git a/frontend/src/components/Select.tsx b/frontend/src/components/Select.tsx
@@ -10,11 +10,12 @@ export interface SelectItem<T> {
 export interface SelectProps<T> {
   label?: string;
   options: SelectItem<T>[];
-  onChange: (item: SelectItem<T>) => void;
-  selected?: SelectItem<T>;
+  onChange: (item: SelectItem<T> | undefined) => void;
+  selected?: SelectItem<T> | undefined;
   placeholder?: string;
   helper?: ReactNode;
   minWidth?: boolean;
+  allowDeselect?: boolean;
 }
 
 const Select = <T extends React.Key>({
@@ -25,17 +26,25 @@ const Select = <T extends React.Key>({
   placeholder,
   helper,
   minWidth,
+  allowDeselect = false
 }: SelectProps<T>) => {
+  const handleChange = (item: SelectItem<T>) => {
+    if (allowDeselect && selected && item?.key === selected.key) {
+      onChange(undefined);
+    } else {
+      onChange(item);
+    }
+  };
+
   return (
-    <Listbox defaultValue={selected} onChange={onChange}>
+    <Listbox defaultValue={selected} onChange={handleChange}>
       {({ open }) => (
         <div className="flex gap-1 flex-col">
           {label && <Listbox.Label>{label}</Listbox.Label>}
           <div className="relative">
             <Listbox.Button
-              className={`h-[42px] ${
-                minWidth ? 'min-w-[90px] md:min-w-[100px]' : ''
-              } max-w-[37rem] bg-white relative w-full border border-cool-gray-200 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-base text-sm disabled:bg-cool-gray-100`}
+              className={`h-[42px] ${minWidth ? 'min-w-[90px] md:min-w-[100px]' : ''
+                } max-w-[37rem] bg-white relative w-full border border-cool-gray-200 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-base text-sm disabled:bg-cool-gray-100`}
             >
               <span className="block truncate lg:text-base text-sm">
                 {selected ? (

diff --git a/frontend/src/components/Tabs.tsx b/frontend/src/components/Tabs.tsx
@@ -11,13 +11,15 @@ interface TabsProps<T> {
 const Tabs = <T extends React.Key>({ children, tabs, onClick, defaultTab }: TabsProps<T>) => {
   const [activeTab, setActiveTab] = useState<SelectItem<T>>(defaultTab || tabs[0]);
 
-  const onTabClick = (selected: SelectItem<T>): void => {
-    setActiveTab(selected);
-    onClick(selected.key);
+  const onTabClick = (selected: SelectItem<T> | undefined): void => {
+    if (selected) {
+      setActiveTab(selected);
+      onClick(selected?.key);
+    }
   };
 
   useEffect(() => {
-    if (defaultTab && defaultTab?.key !== activeTab.key) {
+    if (defaultTab && defaultTab?.key !== activeTab?.key) {
       setActiveTab(defaultTab);
     }
   }, [defaultTab]);
@@ -31,11 +33,10 @@ const Tabs = <T extends React.Key>({ children, tabs, onClick, defaultTab }: Tabs
             key={tab.key}
             aria-label={tab.value}
             onClick={onTabClick.bind(null, tab)}
-            className={`${
-              activeTab.key === tab.key
-                ? 'bg-yellow-500/[0.5]'
-                : 'font-roboto hover:bg-yellow-500/[0.5]'
-            } min-w-fit leading-5 text-cool-gray-800 hover:text-cool-gray-800 px-4 py-2 rounded-md active:bg-yellow-500`}
+            className={`${activeTab?.key === tab.key
+              ? 'bg-yellow-500/[0.5]'
+              : 'font-roboto hover:bg-yellow-500/[0.5]'
+              } min-w-fit leading-5 text-cool-gray-800 hover:text-cool-gray-800 px-4 py-2 rounded-md active:bg-yellow-500`}
           >
             {tab.value}
           </a>

diff --git a/frontend/src/containers/OrganizationStructureSelect.tsx b/frontend/src/containers/OrganizationStructureSelect.tsx
@@ -32,6 +32,7 @@ const OrganizationStructureSelect = ({
       {...selectProps}
       selected={selected}
       onChange={onChange}
+      allowDeselect
       options={
         divisionListItems && divisionListItems.items?.length > 0
           ? divisionListItems.items?.map(mapDivisionListItemToSelectItem)

diff --git a/frontend/src/pages/ActivityTypes.tsx b/frontend/src/pages/ActivityTypes.tsx
@@ -63,21 +63,21 @@ const ActivityTypes = ({ query, setQuery }: ActivityTypesProps) => {
     });
   };
 
-  const onSetBranchFilter = (branch: SelectItem<string>) => {
+  const onSetBranchFilter = (branch: SelectItem<string> | undefined) => {
     setBranch(branch);
     setQuery({
       branch: branch?.value,
     });
   };
 
-  const onSetDepartmentFilter = (department: SelectItem<string>) => {
+  const onSetDepartmentFilter = (department: SelectItem<string> | undefined) => {
     setDepartment(department);
     setQuery({
       department: department?.value,
     });
   };
 
-  const onSetRoleFilter = (role: SelectItem<string>) => {
+  const onSetRoleFilter = (role: SelectItem<string> | undefined) => {
     setRole(role);
     setQuery({
       role: role?.value,

diff --git a/frontend/src/pages/Volunteers.tsx b/frontend/src/pages/Volunteers.tsx
@@ -75,9 +75,8 @@ const ActiveVolunteersTableHeader = [
     minWidth: '9rem',
     selector: (row: IVolunteer) =>
       row.profile?.department || row?.profile?.role
-        ? `${row.profile?.role?.name || ''}${
-            row.profile?.role && row.profile?.department ? '\n' : ''
-          }${row.profile?.department?.name || ''}`
+        ? `${row.profile?.role?.name || ''}${row.profile?.role && row.profile?.department ? '\n' : ''
+        }${row.profile?.department?.name || ''}`
         : '-',
   },
   {
@@ -362,7 +361,7 @@ const Volunteers = ({ query, setQuery }: VolunteersProps) => {
     );
   };
 
-  const onSetBranchFilter = (branch: SelectItem<string>) => {
+  const onSetBranchFilter = (branch: SelectItem<string> | undefined) => {
     setBranch(branch);
     setQuery(
       {
@@ -372,7 +371,7 @@ const Volunteers = ({ query, setQuery }: VolunteersProps) => {
     );
   };
 
-  const onSetDepartmentFilter = (department: SelectItem<string>) => {
+  const onSetDepartmentFilter = (department: SelectItem<string> | undefined) => {
     setDepartment(department);
     setQuery(
       {
@@ -382,7 +381,7 @@ const Volunteers = ({ query, setQuery }: VolunteersProps) => {
     );
   };
 
-  const onSetRoleFilter = (role: SelectItem<string>) => {
+  const onSetRoleFilter = (role: SelectItem<string> | undefined) => {
     setRole(role);
     setQuery(
       {
@@ -412,10 +411,10 @@ const Volunteers = ({ query, setQuery }: VolunteersProps) => {
     );
   };
 
-  const onAgeRangeChange = (selectedRange: SelectItem<string>) => {
+  const onAgeRangeChange = (selectedRange: SelectItem<string> | undefined) => {
     setQuery(
       {
-        age: selectedRange.key,
+        age: selectedRange?.key,
       },
       'replaceIn',
     );

diff --git a/frontend/src/services/volunteer/volunteer.service.ts b/frontend/src/services/volunteer/volunteer.service.ts
@@ -122,13 +122,15 @@ export const useVolunteerStatisticsQuery = () => {
 //Volunteer Line Chart
 export const useVolunteerLineChartQuery = (filter: LineChartOption) => {
   return useQuery(['volunteer-line-chart', filter], () => getVolunteerLineChart(filter), {
+    enabled: !!filter,
     onError: (error: AxiosError<IBusinessException<VOLUNTEER_ERRORS>>) => error,
   });
 };
 
 //Volunteer Pie Chart
 export const useVolunteerPieChartQuery = (filter: PieChartOption) => {
   return useQuery(['volunteer-pie-chart', filter], () => getVolunteerPieChart(filter), {
+    enabled: !!filter,
     onError: (error: AxiosError<IBusinessException<VOLUNTEER_ERRORS>>) => error,
   });
 };