ebanutsya

2023-10-28 08:08:37 +03:00
parent 37d3fb5a78
commit 0bc1835405
19 changed files with 435 additions and 180 deletions
--- a/src/components/BasicButton/BasicButton.tsx
+++ b/src/components/BasicButton/BasicButton.tsx
@@ -10,15 +10,16 @@ type Props = {
    containerStyle?: StyleProp<ViewStyle>;
    isUnset?: boolean;
    onPress?: (event: GestureResponderEvent) => void
+    disabled?: boolean
 };

-const BasicButton: FC<Props> = ({label, onPress, containerStyle, style, isUnset = false}) => {
+const BasicButton: FC<Props> = ({label, onPress, containerStyle, style, isUnset = false, disabled = false}) => {
    return (
-        <TouchableOpacity onPress={onPress}>
+        <TouchableOpacity style={{flex: 1}} disabled={disabled} onPress={onPress}>

-                <View style={[styles.container, style]}>
-                    <DText style={styles.text}>{label}</DText>
-                </View>
+            <View style={[styles.container, style, disabled ? {backgroundColor: "#A0A0A0"} : {}]}>
+                <DText style={styles.text}>{label}</DText>
+            </View>

        </TouchableOpacity>
    );
@@ -33,11 +34,13 @@ const styles = StyleSheet.create({
        backgroundColor: '#2478F8',
        borderRadius: responsiveWidth(1),
        padding: responsiveWidth(2),
+        flex: 1
    },
    text: {
        color: "white",
        fontSize: RFPercentage(2),
        textAlignVertical: "center",
+        textAlign: "center"
    }
 });

--- a/src/components/Modals/LoadingModal/LoadingModal.tsx
+++ b/src/components/Modals/LoadingModal/LoadingModal.tsx
@@ -0,0 +1,55 @@
+import {FC} from "react";
+import {Props} from "react-native-paper";
+import {StyleSheet, View} from "react-native";
+import {BottomSheetModalProvider} from "@gorhom/bottom-sheet";
+import {useSelector} from "react-redux";
+import {RootState} from "../../../redux/store";
+import Modal from "react-native-modal";
+import {background, blue} from "../../../css/colors";
+import {responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
+import * as Progress from 'react-native-progress';
+import DTitle from "../../DTitle/DTitle";
+import {RFPercentage} from "react-native-responsive-fontsize";
+
+const LoadingModal: FC = () => {
+    const isVisible = useSelector((state: RootState) => state.loadingModal.isVisible);
+    const loadingText = useSelector((state: RootState) => state.loadingModal.loadingText);
+
+    return (
+        <Modal isVisible={isVisible}>
+            <View style={styles.container}>
+                <DTitle style={{textAlign: "center"}}>{loadingText}</DTitle>
+                <View style={styles.progressBarWrapper}>
+                    <Progress.Circle size={RFPercentage(20)}
+                                     color={blue}
+                                     indeterminate={true}
+                                     style={styles.progressBar}
+                                     borderWidth={responsiveWidth(1)}
+                    />
+                </View>
+
+            </View>
+        </Modal>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        alignSelf: "center",
+        backgroundColor: background,
+        width: responsiveWidth(80),
+        height: responsiveHeight(50),
+        borderRadius: responsiveWidth(2),
+        paddingHorizontal: responsiveWidth(20),
+        paddingVertical: responsiveHeight(10),
+        justifyContent: "center",
+        rowGap: responsiveHeight(5)
+    },
+    progressBarWrapper: {
+        alignItems: "center"
+    },
+    progressBar: {
+        justifyContent: "center"
+    }
+})
+export default LoadingModal;
--- a/src/components/Modals/SelectProductModal/SelectProductModal.tsx
+++ b/src/components/Modals/SelectProductModal/SelectProductModal.tsx
@@ -42,7 +42,7 @@ const SelectProductModal: FC<Props> = ({visible, products, onSelected}) => {
 const styles = StyleSheet.create({
    container: {
        backgroundColor: background,
-        borderRadius: responsiveWidth(1),
+        borderRadius: responsiveWidth(2),
        paddingHorizontal: responsiveWidth(5),
        paddingVertical: responsiveHeight(5),
        rowGap: responsiveHeight(3),
--- a/src/components/OrderCard/OrderCard.tsx
+++ b/src/components/OrderCard/OrderCard.tsx
@@ -5,42 +5,36 @@ import DText from "../DText/DText";
 import {responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
 import DTitle from "../DTitle/DTitle";
 import {Order} from "../../types/order";
+import OrderProductsList from "./OrderProductsList";

 type Props = {
    onPress?: (event: GestureResponderEvent) => void
+    onSelect: (order: Order) => void
    order: Order

 }
-const OrderCard: FC<Props> = React.memo(({onPress, order}) => {
-
+const OrderCard: FC<Props> = React.memo(({onPress, onSelect, order}) => {

    return (
        <TouchableOpacity onPress={() => {
-            console.log("pressed11")
+            onSelect(order);
        }}>
-            <View style={styles.container}>
-                <View style={styles.imageWrapper}>
-                    <Image style={styles.image} source={{uri: order.imageUrl}}/>
-                </View>
-                <View style={styles.description}>
-                    <View style={styles.descriptionContent}>
-                        <View style={styles.title}>
+            <View style={styles.container}><View style={styles.description}>
+                <View style={styles.descriptionContent}>
+                    <View style={styles.title}>

-                            <DTitle>{order.orderNumber}</DTitle>
-                            <Image source={require('assets/icons/marketplaces/ozon.png')} style={styles.titleImage}/>
-                        </View>
-                        <DText>Количество: 5</DText>
-                        <DText>Поставщик: {order.supplierName}</DText>
-                        <DText>Селлер: {order.sellerName}</DText>
-                        <DText>Цвет: ГОЛУБОЙ</DText>
-                    </View>
-
-                    <View style={styles.descriptionStatus}>
-                        <DText>
-                            Ожидает сборки
-                        </DText>
+                        <DTitle>{order.orderNumber}</DTitle>
+                        <Image source={require('assets/icons/marketplaces/ozon.png')} style={styles.titleImage}/>
                    </View>
+                    <DText>Селлер: {order.sellerName}</DText>
+                    <DText>Маркетплейс: {order.marketplaceName}</DText>
                </View>
+                <View style={styles.descriptionStatus}>
+                    <DText>
+                        Ожидает сборки
+                    </DText>
+                </View>
+            </View>

            </View>
        </TouchableOpacity>
@@ -52,7 +46,7 @@ const styles = StyleSheet.create({
        backgroundColor: "white",
        display: "flex",
        borderRadius: RFPercentage(3),
-        height: responsiveHeight(20),
+        height: responsiveHeight(15),
        flexDirection: "row",
        padding: RFPercentage(2),
        flex: 1
--- a/src/components/OrderCard/OrderProductsList.tsx
+++ b/src/components/OrderCard/OrderProductsList.tsx
@@ -0,0 +1,68 @@
+import {FC} from "react";
+import {FlatList, StyleSheet, View, Image, TouchableOpacity} from "react-native";
+import {OrderProduct} from "../../types/order";
+import DTitle from "../DTitle/DTitle";
+import DText from "../DText/DText";
+import {responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
+import {RFPercentage} from "react-native-responsive-fontsize";
+import {background} from "../../css/colors";
+
+type ListProps = {
+    products: OrderProduct[];
+    onSelected: (product: OrderProduct) => void;
+}
+type CardProps = {
+    product: OrderProduct;
+    onPress: (product: OrderProduct) => void;
+    id: number;
+}
+const OrderProductCard: FC<CardProps> = ({product, onPress, id}) => {
+    return (
+        <TouchableOpacity onPress={() => onPress(product)}>
+            <View style={cardStyles.container}>
+                <View style={cardStyles.content}>
+                    <DText>{id + 1}) {product.productName}</DText>
+                </View>
+            </View>
+        </TouchableOpacity>
+
+    )
+}
+const cardStyles = StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        backgroundColor: background,
+        borderRadius: RFPercentage(1),
+        padding: RFPercentage(1)
+    },
+    content:{
+
+    }
+})
+const OrderProductsList: FC<ListProps> = ({products, onSelected}) => {
+    return (
+
+        <View style={listStyles.container}>
+            <DTitle style={listStyles.title}>Товары</DTitle>
+            <FlatList data={products}
+                      contentContainerStyle={{rowGap: responsiveHeight(1)}}
+                      renderItem={(item) => <OrderProductCard id={item.index} product={item.item}
+                                                              onPress={onSelected}/>}/>
+        </View>
+
+    )
+}
+
+
+const listStyles = StyleSheet.create({
+    container: {
+        backgroundColor: "white",
+        flex: 1
+    },
+    title: {
+        marginBottom: responsiveHeight(2),
+        textAlign: "center"
+    }
+})
+
+export default OrderProductsList;
--- a/src/components/SearchBar/ScanModal.tsx
+++ b/src/components/SearchBar/ScanModal.tsx
@@ -5,15 +5,14 @@ import {RFPercentage} from "react-native-responsive-fontsize";
 import Modal from "react-native-modal";
 import BasicButton from "../BasicButton/BasicButton";
 import DText from "../DText/DText";
-import {useDispatch} from "react-redux";
+import {useDispatch, useSelector} from "react-redux";
+import {RootState} from "../../redux/store";
+import {closeScanModal, setScannedData} from "../../features/scanModal/scanModalSlice";

-type Props = {
-    visible: boolean
-    onCancelButtonPress?: (event: GestureResponderEvent) => void,
-    onChanged: (text: string) => void
-}
-const ScanModal: FC<Props> = ({visible, onCancelButtonPress, onChanged}) => {
+const ScanModal: FC = () => {
    const inputRef = useRef<TextInput | null>(null);
+    const visible = useSelector((state: RootState) => state.scanModal.isVisible);
+    const dispatch = useDispatch();
    useEffect(() => {
        if (visible) inputRef.current?.focus();
    }, [visible]);
@@ -22,10 +21,13 @@ const ScanModal: FC<Props> = ({visible, onCancelButtonPress, onChanged}) => {
        <Modal isVisible={visible}>
            <View style={styles.container}>
                <DText style={styles.text}>Наведите сканер на штрихкод товара или заказа</DText>
-                <BasicButton onPress={onCancelButtonPress} style={styles.cancelButton} label={"Отмена"}/>
+                <BasicButton onPress={() => {
+                    dispatch(closeScanModal());
+                }} style={styles.cancelButton} label={"Отмена"}/>
                <TextInput
                    onEndEditing={(e) => {
-                        onChanged(e.nativeEvent.text);
+                        dispatch(setScannedData(e.nativeEvent.text));
+                        dispatch(closeScanModal())
                    }}
                    style={styles.pseudoInput}
                    ref={inputRef}
@@ -39,7 +41,7 @@ const ScanModal: FC<Props> = ({visible, onCancelButtonPress, onChanged}) => {

 const styles = StyleSheet.create({
    container: {
-        borderRadius: responsiveWidth(1),
+        borderRadius: responsiveWidth(2),
        backgroundColor: "white",
        display: "flex",
        flexDirection: "column",
--- a/src/components/SearchBar/SearchBar.tsx
+++ b/src/components/SearchBar/SearchBar.tsx
@@ -28,7 +28,7 @@ const SearchBar: FC<Props> = ({onSearch, onSupplierProductSelected}) => {
        barcodeApi.searchProducts(scannedData).then(setProducts);
    }, [scannedData]);

-    const selectProductModalVisible = products.length > 0;
+    const selectProductModalVisible = products.length > 0 && false;
    return (
        <View style={styles.container}>

@@ -74,8 +74,6 @@ const styles = StyleSheet.create({
        borderRadius: 0,
        borderTopRightRadius: responsiveWidth(1),
        borderBottomRightRadius: responsiveWidth(1),
-        width: responsiveWidth(25),
-        flex: 1
    },
    scanImageWrapper: {
        paddingHorizontal: responsiveWidth(1),
@@ -87,7 +85,7 @@ const styles = StyleSheet.create({
    },
    textInput: {
        height: responsiveHeight(height),
-        flex: 1,
+        flex: 2,
        borderWidth: 1,
        borderColor: "#A5A5A5",
        borderTopLeftRadius: responsiveWidth(1),