Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feature: Sorting & finding by username (ID) admin interface #1778

Merged
merged 9 commits into from
Feb 21, 2023
Merged

feature: Sorting & finding by username (ID) admin interface #1778

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
2b18796
feature: Sorting & finding by username (ID) admin interface https://g…
owen-duncan-snobel Feb 21, 2023
5caa3d5
updated filterOption => filterByColumn
owen-duncan-snobel Feb 21, 2023
8e3552c
removed unused imports
owen-duncan-snobel Feb 21, 2023
10b98ae
removed filterbycolumn and used the lastitem in filtervalues instead
owen-duncan-snobel Feb 21, 2023
d11053b
added ? to filterValue conditional
owen-duncan-snobel Feb 21, 2023
a3038b0
changed logic for the filter values
owen-duncan-snobel Feb 21, 2023
4bf2f2f
pre-commit run
owen-duncan-snobel Feb 21, 2023
cba03a4
display_name => filterValue and removed filterByOption param from Dat…
owen-duncan-snobel Feb 21, 2023
ad6e6a6
changes to handleFilterValuesChange
owen-duncan-snobel Feb 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 4 additions & 4 deletions website/src/components/DataTable/DataTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ import {
} from "@tanstack/react-table";
import { Filter } from "lucide-react";
import { useTranslation } from "next-i18next";
import { ChangeEvent, ReactNode, useState } from "react";
import { ChangeEvent, ReactNode, useRef, useState } from "react";
import { useDebouncedCallback } from "use-debounce";

// eslint-disable-next-line @typescript-eslint/no-explicit-any
Expand Down Expand Up @@ -198,13 +198,13 @@ const FilterModal = ({
value: string;
}) => {
const { isOpen, onOpen, onClose } = useDisclosure();

const initialFocusRef = useRef();
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what is the purpose of this ref?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@AbdBarho That ref is for auto-focusing on the text input when the filter button is clicked. That way you can start typing as soon as the parent div/button is clicked

const handleInputChange = useDebouncedCallback((e: ChangeEvent<HTMLInputElement>) => {
onChange(e.target.value);
}, 500);

return (
<Popover isOpen={isOpen} onOpen={onOpen} onClose={onClose}>
<Popover isOpen={isOpen} onOpen={onOpen} initialFocusRef={initialFocusRef} onClose={onClose}>
<PopoverTrigger>
<Button variant={"unstyled"} ml="2">
<Filter size="1em"></Filter>
Expand All @@ -216,7 +216,7 @@ const FilterModal = ({
<PopoverBody mt="4">
<FormControl>
<FormLabel>{label}</FormLabel>
<Input onChange={handleInputChange} defaultValue={value}></Input>
<Input ref={initialFocusRef} onChange={handleInputChange} autoFocus defaultValue={value}></Input>
</FormControl>
</PopoverBody>
</PopoverContent>
Expand Down
26 changes: 20 additions & 6 deletions website/src/components/UserTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,12 @@ const columns: DataTableColumnDef<User>[] = [
columnHelper.accessor("user_id", {
header: "ID",
}),
columnHelper.accessor("id", {
header: "Auth ID",
}),
{
...columnHelper.accessor("id", {
header: "Auth ID",
}),
filterable: true,
},
columnHelper.accessor("auth_method", {
header: "Auth Method",
}),
Expand Down Expand Up @@ -47,17 +50,28 @@ const columns: DataTableColumnDef<User>[] = [
export const UserTable = memo(function UserTable() {
const { pagination, resetCursor, toNextPage, toPreviousPage } = useCursorPagination();
const [filterValues, setFilterValues] = useState<FilterItem[]>([]);

const handleFilterValuesChange = (values: FilterItem[]) => {
setFilterValues(values);
const last = values.pop();
if (last) {
setFilterValues([last]);
}
resetCursor();
};

// Fetch and save the users.
// This follows useSWR's recommendation for simple pagination:
// https://swr.vercel.app/docs/pagination#when-to-use-useswr
const display_name = filterValues.find((value) => value.id === "display_name")?.value ?? "";

const filterValue = filterValues.find((value) => value.id === filterValues[filterValues.length - 1]?.id)?.value ?? "";
const { data, error } = useSWR<FetchUsersResponse<User>>(
`/api/admin/users?direction=${pagination.direction}&cursor=${pagination.cursor}&searchDisplayName=${display_name}&sortKey=display_name`,
`/api/admin/users?direction=${pagination.direction}&cursor=${
pagination.cursor
}&searchDisplayName=${filterValue}&sortKey=${
filterValues[filterValues.length - 1]?.id === "id"
? "username"
: filterValues[filterValues.length - 1]?.id || "display_name"
}`,
get,
{
keepPreviousData: true,
Expand Down