bquintan/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
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 // @flow
import * as React from "react"; 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 {Platform, StyleSheet} from "react-native";
import {getStatusBarHeight} from "react-native-status-bar-height"; import {getStatusBarHeight} from "react-native-status-bar-height";
import Touchable from 'react-native-platform-touchable'; import Touchable from 'react-native-platform-touchable';
import ThemeManager from "../utils/ThemeManager"; import ThemeManager from "../utils/ThemeManager";
import CustomMaterialIcon from "./CustomMaterialIcon"; import CustomMaterialIcon from "./CustomMaterialIcon";
import {TextInput} from "react-native-paper";
import i18n from "i18n-js"; import i18n from "i18n-js";
@ -38,45 +37,57 @@ export default class SearchHeader extends React.Component<Props, State> {
*/ */
return ( return (
<Header style={styles.header}> <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={{ style={{
alignItems: "center", width: '100%',
flexDirection: "row", marginBottom: 7
padding: 7, }}>
}} <Input placeholder={i18n.t('proximoScreen.search')} />
onPress={() => this.props.navigation.goBack()}> </Item>
<CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon="arrow-left" />
</Touchable>
<TextInput {/*<TextInput*/}
style={{ {/* style={{*/}
flex: 1, {/* flex: 1,*/}
backgroundColor: "#CA535D", {/* backgroundColor: "#CA535D",*/}
margin: 7, {/* margin: 7,*/}
}} {/* }}*/}
underlineColorAndroid={"transparent"} {/* underlineColorAndroid={"transparent"}*/}
placeHolder={i18n.t("proximoScreen.search")} {/* placeHolder={i18n.t("proximoScreen.search")}*/}
autoFocus={true} {/* autoFocus={true}*/}
onChangeText={text => this.setState({searchString: text})} {/* onChangeText={text => this.setState({searchString: text})}*/}
onSubmitEditing={text => { {/* onSubmitEditing={text => {*/}
this.setState({searchString: text}); {/* this.setState({searchString: text});*/}
this.props.searchFunction(this.state.searchString); {/* this.props.searchFunction(this.state.searchString);*/}
}} {/* }}*/}
/> {/*/>*/}
</Body>
<Touchable <Right>
style={{ <Touchable
alignItems: "center", style={{
flexDirection: "row", alignItems: "center",
padding: 7, flexDirection: "row",
}} padding: 7,
onPress={() => this.props.searchFunction(this.state.searchString)}> }}
<CustomMaterialIcon onPress={() => this.props.searchFunction(this.state.searchString)}>
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"} <CustomMaterialIcon
icon="magnify"/> color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
</Touchable> icon="magnify"/>
</Touchable>
</Right>
</Header> </Header>
); );
} }

41
screens/Proximo/ProximoMainScreen.js
View file

@ -2,7 +2,7 @@
import * as React from 'react'; import * as React from 'react';
import {Platform, View} from 'react-native' 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 i18n from "i18n-js";
import CustomMaterialIcon from "../../components/CustomMaterialIcon"; import CustomMaterialIcon from "../../components/CustomMaterialIcon";
import FetchedDataSectionList from "../../components/FetchedDataSectionList"; import FetchedDataSectionList from "../../components/FetchedDataSectionList";
@ -57,22 +57,45 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
if (fetchedData.types !== undefined && fetchedData.articles !== undefined) { if (fetchedData.types !== undefined && fetchedData.articles !== undefined) {
let types = fetchedData.types; let types = fetchedData.types;
let articles = fetchedData.articles; 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++) { for (let i = 0; i < types.length; i++) {
finalData.push({ finalData.push({
type: types[i], 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); finalData.sort(ProximoMainScreen.sortFinalData);
return finalData; 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) { static sortFinalData(a: Object, b: Object) {
return a.type.id - b.type.id; return a.type.id - b.type.id;
} }
@ -81,14 +104,14 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
return ( return (
<View <View
style={{ style={{
flexDirection:'row' flexDirection: 'row'
}}> }}>
<Touchable <Touchable
style={{padding: 6}} style={{padding: 6}}
onPress={() => this.props.navigation.navigate('ProximoSearchScreen', {data: this.state.fetchedData})}> onPress={() => this.props.navigation.navigate('ProximoSearchScreen', {data: this.state.fetchedData})}>
<CustomMaterialIcon <CustomMaterialIcon
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"} color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon="magnify" /> icon="magnify"/>
</Touchable> </Touchable>
<Touchable <Touchable
style={{padding: 6}} 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. * Class defining proximo's article list of a certain category.
*/ */
export default class ProximoSearchScreen extends React.Component<Props, State> { export default class ProximoSearchScreen extends React.Component<Props, State> {
state = { state = {
filteredData: this.props.navigation.getParam('data', {articles: [{name: "Error"}]}).articles, filteredData: this.props.navigation.getParam('data', {articles: [{name: "Error"}]}).articles,
}; };
/** /**
* get color depending on quantity available * get color depending on quantity available
* *

3
translations/en.json
View file

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

3
translations/fr.json
View file

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