refactor: refactored filters

This commit is contained in:
2025-09-02 18:19:08 +04:00
parent 72ed69db24
commit dca7d5f6a5
5 changed files with 11 additions and 18 deletions

View File

@ -53,6 +53,7 @@ const TopToolPanel = () => {
<DealsTableFiltersModal <DealsTableFiltersModal
getOpener={onFiltersClick => ( getOpener={onFiltersClick => (
<Indicator <Indicator
zIndex={100}
disabled={!isChangedFilters} disabled={!isChangedFilters}
offset={3} offset={3}
size={8}> size={8}>

View File

@ -1,10 +1,9 @@
import { isEqual } from "lodash"; import { isEqual } from "lodash";
import { useForm, UseFormReturnType } from "@mantine/form"; import { useForm, UseFormReturnType } from "@mantine/form";
import { useDebouncedValue } from "@mantine/hooks";
import { BoardSchema, SortDir, StatusSchema } from "@/lib/client"; import { BoardSchema, SortDir, StatusSchema } from "@/lib/client";
export type DealsFiltersForm = { export type DealsFiltersForm = {
id?: number; id: number | null;
name: string; name: string;
board: BoardSchema | null; board: BoardSchema | null;
status: StatusSchema | null; status: StatusSchema | null;
@ -13,15 +12,13 @@ export type DealsFiltersForm = {
}; };
type ReturnType = { type ReturnType = {
debouncedId: number | undefined;
debouncedName: string;
form: UseFormReturnType<DealsFiltersForm>; form: UseFormReturnType<DealsFiltersForm>;
isChangedFilters: boolean; isChangedFilters: boolean;
}; };
const useDealsFilters = (): ReturnType => { const useDealsFilters = (): ReturnType => {
const initialValues = { const initialValues = {
id: undefined, id: null,
board: null, board: null,
status: null, status: null,
name: "", name: "",
@ -35,12 +32,7 @@ const useDealsFilters = (): ReturnType => {
const isChangedFilters = !isEqual(form.values, initialValues); const isChangedFilters = !isEqual(form.values, initialValues);
const [debouncedId] = useDebouncedValue(form.values.id, 300);
const [debouncedName] = useDebouncedValue(form.values.name, 300);
return { return {
debouncedId,
debouncedName,
form, form,
isChangedFilters, isChangedFilters,
}; };

View File

@ -38,11 +38,11 @@ const DealsTableFiltersModal = ({
label={"ID"} label={"ID"}
placeholder={"Введите ID"} placeholder={"Введите ID"}
{...filtersForm.getInputProps("id")} {...filtersForm.getInputProps("id")}
value={filtersForm.values.id} value={filtersForm.values.id ?? ""}
onChange={value => onChange={value =>
typeof value === "number" typeof value === "number"
? filtersForm.setFieldValue("id", Number(value)) ? filtersForm.setFieldValue("id", Number(value))
: filtersForm.setFieldValue("id", undefined) : filtersForm.setFieldValue("id", null)
} }
min={1} min={1}
/> />

View File

@ -173,7 +173,6 @@ const useCrudOperations = <
children: ( children: (
<Text>Вы уверены, что хотите удалить "{entity.name}"?</Text> <Text>Вы уверены, что хотите удалить "{entity.name}"?</Text>
), ),
labels: { confirm: "Да", cancel: "Нет" },
confirmProps: { color: "red" }, confirmProps: { color: "red" },
onConfirm: () => { onConfirm: () => {
deleteMutation.mutate({ path: { pk: entity.id } } as any); deleteMutation.mutate({ path: { pk: entity.id } } as any);

View File

@ -1,6 +1,7 @@
import { Dispatch, SetStateAction, useState } from "react"; import { Dispatch, SetStateAction, useState } from "react";
import { useQuery, useQueryClient } from "@tanstack/react-query"; import { useQuery, useQueryClient } from "@tanstack/react-query";
import { UseFormReturnType } from "@mantine/form"; import { UseFormReturnType } from "@mantine/form";
import { useDebouncedValue } from "@mantine/hooks";
import useDealsFilters, { import useDealsFilters, {
DealsFiltersForm, DealsFiltersForm,
} from "@/app/deals/hooks/useDealsFilters"; } from "@/app/deals/hooks/useDealsFilters";
@ -36,8 +37,10 @@ const useDealsList = ({
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
const itemsPerPage = 10; const itemsPerPage = 10;
const { form, debouncedName, debouncedId, isChangedFilters } = const { form, isChangedFilters } = useDealsFilters();
useDealsFilters();
const [debouncedId] = useDebouncedValue(form.values.id, 300);
const [debouncedName] = useDebouncedValue(form.values.name, 300);
const options: Omit<GetDealsData, "url"> = { const options: Omit<GetDealsData, "url"> = {
query: { query: {
@ -55,9 +58,7 @@ const useDealsList = ({
}, },
}; };
const { data, refetch } = useQuery({ const { data, refetch } = useQuery(getDealsOptions(options));
...getDealsOptions(options),
});
const queryKey = getDealsQueryKey(options); const queryKey = getDealsQueryKey(options);