From e3bc2f7e8e3a98b0bf31a542409918a726ce5603 Mon Sep 17 00:00:00 2001 From: keplyx Date: Thu, 14 Nov 2019 16:20:06 +0100 Subject: [PATCH] Added "all articles" category + use native base for search input --- components/SearchHeader.js | 89 +++++++++++++++----------- screens/Proximo/ProximoMainScreen.js | 41 +++++++++--- screens/Proximo/ProximoSearchScreen.js | 2 +- translations/en.json | 3 +- translations/fr.json | 3 +- 5 files changed, 87 insertions(+), 51 deletions(-) diff --git a/components/SearchHeader.js b/components/SearchHeader.js index eb4ce6b..2e393c3 100644 --- a/components/SearchHeader.js +++ b/components/SearchHeader.js @@ -1,13 +1,12 @@ // @flow import * as React from "react"; -import {Header} from "native-base"; +import {Header, Item, Input, Left, Right, Body} from "native-base"; import {Platform, StyleSheet} from "react-native"; import {getStatusBarHeight} from "react-native-status-bar-height"; import Touchable from 'react-native-platform-touchable'; import ThemeManager from "../utils/ThemeManager"; import CustomMaterialIcon from "./CustomMaterialIcon"; -import {TextInput} from "react-native-paper"; import i18n from "i18n-js"; @@ -38,45 +37,57 @@ export default class SearchHeader extends React.Component { */ return (
- + this.props.navigation.goBack()}> + + + + + this.props.navigation.goBack()}> - - + width: '100%', + marginBottom: 7 + }}> + + - this.setState({searchString: text})} - onSubmitEditing={text => { - this.setState({searchString: text}); - this.props.searchFunction(this.state.searchString); - }} - /> - - this.props.searchFunction(this.state.searchString)}> - - + {/* this.setState({searchString: text})}*/} + {/* onSubmitEditing={text => {*/} + {/* this.setState({searchString: text});*/} + {/* this.props.searchFunction(this.state.searchString);*/} + {/* }}*/} + {/*/>*/} + + + this.props.searchFunction(this.state.searchString)}> + + +
); } diff --git a/screens/Proximo/ProximoMainScreen.js b/screens/Proximo/ProximoMainScreen.js index a33ca01..586e7b9 100644 --- a/screens/Proximo/ProximoMainScreen.js +++ b/screens/Proximo/ProximoMainScreen.js @@ -2,7 +2,7 @@ import * as React from 'react'; import {Platform, View} from 'react-native' -import {Badge, Body, H2, Left, ListItem, Right, Text} from 'native-base'; +import {Badge, Body, Left, ListItem, Right, Text} from 'native-base'; import i18n from "i18n-js"; import CustomMaterialIcon from "../../components/CustomMaterialIcon"; import FetchedDataSectionList from "../../components/FetchedDataSectionList"; @@ -57,22 +57,45 @@ export default class ProximoMainScreen extends FetchedDataSectionList { if (fetchedData.types !== undefined && fetchedData.articles !== undefined) { let types = fetchedData.types; let articles = fetchedData.articles; + finalData.push({ + type: { + id: "0", + name: i18n.t('proximoScreen.all'), + icon: 'star' + }, + data: this.getAvailableArticles(articles, undefined) + }); for (let i = 0; i < types.length; i++) { finalData.push({ type: types[i], - data: [] + data: this.getAvailableArticles(articles, types[i]) }); - for (let k = 0; k < articles.length; k++) { - if (articles[k]['type'].includes(types[i].id) && parseInt(articles[k]['quantity']) > 0) { - finalData[i].data.push(articles[k]); - } - } + } } finalData.sort(ProximoMainScreen.sortFinalData); return finalData; } + /** + * Get an array of available articles (in stock) of the given type + * + * @param articles The list of all articles + * @param type The type of articles to find (undefined for any type) + * @return {Array} The array of available articles + */ + static getAvailableArticles(articles: Array, type: ?Object) { + let availableArticles = []; + for (let k = 0; k < articles.length; k++) { + if ((type !== undefined && type !== null && articles[k]['type'].includes(type['id']) + || type === undefined) + && parseInt(articles[k]['quantity']) > 0) { + availableArticles.push(articles[k]); + } + } + return availableArticles; + } + static sortFinalData(a: Object, b: Object) { return a.type.id - b.type.id; } @@ -81,14 +104,14 @@ export default class ProximoMainScreen extends FetchedDataSectionList { return ( this.props.navigation.navigate('ProximoSearchScreen', {data: this.state.fetchedData})}> + icon="magnify"/> { + state = { filteredData: this.props.navigation.getParam('data', {articles: [{name: "Error"}]}).articles, }; - /** * get color depending on quantity available * diff --git a/translations/en.json b/translations/en.json index b5a4bb7..cff5cba 100644 --- a/translations/en.json +++ b/translations/en.json @@ -130,7 +130,8 @@ "openingHours": "Openning Hours", "paymentMethods": "Payment Methods", "paymentMethodsDescription": "Cash or Lydia", - "search": "Search" + "search": "Search", + "all": "All" }, "proxiwashScreen": { "dryer": "Dryer", diff --git a/translations/fr.json b/translations/fr.json index 31efb95..78c47a9 100644 --- a/translations/fr.json +++ b/translations/fr.json @@ -130,7 +130,8 @@ "openingHours": "Horaires d'ouverture", "paymentMethods" : "Moyens de Paiement", "paymentMethodsDescription" : "Espèce ou Lydia", - "search": "Rechercher" + "search": "Rechercher", + "all": "Tout" }, "proxiwashScreen": { "dryer": "Sèche-Linge",