@plusscommunities/pluss-maintenance-app 6.0.20 → 6.0.21-beta.0

package/src/screens/MaintenanceUserPicker.js

@@ -1,107 +1,259 @@
-import React, { Component } from 'react';
-import _ from 'lodash';
-import { TouchableOpacity, View, ScrollView, Text } from 'react-native';
-import { connect } from 'react-redux';
-import { Icon } from 'react-native-elements';
-import { Services } from '../feature.config';
-import { Components, Colours } from '../core.config';
+import React, { Component } from "react";
+import _ from "lodash";
+import { TouchableOpacity, View, ScrollView, Text, TextInput } from "react-native";
+import { connect } from "react-redux";
+import { Icon } from "react-native-elements";
+import { Services } from "../feature.config";
+import { Components, Colours, Fonts } from "../core.config";
 
 class MaintenanceUserPicker extends Component {
-  state = {
-    currentUser: null,
-  };
-
-  UNSAFE_componentWillMount() {
-    this.setState({ currentUser: this.props.currentUser });
-  }
-
-  onPressBack() {
-    Services.navigation.goBack();
-  }
-
-  onUserPress(user) {
-    this.props.onSelectUser(user);
-    this.setState({ currentUser: user });
-    setTimeout(() => {
-      this.onPressBack();
-    }, 200);
-  }
-
-  renderMain() {
-    if (_.isEmpty(this.props.users)) {
-      return (
-        <View style={{ marginTop: 16 }}>
-          <Components.Spinner />
-        </View>
-      );
-    }
-
-    return <Components.FormCard style={{ marginTop: 16 }}>{this.renderOptions()}</Components.FormCard>;
-  }
-
-  renderOptions() {
-    return this.props.users.map((user, index) => {
-      return (
-        <TouchableOpacity key={index} onPress={this.onUserPress.bind(this, user)}>
-          <Components.FormCardSection label={user.displayName} labelStyle={{ height: 0, margin: 0 }} hasUnderline hasContent>
-            <View style={styles.rowContainer}>
-              <View style={styles.userContainer}>
-                <Components.ProfilePic ProfilePic={user.profilePic} Diameter={30} />
-                <Text style={styles.labelText}>{user.displayName}</Text>
-              </View>
-              <Icon
-                name="check-circle"
-                type="font-awesome"
-                iconStyle={[{ color: '#d5d9e0', fontSize: 20 }, _.isEqual(user, this.state.currentUser) && { color: Colours.COLOUR_GREEN }]}
-              />
-            </View>
-          </Components.FormCardSection>
-        </TouchableOpacity>
-      );
-    });
-  }
-
-  render() {
-    return (
-      <View style={styles.container}>
-        <Components.Header leftIcon="angle-left" onPressLeft={this.onPressBack.bind(this)} text="Select user" />
-        <ScrollView style={{ flex: 1 }}>{this.renderMain()}</ScrollView>
-      </View>
-    );
-  }
+	state = {
+		currentUser: null,
+		searchText: '',
+		filteredUsers: []
+	};
+
+	UNSAFE_componentWillMount() {
+		this.setState({
+			currentUser: this.props.currentUser,
+			filteredUsers: this.props.users || []
+		});
+	}
+
+	UNSAFE_componentWillReceiveProps(nextProps) {
+		if (nextProps.users !== this.props.users) {
+			this.setState({
+				filteredUsers: this.getFilteredUsers(this.state.searchText, nextProps.users)
+			});
+		}
+		if (nextProps.currentUser !== this.props.currentUser) {
+			this.setState({
+				currentUser: nextProps.currentUser
+			});
+		}
+	}
+
+	onPressBack() {
+		Services.navigation.goBack();
+	}
+
+	onUserPress(user) {
+		this.props.onSelectUser(user);
+		this.setState({ currentUser: user });
+		setTimeout(() => {
+			this.onPressBack();
+		}, 200);
+	}
+
+	onChangeSearch = (text) => {
+		this.setState({
+			searchText: text,
+			filteredUsers: this.getFilteredUsers(text)
+		});
+	}
+
+	getFilteredUsers = (searchText, users) => {
+		const usersList = users || this.props.users || [];
+
+		if (!searchText || searchText.length === 0) {
+			return usersList;
+		}
+
+		if (!usersList || usersList.length === 0) {
+			return [];
+		}
+
+		return usersList.filter(user => {
+			const displayName = user.displayName || '';
+			const unit = user.unit || '';
+			const searchLower = searchText.toLowerCase();
+
+			return displayName.toLowerCase().includes(searchLower) ||
+				unit.toLowerCase().includes(searchLower);
+		});
+	}
+
+	renderSearch = () => {
+		return (
+			<View style={styles.searchContainer}>
+				<Fonts.PlIcon name="nav-search" style={styles.searchIcon} />
+				<TextInput
+					placeholder='Search by name or unit'
+					autoCorrect={false}
+					placeholderTextColor={'rgba(60, 60, 80, .1)'}
+					onChangeText={this.onChangeSearch}
+					value={this.state.searchText}
+					style={styles.searchText}
+					underlineColorAndroid={'rgba(0,0,0,0)'}
+					returnKeyType="search"
+				/>
+				{this.state.searchText.length > 0 && (
+					<TouchableOpacity
+						onPress={() => this.onChangeSearch('')}
+						style={styles.clearButton}
+					>
+						<Icon
+							name="times-circle"
+							type="font-awesome"
+							iconStyle={styles.clearIcon}
+						/>
+					</TouchableOpacity>
+				)}
+			</View>
+		);
+	}
+
+	renderMain() {
+		if (_.isEmpty(this.props.users)) {
+			return (
+				<View style={{ marginTop: 16 }}>
+					<Components.Spinner />
+				</View>
+			);
+		}
+
+		return (
+			<Components.FormCard style={{ marginTop: 16 }}>
+				{this.renderOptions()}
+			</Components.FormCard>
+		);
+	}
+
+	renderOptions() {
+		const users = this.state.filteredUsers;
+
+		if (users.length === 0 && this.state.searchText.length > 0) {
+			return (
+				<View style={styles.noResultsContainer}>
+					<Text style={styles.noResultsText}>
+						No users found matching "{this.state.searchText}"
+					</Text>
+				</View>
+			);
+		}
+
+		return users.map((user, index) => {
+			return (
+				<TouchableOpacity
+					key={index}
+					onPress={this.onUserPress.bind(this, user)}
+				>
+					<Components.FormCardSection
+						label={user.displayName}
+						labelStyle={{ height: 0, margin: 0 }}
+						hasUnderline
+						hasContent
+					>
+						<View style={styles.rowContainer}>
+							<View style={styles.userContainer}>
+								<Components.ProfilePic
+									ProfilePic={user.profilePic}
+									Diameter={30}
+								/>
+								<Text style={styles.labelText}>{user.displayName}</Text>
+							</View>
+							<Icon
+								name="check-circle"
+								type="font-awesome"
+								iconStyle={[
+									{ color: "#d5d9e0", fontSize: 20 },
+									_.isEqual(user, this.state.currentUser) && {
+										color: Colours.COLOUR_GREEN,
+									},
+								]}
+							/>
+						</View>
+					</Components.FormCardSection>
+				</TouchableOpacity>
+			);
+		});
+	}
+
+	render() {
+		return (
+			<View style={styles.container}>
+				<Components.Header
+					leftIcon="angle-left"
+					onPressLeft={this.onPressBack.bind(this)}
+					text="Select user"
+				/>
+				{this.renderSearch()}
+				<ScrollView style={{ flex: 1 }}>{this.renderMain()}</ScrollView>
+			</View>
+		);
+	}
 }
 
 const styles = {
-  container: {
-    flex: 1,
-    position: 'relative',
-    backgroundColor: '#f0f0f5',
-  },
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    minHeight: 22,
-  },
-  text: {
-    flex: 1,
-    fontFamily: 'sf-regular',
-    fontSize: 14,
-    color: Colours.TEXT_DARK,
-  },
-  rowContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  userContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  labelText: {
-    fontFamily: 'sf-medium',
-    fontSize: 16,
-    color: Colours.TEXT_DARK,
-    marginLeft: 8,
-  },
+	container: {
+		flex: 1,
+		position: "relative",
+		backgroundColor: "#f0f0f5",
+	},
+	row: {
+		flexDirection: "row",
+		alignItems: "center",
+		minHeight: 22,
+	},
+	text: {
+		flex: 1,
+		fontFamily: "sf-regular",
+		fontSize: 14,
+		color: Colours.TEXT_DARK,
+	},
+	rowContainer: {
+		flexDirection: "row",
+		justifyContent: "space-between",
+	},
+	userContainer: {
+		flexDirection: "row",
+		alignItems: "center",
+	},
+	labelText: {
+		fontFamily: "sf-medium",
+		fontSize: 16,
+		color: Colours.TEXT_DARK,
+		marginLeft: 8,
+	},
+	searchContainer: {
+		flexDirection: 'row',
+		alignItems: 'center',
+		paddingHorizontal: 16,
+		paddingVertical: 12,
+		backgroundColor: '#fff',
+		borderBottomWidth: 1,
+		borderBottomColor: '#f0f0f5'
+	},
+	searchIcon: {
+		fontSize: 20,
+		marginRight: 10,
+		color: 'rgba(90, 90, 110, .5)'
+	},
+	searchText: {
+		flex: 1,
+		fontSize: 16,
+		fontFamily: 'sf-regular',
+		color: Colours.TEXT_DARK
+	},
+	clearButton: {
+		padding: 8
+	},
+	clearIcon: {
+		fontSize: 18,
+		color: 'rgba(90, 90, 110, .5)'
+	},
+	noResultsContainer: {
+		flex: 1,
+		alignItems: 'center',
+		justifyContent: 'center',
+		paddingVertical: 40
+	},
+	noResultsText: {
+		fontSize: 16,
+		fontFamily: 'sf-regular',
+		color: Colours.TEXT_LIGHT,
+		textAlign: 'center'
+	}
 };
 
-export default connect(null, {})(MaintenanceUserPicker);
+export default connect(null, {})(MaintenanceUserPicker);