limpia lineas de orden

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
     "java.compile.nullAnalysis.mode": "automatic",
-    "eslint.enable": false
+    "eslint.enable": false,
+    "java.configuration.updateBuildConfiguration": "automatic"
 }

android/app/build.gradle

@@ -168,3 +168,4 @@ dependencies {
 }
 
 apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
+apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")

package-lock.json

@@ -28,6 +28,7 @@
         "react-native-gesture-handler": "^2.9.0",
         "react-native-keyboard-aware-scroll-view": "^0.9.5",
         "react-native-linear-gradient": "^2.6.2",
+        "react-native-numeric-input": "^1.9.1",
         "react-native-safe-area-context": "^4.5.0",
         "react-native-screens": "^3.20.0",
         "react-native-select-dropdown": "^3.3.4",
@@ -14061,6 +14062,26 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-numeric-input": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/react-native-numeric-input/-/react-native-numeric-input-1.9.1.tgz",
+      "integrity": "sha512-uJiMjundXHiBcBLHgSqbfSjLdBM+4OBgLJLSsYG5/+XST5XWufsU8eZaEsn1miOkhjj2B7WgshjNX2Qm+4n3kw==",
+      "dependencies": {
+        "prop-types": "^15.6.1",
+        "react-native-pixel-perfect": "^1.0.1"
+      },
+      "peerDependencies": {
+        "react-native-vector-icons": "^9.*"
+      }
+    },
+    "node_modules/react-native-pixel-perfect": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/react-native-pixel-perfect/-/react-native-pixel-perfect-1.0.2.tgz",
+      "integrity": "sha512-0IvYCNkxuQbQC9q4tI+C3i6o38nbx916p7gBRBWuPxDhKBCuTkVV3VukcfW6vtjRlwQm6kwQcF9OtI+yUBt+YA==",
+      "peerDependencies": {
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-safe-area-context": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.5.0.tgz",

package.json

@@ -30,6 +30,7 @@
     "react-native-gesture-handler": "^2.9.0",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-linear-gradient": "^2.6.2",
+    "react-native-numeric-input": "^1.9.1",
     "react-native-safe-area-context": "^4.5.0",
     "react-native-screens": "^3.20.0",
     "react-native-select-dropdown": "^3.3.4",

src/components/OneToMany.tsx

@@ -0,0 +1,103 @@
+import { FC, useContext } from 'react'
+import { FlatList, Image, ScrollView, Text, TextInput, View } from 'react-native'
+import { SalesOrderContext } from '../screens/salesorder/SalesOrderContex';
+import { InputNumber } from './InputNumber';
+import NumericInput from 'react-native-numeric-input'
+import { CardItem } from './CardItem';
+import { Avatar } from '@ui-kitten/components';
+
+const OneToMany = () => {
+
+    const { lines, setLines } = useContext(SalesOrderContext);
+
+    const setCantidad = (productoId: number, nuevaCantidad: number) => {
+
+        setLines(lines.map(line => {
+            if (line.producto.id == productoId) {
+                line.cantidad = nuevaCantidad;
+            }
+            return line;
+        }))
+
+    }
+
+    const setPrecio = (productoId: number, nuevoPrecio: number) => {
+        setLines(lines.map(line => {
+            if (line.producto.id == productoId) {
+                line.precio = nuevoPrecio;
+            }
+            return line;
+        }))
+    }
+
+    return (
+        <ScrollView >
+            <FlatList
+                data={lines}
+                renderItem={({ item }) =>
+                    <View className='flex-row'>
+                        <CardItem>
+                            <View className='flex-row'>
+                                <View>
+                                    <Image
+                                        source={{ uri: 'https://images.philips.com/is/image/PhilipsConsumer/271V8_69-IMS-en_HK?$jpglarge$&wid=1250' }}
+                                        style={{
+                                            width: 100,
+                                            height: 80
+                                        }}
+                                    />
+                                    <NumericInput
+                                        value={item.cantidad}
+                                        onChange={value => setCantidad(item.producto.id, value)}
+                                        onLimitReached={(isMax, msg) => console.log(isMax, msg)}
+                                        minValue={1}
+                                        totalWidth={100}
+                                        totalHeight={50}
+                                        iconSize={50}
+                                        step={1}
+                                        valueType='integer'
+                                        rounded
+                                        textColor='#B0228C'
+                                        iconStyle={{ backgroundColor: 'white' }}
+                                        rightButtonBackgroundColor='#1d4ed8'
+                                        leftButtonBackgroundColor='#0ea5e9'
+                                        type='plus-minus'
+                                    />
+                                </View>
+
+                                <View className='mx-4'>
+                                    <Text className='text-xl text-center'>{item.producto.nombre}</Text>
+                                    <View className='flex-row justify-center'>
+                                        <Text className=' my-2 font-bold text-black text-4xl text-center'>{item.precio * item.cantidad}</Text>
+                                        <Text className=' my-2 ml-2 text-3xl text-left text-teal-500'>$</Text>
+                                    </View>
+
+                                    <View className='flex-row items-center border-b-2 border-sky-500'>
+                                        <TextInput
+                                            id={'precio'}
+                                            value={String(item.precio)}
+                                            onChangeText={value => setPrecio(item.producto.id, Number(value))}
+                                            placeholder={'Precio'}
+                                            keyboardType="decimal-pad"
+                                            className='p-2 h-10 text-right '
+                                        />
+                                        <Text>/ unidad</Text>
+                                    </View>
+
+                                </View>
+
+
+                            </View>
+
+                        </CardItem>
+
+
+
+                    </View>
+                }
+            />
+        </ScrollView>
+    )
+}
+
+export default OneToMany

src/screens/product/Product.ts

@@ -0,0 +1,4 @@
+interface Product {
+    id: number;
+    nombre: string;
+}

src/screens/salesorder/ProductItem.tsx

@@ -0,0 +1,63 @@
+import React, { FC, useContext } from 'react'
+import { FlatList, Text, TouchableOpacity, View } from 'react-native'
+
+import { useNavigation } from '@react-navigation/native';
+
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { Avatar, Layout } from '@ui-kitten/components';
+import { CardItem } from '../../components/CardItem';
+import { SalesOrderContext } from './SalesOrderContex';
+
+interface Props {
+    entities: [],
+    screenName: string,
+    columnDisplay: string
+}
+
+export const ProductItem: FC<Props> = ({ entities, screenName, columnDisplay }) => {
+
+    const navigation = useNavigation<NativeStackNavigationProp<any>>();
+    const {lines, setLines, add} = useContext(SalesOrderContext);
+    return (
+        <>
+
+            <FlatList
+
+                data={entities}
+                renderItem={({ item }) =>
+
+                    <TouchableOpacity
+                        onPress={() => {
+                            // Pass and merge params back to home screen
+                            const newLine: SalesOrderLine = {
+                                producto: { id: item['id'], nombre: item["nombre"] },
+                                cantidad: 1,
+                                precio: item["precio"]
+                            }
+                            add(newLine)
+                            navigation.pop();
+                        }}
+                    >
+                        <CardItem>
+                            <View className='flex-row'>
+                                <Avatar
+                                    size='giant'
+                                    source={{ uri: 'https://images.philips.com/is/image/PhilipsConsumer/271V8_69-IMS-en_HK?$jpglarge$&wid=1250' }}
+                                />
+                                <Text className='mx-4'>
+                                    {item[columnDisplay]}
+                                </Text>
+                            </View>
+
+                        </CardItem>
+
+                    </TouchableOpacity>
+
+                }
+                keyExtractor={item => item["id"]}
+            />
+
+
+        </>
+    )
+}

src/screens/salesorder/ProductList.tsx

@@ -6,6 +6,7 @@ import { CardList } from '../../components/cardList/CardList'
 import { Button } from '../../components/Button'
 import { useFetchWithAuth } from '../../hooks/useFetchWithAuth'
 import { ProductCardList } from '../../components/cardList/ProductCardList';
+import { ProductItem } from './ProductItem';
 
 
 export const ProductList = () => {
@@ -64,7 +65,7 @@ export const ProductList = () => {
                     <View id={item} className='flex-1 items-center'>
                         <Card>
                             <Text className='text-xl text-center my-4'>Listado de Produtos</Text>
-                            <ProductCardList screenName="ProductFormScreen" columnDisplay="nombre" entities={entities} />
+                            <ProductItem screenName="SalesOrderFormScreen" columnDisplay="nombre" entities={entities} />
                         </Card>
                     </View>
                 }

src/screens/salesorder/SalesOrder.ts

@@ -0,0 +1,8 @@
+interface SalesOrder {
+    id: number;
+    numero: string;
+    cliente: {
+        id: number;
+    };
+    detalle: SalesOrderLine[];
+}

src/screens/salesorder/SalesOrderContex.tsx

@@ -0,0 +1,37 @@
+import React, { createContext, useState } from 'react';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+
+type SalesOrderContextProps = {
+    lines: SalesOrderLine[],
+    add: (newLine:SalesOrderLine)=>void,
+    remove: (productId: number)=>void,
+    setLines: (lines: SalesOrderLine[])=>void
+}
+
+export const SalesOrderContext = createContext({} as SalesOrderContextProps);
+
+export const SalesOrderProvider = ({ children }: {children: JSX.Element | JSX.Element[]})=> {
+
+    const [lines, setLines] = useState<SalesOrderLine[]>([]);
+
+    const add = (newLine:SalesOrderLine) => {
+        setLines([...lines,newLine]);
+    }
+
+    const remove = (productId:number) => {
+        setLines(lines.filter(line => line.producto.id === productId));
+    }
+
+    return (
+        <SalesOrderContext.Provider value={{
+            lines,
+            add,
+            remove,
+            setLines
+        }}>
+            { children }
+        </SalesOrderContext.Provider>
+    )
+}
+

src/screens/salesorder/SalesOrderFormScreen.tsx

@@ -1,6 +1,5 @@
-import { useEffect } from 'react'
+import { useContext, useEffect, useState } from 'react'
-import { Text } from 'react-native'
+import { FlatList, Text } from 'react-native'
-import { Background } from '../../components/Background'
 import { Button } from '../../components/Button';
 import { Card } from '../../components/Card';
 import { Input } from '../../components/Input';
@@ -10,20 +9,23 @@ import { useFetchWithAuth } from '../../hooks/useFetchWithAuth';
 import { saveWithAuth } from '../../hooks/saveWithAuth';
 import { ManyToOne } from '../../components/ManyToOne';
 import { RootStackParams } from './SalesOrderStack';
-
+import OneToMany from '../../components/OneToMany';
+import { SalesOrderContext } from './SalesOrderContex';
 
 interface Props extends NativeStackScreenProps<RootStackParams, 'SalesOrderFormScreen'> { };
 
 export const SalesOrderFormScreen = ({ route, navigation }: Props) => {
 
+    const {lines, setLines, add} = useContext(SalesOrderContext);
+
     const { control, handleSubmit, setValue, formState: { errors } } = useForm({
         defaultValues: {
             id: 0,
             numero: '',
-            cliente: { id: 0 },
+            cliente: { id: 0 }
-            detalle: []
         }
     });
+
     let id: string = "0";
     if (route.params?.id != undefined) {
         id = String(route.params.id);
@@ -40,7 +42,8 @@ export const SalesOrderFormScreen = ({ route, navigation }: Props) => {
                 setValue("id", data['id'])
                 setValue("numero", data['numero'])
                 setValue("cliente", data['cliente'])
-                setValue("detalle", data['detalle'])
+                const lines: SalesOrderLine[] = data['detalle'];
+                setLines(lines);
             }
 
         } else {
@@ -57,8 +60,7 @@ export const SalesOrderFormScreen = ({ route, navigation }: Props) => {
         try {
             let endpoint = "pedido";
             entity['cliente'] = { id: entity['cliente'].id }
-            console.log("Entidad:")
+            entity['detalle'] = lines;
-            console.log(entity)
             const { data, error } = await saveWithAuth(endpoint, id, entity);
             if (error) {
                 console.log(error);
@@ -73,21 +75,30 @@ export const SalesOrderFormScreen = ({ route, navigation }: Props) => {
 
     return (
         <>
-            <Background >
+            <FlatList
+
+                data={[""]}
+                renderItem={({ item }) =>
+                    <>
                         <Card>
                             <Text className='text-xl text-center my-4'>Registro de Pedido</Text>
                             <Input name="numero" label='Número' control={control} />
                             <ManyToOne entity='cliente' columname='cliente' columnvalue="nombre" control={control} />
+                            <OneToMany  />
                             <Button
                                 title='Agrega produtos'
                                 additionalStyle='mb-4'
-                        onPress={() => navigation.navigate("ProductListScreen" as never)} />
+                                onPress={() => navigation.navigate("ProductList" as never)} />
                             <Button
                                 title='Guardar'
                                 onPress={handleSubmit(onSubmit)}
                             />
                         </Card>
-            </Background>
+                    </>
+                }
+                keyExtractor={item2 => item2}
+            />
+
         </>
     )
 }

src/screens/salesorder/SalesOrderLine.ts

@@ -0,0 +1,6 @@
+interface SalesOrderLine {
+    id?: number
+    producto: Product,
+    cantidad: number,
+    precio: number
+}

src/screens/salesorder/SalesOrderListScreen.tsx

@@ -1,17 +1,18 @@
-import { useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { FlatList, RefreshControl, Text, View } from 'react-native'
 import { useNavigation } from '@react-navigation/native';
 import { Card } from '../../components/Card'
 import { CardList } from '../../components/cardList/CardList'
 import { Button } from '../../components/Button'
 import { useFetchWithAuth } from '../../hooks/useFetchWithAuth'
+import { SalesOrderContext } from './SalesOrderContex';
 
 export const SalesOrderListScreen = () => {
     const navigation = useNavigation();
     const [refreshing, setRefreshing] = useState(false);
     const endpoints = "pedido";
     let defaultData: [] = [];
-
+    const { setLines } = useContext(SalesOrderContext);
     const [entities, setEntities] = useState(defaultData);
 
     const getInitData = async () => {
@@ -39,7 +40,10 @@ export const SalesOrderListScreen = () => {
             <Button
                 title=' + '
                 additionalStyle='z-10 absolute bottom-2 right-0'
-        onPress={() => navigation.navigate("SalesOrderFormScreen" as never)} />
+                onPress={() => {
+                    setLines([]);
+                    navigation.navigate("SalesOrderFormScreen" as never)}
+                    } />
             <FlatList
                 refreshControl={
                     <RefreshControl

src/screens/salesorder/SalesOrderStack.tsx

@@ -4,10 +4,11 @@ import { AuthContext } from '../login/AuthContext';
 import { SalesOrderFormScreen } from './SalesOrderFormScreen';
 import { SalesOrderListScreen } from './SalesOrderListScreen';
 import { ProductList } from './ProductList';
+import { SalesOrderProvider } from './SalesOrderContex';
 
 export type RootStackParams = {
     SalesOrderListScreen: undefined,
-    SalesOrderFormScreen: { id: number },
+    SalesOrderFormScreen: { id: number, productId: number },
     ProductList: undefined
 }
 const Stack = createNativeStackNavigator<RootStackParams>();
@@ -16,6 +17,7 @@ export const SalesOrderStack = () => {
     const { isAuthenticated } = useContext(AuthContext)
 
     return (
+        <SalesOrderProvider>
             <Stack.Navigator
                 screenOptions={{
                     headerShown: true,
@@ -29,5 +31,7 @@ export const SalesOrderStack = () => {
                     </>
                 )}
             </Stack.Navigator>
+        </SalesOrderProvider>
+
     )
 }