@plusscommunities/pluss-maintenance-app-forms 6.0.10 → 6.0.11-auth.0

package/src/screens/MaintenanceUserPicker.js

@@ -0,0 +1,233 @@
+import React, { Component } from "react";
+import { Text } from "@plusscommunities/pluss-core-app/components";
+import _ from "lodash";
+import {
+	TouchableOpacity,
+	View,
+	ScrollView,
+	TextInput,
+	Keyboard,
+} from "react-native";
+import { connect } from "react-redux";
+import { Icon } from "@rneui/themed";
+import { Services } from "../feature.config";
+import { Components, Colours } from "../core.config";
+
+class MaintenanceUserPicker extends Component {
+	state = {
+		currentUser: null,
+		searchText: "",
+	};
+
+	UNSAFE_componentWillMount() {
+		this.setState({ currentUser: this.props.currentUser });
+	}
+
+	onPressBack() {
+		Services.navigation.goBack();
+	}
+
+	onUserPress(user) {
+		Keyboard.dismiss();
+		this.props.onSelectUser(user);
+		this.setState({ currentUser: user });
+		setTimeout(() => {
+			this.onPressBack();
+		}, 200);
+	}
+
+	onChangeSearch = (text) => {
+		this.setState({ searchText: text });
+	};
+
+	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);
+		});
+	};
+
+	renderMain() {
+		if (_.isEmpty(this.props.users)) {
+			return (
+				<View style={{ marginTop: 8 }}>
+					<Components.Spinner />
+				</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: 8 }}>
+				{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 address"
+					autoCorrect={false}
+					placeholderTextColor={Colours.TEXT_MID_ALPHA50}
+					onChangeText={this.onChangeSearch}
+					value={this.state.searchText}
+					style={styles.searchText}
+					underlineColorAndroid={Colours.COLOUR_TRANSPARENT}
+					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",
+	},
+	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",
+		marginHorizontal: 15,
+		marginTop: 10,
+		marginBottom: 0,
+		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);