2019-06-29 13:37:21 +02:00
|
|
|
// @flow
|
|
|
|
|
|
|
|
import * as React from 'react';
|
2020-03-06 23:15:01 +01:00
|
|
|
import {FlatList, Image, ScrollView, View} from "react-native";
|
2019-06-27 10:17:51 +02:00
|
|
|
import i18n from "i18n-js";
|
2019-08-05 14:05:51 +02:00
|
|
|
import ThemeManager from "../../utils/ThemeManager";
|
2020-01-26 17:51:15 +01:00
|
|
|
import {Modalize} from 'react-native-modalize';
|
2020-03-07 22:31:08 +01:00
|
|
|
import {Avatar, IconButton, List, RadioButton, Searchbar, Subheading, Text, Title} from "react-native-paper";
|
2019-06-27 10:17:51 +02:00
|
|
|
|
|
|
|
function sortPrice(a, b) {
|
|
|
|
return a.price - b.price;
|
|
|
|
}
|
|
|
|
|
|
|
|
function sortPriceReverse(a, b) {
|
|
|
|
return b.price - a.price;
|
|
|
|
}
|
|
|
|
|
|
|
|
function sortName(a, b) {
|
2020-03-07 22:31:08 +01:00
|
|
|
if (a.name.toLowerCase() < b.name.toLowerCase())
|
2019-06-27 10:17:51 +02:00
|
|
|
return -1;
|
2020-03-07 22:31:08 +01:00
|
|
|
if (a.name.toLowerCase() > b.name.toLowerCase())
|
2019-06-27 10:17:51 +02:00
|
|
|
return 1;
|
|
|
|
return 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
function sortNameReverse(a, b) {
|
2020-03-07 22:31:08 +01:00
|
|
|
if (a.name.toLowerCase() < b.name.toLowerCase())
|
2019-06-27 10:17:51 +02:00
|
|
|
return 1;
|
2020-03-07 22:31:08 +01:00
|
|
|
if (a.name.toLowerCase() > b.name.toLowerCase())
|
2019-06-27 10:17:51 +02:00
|
|
|
return -1;
|
|
|
|
return 0;
|
|
|
|
}
|
|
|
|
|
2019-06-29 13:37:21 +02:00
|
|
|
type Props = {
|
2020-03-05 19:54:56 +01:00
|
|
|
navigation: Object,
|
|
|
|
route: Object,
|
2019-06-29 13:37:21 +02:00
|
|
|
}
|
2019-06-27 10:17:51 +02:00
|
|
|
|
2019-06-29 13:37:21 +02:00
|
|
|
type State = {
|
2020-03-07 22:31:08 +01:00
|
|
|
currentSortMode: number,
|
|
|
|
modalCurrentDisplayItem: React.Node,
|
2019-11-15 18:08:47 +01:00
|
|
|
currentlyDisplayedData: Array<Object>,
|
2019-06-29 13:37:21 +02:00
|
|
|
};
|
|
|
|
|
2019-06-29 15:43:57 +02:00
|
|
|
/**
|
|
|
|
* Class defining proximo's article list of a certain category.
|
|
|
|
*/
|
|
|
|
export default class ProximoListScreen extends React.Component<Props, State> {
|
2019-06-29 13:37:21 +02:00
|
|
|
|
2019-11-15 15:58:05 +01:00
|
|
|
modalRef: { current: null | Modalize };
|
2019-11-15 18:08:47 +01:00
|
|
|
originalData: Array<Object>;
|
2020-03-05 19:54:56 +01:00
|
|
|
shouldFocusSearchBar: boolean;
|
|
|
|
|
2020-02-23 18:15:30 +01:00
|
|
|
onSearchStringChange: Function;
|
|
|
|
onSortMenuPress: Function;
|
|
|
|
renderItem: Function;
|
2019-06-27 10:17:51 +02:00
|
|
|
|
2020-01-31 16:51:43 +01:00
|
|
|
constructor(props: any) {
|
|
|
|
super(props);
|
|
|
|
this.modalRef = React.createRef();
|
2020-03-05 19:54:56 +01:00
|
|
|
this.originalData = this.props.route.params['data']['data'];
|
|
|
|
this.shouldFocusSearchBar = this.props.route.params['shouldFocusSearchBar'];
|
|
|
|
this.state = {
|
|
|
|
currentlyDisplayedData: this.originalData,
|
2020-03-07 22:31:08 +01:00
|
|
|
currentSortMode: 1,
|
|
|
|
modalCurrentDisplayItem: <View/>,
|
2020-03-05 19:54:56 +01:00
|
|
|
};
|
2020-02-23 18:15:30 +01:00
|
|
|
|
|
|
|
this.onSearchStringChange = this.onSearchStringChange.bind(this);
|
|
|
|
this.onSortMenuPress = this.onSortMenuPress.bind(this);
|
2020-02-11 01:05:24 +01:00
|
|
|
this.renderItem = this.renderItem.bind(this);
|
2020-01-31 16:51:43 +01:00
|
|
|
}
|
|
|
|
|
2019-06-29 15:43:57 +02:00
|
|
|
/**
|
|
|
|
* Set the current sort mode.
|
|
|
|
*
|
2020-03-07 22:31:08 +01:00
|
|
|
* @param mode The number representing the mode
|
2019-06-29 15:43:57 +02:00
|
|
|
*/
|
2020-03-07 22:31:08 +01:00
|
|
|
setSortMode(mode: number) {
|
2019-06-27 10:17:51 +02:00
|
|
|
this.setState({
|
|
|
|
currentSortMode: mode,
|
|
|
|
});
|
2019-11-15 18:08:47 +01:00
|
|
|
let data = this.state.currentlyDisplayedData;
|
2019-06-27 10:17:51 +02:00
|
|
|
switch (mode) {
|
2020-03-07 22:31:08 +01:00
|
|
|
case 1:
|
|
|
|
data.sort(sortPrice);
|
|
|
|
break;
|
|
|
|
case 2:
|
|
|
|
data.sort(sortPriceReverse);
|
2019-06-27 10:17:51 +02:00
|
|
|
break;
|
2020-03-07 22:31:08 +01:00
|
|
|
case 3:
|
|
|
|
data.sort(sortName);
|
2019-06-27 10:17:51 +02:00
|
|
|
break;
|
2020-03-07 22:31:08 +01:00
|
|
|
case 4:
|
|
|
|
data.sort(sortNameReverse);
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
if (this.modalRef.current && mode !== this.state.currentSortMode) {
|
|
|
|
this.modalRef.current.close();
|
2019-06-27 10:17:51 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-06-29 15:43:57 +02:00
|
|
|
/**
|
|
|
|
* Set the sort mode from state when components are ready
|
|
|
|
*/
|
2019-06-27 10:17:51 +02:00
|
|
|
componentDidMount() {
|
2020-03-05 23:40:50 +01:00
|
|
|
const button = this.getSortMenu.bind(this);
|
|
|
|
const title = this.getSearchBar.bind(this);
|
|
|
|
this.props.navigation.setOptions({
|
|
|
|
headerRight: button,
|
|
|
|
headerTitle: title,
|
|
|
|
});
|
2020-03-07 22:31:08 +01:00
|
|
|
this.setSortMode(1);
|
2019-06-27 10:17:51 +02:00
|
|
|
}
|
|
|
|
|
2020-03-05 23:40:50 +01:00
|
|
|
getSearchBar() {
|
|
|
|
return (
|
2020-03-06 23:15:01 +01:00
|
|
|
<Searchbar
|
|
|
|
placeholder={i18n.t('proximoScreen.search')}
|
|
|
|
onChangeText={this.onSearchStringChange}
|
|
|
|
/>
|
2020-03-05 23:40:50 +01:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2019-08-06 13:28:11 +02:00
|
|
|
/**
|
|
|
|
* get color depending on quantity available
|
|
|
|
*
|
|
|
|
* @param availableStock
|
|
|
|
* @return
|
|
|
|
*/
|
2019-08-05 23:02:33 +02:00
|
|
|
getStockColor(availableStock: number) {
|
2019-08-06 13:28:11 +02:00
|
|
|
let color: string;
|
2019-08-05 23:02:33 +02:00
|
|
|
if (availableStock > 3)
|
2020-03-06 23:15:01 +01:00
|
|
|
color = ThemeManager.getCurrentThemeVariables().success;
|
2019-08-05 23:02:33 +02:00
|
|
|
else if (availableStock > 0)
|
2020-03-06 23:15:01 +01:00
|
|
|
color = ThemeManager.getCurrentThemeVariables().warning;
|
2019-08-05 23:02:33 +02:00
|
|
|
else
|
2020-03-06 23:15:01 +01:00
|
|
|
color = ThemeManager.getCurrentThemeVariables().danger;
|
2019-08-05 23:02:33 +02:00
|
|
|
return color;
|
|
|
|
}
|
|
|
|
|
2019-11-15 18:08:47 +01:00
|
|
|
sanitizeString(str: string) {
|
|
|
|
return str.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Returns only the articles whose name contains str. Case and accents insensitive.
|
|
|
|
* @param str
|
|
|
|
* @returns {[]}
|
|
|
|
*/
|
|
|
|
filterData(str: string) {
|
|
|
|
let filteredData = [];
|
|
|
|
const testStr = this.sanitizeString(str);
|
|
|
|
const articles = this.originalData;
|
|
|
|
for (const article of articles) {
|
|
|
|
const name = this.sanitizeString(article.name);
|
|
|
|
if (name.includes(testStr)) {
|
|
|
|
filteredData.push(article)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return filteredData;
|
|
|
|
}
|
|
|
|
|
2020-02-23 18:15:30 +01:00
|
|
|
onSearchStringChange(str: string) {
|
2019-11-15 18:08:47 +01:00
|
|
|
this.setState({
|
|
|
|
currentlyDisplayedData: this.filterData(str)
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2020-03-07 22:31:08 +01:00
|
|
|
getModalItemContent(item: Object) {
|
2019-09-12 12:01:01 +02:00
|
|
|
return (
|
|
|
|
<View style={{
|
|
|
|
flex: 1,
|
|
|
|
padding: 20
|
|
|
|
}}>
|
2020-03-07 22:31:08 +01:00
|
|
|
<Title>{item.name}</Title>
|
2019-09-12 12:01:01 +02:00
|
|
|
<View style={{
|
|
|
|
flexDirection: 'row',
|
|
|
|
width: '100%',
|
|
|
|
marginTop: 10,
|
|
|
|
}}>
|
2020-03-06 23:15:01 +01:00
|
|
|
<Subheading style={{
|
2020-03-07 22:31:08 +01:00
|
|
|
color: this.getStockColor(parseInt(item.quantity)),
|
2019-09-12 12:01:01 +02:00
|
|
|
}}>
|
2020-03-07 22:31:08 +01:00
|
|
|
{item.quantity + ' ' + i18n.t('proximoScreen.inStock')}
|
2020-03-06 23:15:01 +01:00
|
|
|
</Subheading>
|
2020-03-07 22:31:08 +01:00
|
|
|
<Subheading style={{marginLeft: 'auto'}}>{item.price}€</Subheading>
|
2019-09-12 12:01:01 +02:00
|
|
|
</View>
|
|
|
|
|
2020-03-06 23:15:01 +01:00
|
|
|
<ScrollView>
|
2019-09-12 12:01:01 +02:00
|
|
|
<View style={{width: '100%', height: 150, marginTop: 20, marginBottom: 20}}>
|
|
|
|
<Image style={{flex: 1, resizeMode: "contain"}}
|
2020-03-07 22:31:08 +01:00
|
|
|
source={{uri: item.image}}/>
|
2019-09-12 12:01:01 +02:00
|
|
|
</View>
|
2020-03-07 22:31:08 +01:00
|
|
|
<Text>{item.description}</Text>
|
2020-03-06 23:15:01 +01:00
|
|
|
</ScrollView>
|
2019-09-12 12:01:01 +02:00
|
|
|
</View>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-03-07 22:31:08 +01:00
|
|
|
getModalSortMenu() {
|
|
|
|
return (
|
|
|
|
<View style={{
|
|
|
|
flex: 1,
|
|
|
|
padding: 20
|
|
|
|
}}>
|
|
|
|
<Title>Sort Order</Title>
|
|
|
|
<RadioButton.Group
|
|
|
|
onValueChange={value => this.setSortMode(value)}
|
|
|
|
value={this.state.currentSortMode}
|
|
|
|
>
|
|
|
|
<View style={{
|
|
|
|
flexDirection: 'row',
|
|
|
|
justifyContent: 'center',
|
|
|
|
alignItems: 'center'
|
|
|
|
}}>
|
|
|
|
<Text>{i18n.t('proximoScreen.sortPrice')}</Text>
|
|
|
|
<RadioButton value={1}/>
|
|
|
|
</View>
|
|
|
|
<View style={{
|
|
|
|
flexDirection: 'row',
|
|
|
|
justifyContent: 'center',
|
|
|
|
alignItems: 'center'
|
|
|
|
}}>
|
|
|
|
<Text>{i18n.t('proximoScreen.sortPriceReverse')}</Text>
|
|
|
|
<RadioButton value={2}/>
|
|
|
|
</View>
|
|
|
|
<View style={{
|
|
|
|
flexDirection: 'row',
|
|
|
|
justifyContent: 'center',
|
|
|
|
alignItems: 'center'
|
|
|
|
}}>
|
|
|
|
<Text>{i18n.t('proximoScreen.sortName')}</Text>
|
|
|
|
<RadioButton value={3}/>
|
|
|
|
</View>
|
|
|
|
<View style={{
|
|
|
|
flexDirection: 'row',
|
|
|
|
justifyContent: 'center',
|
|
|
|
alignItems: 'center'
|
|
|
|
}}>
|
|
|
|
<Text>{i18n.t('proximoScreen.sortNameReverse')}</Text>
|
|
|
|
<RadioButton value={4}/>
|
|
|
|
</View>
|
|
|
|
</RadioButton.Group>
|
|
|
|
</View>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-02-23 21:47:36 +01:00
|
|
|
onListItemPress(item: Object) {
|
2019-09-12 12:01:01 +02:00
|
|
|
this.setState({
|
2020-03-07 22:31:08 +01:00
|
|
|
modalCurrentDisplayItem: this.getModalItemContent(item)
|
2019-09-12 12:01:01 +02:00
|
|
|
});
|
|
|
|
if (this.modalRef.current) {
|
|
|
|
this.modalRef.current.open();
|
|
|
|
}
|
|
|
|
}
|
2019-09-12 15:01:07 +02:00
|
|
|
|
2020-02-23 18:15:30 +01:00
|
|
|
onSortMenuPress() {
|
2020-03-07 22:31:08 +01:00
|
|
|
this.setState({
|
|
|
|
modalCurrentDisplayItem: this.getModalSortMenu()
|
|
|
|
});
|
|
|
|
if (this.modalRef.current) {
|
|
|
|
this.modalRef.current.open();
|
|
|
|
}
|
2020-03-06 23:15:01 +01:00
|
|
|
}
|
2020-02-11 01:05:24 +01:00
|
|
|
|
2019-11-15 15:58:05 +01:00
|
|
|
getSortMenu() {
|
|
|
|
return (
|
2020-03-07 22:31:08 +01:00
|
|
|
<IconButton
|
|
|
|
icon="sort"
|
|
|
|
color={ThemeManager.getCurrentThemeVariables().text}
|
|
|
|
size={26}
|
|
|
|
onPress={this.onSortMenuPress}
|
|
|
|
/>
|
2019-11-15 15:58:05 +01:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-02-23 18:15:30 +01:00
|
|
|
renderItem({item}: Object) {
|
2020-03-06 23:15:01 +01:00
|
|
|
const onPress = this.onListItemPress.bind(this, item);
|
|
|
|
return (
|
|
|
|
<List.Item
|
|
|
|
title={item.name}
|
|
|
|
description={item.quantity + ' ' + i18n.t('proximoScreen.inStock')}
|
|
|
|
descriptionStyle={{color: this.getStockColor(parseInt(item.quantity))}}
|
|
|
|
onPress={onPress}
|
2020-03-07 22:31:08 +01:00
|
|
|
left={props => <Avatar.Image style={{backgroundColor: 'transparent'}} size={64}
|
|
|
|
source={{uri: item.image}}/>}
|
2020-03-06 23:15:01 +01:00
|
|
|
right={props =>
|
|
|
|
<Text style={{fontWeight: "bold"}}>
|
|
|
|
{item.price}€
|
|
|
|
</Text>}
|
|
|
|
/>
|
|
|
|
);
|
2020-02-11 01:05:24 +01:00
|
|
|
}
|
|
|
|
|
2020-02-23 18:15:30 +01:00
|
|
|
keyExtractor(item: Object) {
|
2020-02-11 01:05:24 +01:00
|
|
|
return item.name + item.code;
|
|
|
|
}
|
|
|
|
|
2019-06-27 10:17:51 +02:00
|
|
|
render() {
|
|
|
|
return (
|
2020-03-07 22:52:55 +01:00
|
|
|
<View style={{
|
|
|
|
height: '100%'
|
|
|
|
}}>
|
2020-03-07 22:31:08 +01:00
|
|
|
<Modalize
|
|
|
|
ref={this.modalRef}
|
|
|
|
adjustToContentHeight
|
|
|
|
handlePosition={'inside'}
|
|
|
|
modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().card}}
|
|
|
|
handleStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().text}}
|
|
|
|
>
|
|
|
|
{this.state.modalCurrentDisplayItem}
|
2019-09-12 12:01:01 +02:00
|
|
|
</Modalize>
|
2020-01-26 19:27:20 +01:00
|
|
|
<FlatList
|
|
|
|
data={this.state.currentlyDisplayedData}
|
|
|
|
extraData={this.state.currentlyDisplayedData}
|
2020-02-11 01:05:24 +01:00
|
|
|
keyExtractor={this.keyExtractor}
|
2020-01-26 19:27:20 +01:00
|
|
|
style={{minHeight: 300, width: '100%'}}
|
2020-02-11 01:05:24 +01:00
|
|
|
renderItem={this.renderItem}
|
2020-01-26 19:27:20 +01:00
|
|
|
/>
|
2020-03-06 09:12:56 +01:00
|
|
|
</View>
|
2019-06-27 10:17:51 +02:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|