@plusscommunities/pluss-maintenance-app-forms 7.0.21 → 8.0.1-auth.0

package/src/components/MaintenanceList.js

@@ -1,10 +1,11 @@
 import React, { Component } from "react";
+import { Text } from "@plusscommunities/pluss-core-app/components";
 import {
 	View,
 	StyleSheet,
 	FlatList,
 	TouchableOpacity,
-	Text,
+	Animated,
 } from "react-native";
 import _ from "lodash";
 import { connect } from "react-redux";
@@ -23,6 +24,11 @@ import { Components, Colours, Helper } from "../core.config";
 import { values } from "../values.config";
 
 class MaintenanceList extends Component {
+	_refreshCounter = 0;
+	_filterApplying = false;
+	_filterDataReady = false;
+	_overlayOpacity = new Animated.Value(0);
+
 	constructor(props) {
 		super(props);
 
@@ -30,6 +36,9 @@ class MaintenanceList extends Component {
 			types: [],
 			filteredList: props.jobs,
 			loading: false,
+			loadingMore: false,
+			hasMore: true,
+			lastKey: null,
 			searchText: "",
 			showFilterPopup: false,
 		};
@@ -52,30 +61,91 @@ class MaintenanceList extends Component {
 			this.resetDataSource();
 	}
 
-	refresh = () => {
+	expandStatus = (status) => {
+		if (status !== "Incomplete") return status;
+		const { statusTypes } = this.props;
+		if (!statusTypes || !statusTypes.length) return status;
+		const incompleteStatuses = statusTypes
+			.filter((s) => s.category !== "Completed")
+			.map((s) => s.text);
+		return incompleteStatuses.length > 0
+			? incompleteStatuses.join(",")
+			: status;
+	};
+
+	refresh = (overrideFilters) => {
+		const currentCounter = ++this._refreshCounter;
 		this.onLoadingChanged(true, async () => {
 			try {
-				const { jobfilters } = this.props;
-				const res = await maintenanceActions.getJobsRecursive(
+				const jobfilters = overrideFilters || this.props.jobfilters;
+				const res = await maintenanceActions.getJobs2(
 					this.props.site,
-					jobfilters.status,
+					this.expandStatus(jobfilters.status),
 					jobfilters.priority,
 					jobfilters.type,
+					null, // No lastKey = first page
+					jobfilters.assignee,
 				);
-				// console.log('refresh', res ? JSON.stringify(res[0], null, 2) : null);
-				if (
-					!_.isEmpty(jobfilters.status) ||
-					!_.isEmpty(jobfilters.priority) ||
-					!_.isEmpty(jobfilters.type)
-				) {
-					this.props.jobsAdded(res);
-				} else {
-					this.props.jobsLoaded(res);
-				}
+
+				// Discard stale responses from earlier filter changes
+				if (currentCounter !== this._refreshCounter) return;
+
+				const jobs = res.data.Items;
+				const lastKey = res.data.LastKey;
+
+				// Signal that the API response is ready before dispatching to Redux
+				this._filterDataReady = true;
+
+				// Always replace jobs on refresh (filters are server-side)
+				this.props.jobsLoaded(jobs);
+
+				this.setState({
+					lastKey,
+					hasMore: !!lastKey,
+				});
 			} catch (error) {
+				if (currentCounter !== this._refreshCounter) return;
 				console.log("refresh error", error);
 			} finally {
-				this.onLoadingChanged(false);
+				if (currentCounter === this._refreshCounter) {
+					this.onLoadingChanged(false);
+				}
+			}
+		});
+	};
+
+	loadMore = () => {
+		const { loading, loadingMore, hasMore, lastKey, searchText } = this.state;
+
+		// Don't load if already loading, no more pages, or during search
+		if (loading || loadingMore || !hasMore || !lastKey || searchText) return;
+
+		this.setState({ loadingMore: true }, async () => {
+			try {
+				const { jobfilters } = this.props;
+				const res = await maintenanceActions.getJobs2(
+					this.props.site,
+					this.expandStatus(jobfilters.status),
+					jobfilters.priority,
+					jobfilters.type,
+					lastKey,
+					jobfilters.assignee,
+				);
+
+				const newJobs = res.data.Items;
+				const newLastKey = res.data.LastKey;
+
+				// Append to existing jobs
+				this.props.jobsAdded(newJobs);
+
+				this.setState({
+					lastKey: newLastKey,
+					hasMore: !!newLastKey,
+				});
+			} catch (error) {
+				console.log("loadMore error", error);
+			} finally {
+				this.setState({ loadingMore: false });
 			}
 		});
 	};
@@ -121,12 +191,13 @@ class MaintenanceList extends Component {
 	}
 
 	resetDataSource = (source = "") => {
-		const { jobfilters } = this.props;
 		const { searchText } = this.state;
 		const { jobs } = this.props;
 
 		let filteredList = jobs;
 		let jobIdMatch = null;
+
+		// Client-side search filtering (search is not supported server-side)
 		if (searchText) {
 			jobIdMatch = _.find(jobs, (j) => j.jobId === searchText);
 			filteredList = jobs.filter((j) => {
@@ -140,22 +211,10 @@ class MaintenanceList extends Component {
 			});
 			if (!jobIdMatch) this.fetchJob(searchText);
 		}
-		if (jobfilters.status)
-			filteredList = filteredList.filter((j) =>
-				jobfilters.status.includes(j.status),
-			);
-		if (jobfilters.priority)
-			filteredList = filteredList.filter((j) =>
-				jobfilters.priority.includes(j.priority),
-			);
-		if (jobfilters.type)
-			filteredList = filteredList.filter((j) =>
-				jobfilters.type.includes(j.type),
-			);
-		if (jobfilters.assignee)
-			filteredList = filteredList.filter((j) =>
-				jobfilters.assignee.includes(j.AssigneeId),
-			);
+
+		// Note: status, priority, type, and assignee filters are applied server-side
+		// via getJobs2, so no client-side filtering needed for those
+
 		if (jobIdMatch) {
 			const jobIndex = filteredList.indexOf(jobIdMatch);
 			if (jobIndex > -1) {
@@ -163,9 +222,25 @@ class MaintenanceList extends Component {
 			}
 			filteredList.unshift(jobIdMatch);
 		}
-		if (source !== "search") this.refresh();
 
-		this.setState({ filteredList });
+		// During a filter transition, don't clear the list until the API
+		// response has arrived and been processed. This prevents the empty
+		// state from flashing when jobs transiently drop to [].
+		if (
+			this._filterApplying &&
+			!this._filterDataReady &&
+			filteredList.length === 0
+		) {
+			return;
+		}
+
+		this.setState({ filteredList }, () => {
+			if (this._filterDataReady) {
+				this._filterApplying = false;
+				this._filterDataReady = false;
+				this._showOverlay(false);
+			}
+		});
 	};
 
 	onLoadingChanged = (loading, callback) => {
@@ -191,8 +266,16 @@ class MaintenanceList extends Component {
 	};
 
 	onSelectFilter = (selected) => {
+		this._filterApplying = true;
+		this._filterDataReady = false;
+		this._showOverlay(true);
 		this.props.jobsFilterLoaded(selected);
 		this.onToggleFilter();
+		// Reset pagination but keep old list visible while loading
+		// Pass filters directly to avoid stale props from async Redux update
+		this.setState({ lastKey: null, hasMore: true }, () => {
+			this.refresh(selected);
+		});
 	};
 
 	getFilterButtonText = () => {
@@ -216,12 +299,59 @@ class MaintenanceList extends Component {
 		return `Filtering by ${filterTexts.join(", ")}`;
 	};
 
+	hasFiltersActive() {
+		const { jobfilters } = this.props;
+		return (
+			!_.isEmpty(jobfilters.status) ||
+			!_.isEmpty(jobfilters.priority) ||
+			!_.isEmpty(jobfilters.type) ||
+			!_.isEmpty(jobfilters.assignee)
+		);
+	}
+
+	clearFilters = () => {
+		const emptyFilters = {
+			status: "",
+			statusText: "",
+			priority: "",
+			priorityText: "",
+			type: "",
+			assignee: "",
+			assigneeName: "",
+		};
+		this.onSelectFilter(emptyFilters);
+	};
+
 	renderEmptyList() {
-		return this.state.loading ? null : (
-			<Components.EmptyStateMain
-				title={this.getEmptyStateText()}
-				style={{ marginHorizontal: 16 }}
-			/>
+		if (this.state.loading || this._filterApplying) return null;
+
+		const hasFilters = this.hasFiltersActive();
+
+		return (
+			<View style={{ marginHorizontal: 16, alignItems: "center" }}>
+				<Components.EmptyStateMain
+					title={
+						hasFilters
+							? "No requests match your filters"
+							: this.getEmptyStateText()
+					}
+				/>
+				{hasFilters && (
+					<TouchableOpacity
+						onPress={this.clearFilters}
+						style={styles.clearFiltersButton}
+					>
+						<Text
+							style={[
+								styles.clearFiltersText,
+								{ color: this.props.colourBrandingMain },
+							]}
+						>
+							Clear filters
+						</Text>
+					</TouchableOpacity>
+				)}
+			</View>
 		);
 	}
 
@@ -291,10 +421,46 @@ class MaintenanceList extends Component {
 				)}
 				ListEmptyComponent={this.renderEmptyList()}
 				ListHeaderComponent={this.renderListHeader()}
+				ListFooterComponent={this.renderListFooter()}
+				onEndReached={this.loadMore}
+				onEndReachedThreshold={0.5}
 			/>
 		);
 	}
 
+	renderListFooter = () => {
+		if (!this.state.loadingMore) return null;
+
+		return (
+			<View style={styles.loadingMore}>
+				<Components.LoadingIndicator visible={true} />
+			</View>
+		);
+	};
+
+	_showOverlay = (visible) => {
+		Animated.timing(this._overlayOpacity, {
+			toValue: visible ? 1 : 0,
+			duration: 200,
+			useNativeDriver: true,
+		}).start();
+	};
+
+	renderFilterOverlay() {
+		if (!this._filterApplying) return null;
+
+		return (
+			<Animated.View
+				style={[styles.filterOverlay, { opacity: this._overlayOpacity }]}
+				pointerEvents="none"
+			>
+				<View style={styles.filterOverlayInner}>
+					<Components.LoadingCircles />
+				</View>
+			</Animated.View>
+		);
+	}
+
 	renderFilterPopup() {
 		const { jobfilters } = this.props;
 		const { showFilterPopup, types } = this.state;
@@ -317,6 +483,7 @@ class MaintenanceList extends Component {
 		return (
 			<View style={[styles.container, this.props.style]}>
 				{this.renderList()}
+				{this.renderFilterOverlay()}
 				{this.renderFilterPopup()}
 			</View>
 		);
@@ -368,6 +535,33 @@ const styles = StyleSheet.create({
 		fontFamily: "sf-semibold",
 		fontSize: 16,
 	},
+	loadingMore: {
+		paddingVertical: 20,
+		alignItems: "center",
+	},
+	clearFiltersButton: {
+		marginTop: 12,
+		paddingVertical: 10,
+		paddingHorizontal: 24,
+		borderRadius: 8,
+		borderWidth: 1,
+		borderColor: "#ccc",
+		backgroundColor: "#f9f9f9",
+	},
+	clearFiltersText: {
+		fontFamily: "sf-semibold",
+		fontSize: 15,
+	},
+	filterOverlay: {
+		...StyleSheet.absoluteFillObject,
+		justifyContent: "center",
+		alignItems: "center",
+		backgroundColor: "rgba(255, 255, 255, 0.7)",
+	},
+	filterOverlayInner: {
+		padding: 20,
+		borderRadius: 12,
+	},
 });
 
 const mapStateToProps = (state) => {

package/src/components/MaintenanceListItem.js

@@ -1,5 +1,6 @@
 import React, { Component } from "react";
-import { Image, Text, TouchableOpacity, View, StyleSheet } from "react-native";
+import { Image, TouchableOpacity, View, StyleSheet } from "react-native";
+import { Text } from "@plusscommunities/pluss-core-app/components";
 import _ from "lodash";
 import { Icon } from "@rneui/themed";
 import { connect } from "react-redux";

package/src/components/MaintenanceWidgetItem.js

@@ -1,5 +1,6 @@
 import React, { Component } from "react";
-import { Text, View, StyleSheet, TouchableOpacity } from "react-native";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import { Text } from "@plusscommunities/pluss-core-app/components";
 import { connect } from "react-redux";
 import { Icon } from "@rneui/themed";
 import moment from "moment";

package/src/components/PrioritySelectorPopup.js

@@ -1,5 +1,6 @@
 import React, { PureComponent } from "react";
-import { View, StyleSheet, TouchableOpacity, Text } from "react-native";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import { Text } from "@plusscommunities/pluss-core-app/components";
 import { connect } from "react-redux";
 import { jobPriorityOptions } from "../helper";
 import { Components, Colours } from "../core.config";

package/src/components/StatusSelectorPopup.js

@@ -1,5 +1,6 @@
 import React, { PureComponent } from "react";
-import { View, StyleSheet, TouchableOpacity, Text } from "react-native";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import { Text } from "@plusscommunities/pluss-core-app/components";
 import { connect } from "react-redux";
 import { getJobStatusOptions } from "../helper";
 import { Components, Colours } from "../core.config";

package/src/components/WidgetSmall.js

@@ -1,5 +1,6 @@
 import React, { Component } from "react";
-import { Text, View, ScrollView, StyleSheet } from "react-native";
+import { View, ScrollView, StyleSheet } from "react-native";
+import { Text } from "@plusscommunities/pluss-core-app/components";
 import { connect } from "react-redux";
 import _ from "lodash";
 import { maintenanceActions } from "../apis";
@@ -47,9 +48,16 @@ class WidgetSmall extends Component {
 	refresh = () => {
 		this.onLoadingChanged(true, async () => {
 			try {
-				const res = await maintenanceActions.getJobsRecursive(this.props.site);
-				// console.log('WidgetSmall - refresh', res.data);
-				this.props.jobsLoaded(res);
+				const res = await maintenanceActions.getJobs2(
+					this.props.site,
+					"",
+					"",
+					"",
+					null,
+					"",
+				);
+				// console.log('WidgetSmall - refresh', res.data.Items);
+				this.props.jobsLoaded(res.data.Items);
 			} catch (error) {
 				console.log("refresh error", error);
 			} finally {

package/src/core.config.js

@@ -3,7 +3,6 @@ import * as PlussCore from "@plusscommunities/pluss-core-app";
 
 const {
 	Apis,
-	Fonts,
 	Actions,
 	ActionTypes,
 	Config,
@@ -16,7 +15,6 @@ const {
 } = PlussCore;
 export {
 	Apis,
-	Fonts,
 	Actions,
 	ActionTypes,
 	Config,

package/src/screens/JobTypePicker.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import _ from "lodash";
-import { TouchableOpacity, View, ScrollView, Text } from "react-native";
+import { TouchableOpacity, View, ScrollView } from "react-native";
+import { Text } from "@plusscommunities/pluss-core-app/components";
 import { connect } from "react-redux";
 import { Icon } from "@rneui/themed";
 import { Services } from "../feature.config";