inicio de relaciones onetomany

src/components/cardList/CardList.tsx

@@ -11,34 +11,37 @@ interface Props {
     columnDisplay: string
 }
 
-export const CardList:FC <Props> = ({entities, screenName, columnDisplay}) => {
+export const CardList: FC<Props> = ({ entities, screenName, columnDisplay }) => {
 
     const navitation = useNavigation<NativeStackNavigationProp<any>>();
 
-    
+
- return (
+    return (
-   <>
+        <>
-   
+
-    <FlatList
+            <FlatList
-          
+
-        data={entities}
+                data={entities}
-        renderItem={({item}) => 
+                renderItem={({ item }) =>
-        <CardItem>
+
-            <TouchableOpacity
+                    <TouchableOpacity
-                onPress={()=>
+                        onPress={() =>
-                    navitation
+                            navitation
-                    .navigate(screenName , {id:item['id']} )}
+                                .navigate(screenName, { id: item['id'] })}
-            >
+                    >
-                <Text>
+                        <CardItem>
-                    {item[columnDisplay]}
+                            <Text>
-                </Text>
+                                {item[columnDisplay]}
-            </TouchableOpacity>
+                            </Text>
-        </CardItem>
+                        </CardItem>
-        }
+
-        keyExtractor={item => item["id"]}
+                    </TouchableOpacity>
-      />
+
-    
+                }
-   
+                keyExtractor={item => item["id"]}
-   </>
+            />
- )
+
+
+        </>
+    )
 }

src/components/cardList/ProductCardList.tsx

@@ -0,0 +1,55 @@
+import React, { FC, useEffect, useState } from 'react'
+import { FlatList, RefreshControl, Text, TouchableOpacity, View } from 'react-native'
+
+import { useNavigation } from '@react-navigation/native';
+import { CardItem } from '../CardItem';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { Avatar, Layout } from '@ui-kitten/components';
+
+interface Props {
+    entities: [],
+    screenName: string,
+    columnDisplay: string
+}
+
+export const ProductCardList: FC<Props> = ({ entities, screenName, columnDisplay }) => {
+
+    const navitation = useNavigation<NativeStackNavigationProp<any>>();
+
+
+    return (
+        <>
+
+            <FlatList
+
+                data={entities}
+                renderItem={({ item }) =>
+
+                    <TouchableOpacity
+                        onPress={() =>
+                            navitation
+                                .navigate(screenName, { id: item['id'] })}
+                    >
+                        <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/product/ProductFormScreen.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import { Text } from 'react-native'
+import { Text,Image } from 'react-native'
 import { Background } from '../../components/Background'
 import { Button } from '../../components/Button';
 import { Card } from '../../components/Card';
@@ -11,7 +11,7 @@ import { useFetchWithAuth } from '../../hooks/useFetchWithAuth';
 import { saveWithAuth } from '../../hooks/saveWithAuth';
 import { InputNumber } from '../../components/InputNumber';
 import { InputDate } from '../../components/InputDate';
-
+import { Avatar, Layout } from '@ui-kitten/components';
 
 interface Props extends NativeStackScreenProps<RootStackParams, 'ProductFormScreen'> { };
 
@@ -75,7 +75,16 @@ export const ProductFormScreen = ({ route, navigation }: Props) => {
         <>
             <Background >
                 <Card>
+                    
+
                     <Text className='text-xl text-center my-4'>Registro de Productos</Text>
+                    <Image 
+                        source={{uri:'https://images.philips.com/is/image/PhilipsConsumer/271V8_69-IMS-en_HK?$jpglarge$&wid=1250'}}
+                        style={{
+                            width:100,
+                            height:100
+                        }}
+                    />                    
                     <Input name="codigo" label='Código' control={control} />
                     <Input name="nombre" label='Nombre' control={control} />
                     <InputNumber name="precio" label='Precio' control={control} />

src/screens/product/ProductListScreen.tsx

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

src/screens/salesorder/ProductList.tsx

@@ -0,0 +1,75 @@
+import { 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 { ProductCardList } from '../../components/cardList/ProductCardList';
+
+
+export const ProductList = () => {
+    const navigation = useNavigation();
+    const [refreshing, setRefreshing] = useState(false);
+    const endpoints = "producto";
+    let defaultData: [] = [];
+
+    const [entities, setEntities] = useState(defaultData);
+
+    const getInitData = async () => {
+        const { data, error } = await useFetchWithAuth(endpoints);
+        if (!error) {
+            setEntities(data);
+        } else {
+            console.log(error)
+        }
+    }
+
+    useEffect(() => {
+        getInitData();
+    }, [refreshing])
+
+    const onRefresh = () => {
+        setRefreshing(true);
+        setTimeout(() => {
+            setRefreshing(false);
+        }, 1000);
+    };
+
+    return (
+        <View className='bg-sky-100'>
+            <Button
+                title=' + '
+                additionalStyle='z-10 absolute bottom-2 right-0'
+                onPress={() => {
+                    // Pass and merge params back to home screen
+                    navigation.navigate(
+                        {
+                            name: 'SalesOrderFormScreen',
+                            params: { productId: 1 },
+                            merge: true,
+                        } as never
+                    );
+                }}
+        />
+            <FlatList
+                refreshControl={
+                    <RefreshControl
+                        refreshing={refreshing}
+                        onRefresh={onRefresh}
+                    />
+                }
+                data={[""]}
+                renderItem={({ item }) =>
+                    <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} />
+                        </Card>
+                    </View>
+                }
+                keyExtractor={item => item}
+            />
+        </View>
+    )
+}

src/screens/salesorder/SalesOrderFormScreen.tsx

@@ -17,69 +17,77 @@ interface Props extends NativeStackScreenProps<RootStackParams, 'SalesOrderFormS
 export const SalesOrderFormScreen = ({ route, navigation }: Props) => {
 
     const { control, handleSubmit, setValue, formState: { errors } } = useForm({
-    defaultValues: {
+        defaultValues: {
-        id: 0,
+            id: 0,
-        numero: '',
+            numero: '',
-        cliente: { id: 0 }
+            cliente: { id: 0 },
-    }
+            detalle: []
+        }
     });
     let id: string = "0";
     if (route.params?.id != undefined) {
-    id = String(route.params.id);
+        id = String(route.params.id);
     }
 
     const getInitData = async () => {
-    if (!id || id == "0")
+        if (!id || id == "0")
-        return;
+            return;
-    const { data, error } = await useFetchWithAuth("pedido/" + id);
+        const { data, error } = await useFetchWithAuth("pedido/" + id);
 
-    if (!error) {
+        if (!error) {
 
-        if (data.id != 0) {
+            if (data.id != 0) {
-        setValue("id", data['id'])
+                setValue("id", data['id'])
-        setValue("numero", data['numero'])
+                setValue("numero", data['numero'])
-        setValue("cliente", data['cliente'])
+                setValue("cliente", data['cliente'])
-        }
+                setValue("detalle", data['detalle'])
+            }
 
-    } else {
+        } else {
-        console.log(error)
+            console.log(error)
-    }
+        }
     }
 
 
     useEffect(() => {
-    getInitData();
+        getInitData();
     }, [])
 
     const onSubmit = async (entity: any) => {
-    try {
+        try {
-        let endpoint = "pedido";
+            let endpoint = "pedido";
-        entity['cliente'] = { id: entity['cliente'].id }
+            entity['cliente'] = { id: entity['cliente'].id }
-        const { data, error } = await saveWithAuth(endpoint, id, entity);
+            console.log("Entidad:")
-        if (error) {
+            console.log(entity)
-        console.log(error);
+            const { data, error } = await saveWithAuth(endpoint, id, entity);
-        } else {
+            if (error) {
-        navigation.navigate("SalesOrderListScreen")
+                console.log(error);
+            } else {
+                navigation.navigate("SalesOrderListScreen")
+            }
+        } catch (e) {
+            console.log("Post error:");
+            console.table(e);
         }
-    } catch (e) {
-        console.log("Post error:");
-        console.table(e);
-    }
     }
 
     return (
-    <>
+        <>
-        <Background >
+            <Background >
-        <Card>
+                <Card>
-            <Text className='text-xl text-center my-4'>Registro de Pedido</Text>
+                    <Text className='text-xl text-center my-4'>Registro de Pedido</Text>
-            <Input name="numero" label='Número' control={control} />
+                    <Input name="numero" label='Número' control={control} />
-            <ManyToOne entity='cliente' columname='cliente' columnvalue="nombre" control={control} />
+                    <ManyToOne entity='cliente' columname='cliente' columnvalue="nombre" control={control} />
-            <Button
+                    <Button
-            title='Guardar'
+                        title='Agrega produtos'
-            onPress={handleSubmit(onSubmit)}
+                        additionalStyle='mb-4'
-            />
+                        onPress={() => navigation.navigate("ProductListScreen" as never)} />
-        </Card>
+                    <Button
-        </Background>
+                        title='Guardar'
-    </>
+                        onPress={handleSubmit(onSubmit)}
+                    />
+                </Card>
+            </Background>
+        </>
     )
 }

src/screens/salesorder/SalesOrderStack.tsx

@@ -3,10 +3,12 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { AuthContext } from '../login/AuthContext';
 import { SalesOrderFormScreen } from './SalesOrderFormScreen';
 import { SalesOrderListScreen } from './SalesOrderListScreen';
+import { ProductList } from './ProductList';
 
 export type RootStackParams = {
     SalesOrderListScreen: undefined,
-    SalesOrderFormScreen: { id: number }
+    SalesOrderFormScreen: { id: number },
+    ProductList: undefined
 }
 const Stack = createNativeStackNavigator<RootStackParams>();
 
@@ -23,6 +25,7 @@ export const SalesOrderStack = () => {
                 <>
                     <Stack.Screen name="SalesOrderListScreen" component={SalesOrderListScreen} />
                     <Stack.Screen name="SalesOrderFormScreen" component={SalesOrderFormScreen} />
+                    <Stack.Screen name="ProductList" component={ProductList} />
                 </>
             )}
         </Stack.Navigator>