Browse Source

Added "all articles" category + use native base for search input

keplyx 4 years ago
parent
commit
e3bc2f7e8e

+ 50
- 39
components/SearchHeader.js View File

@@ -1,13 +1,12 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from "react";
4
-import {Header} from "native-base";
4
+import {Header, Item, Input, Left, Right, Body} from "native-base";
5 5
 import {Platform, StyleSheet} from "react-native";
6 6
 import {getStatusBarHeight} from "react-native-status-bar-height";
7 7
 import Touchable from 'react-native-platform-touchable';
8 8
 import ThemeManager from "../utils/ThemeManager";
9 9
 import CustomMaterialIcon from "./CustomMaterialIcon";
10
-import {TextInput} from "react-native-paper";
11 10
 import i18n from "i18n-js";
12 11
 
13 12
 
@@ -38,45 +37,57 @@ export default class SearchHeader extends React.Component<Props, State> {
38 37
          */
39 38
         return (
40 39
             <Header style={styles.header}>
41
-                <Touchable
40
+                <Left>
41
+                    <Touchable
42
+                        style={{
43
+                            alignItems: "center",
44
+                            flexDirection: "row",
45
+                            padding: 7,
46
+                        }}
47
+                        onPress={() => this.props.navigation.goBack()}>
48
+                        <CustomMaterialIcon
49
+                            color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
50
+                            icon="arrow-left"/>
51
+                    </Touchable>
52
+                </Left>
53
+                <Body>
54
+                    <Item
42 55
                     style={{
43
-                        alignItems: "center",
44
-                        flexDirection: "row",
45
-                        padding: 7,
46
-                    }}
47
-                    onPress={() => this.props.navigation.goBack()}>
48
-                    <CustomMaterialIcon
49
-                        color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
50
-                        icon="arrow-left" />
51
-                </Touchable>
56
+                        width: '100%',
57
+                        marginBottom: 7
58
+                    }}>
59
+                        <Input placeholder={i18n.t('proximoScreen.search')} />
60
+                    </Item>
52 61
 
53
-                <TextInput
54
-                    style={{
55
-                        flex: 1,
56
-                        backgroundColor: "#CA535D",
57
-                        margin: 7,
58
-                    }}
59
-                    underlineColorAndroid={"transparent"}
60
-                    placeHolder={i18n.t("proximoScreen.search")}
61
-                    autoFocus={true}
62
-                    onChangeText={text => this.setState({searchString: text})}
63
-                    onSubmitEditing={text => {
64
-                        this.setState({searchString: text});
65
-                        this.props.searchFunction(this.state.searchString);
66
-                    }}
67
-                />
68
-
69
-                <Touchable
70
-                    style={{
71
-                        alignItems: "center",
72
-                        flexDirection: "row",
73
-                        padding: 7,
74
-                    }}
75
-                    onPress={() => this.props.searchFunction(this.state.searchString)}>
76
-                    <CustomMaterialIcon
77
-                        color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
78
-                        icon="magnify"/>
79
-                </Touchable>
62
+                    {/*<TextInput*/}
63
+                    {/*    style={{*/}
64
+                    {/*        flex: 1,*/}
65
+                    {/*        backgroundColor: "#CA535D",*/}
66
+                    {/*        margin: 7,*/}
67
+                    {/*    }}*/}
68
+                    {/*    underlineColorAndroid={"transparent"}*/}
69
+                    {/*    placeHolder={i18n.t("proximoScreen.search")}*/}
70
+                    {/*    autoFocus={true}*/}
71
+                    {/*    onChangeText={text => this.setState({searchString: text})}*/}
72
+                    {/*    onSubmitEditing={text => {*/}
73
+                    {/*        this.setState({searchString: text});*/}
74
+                    {/*        this.props.searchFunction(this.state.searchString);*/}
75
+                    {/*    }}*/}
76
+                    {/*/>*/}
77
+                </Body>
78
+                <Right>
79
+                    <Touchable
80
+                        style={{
81
+                            alignItems: "center",
82
+                            flexDirection: "row",
83
+                            padding: 7,
84
+                        }}
85
+                        onPress={() => this.props.searchFunction(this.state.searchString)}>
86
+                        <CustomMaterialIcon
87
+                            color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
88
+                            icon="magnify"/>
89
+                    </Touchable>
90
+                </Right>
80 91
             </Header>
81 92
         );
82 93
     }

+ 32
- 9
screens/Proximo/ProximoMainScreen.js View File

@@ -2,7 +2,7 @@
2 2
 
3 3
 import * as React from 'react';
4 4
 import {Platform, View} from 'react-native'
5
-import {Badge, Body, H2, Left, ListItem, Right, Text} from 'native-base';
5
+import {Badge, Body, Left, ListItem, Right, Text} from 'native-base';
6 6
 import i18n from "i18n-js";
7 7
 import CustomMaterialIcon from "../../components/CustomMaterialIcon";
8 8
 import FetchedDataSectionList from "../../components/FetchedDataSectionList";
@@ -57,22 +57,45 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
57 57
         if (fetchedData.types !== undefined && fetchedData.articles !== undefined) {
58 58
             let types = fetchedData.types;
59 59
             let articles = fetchedData.articles;
60
+            finalData.push({
61
+                type: {
62
+                    id: "0",
63
+                    name: i18n.t('proximoScreen.all'),
64
+                    icon: 'star'
65
+                },
66
+                data: this.getAvailableArticles(articles, undefined)
67
+            });
60 68
             for (let i = 0; i < types.length; i++) {
61 69
                 finalData.push({
62 70
                     type: types[i],
63
-                    data: []
71
+                    data: this.getAvailableArticles(articles, types[i])
64 72
                 });
65
-                for (let k = 0; k < articles.length; k++) {
66
-                    if (articles[k]['type'].includes(types[i].id) && parseInt(articles[k]['quantity']) > 0) {
67
-                        finalData[i].data.push(articles[k]);
68
-                    }
69
-                }
73
+
70 74
             }
71 75
         }
72 76
         finalData.sort(ProximoMainScreen.sortFinalData);
73 77
         return finalData;
74 78
     }
75 79
 
80
+    /**
81
+     * Get an array of available articles (in stock) of the given type
82
+     *
83
+     * @param articles The list of all articles
84
+     * @param type The type of articles to find (undefined for any type)
85
+     * @return {Array} The array of available articles
86
+     */
87
+    static getAvailableArticles(articles: Array<Object>, type: ?Object) {
88
+        let availableArticles = [];
89
+        for (let k = 0; k < articles.length; k++) {
90
+            if ((type !== undefined && type !== null && articles[k]['type'].includes(type['id'])
91
+                || type === undefined)
92
+                && parseInt(articles[k]['quantity']) > 0) {
93
+                availableArticles.push(articles[k]);
94
+            }
95
+        }
96
+        return availableArticles;
97
+    }
98
+
76 99
     static sortFinalData(a: Object, b: Object) {
77 100
         return a.type.id - b.type.id;
78 101
     }
@@ -81,14 +104,14 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
81 104
         return (
82 105
             <View
83 106
                 style={{
84
-                    flexDirection:'row'
107
+                    flexDirection: 'row'
85 108
                 }}>
86 109
                 <Touchable
87 110
                     style={{padding: 6}}
88 111
                     onPress={() => this.props.navigation.navigate('ProximoSearchScreen', {data: this.state.fetchedData})}>
89 112
                     <CustomMaterialIcon
90 113
                         color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
91
-                        icon="magnify" />
114
+                        icon="magnify"/>
92 115
                 </Touchable>
93 116
                 <Touchable
94 117
                     style={{padding: 6}}

+ 1
- 1
screens/Proximo/ProximoSearchScreen.js View File

@@ -19,11 +19,11 @@ type State = {
19 19
  * Class defining proximo's article list of a certain category.
20 20
  */
21 21
 export default class ProximoSearchScreen extends React.Component<Props, State> {
22
+
22 23
     state = {
23 24
         filteredData: this.props.navigation.getParam('data', {articles: [{name: "Error"}]}).articles,
24 25
     };
25 26
 
26
-
27 27
     /**
28 28
      * get color depending on quantity available
29 29
      *

+ 2
- 1
translations/en.json View File

@@ -130,7 +130,8 @@
130 130
     "openingHours": "Openning Hours",
131 131
     "paymentMethods": "Payment Methods",
132 132
     "paymentMethodsDescription": "Cash or Lydia",
133
-    "search": "Search"
133
+    "search": "Search",
134
+    "all": "All"
134 135
   },
135 136
   "proxiwashScreen": {
136 137
     "dryer": "Dryer",

+ 2
- 1
translations/fr.json View File

@@ -130,7 +130,8 @@
130 130
     "openingHours": "Horaires d'ouverture",
131 131
     "paymentMethods" : "Moyens de Paiement",
132 132
     "paymentMethodsDescription" : "Espèce ou Lydia",
133
-    "search": "Rechercher"
133
+    "search": "Rechercher",
134
+    "all": "Tout"
134 135
   },
135 136
   "proxiwashScreen": {
136 137
     "dryer": "Sèche-Linge",

Loading…
Cancel
Save