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

45
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,6 +37,7 @@ export default class SearchHeader extends React.Component<Props, State> {
*/ */
return ( return (
<Header style={styles.header}> <Header style={styles.header}>
<Left>
<Touchable <Touchable
style={{ style={{
alignItems: "center", alignItems: "center",
@ -49,23 +49,33 @@ export default class SearchHeader extends React.Component<Props, State> {
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"} color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon="arrow-left"/> icon="arrow-left"/>
</Touchable> </Touchable>
</Left>
<TextInput <Body>
<Item
style={{ style={{
flex: 1, width: '100%',
backgroundColor: "#CA535D", marginBottom: 7
margin: 7, }}>
}} <Input placeholder={i18n.t('proximoScreen.search')} />
underlineColorAndroid={"transparent"} </Item>
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);
}}
/>
{/*<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 <Touchable
style={{ style={{
alignItems: "center", alignItems: "center",
@ -77,6 +87,7 @@ export default class SearchHeader extends React.Component<Props, State> {
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"} color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
icon="magnify"/> icon="magnify"/>
</Touchable> </Touchable>
</Right>
</Header> </Header>
); );
} }

37
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;
} }

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