@plusscommunities/pluss-maintenance-app 8.0.8 → 8.0.9-beta.0

package/src/screens/MaintenanceUserPicker.js

@@ -1,131 +1,200 @@
-import React, { Component } from "react";
-import _ from "lodash";
-import { TouchableOpacity, View, ScrollView, Text } from "react-native";
-import { connect } from "react-redux";
-import { Icon } from "@rneui/themed";
-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, Keyboard } 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';
 
 class MaintenanceUserPicker extends Component {
-	state = {
-		currentUser: null,
-	};
+  state = {
+    currentUser: null,
+    searchText: '',
+  };
 
-	UNSAFE_componentWillMount() {
-		this.setState({ currentUser: this.props.currentUser });
-	}
+  UNSAFE_componentWillMount() {
+    this.setState({ currentUser: this.props.currentUser });
+  }
 
-	onPressBack() {
-		Services.navigation.goBack();
-	}
+  onPressBack() {
+    Services.navigation.goBack();
+  }
 
-	onUserPress(user) {
-		this.props.onSelectUser(user);
-		this.setState({ currentUser: user });
-		setTimeout(() => {
-			this.onPressBack();
-		}, 200);
-	}
+  onUserPress(user) {
+    Keyboard.dismiss();
+    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>
-			);
-		}
+  onChangeSearch = (text) => {
+    this.setState({ searchText: text });
+  };
 
-		return (
-			<Components.FormCard style={{ marginTop: 16 }}>
-				{this.renderOptions()}
-			</Components.FormCard>
-		);
-	}
+  getFilteredUsers = () => {
+    const { searchText } = this.state;
+    const { users } = this.props;
+    if (!users) return [];
+    if (!searchText || searchText.length === 0) return users;
+    const searchLower = searchText.toLowerCase();
+    return users.filter(user => {
+      const displayName = (user.displayName || '').toLowerCase();
+      const unit = (user.unit || '').toLowerCase();
+      return displayName.includes(searchLower) || unit.includes(searchLower);
+    });
+  };
 
-	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>
-			);
-		});
-	}
+  renderMain() {
+    if (_.isEmpty(this.props.users)) {
+      return (
+        <View style={{ marginTop: 16 }}>
+          <Components.Spinner />
+        </View>
+      );
+    }
 
-	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>
-		);
-	}
+    const filteredUsers = this.getFilteredUsers();
+    if (filteredUsers.length === 0 && this.state.searchText.length > 0) {
+      return (
+        <View style={styles.noResultsContainer}>
+          <Text style={styles.noResultsText}>No users found</Text>
+        </View>
+      );
+    }
+
+    return <Components.FormCard style={{ marginTop: 16 }}>{this.renderOptions(filteredUsers)}</Components.FormCard>;
+  }
+
+  renderOptions(users) {
+    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>
+      );
+    });
+  }
+
+  renderSearch() {
+    return (
+      <View style={styles.searchContainer}>
+        <Icon name="search" type="font-awesome" iconStyle={styles.searchIcon} />
+        <TextInput
+          placeholder="Search by name or unit"
+          autoCorrect={false}
+          placeholderTextColor={Colours.TEXT_DARK_ALPHA10}
+          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>
+    );
+  }
+
+  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 }} keyboardShouldPersistTaps="handled" keyboardDismissMode="on-drag">
+          {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',
+    margin: 15,
+    backgroundColor: '#fff',
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+  },
+  searchIcon: {
+    fontSize: 16,
+    marginRight: 10,
+    color: Colours.TEXT_MID_ALPHA50,
+  },
+  searchText: {
+    flex: 1,
+    fontSize: 16,
+    fontFamily: 'sf-regular',
+    color: Colours.TEXT_DARK,
+    padding: 0,
+  },
+  clearButton: {
+    padding: 4,
+  },
+  clearIcon: {
+    fontSize: 16,
+    color: Colours.TEXT_MID_ALPHA50,
+  },
+  noResultsContainer: {
+    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);