ebanutsya

src/screens/CommonPage/CommonPage.tsx

@@ -12,11 +12,11 @@ import Toast from "react-native-toast-message";
 import toastConfig from "../../components/Toast/Toast";
 import ScanModal from "../../components/SearchBar/ScanModal";
 import {closeScanModal, setScannedData} from "../../features/scanModal/scanModalSlice";
+import LoadingModal from "../../components/Modals/LoadingModal/LoadingModal";
 
 function CommonPage() {
     const dim = useSelector((state: RootState) => state.interface.dim);
     const isAuthorized = useSelector((state: RootState) => state.auth.isAuthorized);
-    const isScanModalVisible = useSelector((state: RootState) => state.scanModal.isVisible);
 
     const dispatch = useDispatch();
 
@@ -35,15 +35,9 @@ function CommonPage() {
         <View style={styles.main}>
             {isAuthorized ? <MainScreen/> : <LoginScreen/>}
             <View style={[styles.overlay, {display: dim ? 'flex' : 'none'}]}/>
+            <LoadingModal/>
+            <ScanModal/>
             <Toast config={toastConfig}/>
-            <ScanModal visible={isScanModalVisible}
-                       onCancelButtonPress={() => {
-                           dispatch(closeScanModal());
-                       }}
-                       onChanged={text => {
-                           dispatch(setScannedData(text));
-                           dispatch(closeScanModal());
-                       }}/>
         </View>
 
     )

src/screens/MainScreen/MainScreen.tsx

@@ -1,28 +1,32 @@
-import {StyleSheet, Text, View, ImageBackground, Linking, Image} from 'react-native';
+import {StyleSheet, Text, View, ImageBackground, Image} from 'react-native';
 import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
-import HomeScreen from "../HomeScreen/HomeScreen";
-import BoxScreen from "../BoxScreen/BoxScreen";
 import BarcodeScreen from "../BarcodeScreen/BarcodeScreen";
-import MoneyScreen from "../MoneyScreen/MoneyScreen";
-import ProfileScreen from "../ProfileScreen/ProfileScreen";
 import {DefaultTheme, NavigationContainer} from "@react-navigation/native";
 import moneyScreen from "../MoneyScreen/MoneyScreen";
 import profileScreen from "../ProfileScreen/ProfileScreen";
 import {responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
 import {RFPercentage} from "react-native-responsive-fontsize";
-import LoginScreen from "../LoginScreen/LoginScreen";
 import OrderScreen from "../OrderScreen/OrderScreen";
 import OrdersScreen from "../OrdersScreen/OrdersScreen";
 import {background} from "../../css/colors";
+import * as fs from "fs";
 
+export  type TabNavigatorParamList = {
+    Home: undefined;
+    Box: undefined;
+    Barcode: undefined;
+    Money: undefined;
+    Profile: undefined;
+};
 
 interface CustomTabProps {
     name: string;
     component: React.ComponentType<any>;
     icon: any;
+    hidden: boolean;
 }
 
-const CustomTab = ({name, component, icon}: CustomTabProps) => ({
+const CustomTab = ({name, component, icon, hidden}: CustomTabProps) => ({
     name,
     component,
     options: {
@@ -43,31 +47,36 @@ const CustomTab = ({name, component, icon}: CustomTabProps) => ({
 function MainScreen() {
     const Tab = createBottomTabNavigator();
 
-    const tabScreens = [
+    const tabScreens: CustomTabProps[] = [
         {
             name: "Home",
             component: OrderScreen,
-            icon: require('assets/icons/home.png')
+            icon: require('assets/icons/home.png'),
+            hidden: false
         },
         {
             name: "Box",
             component: OrdersScreen,
-            icon: require('assets/icons/box.png')
+            icon: require('assets/icons/box.png'),
+            hidden: false
         },
         {
             name: "Barcode",
             component: BarcodeScreen,
-            icon: require('assets/icons/barcode.png')
+            icon: require('assets/icons/barcode.png'),
+            hidden: false
         },
         {
             name: "Money",
             component: moneyScreen,
-            icon: require('assets/icons/money.png')
+            icon: require('assets/icons/money.png'),
+            hidden: false
         },
         {
             name: "Profile",
             component: profileScreen,
-            icon: require('assets/icons/profile.png')
+            icon: require('assets/icons/profile.png'),
+            hidden: false
         }
     ];
 
@@ -90,6 +99,7 @@ function MainScreen() {
                         name: tabScreen.name,
                         component: tabScreen.component,
                         icon: tabScreen.icon,
+                        hidden: tabScreen.hidden
                     })}/>
                 )}
             </Tab.Navigator>

src/screens/OrderScreen/OrderScreen.tsx

@@ -5,108 +5,151 @@ import {RFPercentage} from "react-native-responsive-fontsize";
 import DTitle from "../../components/DTitle/DTitle";
 import BasicButton from "../../components/BasicButton/BasicButton";
 import Hyperlink from "../../components/Hyperlink/Hyperlink";
-import React, {useState} from "react";
+import React, {useEffect, useState} from "react";
 import userApi from "../../api/userApi";
-
-type ArticleTextProps = {
-    article: number
-}
+import {StatusBar} from "expo-status-bar";
+import * as Progress from 'react-native-progress';
+import {useDispatch, useSelector} from "react-redux";
+import {RootState} from "../../redux/store";
+import {closeLoadingModal, openLoadingModal, setLoadingText} from "../../features/loadingModal/loadingModalSlice";
+import {useNavigation} from "@react-navigation/native";
+import printingApi from "../../api/printingApi";
+import PrintingService from "../../utils/PrintingService";
+import OrderProductsList from "../../components/OrderCard/OrderProductsList";
+import {setOrder} from "../../features/assembly/assemblySlice";
 
 
 function OrderScreen() {
 
-    const [order, setOrder] = useState({
-        article: 183658,
-        imageUrl: "https://421421.selcdn.ru/denco/996956/thumbzoom/h0b41036e5dc84a88b3dd344a46ab33edt.jpg-640x640.jpg",
-        orderNumber: "93757290-0104-7",
-        productName: "Фигурки животных «Собачки» 258, 5-7 см., статичные / 12 шт.",
-        supplierName: "simaland",
-        marketplaceName: "Wildberries РЕНТА",
-        sellerName: "DENCO",
-        assembled: false
-    });
+    const order = useSelector((state: RootState) => state.assembly.order);
+    if (!order) return (
+        <View style={noOrderStyles.container}>
+            <DText style={noOrderStyles.title}>Заказ не выбран!</DText>
+            <View style={noOrderStyles.buttonWrapper}>
 
+                <BasicButton onPress={() => {
+                    // @ts-ignore
+                    navigator.navigate("Box");
+                }} label={"На главную"}/>
+            </View>
+
+        </View>
+    )
+    const dispatch = useDispatch();
+    const assembled = useSelector((state: RootState) => state.assembly.assembled);
+    const shipped = useSelector((state: RootState) => state.assembly.shipped);
+    const navigator = useNavigation();
+    const [selectedProduct, setSelectedProduct] = useState(order.products[0]);
     return (
         <View style={styles.container}>
-            <View style={styles.dataContainer}>
+            <View style={styles.productsContainer}>
+                <View style={styles.orderProductsListWrapper}>
+                    <OrderProductsList products={order.products} onSelected={() => {
+                    }}/>
+                </View>
                 <View style={styles.imageWrapper}>
-                    <Image source={{uri: order.imageUrl}} style={styles.image}/>
-                </View>
-                <View style={styles.contentContainer}>
-                    <View style={styles.contentWrapper}>
-                        <DTitle style={styles.contentTitle}>{order.orderNumber}</DTitle>
-                        <Hyperlink url={`https://denco.store/manager/?a=resource/update&id=${order.article}`}>
-                            <DText style={styles.articleText}>Артикул: {order.article}</DText>
-                        </Hyperlink>
-                        <DText>Товар: {order.productName}</DText>
-                        <DText>Поставщик: {order.supplierName}</DText>
-                        <DText>Селлер: {order.sellerName}</DText>
-                        <DText>Маркетплейс: {order.marketplaceName}</DText>
-                    </View>
+                    <Image style={styles.image} source={{uri: selectedProduct.imageUrl}}/>
+                </View>
+            </View>
+            <View style={styles.contentContainer}>
+                <View style={styles.dataContainer}>
+                    <DTitle style={styles.contentTitle}>Заказ</DTitle>
+                    <DText>Номер заказа: {order.orderNumber}</DText>
+                    <DText>Маркетплейс: {order.marketplaceName}</DText>
+                    <DText>Селлер: {order.sellerName}</DText>
+                    <DText>{}</DText>
+                    <DTitle style={styles.contentTitle}>Товар</DTitle>
+                    <DText>Артикул DENCO: {selectedProduct.dencoArticle}</DText>
+                    <DText>Поставщик: {selectedProduct.supplierName}</DText>
+                    <DText>Номер товара: {0}</DText>
+                </View>
+                <View style={styles.buttonsContainer}>
+                    <BasicButton label={"Отметить как собранный"}
+                                 disabled={!selectedProduct.assembled}
+                                 onPress={()=>{
+                                     setOrder(oldValue => ({ ...oldValue }));
+                                 }}
+                    />
+                    <BasicButton label={"Печать этикетки"}
+                                 disabled={Boolean(order.products.find(product => product.assembled))}/>
                 </View>
             </View>
-            <View style={styles.buttonsContainer}>
-                <View style={styles.buttonsWrapper}>
-                    {!order.assembled &&
-                        <BasicButton label={"Отметить как собранный"} onPress={() => {
-                            userApi.test()
-                            // setOrder({...order, assembled: true})
-                            // console.log(order);
-                        }}/>
-                    }
 
-                    {order.assembled &&
-                        <BasicButton label={"Печать этикетки"}/>
-                    }
-                    {/*<BasicButton label={"Следующий товар"}/>*/}
-                </View>
-            </View>
         </View>
     )
 }
 
+const noOrderStyles = StyleSheet.create({
+    container: {
+        justifyContent: "center",
+        flex: 1,
+        rowGap: responsiveHeight(5)
+    },
+    title: {
+        textAlign: "center",
+        fontSize: responsiveWidth(5)
+    },
+    buttonWrapper: {
+        paddingHorizontal: responsiveWidth(20)
+    }
+})
 const styles = StyleSheet.create({
+    orderProductsListWrapper: {
+        flex: 0.5,
+        backgroundColor: "white",
+        borderRadius: RFPercentage(3),
+        padding: RFPercentage(2),
+    },
+    buttonWrapper: {
+        flex: 1,
+        backgroundColor: "red"
+    },
+    dataContainer: {
+        backgroundColor: "white",
+        padding: RFPercentage(2),
+        flex: 0.5,
+        borderRadius: RFPercentage(3),
+    },
+    buttonsContainer: {
+        backgroundColor: "white",
+        padding: RFPercentage(2),
+        flex: 0.5,
+        borderRadius: RFPercentage(3),
+        rowGap: responsiveHeight(2)
+    },
+    contentContainer: {
+        flex: 1,
+        borderRadius: RFPercentage(3),
+        flexDirection: "row",
+        columnGap: responsiveWidth(3),
+    },
     container: {
         width: "100%",
         height: "100%",
         display: "flex",
-        flex: 1,
-        paddingHorizontal: responsiveWidth(5)
-
+        paddingHorizontal: responsiveWidth(5),
+        paddingBottom: responsiveHeight(10),
+        rowGap: responsiveHeight(2)
     },
-    dataContainer: {
-        // backgroundColor: "black",
+    productsContainer: {
         display: "flex",
         flexDirection: "row",
-        columnGap: responsiveWidth(3)
-    },
-    buttonsContainer: {
-        // backgroundColor: "blue",
-        flex: 1,
-        display: "flex",
-        justifyContent: "center",
-        paddingHorizontal: responsiveWidth(10)
+        columnGap: responsiveWidth(3),
+        height: responsiveHeight(30)
     },
+
     buttonsWrapper: {
-        // backgroundColor: "red",
         rowGap: responsiveHeight(3)
     },
     imageWrapper: {
-        width: responsiveWidth(40),
-        height: responsiveHeight(40),
-        // height: responsiveHeight(40),
-        // backgroundColor: "red",
+        flex: 0.5,
+        backgroundColor: "white",
+        padding: RFPercentage(2),
+        borderRadius: RFPercentage(3)
     },
     image: {
         flex: 1,
-        borderRadius: RFPercentage(3)
-    },
-    contentContainer: {
-        padding: RFPercentage(2),
-        backgroundColor: "white",
-        borderRadius: RFPercentage(3),
-        flex: 1
-
+        resizeMode: "contain"
     },
     contentWrapper: {
         display: "flex",

src/screens/OrdersScreen/OrdersScreen.tsx

@@ -23,10 +23,15 @@ import sortingModal from "../../components/Modals/SortingModal/SortingModal";
 import flashListSeparator from "../../components/FlashListSeparator/FlashListSeparator";
 import {RootState} from "../../redux/store";
 import ordersApi from "../../api/ordersApi";
+import {setOrder} from "../../features/assembly/assemblySlice";
+import {NavigationProp, useNavigation} from "@react-navigation/native";
+import {TabNavigatorParamList} from "../MainScreen/MainScreen";
 
 function OrdersScreen() {
 
     const dispatch = useDispatch();
+    const navigator = useNavigation<NavigationProp<TabNavigatorParamList, 'Home'>>();
+
     const [orders, setOrders] = useState<Order[]>([]);
     const sortingModalRef = useRef<SortingModalHandles | null>(null);
     const defaultSortingValue = 'createdOnAsc';
@@ -56,8 +61,9 @@ function OrdersScreen() {
                     data={orders}
                     keyExtractor={(item: Order) => item.orderNumber.toString()}
                     renderItem={({item}) =>
-                        <OrderCard order={item} onPress={() => {
-
+                        <OrderCard order={item} onSelect={(order) => {
+                            dispatch(setOrder(order));
+                            navigator.navigate("Home");
                         }}/>}
                     showsHorizontalScrollIndicator={false}
                     showsVerticalScrollIndicator={true}
@@ -70,7 +76,6 @@ function OrdersScreen() {
                 />
                 <SortingModal onChange={setSortingValue}
                               onClose={() => {
-                                  console.log("Closed")
                               }}
                               ref={sortingModalRef}
                               elements={sortingModalElements}