type SortingKey =
| "Duration"
| "Favorited Territories"
| "Favorited Offices"
| "Requestable"
| "Non-Requestable"
| "Non-Full";
const [sortingStates, setSortingStates] = useState<{
[key in SortingKey]: boolean;
}>({
Duration: false,
"Favorited Territories": false,
"Favorited Offices": false,
Requestable: false,
"Non-Requestable": false,
"Non-Full": false,
});
const topContent = React.useMemo(() => {
return (
<div className="flex flex-col gap-4">
<div className="flex flex-wrap justify-between items-center gap-4 w-full">
{/* Dropdown for selecting search criteria */}
<Dropdown>
<DropdownTrigger>
<Button size="sm" variant="flat">
Search Criteria
</Button>
</DropdownTrigger>
<DropdownMenu aria-label="Search Criteria" closeOnSelect>
{columns
.filter(
(column) =>
column.uid !== "actions" &&
column.uid !== "eventDate" &&
column.uid !== "eventType" &&
column.uid !== "startTime" &&
column.uid !== "favorited"
)
.map((column) => (
<DropdownItem
key={column.uid}
className="capitalize"
onClick={() => {
let lowercasedName = column.name.toLowerCase();
// Manually map column names to their corresponding values
if (lowercasedName === "office") {
setSearchCriteria("Office");
setFilterCriteria("officeName");
} else if (lowercasedName === "location") {
setSearchCriteria("Location");
setFilterCriteria("location");
} else if (lowercasedName === "territories") {
setSearchCriteria("Territories");
setFilterCriteria("territory");
} else if (lowercasedName === "specialty") {
setSearchCriteria("Specialties");
setFilterCriteria("specialty");
} else if (lowercasedName === "providers") {
setSearchCriteria("Providers");
setFilterCriteria("providers");
}
setSearchValue(""); // Clear the search input when changing criteria
}}
>
{column.name.toLowerCase()}
</DropdownItem>
))}
</DropdownMenu>
</Dropdown>
{/* Search input */}
<Input
isClearable
classNames={{
base: "w-full sm:max-w-[44%]",
}}
placeholder={`Search by ` + searchCriteria}
size="sm"
startContent={
<FontAwesomeIcon
icon={faMagnifyingGlass}
width="16"
height="16"
/>
}
variant="underlined"
value={searchValue}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setSearchValue(e.target.value);
}}
classname="larger-text"
/>
{/* Dropdown for Specialty */}
<Dropdown>
<DropdownTrigger>
<Button size="sm" variant="flat">
{filterSpecialty}
</Button>
</DropdownTrigger>
<DropdownMenu
aria-label="Specialty"
closeOnSelect={true}
style={{ maxHeight: "400px", overflowY: "auto" }}
>
{specialty_columns.map((specialty) => (
<DropdownItem
key={specialty}
onClick={() => {
const value =
specialty === "Unselect Specialty"
? "Select Specialty"
: specialty;
setFilterSpecialty(value);
}}
>
{specialty}
</DropdownItem>
))}
</DropdownMenu>
</Dropdown>
{/* Dropdown for Type */}
<Dropdown>
<DropdownTrigger>
<Button size="sm" variant="flat">
{filterType}
</Button>
</DropdownTrigger>
<DropdownMenu aria-label="Type" closeOnSelect={true}>
{/* Map your types here */}
{type_columns.map((type) => (
<DropdownItem
key={type}
onClick={() => {
const value =
type === "Unselect Type" ? "Select Type" : type;
setFilterType(value);
}}
>
{type}
</DropdownItem>
))}
</DropdownMenu>
</Dropdown>
<Dropdown>
<DropdownTrigger>
<Button size="sm" variant="flat">
Sorting Options
</Button>
</DropdownTrigger>
<DropdownMenu
aria-label="Sort Criteria"
closeOnSelect={false}
selectionMode="multiple"
>
{SORTING_COLUMNS.map((column) => (
<DropdownItem onClick={() => handleSortOptions(column)}>
{column}
</DropdownItem>
))}
</DropdownMenu>
</Dropdown>
<Dropdown>
<DropdownTrigger className="hidden sm:flex px-6">
<Button
endContent={<FontAwesomeIcon icon={faChevronDown} />}
size="sm"
variant="flat"
>
Display Columns
</Button>
</DropdownTrigger>
<DropdownMenu
disallowEmptySelection
aria-label="Table Columns"
closeOnSelect={false}
selectedKeys={visibleColumns}
selectionMode="multiple"
//This is to change the different columns shown, ignore error from typescript
onSelectionChange={(newVisibleColumns) => {
console.log(
"Attempting to update visible columns to:",
newVisibleColumns
);
if (newVisibleColumns.size > 0) {
setVisibleColumns(newVisibleColumns);
} else {
//Can provide feedback that they need one box selected atleast here.
}
}}
>
{columns.map((column) => (
<DropdownItem key={column.uid} className="capitalize">
{column.name.toLowerCase()}
</DropdownItem>
))}
</DropdownMenu>
</Dropdown>
</div>
<div className="flex justify-between items-center">
<span className="text-default-400 text-small">
Total {meetings.length} meetings
</span>
<label className="flex items-center text-default-400 text-small">
Rows per page:
<select
className="bg-transparent outline-none text-default-400 text-small"
onChange={onRowsPerPageChange}
>
<option value="15">15</option>
<option value="30">30</option>
<option value="45">45</option>
</select>
</label>
</div>
</div>
);
}, [
filterSpecialty,
filterType,
//setSortingStates,
searchCriteria,
searchValue,
filterCriteria,
visibleColumns,
onRowsPerPageChange,
meetings.length,
]);
return (
<>
<ProfileDrawer
isOpen={drawerOpenOffice}
onClose={() => setDrawerOpenOffice(false)}
ID={officeModalId ? officeModalId : "null"}
/>
<ProviderProfileDrawer
isOpen={drawerOpenProviders}
onClose={() => setDrawerOpenProviders(false)}
providerAtEvent={providerInfo} //provider info
/>
<div></div>
<Table
isCompact
removeWrapper
aria-label="Meetings table data"
bottomContent={bottomContent}
bottomContentPlacement="outside"
//sortDescriptor={sortDescriptor}
topContent={topContent}
topContentPlacement="outside"
//onSortChange={setSortDescriptor}
>
<TableHeader columns={headerColumns}>
{(column) => (
<TableColumn
key={column.uid}
align="center"
allowsSorting={column.sortable}
>
<span className="larger-text">{column.name}</span>
</TableColumn>
)}
</TableHeader>
<TableBody emptyContent={"No meetings found"} items={items}>
{(item) => (
<TableRow key={item.id}>
{(columnKey) => (
<TableCell className="larger-text">
{renderCell(item, columnKey)}
</TableCell>
)}
</TableRow>
)}
</TableBody>
</Table>
</>
Currently my Sorting Options dropdown allows me to select different options and it filters a table full of things by these options. The problem is when I click on some filters, then i close the sorting options list, the filters remain. However, when I open the sorting options list again, the filtered options arent selected.
Basically the check mark that appears near sorting options doesnt stay when I close it.