inicio de relaciones onetomany

2 years ago · d220d4b2fd
parent 0b71078069
commit d220d4b2fd
10 changed files with 230 additions and 75 deletions
--- a/assets/apreton-de-manos.png
+++ b/assets/apreton-de-manos.png
--- a/assets/logo.png
+++ b/assets/logo.png
--- a/assets/tienda-alt.png
+++ b/assets/tienda-alt.png
--- a/src/components/cardList/CardList.tsx
+++ b/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 (
-   <>
-   
-    <FlatList
-          
-        data={entities}
-        renderItem={({item}) => 
-        <CardItem>
-            <TouchableOpacity
-                onPress={()=>
-                    navitation
-                    .navigate(screenName , {id:item['id']} )}
-            >
-                <Text>
-                    {item[columnDisplay]}
-                </Text>
-            </TouchableOpacity>
-        </CardItem>
-        }
-        keyExtractor={item => item["id"]}
-      />
-    
-   
-   </>
- )
+
+    return (
+        <>
+
+            <FlatList
+
+                data={entities}
+                renderItem={({ item }) =>
+
+                    <TouchableOpacity
+                        onPress={() =>
+                            navitation
+                                .navigate(screenName, { id: item['id'] })}
+                    >
+                        <CardItem>
+                            <Text>
+                                {item[columnDisplay]}
+                            </Text>
+                        </CardItem>
+
+                    </TouchableOpacity>
+
+                }
+                keyExtractor={item => item["id"]}
+            />
+
+
+        </>
+    )
 }
--- a/src/components/cardList/ProductCardList.tsx
+++ b/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"]}
+            />
+
+
+        </>
+    )
+}
--- a/src/screens/product/ProductFormScreen.tsx
+++ b/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} />
--- a/src/screens/product/ProductListScreen.tsx
+++ b/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>
        }
--- a/src/screens/salesorder/ProductList.tsx
+++ b/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>
+    )
+}
--- a/src/screens/salesorder/SalesOrderFormScreen.tsx
+++ b/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: {
-        id: 0,
-        numero: '',
-        cliente: { id: 0 }
-    }
+        defaultValues: {
+            id: 0,
+            numero: '',
+            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")
-        return;
-    const { data, error } = await useFetchWithAuth("pedido/" + id);
+        if (!id || id == "0")
+            return;
+        const { data, error } = await useFetchWithAuth("pedido/" + id);

-    if (!error) {
+        if (!error) {

-        if (data.id != 0) {
-        setValue("id", data['id'])
-        setValue("numero", data['numero'])
-        setValue("cliente", data['cliente'])
-        }
+            if (data.id != 0) {
+                setValue("id", data['id'])
+                setValue("numero", data['numero'])
+                setValue("cliente", data['cliente'])
+                setValue("detalle", data['detalle'])
+            }

-    } else {
-        console.log(error)
-    }
+        } else {
+            console.log(error)
+        }
    }


    useEffect(() => {
-    getInitData();
+        getInitData();
    }, [])

    const onSubmit = async (entity: any) => {
-    try {
-        let endpoint = "pedido";
-        entity['cliente'] = { id: entity['cliente'].id }
-        const { data, error } = await saveWithAuth(endpoint, id, entity);
-        if (error) {
-        console.log(error);
-        } else {
-        navigation.navigate("SalesOrderListScreen")
+        try {
+            let endpoint = "pedido";
+            entity['cliente'] = { id: entity['cliente'].id }
+            console.log("Entidad:")
+            console.log(entity)
+            const { data, error } = await saveWithAuth(endpoint, id, entity);
+            if (error) {
+                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 >
-        <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} />
-            <Button
-            title='Guardar'
-            onPress={handleSubmit(onSubmit)}
-            />
-        </Card>
-        </Background>
-    </>
+        <>
+            <Background >
+                <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} />
+                    <Button
+                        title='Agrega produtos'
+                        additionalStyle='mb-4'
+                        onPress={() => navigation.navigate("ProductListScreen" as never)} />
+                    <Button
+                        title='Guardar'
+                        onPress={handleSubmit(onSubmit)}
+                    />
+                </Card>
+            </Background>
+        </>
    )
 }
--- a/src/screens/salesorder/SalesOrderStack.tsx
+++ b/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>