419 lines
10 KiB
TypeScript
419 lines
10 KiB
TypeScript
/*
|
|
* Copyright (c) 2019 - 2020 Arnaud Vergnet.
|
|
*
|
|
* This file is part of Campus INSAT.
|
|
*
|
|
* Campus INSAT is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU General Public License as published by
|
|
* the Free Software Foundation, either version 3 of the License, or
|
|
* (at your option) any later version.
|
|
*
|
|
* Campus INSAT is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU General Public License
|
|
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
|
|
*/
|
|
|
|
import * as React from 'react';
|
|
import { Image, Platform, ScrollView, StyleSheet, View } from 'react-native';
|
|
import i18n from 'i18n-js';
|
|
import {
|
|
RadioButton,
|
|
Searchbar,
|
|
Subheading,
|
|
Text,
|
|
Title,
|
|
withTheme,
|
|
} from 'react-native-paper';
|
|
import { StackNavigationProp } from '@react-navigation/stack';
|
|
import { Modalize } from 'react-native-modalize';
|
|
import CustomModal from '../../../components/Overrides/CustomModal';
|
|
import { stringMatchQuery } from '../../../utils/Search';
|
|
import ProximoListItem from '../../../components/Lists/Proximo/ProximoListItem';
|
|
import MaterialHeaderButtons, {
|
|
Item,
|
|
} from '../../../components/Overrides/CustomHeaderButton';
|
|
import CollapsibleFlatList from '../../../components/Collapsible/CollapsibleFlatList';
|
|
import type { ProximoArticleType } from './ProximoMainScreen';
|
|
import GENERAL_STYLES from '../../../constants/Styles';
|
|
|
|
function sortPrice(a: ProximoArticleType, b: ProximoArticleType): number {
|
|
return parseInt(a.price, 10) - parseInt(b.price, 10);
|
|
}
|
|
|
|
function sortPriceReverse(
|
|
a: ProximoArticleType,
|
|
b: ProximoArticleType
|
|
): number {
|
|
return parseInt(b.price, 10) - parseInt(a.price, 10);
|
|
}
|
|
|
|
function sortName(a: ProximoArticleType, b: ProximoArticleType): number {
|
|
if (a.name.toLowerCase() < b.name.toLowerCase()) {
|
|
return -1;
|
|
}
|
|
if (a.name.toLowerCase() > b.name.toLowerCase()) {
|
|
return 1;
|
|
}
|
|
return 0;
|
|
}
|
|
|
|
function sortNameReverse(a: ProximoArticleType, b: ProximoArticleType): number {
|
|
if (a.name.toLowerCase() < b.name.toLowerCase()) {
|
|
return 1;
|
|
}
|
|
if (a.name.toLowerCase() > b.name.toLowerCase()) {
|
|
return -1;
|
|
}
|
|
return 0;
|
|
}
|
|
|
|
const LIST_ITEM_HEIGHT = 84;
|
|
|
|
type PropsType = {
|
|
navigation: StackNavigationProp<any>;
|
|
route: {
|
|
params: {
|
|
data: { data: Array<ProximoArticleType> };
|
|
shouldFocusSearchBar: boolean;
|
|
};
|
|
};
|
|
theme: ReactNativePaper.Theme;
|
|
};
|
|
|
|
type StateType = {
|
|
currentSortMode: number;
|
|
modalCurrentDisplayItem: React.ReactNode;
|
|
currentSearchString: string;
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
modalContainer: {
|
|
flex: 1,
|
|
padding: 20,
|
|
},
|
|
modalTitleContainer: {
|
|
flexDirection: 'row',
|
|
width: '100%',
|
|
marginTop: 10,
|
|
},
|
|
modalTitle: {
|
|
marginLeft: 'auto',
|
|
},
|
|
modalContent: {
|
|
width: '100%',
|
|
height: 150,
|
|
marginTop: 20,
|
|
marginBottom: 20,
|
|
},
|
|
image: {
|
|
flex: 1,
|
|
resizeMode: 'contain',
|
|
},
|
|
sortTitle: {
|
|
marginBottom: 10,
|
|
},
|
|
});
|
|
|
|
/**
|
|
* Class defining Proximo article list of a certain category.
|
|
*/
|
|
class ProximoListScreen extends React.Component<PropsType, StateType> {
|
|
modalRef: Modalize | null;
|
|
|
|
listData: Array<ProximoArticleType>;
|
|
|
|
shouldFocusSearchBar: boolean;
|
|
|
|
constructor(props: PropsType) {
|
|
super(props);
|
|
this.modalRef = null;
|
|
this.listData = props.route.params.data.data.sort(sortName);
|
|
this.shouldFocusSearchBar = props.route.params.shouldFocusSearchBar;
|
|
this.state = {
|
|
currentSearchString: '',
|
|
currentSortMode: 3,
|
|
modalCurrentDisplayItem: null,
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Creates the header content
|
|
*/
|
|
componentDidMount() {
|
|
const { navigation } = this.props;
|
|
navigation.setOptions({
|
|
headerRight: this.getSortMenuButton,
|
|
headerTitle: this.getSearchBar,
|
|
headerBackTitleVisible: false,
|
|
headerTitleContainerStyle:
|
|
Platform.OS === 'ios'
|
|
? { marginHorizontal: 0, width: '70%' }
|
|
: { marginHorizontal: 0, right: 50, left: 50 },
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Callback used when clicking on the sort menu button.
|
|
* It will open the modal to show a sort selection
|
|
*/
|
|
onSortMenuPress = () => {
|
|
this.setState({
|
|
modalCurrentDisplayItem: this.getModalSortMenu(),
|
|
});
|
|
if (this.modalRef) {
|
|
this.modalRef.open();
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Callback used when the search changes
|
|
*
|
|
* @param str The new search string
|
|
*/
|
|
onSearchStringChange = (str: string) => {
|
|
this.setState({ currentSearchString: str });
|
|
};
|
|
|
|
/**
|
|
* Callback used when clicking an article in the list.
|
|
* It opens the modal to show detailed information about the article
|
|
*
|
|
* @param item The article pressed
|
|
*/
|
|
onListItemPress(item: ProximoArticleType) {
|
|
this.setState({
|
|
modalCurrentDisplayItem: this.getModalItemContent(item),
|
|
});
|
|
if (this.modalRef) {
|
|
this.modalRef.open();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Sets the current sort mode.
|
|
*
|
|
* @param mode The number representing the mode
|
|
*/
|
|
setSortMode(mode: string) {
|
|
const { currentSortMode } = this.state;
|
|
const currentMode = parseInt(mode, 10);
|
|
this.setState({
|
|
currentSortMode: currentMode,
|
|
});
|
|
switch (currentMode) {
|
|
case 1:
|
|
this.listData.sort(sortPrice);
|
|
break;
|
|
case 2:
|
|
this.listData.sort(sortPriceReverse);
|
|
break;
|
|
case 3:
|
|
this.listData.sort(sortName);
|
|
break;
|
|
case 4:
|
|
this.listData.sort(sortNameReverse);
|
|
break;
|
|
default:
|
|
this.listData.sort(sortName);
|
|
break;
|
|
}
|
|
if (this.modalRef && currentMode !== currentSortMode) {
|
|
this.modalRef.close();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Gets a color depending on the quantity available
|
|
*
|
|
* @param availableStock The quantity available
|
|
* @return
|
|
*/
|
|
getStockColor(availableStock: number): string {
|
|
const { theme } = this.props;
|
|
let color: string;
|
|
if (availableStock > 3) {
|
|
color = theme.colors.success;
|
|
} else if (availableStock > 0) {
|
|
color = theme.colors.warning;
|
|
} else {
|
|
color = theme.colors.danger;
|
|
}
|
|
return color;
|
|
}
|
|
|
|
/**
|
|
* Gets the sort menu header button
|
|
*
|
|
* @return {*}
|
|
*/
|
|
getSortMenuButton = () => {
|
|
return (
|
|
<MaterialHeaderButtons>
|
|
<Item title="main" iconName="sort" onPress={this.onSortMenuPress} />
|
|
</MaterialHeaderButtons>
|
|
);
|
|
};
|
|
|
|
/**
|
|
* Gets the header search bar
|
|
*
|
|
* @return {*}
|
|
*/
|
|
getSearchBar = () => {
|
|
return (
|
|
// @ts-ignore
|
|
<Searchbar
|
|
placeholder={i18n.t('screens.proximo.search')}
|
|
onChangeText={this.onSearchStringChange}
|
|
/>
|
|
);
|
|
};
|
|
|
|
/**
|
|
* Gets the modal content depending on the given article
|
|
*
|
|
* @param item The article to display
|
|
* @return {*}
|
|
*/
|
|
getModalItemContent(item: ProximoArticleType) {
|
|
return (
|
|
<View style={styles.modalContainer}>
|
|
<Title>{item.name}</Title>
|
|
<View style={styles.modalTitleContainer}>
|
|
<Subheading
|
|
style={{
|
|
color: this.getStockColor(parseInt(item.quantity, 10)),
|
|
}}
|
|
>
|
|
{`${item.quantity} ${i18n.t('screens.proximo.inStock')}`}
|
|
</Subheading>
|
|
<Subheading style={styles.modalTitle}>{item.price}€</Subheading>
|
|
</View>
|
|
|
|
<ScrollView>
|
|
<View style={styles.modalContent}>
|
|
<Image style={styles.image} source={{ uri: item.image }} />
|
|
</View>
|
|
<Text>{item.description}</Text>
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Gets the modal content to display a sort menu
|
|
*
|
|
* @return {*}
|
|
*/
|
|
getModalSortMenu() {
|
|
const { currentSortMode } = this.state;
|
|
return (
|
|
<View style={styles.modalContainer}>
|
|
<Title style={styles.sortTitle}>
|
|
{i18n.t('screens.proximo.sortOrder')}
|
|
</Title>
|
|
<RadioButton.Group
|
|
onValueChange={(value: string) => {
|
|
this.setSortMode(value);
|
|
}}
|
|
value={currentSortMode.toString()}
|
|
>
|
|
<RadioButton.Item
|
|
label={i18n.t('screens.proximo.sortPrice')}
|
|
value={'1'}
|
|
/>
|
|
<RadioButton.Item
|
|
label={i18n.t('screens.proximo.sortPriceReverse')}
|
|
value={'2'}
|
|
/>
|
|
<RadioButton.Item
|
|
label={i18n.t('screens.proximo.sortName')}
|
|
value={'3'}
|
|
/>
|
|
<RadioButton.Item
|
|
label={i18n.t('screens.proximo.sortNameReverse')}
|
|
value={'4'}
|
|
/>
|
|
</RadioButton.Group>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Gets a render item for the given article
|
|
*
|
|
* @param item The article to render
|
|
* @return {*}
|
|
*/
|
|
getRenderItem = ({ item }: { item: ProximoArticleType }) => {
|
|
const { currentSearchString } = this.state;
|
|
if (stringMatchQuery(item.name, currentSearchString)) {
|
|
const onPress = () => {
|
|
this.onListItemPress(item);
|
|
};
|
|
const color = this.getStockColor(parseInt(item.quantity, 10));
|
|
return (
|
|
<ProximoListItem
|
|
item={item}
|
|
onPress={onPress}
|
|
color={color}
|
|
height={LIST_ITEM_HEIGHT}
|
|
/>
|
|
);
|
|
}
|
|
return null;
|
|
};
|
|
|
|
/**
|
|
* Extracts a key for the given article
|
|
*
|
|
* @param item The article to extract the key from
|
|
* @return {string} The extracted key
|
|
*/
|
|
keyExtractor = (item: ProximoArticleType): string => item.name + item.code;
|
|
|
|
/**
|
|
* Callback used when receiving the modal ref
|
|
*
|
|
* @param ref
|
|
*/
|
|
onModalRef = (ref: Modalize) => {
|
|
this.modalRef = ref;
|
|
};
|
|
|
|
itemLayout = (
|
|
data: Array<ProximoArticleType> | null | undefined,
|
|
index: number
|
|
): { length: number; offset: number; index: number } => ({
|
|
length: LIST_ITEM_HEIGHT,
|
|
offset: LIST_ITEM_HEIGHT * index,
|
|
index,
|
|
});
|
|
|
|
render() {
|
|
const { state } = this;
|
|
return (
|
|
<View style={GENERAL_STYLES.flex}>
|
|
<CustomModal onRef={this.onModalRef}>
|
|
{state.modalCurrentDisplayItem}
|
|
</CustomModal>
|
|
<CollapsibleFlatList
|
|
data={this.listData}
|
|
extraData={state.currentSearchString + state.currentSortMode}
|
|
keyExtractor={this.keyExtractor}
|
|
renderItem={this.getRenderItem}
|
|
// Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
|
|
removeClippedSubviews
|
|
getItemLayout={this.itemLayout}
|
|
initialNumToRender={10}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withTheme(ProximoListScreen);
|