vergnet/application-amicale
5
5
Fork 5
Code Issues Pull requests Releases Wiki Activity

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

Browse source
This commit is contained in:
keplyx 2019-11-14 16:20:06 +01:00
parent 9f4018a0de
commit e3bc2f7e8e
5 changed files with 87 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

89
components/SearchHeader.js
View file

@ -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<Props, State> {
*/
return (
<Header style={styles.header}>
<Touchable
<Left>
<Touchable
style={{
alignItems: "center",
flexDirection: "row",
padding: 7,
}}
onPress={() => this.props.navigation.goBack()}>
<CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon="arrow-left"/>
</Touchable>
</Left>
<Body>
<Item
style={{
alignItems: "center",
flexDirection: "row",
padding: 7,
}}
onPress={() => this.props.navigation.goBack()}>
<CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon="arrow-left" />
</Touchable>
width: '100%',
marginBottom: 7
}}>
<Input placeholder={i18n.t('proximoScreen.search')} />
</Item>
<TextInput
style={{
flex: 1,
backgroundColor: "#CA535D",
margin: 7,
}}
underlineColorAndroid={"transparent"}
placeHolder={i18n.t("proximoScreen.search")}
autoFocus={true}
onChangeText={text => this.setState({searchString: text})}
onSubmitEditing={text => {
this.setState({searchString: text});
this.props.searchFunction(this.state.searchString);
}}
/>
<Touchable
style={{
alignItems: "center",
flexDirection: "row",
padding: 7,
}}
onPress={() => this.props.searchFunction(this.state.searchString)}>
<CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon="magnify"/>
</Touchable>
{/*<TextInput*/}
{/* style={{*/}
{/* flex: 1,*/}
{/* backgroundColor: "#CA535D",*/}
{/* margin: 7,*/}
{/* }}*/}
{/* underlineColorAndroid={"transparent"}*/}
{/* placeHolder={i18n.t("proximoScreen.search")}*/}
{/* autoFocus={true}*/}
{/* onChangeText={text => this.setState({searchString: text})}*/}
{/* onSubmitEditing={text => {*/}
{/* this.setState({searchString: text});*/}
{/* this.props.searchFunction(this.state.searchString);*/}
{/* }}*/}
{/*/>*/}
</Body>
<Right>
<Touchable
style={{
alignItems: "center",
flexDirection: "row",
padding: 7,
}}
onPress={() => this.props.searchFunction(this.state.searchString)}>
<CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon="magnify"/>
</Touchable>
</Right>
</Header>
);
}

41
screens/Proximo/ProximoMainScreen.js
View file

@ -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<Object>, 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 (
<View
style={{
flexDirection:'row'
flexDirection: 'row'
}}>
<Touchable
style={{padding: 6}}
onPress={() => this.props.navigation.navigate('ProximoSearchScreen', {data: this.state.fetchedData})}>
<CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon="magnify" />
icon="magnify"/>
</Touchable>
<Touchable
style={{padding: 6}}

2
screens/Proximo/ProximoSearchScreen.js
View file

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

3
translations/en.json
View file

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

3
translations/fr.json
View file

@ -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",