ysimard
/
application-amicale
forked from vergnet/application-amicale
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

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

keplyx 4 years ago
parent
9f4018a0de
commit
e3bc2f7e8e
5 changed files with 87 additions and 51 deletions
Unified View Show Diff Stats
  1. 50
    39
      components/SearchHeader.js
  2. 32
    9
      screens/Proximo/ProximoMainScreen.js
  3. 1
    1
      screens/Proximo/ProximoSearchScreen.js
  4. 2
    1
      translations/en.json
  5. 2
    1
      translations/fr.json

+ 50
- 39
components/SearchHeader.js View File

1 
 // @flow
 1 
 // @flow
2
2
3 
 import * as React from "react";
 3 
 import * as React from "react";
4 
-import {Header} from "native-base";
4 
+import {Header, Item, Input, Left, Right, Body} from "native-base";
5 
 import {Platform, StyleSheet} from "react-native";
 5 
 import {Platform, StyleSheet} from "react-native";
6 
 import {getStatusBarHeight} from "react-native-status-bar-height";
 6 
 import {getStatusBarHeight} from "react-native-status-bar-height";
7 
 import Touchable from 'react-native-platform-touchable';
 7 
 import Touchable from 'react-native-platform-touchable';
8 
 import ThemeManager from "../utils/ThemeManager";
 8 
 import ThemeManager from "../utils/ThemeManager";
9 
 import CustomMaterialIcon from "./CustomMaterialIcon";
 9 
 import CustomMaterialIcon from "./CustomMaterialIcon";
10 
-import {TextInput} from "react-native-paper";
11 
 import i18n from "i18n-js";
 10 
 import i18n from "i18n-js";
12
11
13
12
38 
          */
 37 
          */
39 
         return (
 38 
         return (
40 
             <Header style={styles.header}>
 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 
                     style={{
 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 
             </Header>
 91 
             </Header>
81 
         );
 92 
         );
82 
     }
 93 
     }

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

2
2
3 
 import * as React from 'react';
 3 
 import * as React from 'react';
4 
 import {Platform, View} from 'react-native'
 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 
 import i18n from "i18n-js";
 6 
 import i18n from "i18n-js";
7 
 import CustomMaterialIcon from "../../components/CustomMaterialIcon";
 7 
 import CustomMaterialIcon from "../../components/CustomMaterialIcon";
8 
 import FetchedDataSectionList from "../../components/FetchedDataSectionList";
 8 
 import FetchedDataSectionList from "../../components/FetchedDataSectionList";
57 
         if (fetchedData.types !== undefined && fetchedData.articles !== undefined) {
 57 
         if (fetchedData.types !== undefined && fetchedData.articles !== undefined) {
58 
             let types = fetchedData.types;
 58 
             let types = fetchedData.types;
59 
             let articles = fetchedData.articles;
 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 
             for (let i = 0; i < types.length; i++) {
 68 
             for (let i = 0; i < types.length; i++) {
61 
                 finalData.push({
 69 
                 finalData.push({
62 
                     type: types[i],
 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 
         finalData.sort(ProximoMainScreen.sortFinalData);
 76 
         finalData.sort(ProximoMainScreen.sortFinalData);
73 
         return finalData;
 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 
     static sortFinalData(a: Object, b: Object) {
 99 
     static sortFinalData(a: Object, b: Object) {
77 
         return a.type.id - b.type.id;
 100 
         return a.type.id - b.type.id;
78 
     }
 101 
     }
81 
         return (
 104 
         return (
82 
             <View
 105 
             <View
83 
                 style={{
 106 
                 style={{
84 
-                    flexDirection:'row'
107 
+                    flexDirection: 'row'
85 
                 }}>
 108 
                 }}>
86 
                 <Touchable
 109 
                 <Touchable
87 
                     style={{padding: 6}}
 110 
                     style={{padding: 6}}
88 
                     onPress={() => this.props.navigation.navigate('ProximoSearchScreen', {data: this.state.fetchedData})}>
 111 
                     onPress={() => this.props.navigation.navigate('ProximoSearchScreen', {data: this.state.fetchedData})}>
89 
                     <CustomMaterialIcon
 112 
                     <CustomMaterialIcon
90 
                         color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
 113 
                         color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
91 
-                        icon="magnify" />
114 
+                        icon="magnify"/>
92 
                 </Touchable>
 115 
                 </Touchable>
93 
                 <Touchable
 116 
                 <Touchable
94 
                     style={{padding: 6}}
 117 
                     style={{padding: 6}}

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

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

+ 2
- 1
translations/en.json View File

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

+ 2
- 1
translations/fr.json View File

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

Write Preview
Loading…
Cancel
Save