add boxes

src/routes/private/real-boxes-create/DashboardCreateRealBox.tsx

@@ -15,6 +15,7 @@ import { notifyUnknownError } from '@/services/notification';
 import { AddCircleRounded, Close } from '@mui/icons-material';
 import {
     Box,
+    Button,
     Checkbox,
     Chip,
     CircularProgress,
@@ -192,20 +193,20 @@ const DashboardCreateRealBoxPage = ({ initialValues, partiesData }: Props) => {
     const [paketName, setPaketName] = useState<string>('');
     const PacketRow = ({ index, field }: { index: number; field: any }) => {
         const packetId = watch(`packetItemDtos.${index}.packetId`);
-        // Tanlangan paketning name'ini olish
         const [itemsPage, setItemsPage] = useState(1);
         const [itemsList, setItemsList] = useState<any[]>([]);
         const [itemsHasMore, setItemsHasMore] = useState(true);
         const itemScrollRef = useRef<HTMLDivElement>(null);
-        // Packetlar uchun scroll state
         const [packetsPage, setPacketsPage] = useState(1);
         const [packetsList, setPacketsList] = useState<any[]>([]);
-        const selectedPacket = packetsList.find(p => p.id === packetId);
         const [packetsHasMore, setPacketsHasMore] = useState(true);
+        const [selectedProductNames, setSelectedProductNames] = useState<{ [packetIndex: number]: { [productId: number]: string } }>({});
+        const [paketName, setPaketName] = useState<string>('');
+        const [lastPacketId, setLastPacketId] = useState<number | null>(null);
 
         const { isLoading: isLoadingProducts } = useQuery({
             queryKey: ['product-list', packetId, itemsPage],
-            queryFn: () => item_requests.list({ packetId, page: itemsPage }),
+            queryFn: () => item_requests.getAll({ packetId, page: itemsPage }),
             enabled: !!packetId,
             onSuccess: data => {
                 const newItems = data?.data?.data?.data || [];
@@ -215,7 +216,6 @@ const DashboardCreateRealBoxPage = ({ initialValues, partiesData }: Props) => {
 
         const packetScrollRef = useRef<HTMLDivElement>(null);
         const [keyword, setKeyword] = useState<string>('');
-
         const { isFetching: isLoadingPackets } = useQuery({
             queryKey: ['packets-list', partyId, keyword, packetsPage],
             queryFn: () => box_requests.getAll({ partyId, cargoId: keyword, page: packetsPage }),
@@ -246,46 +246,11 @@ const DashboardCreateRealBoxPage = ({ initialValues, partiesData }: Props) => {
             }
         };
 
-        useEffect(() => {
-            setItemsPage(1);
-            setItemsList([]);
-            setItemsHasMore(true);
-        }, [packetId]);
-
-        const [selectedProductNames, setSelectedProductNames] = useState<{ [packetIndex: number]: { [productId: number]: string } }>({});
-
-        const handleSelectAll = (checked: boolean, packetIndex: number, packetId: number, itemsList: any[]) => {
-            setSelectedProductNames(prev => {
-                const prevNames = prev[packetIndex] || {};
-                if (checked) {
-                    // add all products of current page
-                    const newNames = { ...prevNames };
-                    itemsList.forEach(p => {
-                        newNames[p.id] = p.nameRu || p.name || String(p.id);
-                    });
-                    return { ...prev, [packetIndex]: newNames };
-                } else {
-                    // remove all products of current page
-                    const newNames = { ...prevNames };
-                    itemsList.forEach(p => {
-                        delete newNames[p.id];
-                    });
-                    return { ...prev, [packetIndex]: newNames };
-                }
-            });
-            setValue(
-                `packetItemDtos.${packetIndex}.itemDtos`,
-                checked
-                    ? Array.from(new Set([...(watch(`packetItemDtos.${packetIndex}.itemDtos`) || []), ...itemsList.map(p => p.id)]))
-                    : (watch(`packetItemDtos.${packetIndex}.itemDtos`) || []).filter(id => !itemsList.some(p => p.id === id))
-            );
-        };
-
         const handleProductChange = (packetIndex: number, product: any, checked: boolean) => {
             setSelectedProductNames(prev => {
                 const prevNames = prev[packetIndex] || {};
                 if (checked) {
-                    return { ...prev, [packetIndex]: { ...prevNames, [product.id]: product.nameRu || product.name || String(product.id) } };
+                    return { ...prev, [packetIndex]: { ...prevNames, [product.id]: product.name || product.nameRu || String(product.id) } };
                 } else {
                     const newNames = { ...prevNames };
                     delete newNames[product.id];
@@ -294,6 +259,46 @@ const DashboardCreateRealBoxPage = ({ initialValues, partiesData }: Props) => {
             });
         };
 
+        const handleSelectAllProducts = async () => {
+            if (!packetId) return;
+            let allProducts: any[] = [];
+            let page = 1;
+            let totalPages = 1;
+            try {
+                do {
+                    const res = await item_requests.list({ packetId, page });
+                    const data = res?.data?.data;
+                    const products = data?.data || [];
+                    totalPages = data?.totalPages || 1;
+                    allProducts = [...allProducts, ...products];
+                    page++;
+                } while (page <= totalPages);
+            } catch (e) {
+                // error silent
+            }
+            if (allProducts.length > 0) {
+                setValue(
+                    `packetItemDtos.${index}.itemDtos`,
+                    allProducts.map((p: any) => p.id)
+                );
+                setSelectedProductNames((prev: any) => ({
+                    ...prev,
+                    [index]: allProducts.reduce(
+                        (acc, p) => ({
+                            ...acc,
+                            [p.id]: p.name || p.nameRu || String(p.id),
+                        }),
+                        {}
+                    ),
+                }));
+            }
+        };
+
+        const handleClearAll = () => {
+            setValue(`packetItemDtos.${index}.itemDtos`, []);
+            setSelectedProductNames((prev: any) => ({ ...prev, [index]: {} }));
+        };
+
         return (
             <Box className='item-row' mb={2} display={'flex'} flexDirection={'column'}>
                 <div style={{ width: '100%' }}>
@@ -339,6 +344,11 @@ const DashboardCreateRealBoxPage = ({ initialValues, partiesData }: Props) => {
                                                 autoFocus: false,
                                             }}
                                             onClick={e => e.stopPropagation()}
+                                            onChange={e => {
+                                                field.onChange(e);
+                                                const selected = packetsList.find(p => p.id === e.target.value);
+                                                setPaketName(selected?.name || '');
+                                            }}
                                         >
                                             {isLoadingPackets && packetsList.length === 0 ? (
                                                 <MenuItem disabled>
@@ -381,22 +391,23 @@ const DashboardCreateRealBoxPage = ({ initialValues, partiesData }: Props) => {
 
                 {packetId && (
                     <Box mt={2} sx={{ width: '100%' }}>
-                        <Typography fontSize='18px' sx={{ textAlign: 'start' }} fontWeight={500} color='#5D5850' mb={2}>
+                        <Box display='flex' justifyContent='space-between' alignItems='center' mb={2}>
+                            <Typography fontSize='18px' sx={{ textAlign: 'start' }} fontWeight={500} color='#5D5850'>
                                 {t('products')}
                             </Typography>
+                            <Box>
+                                <Button size='small' color='primary' variant='outlined' sx={{ mr: 1 }} onClick={handleSelectAllProducts}>
+                                    {t('select_all') || 'Barcha mahsulotni tanlash'}
+                                </Button>
+                                <Button size='small' color='error' variant='outlined' onClick={handleClearAll}>
+                                    {t('cancel') || 'Hammasini bekor qilish'}
+                                </Button>
+                            </Box>
+                        </Box>
                         {isLoadingProducts && itemsList.length === 0 ? (
                             <CircularProgress />
                         ) : (
                             <FormControl fullWidth>
-                                {/* <Box display='flex' alignItems='center' mb={1}>
-                                    <Checkbox
-                                        indeterminate={selectedProducts.length > 0 && selectedProducts.length < itemsList.length}
-                                        checked={itemsList.length > 0 && selectedProducts.length === itemsList.length}
-                                        onChange={e => handleSelectAll(e.target.checked)}
-                                        disabled={itemsList.length === 0}
-                                    />
-                                    <Typography variant='body2'>{t('select_all')}</Typography>
-                                </Box> */}
                                 <Controller
                                     name={`packetItemDtos.${index}.itemDtos`}
                                     control={control}
@@ -415,13 +426,14 @@ const DashboardCreateRealBoxPage = ({ initialValues, partiesData }: Props) => {
                                             }}
                                             renderValue={selected => (
                                                 <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
-                                                    {(selected as any[]).map(id => (
+                                                    {(selected as any[]).map(id => {
+                                                        return (
                                                             <Chip
                                                                 key={id}
                                                                 label={
                                                                     selectedProductNames[index]?.[id] ||
-                                                                itemsList.find(p => p.id === id)?.nameRu ||
                                                                     itemsList.find(p => p.id === id)?.name ||
+                                                                    itemsList.find(p => p.id === id)?.nameRu ||
                                                                     id
                                                                 }
                                                                 onDelete={e => {
@@ -430,20 +442,11 @@ const DashboardCreateRealBoxPage = ({ initialValues, partiesData }: Props) => {
                                                                     handleProductChange(index, { id }, false);
                                                                 }}
                                                             />
-                                                    ))}
+                                                        );
+                                                    })}
                                                 </Box>
                                             )}
                                         >
-                                            <MenuItem>
-                                                <Checkbox
-                                                    indeterminate={field.value.length > 0 && field.value.length < itemsList.length}
-                                                    checked={
-                                                        itemsList.length > 0 && itemsList.every((p: any) => field.value.includes(p.id))
-                                                    }
-                                                    onChange={e => handleSelectAll(e.target.checked, index, packetId, itemsList)}
-                                                />
-                                                <Typography variant='body2'>{t('select_all')}</Typography>
-                                            </MenuItem>
                                             {itemsList.map(product => (
                                                 <MenuItem
                                                     key={product.id}
@@ -462,7 +465,7 @@ const DashboardCreateRealBoxPage = ({ initialValues, partiesData }: Props) => {
                                                     }}
                                                 >
                                                     <Checkbox checked={field.value.includes(product.id)} />
-                                                    <ListItemText primary={product.nameRu || product.name || product.id} />
+                                                    <ListItemText primary={product.name || product.nameRu || product.id} />
                                                 </MenuItem>
                                             ))}
                                         </Select>