Error en el selector de artículos, La cantidad no cambiaba al paginar o poner y quitar filtros.
This commit is contained in:
parent
d24f8859b7
commit
16303fc90e
@ -2,6 +2,7 @@ import { Table } from "@tanstack/react-table";
|
||||
|
||||
import { ButtonGroup } from "@/components";
|
||||
import { DataTableFilterField, useDataTableContext } from "@/lib/hooks";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Badge, Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/ui";
|
||||
import { t } from "i18next";
|
||||
import { PlusIcon, SearchIcon, XIcon } from "lucide-react";
|
||||
@ -53,8 +54,13 @@ export function CatalogDataTableFilter<TData>({
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<div className='w-full space-y-2' {...props}>
|
||||
<div className='relative flex items-center flex-1 p-2 space-x-2 border rounded-md border-input'>
|
||||
<SearchIcon className='w-4 h-4 text-gray-500' />
|
||||
<div
|
||||
className={cn(
|
||||
"relative flex items-center flex-1 p-2 space-x-2 border rounded-md",
|
||||
isFiltered ? "border-primary" : "border-input"
|
||||
)}
|
||||
>
|
||||
<SearchIcon className={cn("w-4 h-4 text-gray-500")} />
|
||||
<div className='flex flex-wrap items-center flex-1 gap-2'>
|
||||
{globalFilter &&
|
||||
globalFilter.map((filterTerm) => (
|
||||
@ -95,9 +101,9 @@ export function CatalogDataTableFilter<TData>({
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant='outline'
|
||||
variant='ghost'
|
||||
onClick={() => resetGlobalFilter()}
|
||||
className='h-8 px-2 transition-all lg:px-3'
|
||||
className='h-8 px-2 transition-all lg:px-3 text-primary'
|
||||
>
|
||||
<XIcon className='w-4 h-4 mr-2' />
|
||||
{t("common.filter.reset_filter")}
|
||||
|
||||
@ -4,12 +4,12 @@ import { CatalogDataTableFilter } from "@/app/catalog/components/CatalogDataTabl
|
||||
import { useCatalogList } from "@/app/catalog/hooks";
|
||||
import { DataTable } from "@/components";
|
||||
import { useDataTable, useDataTableContext } from "@/lib/hooks";
|
||||
import { Button } from "@/ui";
|
||||
import { Button, Input } from "@/ui";
|
||||
import { IListArticles_Response_DTO, MoneyValue } from "@shared/contexts";
|
||||
import { ColumnDef, Row } from "@tanstack/react-table";
|
||||
import { createColumnHelper, Row } from "@tanstack/react-table";
|
||||
import { t } from "i18next";
|
||||
import { PackagePlusIcon } from "lucide-react";
|
||||
import { useMemo, useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export const CatalogPickerDataTable = ({
|
||||
@ -23,12 +23,19 @@ export const CatalogPickerDataTable = ({
|
||||
const [quantities, setQuantities] = useState<number[]>([]);
|
||||
|
||||
const handleQuantity = (index: number, quantity: number) => {
|
||||
console.log("handleQuantity", index, quantity);
|
||||
setQuantities((prev) => {
|
||||
prev[index] = quantity;
|
||||
return prev;
|
||||
const newQuantities = [...prev];
|
||||
newQuantities[index] = quantity;
|
||||
return newQuantities;
|
||||
});
|
||||
};
|
||||
|
||||
const resetQuantities = () => {
|
||||
console.log("reset");
|
||||
setQuantities([]);
|
||||
};
|
||||
|
||||
const { data, isPending, isError, error } = useCatalogList({
|
||||
pagination: {
|
||||
pageIndex: pagination.pageIndex,
|
||||
@ -37,7 +44,79 @@ export const CatalogPickerDataTable = ({
|
||||
searchTerm: globalFilter,
|
||||
});
|
||||
|
||||
const columns = useMemo<ColumnDef<IListArticles_Response_DTO>[]>(() => {
|
||||
useEffect(() => {
|
||||
resetQuantities();
|
||||
}, [pagination, globalFilter, isFiltered]);
|
||||
|
||||
console.log(quantities);
|
||||
|
||||
const columnHelper = createColumnHelper<IListArticles_Response_DTO>();
|
||||
|
||||
const columns = [
|
||||
columnHelper.accessor("description", {
|
||||
id: "description",
|
||||
header: () => <>{t("catalog.list.columns.description")}</>,
|
||||
}),
|
||||
columnHelper.accessor("points", {
|
||||
id: "points",
|
||||
header: () => <div className='text-right'>{t("catalog.list.columns.points")}</div>,
|
||||
cell: ({ renderValue }: { renderValue: () => any }) => (
|
||||
<div className='text-right'>{renderValue()}</div>
|
||||
),
|
||||
}),
|
||||
columnHelper.accessor("retail_price", {
|
||||
id: "retail_price",
|
||||
header: () => <div className='text-right'>{t("catalog.list.columns.retail_price")}</div>,
|
||||
cell: ({ row }: { row: Row<IListArticles_Response_DTO> }) => {
|
||||
const price = MoneyValue.create(row.original.retail_price).object;
|
||||
return <div className='text-right'>{price.toFormat()}</div>;
|
||||
},
|
||||
}),
|
||||
columnHelper.display({
|
||||
id: "quantity",
|
||||
header: () => (
|
||||
<div className='font-medium text-right text-foreground'>
|
||||
{t("catalog.list.columns.quantity")}
|
||||
</div>
|
||||
),
|
||||
cell: ({ row: { index } }) => {
|
||||
return (
|
||||
<Input
|
||||
type='number'
|
||||
name='quantity'
|
||||
defaultValue={1}
|
||||
min={1}
|
||||
className='w-24'
|
||||
value={quantities[index]}
|
||||
onChange={(event) => {
|
||||
event.preventDefault();
|
||||
handleQuantity(index, parseInt(event.target.value));
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
}),
|
||||
columnHelper.display({
|
||||
id: "row-actions",
|
||||
header: () => null,
|
||||
cell: ({ row }: { row: Row<IListArticles_Response_DTO> }) => (
|
||||
<Button
|
||||
size='sm'
|
||||
variant='outline'
|
||||
className='h-8 gap-1'
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
onSelect && onSelect(row.original, quantities[row.index]);
|
||||
}}
|
||||
>
|
||||
<PackagePlusIcon className='h-3.5 w-3.5' />
|
||||
<span className='sr-only xl:not-sr-only xl:whitespace-nowrap'>{t("common.add")}</span>
|
||||
</Button>
|
||||
),
|
||||
}),
|
||||
];
|
||||
|
||||
/*const columns2 = useMemo<ColumnDef<IListArticles_Response_DTO>[]>(() => {
|
||||
return [
|
||||
{
|
||||
id: "description" as const,
|
||||
@ -64,18 +143,23 @@ export const CatalogPickerDataTable = ({
|
||||
{
|
||||
id: "quantity" as const,
|
||||
accessorKey: "quantity",
|
||||
header: () => <div className='text-right'>{t("catalog.list.columns.quantity")}</div>,
|
||||
header: () => (
|
||||
<div className='font-medium text-right text-foreground'>
|
||||
{t("catalog.list.columns.quantity")}
|
||||
</div>
|
||||
),
|
||||
cell: ({ row: { index } }) => {
|
||||
return (
|
||||
<input
|
||||
<Input
|
||||
type='number'
|
||||
name='quantity'
|
||||
defaultValue={1}
|
||||
min={1}
|
||||
className='w-24 text-right'
|
||||
value={quantities[index]}
|
||||
onChange={(event) => {
|
||||
event.preventDefault();
|
||||
handleQuantity(index, +event.target.value);
|
||||
handleQuantity(index, parseInt(event.target.value));
|
||||
}}
|
||||
/>
|
||||
);
|
||||
@ -100,10 +184,10 @@ export const CatalogPickerDataTable = ({
|
||||
),
|
||||
},
|
||||
];
|
||||
}, []);
|
||||
}, []);*/
|
||||
|
||||
const { table } = useDataTable({
|
||||
data: data?.items ?? [],
|
||||
const { table } = useDataTable<IListArticles_Response_DTO, any>({
|
||||
data: [...(data?.items || [])],
|
||||
columns: columns,
|
||||
pageCount: data?.total_pages ?? -1,
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user