refactor: refactored filters
This commit is contained in:
@ -53,6 +53,7 @@ const TopToolPanel = () => {
|
||||
<DealsTableFiltersModal
|
||||
getOpener={onFiltersClick => (
|
||||
<Indicator
|
||||
zIndex={100}
|
||||
disabled={!isChangedFilters}
|
||||
offset={3}
|
||||
size={8}>
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
import { isEqual } from "lodash";
|
||||
import { useForm, UseFormReturnType } from "@mantine/form";
|
||||
import { useDebouncedValue } from "@mantine/hooks";
|
||||
import { BoardSchema, SortDir, StatusSchema } from "@/lib/client";
|
||||
|
||||
export type DealsFiltersForm = {
|
||||
id?: number;
|
||||
id: number | null;
|
||||
name: string;
|
||||
board: BoardSchema | null;
|
||||
status: StatusSchema | null;
|
||||
@ -13,15 +12,13 @@ export type DealsFiltersForm = {
|
||||
};
|
||||
|
||||
type ReturnType = {
|
||||
debouncedId: number | undefined;
|
||||
debouncedName: string;
|
||||
form: UseFormReturnType<DealsFiltersForm>;
|
||||
isChangedFilters: boolean;
|
||||
};
|
||||
|
||||
const useDealsFilters = (): ReturnType => {
|
||||
const initialValues = {
|
||||
id: undefined,
|
||||
id: null,
|
||||
board: null,
|
||||
status: null,
|
||||
name: "",
|
||||
@ -35,12 +32,7 @@ const useDealsFilters = (): ReturnType => {
|
||||
|
||||
const isChangedFilters = !isEqual(form.values, initialValues);
|
||||
|
||||
const [debouncedId] = useDebouncedValue(form.values.id, 300);
|
||||
const [debouncedName] = useDebouncedValue(form.values.name, 300);
|
||||
|
||||
return {
|
||||
debouncedId,
|
||||
debouncedName,
|
||||
form,
|
||||
isChangedFilters,
|
||||
};
|
||||
|
||||
@ -38,11 +38,11 @@ const DealsTableFiltersModal = ({
|
||||
label={"ID"}
|
||||
placeholder={"Введите ID"}
|
||||
{...filtersForm.getInputProps("id")}
|
||||
value={filtersForm.values.id}
|
||||
value={filtersForm.values.id ?? ""}
|
||||
onChange={value =>
|
||||
typeof value === "number"
|
||||
? filtersForm.setFieldValue("id", Number(value))
|
||||
: filtersForm.setFieldValue("id", undefined)
|
||||
: filtersForm.setFieldValue("id", null)
|
||||
}
|
||||
min={1}
|
||||
/>
|
||||
|
||||
@ -173,7 +173,6 @@ const useCrudOperations = <
|
||||
children: (
|
||||
<Text>Вы уверены, что хотите удалить "{entity.name}"?</Text>
|
||||
),
|
||||
labels: { confirm: "Да", cancel: "Нет" },
|
||||
confirmProps: { color: "red" },
|
||||
onConfirm: () => {
|
||||
deleteMutation.mutate({ path: { pk: entity.id } } as any);
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { Dispatch, SetStateAction, useState } from "react";
|
||||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { UseFormReturnType } from "@mantine/form";
|
||||
import { useDebouncedValue } from "@mantine/hooks";
|
||||
import useDealsFilters, {
|
||||
DealsFiltersForm,
|
||||
} from "@/app/deals/hooks/useDealsFilters";
|
||||
@ -36,8 +37,10 @@ const useDealsList = ({
|
||||
const queryClient = useQueryClient();
|
||||
const [page, setPage] = useState(1);
|
||||
const itemsPerPage = 10;
|
||||
const { form, debouncedName, debouncedId, isChangedFilters } =
|
||||
useDealsFilters();
|
||||
const { form, isChangedFilters } = useDealsFilters();
|
||||
|
||||
const [debouncedId] = useDebouncedValue(form.values.id, 300);
|
||||
const [debouncedName] = useDebouncedValue(form.values.name, 300);
|
||||
|
||||
const options: Omit<GetDealsData, "url"> = {
|
||||
query: {
|
||||
@ -55,9 +58,7 @@ const useDealsList = ({
|
||||
},
|
||||
};
|
||||
|
||||
const { data, refetch } = useQuery({
|
||||
...getDealsOptions(options),
|
||||
});
|
||||
const { data, refetch } = useQuery(getDealsOptions(options));
|
||||
|
||||
const queryKey = getDealsQueryKey(options);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user