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

package/src/components/MaintenanceList.js

@@ -1,326 +1,405 @@
-import React, { Component } from 'react';
-import { View, StyleSheet, FlatList, TouchableOpacity, Text } from 'react-native';
-import _ from 'lodash';
-import { connect } from 'react-redux';
-import { maintenanceActions } from '../apis';
-import { jobsLoaded, jobAdded, jobsAdded, jobStatusesUpdate, jobHideSeenUpdate, jobsFilterLoaded } from '../actions';
-import MaintenanceListItem from '../components/MaintenanceListItem';
-import FilterPopupMenu from './FilterPopupMenu';
-import { Components, Colours, Helper } from '../core.config';
-import { values } from '../values.config';
+import React, { Component } from "react";
+import {
+	View,
+	StyleSheet,
+	FlatList,
+	TouchableOpacity,
+	Text,
+} from "react-native";
+import _ from "lodash";
+import { connect } from "react-redux";
+import { maintenanceActions } from "../apis";
+import {
+	jobsLoaded,
+	jobAdded,
+	jobsAdded,
+	jobStatusesUpdate,
+	jobHideSeenUpdate,
+	jobsFilterLoaded,
+} from "../actions";
+import MaintenanceListItem from "../components/MaintenanceListItem";
+import FilterPopupMenu from "./FilterPopupMenu";
+import { Components, Colours, Helper } from "../core.config";
+import { values } from "../values.config";
 
 class MaintenanceList extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      types: [],
-      filteredList: props.jobs,
-      loading: false,
-      searchText: '',
-      showFilterPopup: false,
-    };
-  }
-
-  componentDidMount() {
-    this.props.jobStatusesUpdate(this.props.site);
-    this.props.jobHideSeenUpdate(this.props.site);
-    this.refresh();
-    this.refreshTypes();
-    this.resetDataSource();
-  }
-
-  componentDidUpdate(prevProps) {
-    if (!prevProps.dataUpdated && this.props.dataUpdated) this.refresh();
-    if (!_.isEqual(prevProps.jobs, this.props.jobs) || !_.isEqual(prevProps.jobfilters, this.props.jobfilters)) this.resetDataSource();
-  }
-
-  refresh = () => {
-    this.onLoadingChanged(true, async () => {
-      try {
-        const { jobfilters } = this.props;
-        const res = await maintenanceActions.getJobsRecursive(this.props.site, jobfilters.status, jobfilters.priority, jobfilters.type);
-        // 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);
-        }
-      } catch (error) {
-        console.log('refresh error', error);
-      } finally {
-        this.onLoadingChanged(false);
-      }
-    });
-  };
-
-  refreshTypes = async () => {
-    const { data } = await maintenanceActions.getJobTypes(Helper.getSite(this.props.site));
-    const types = data.map(t => {
-      return { label: t.typeName, value: t.typeName };
-    });
-    types.splice(0, 0, { label: 'All', value: '' });
-    // console.log('refreshTypes', types);
-    this.setState({ types });
-  };
-
-  fetchJob = jobId => {
-    if (this.state.loading) return;
-
-    this.onLoadingChanged(true, async () => {
-      try {
-        const job = await maintenanceActions.getJobByJobId(this.props.site, jobId);
-        // console.log('fetchJob', job?.data);
-        this.props.jobAdded(job.data);
-      } catch (error) {
-        console.log('fetchJob error', error);
-      } finally {
-        this.onLoadingChanged(false);
-      }
-    });
-  };
-
-  getEmptyStateText() {
-    if (this.props.options && !_.isEmpty(this.props.options.EmptyText)) {
-      return this.props.options.EmptyText;
-    }
-    return this.props.userCategory === 'staff' ? values.emptyRequestsStaff : values.emptyRequestsUser;
-  }
-
-  resetDataSource = (source = '') => {
-    const { jobfilters } = this.props;
-    const { searchText } = this.state;
-    const { jobs } = this.props;
-
-    let filteredList = jobs;
-    let jobIdMatch = null;
-    if (searchText) {
-      jobIdMatch = _.find(jobs, j => j.jobId === searchText);
-      filteredList = jobs.filter(j => {
-        if (j.room && j.room.toLowerCase().indexOf(searchText.toLowerCase()) > -1) {
-          return true;
-        }
-        return false;
-      });
-      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));
-    if (jobIdMatch) {
-      const jobIndex = filteredList.indexOf(jobIdMatch);
-      if (jobIndex > -1) {
-        filteredList.splice(jobIndex, 1);
-      }
-      filteredList.unshift(jobIdMatch);
-    }
-    if (source !== 'search') this.refresh();
-
-    this.setState({ filteredList });
-  };
-
-  onLoadingChanged = (loading, callback) => {
-    this.setState({ loading }, () => {
-      if (this.props.onLoadingChanged) this.props.onLoadingChanged(this.state.loading);
-      if (callback) callback();
-    });
-  };
-
-  onSearchText = value => {
-    this.setState({ searchText: value }, () => {
-      if (_.isEmpty(this.state.searchText)) this.resetDataSource('search');
-    });
-  };
-
-  onSearchSubmit = () => {
-    this.resetDataSource('search');
-  };
-
-  onToggleFilter = () => {
-    this.setState({ showFilterPopup: !this.state.showFilterPopup });
-  };
-
-  onSelectFilter = selected => {
-    this.props.jobsFilterLoaded(selected);
-    this.onToggleFilter();
-  };
-
-  getFilterButtonText = () => {
-    const { jobfilters } = this.props;
-    const filterTexts = [];
-    if (!_.isEmpty(jobfilters.status)) {
-      filterTexts.push(jobfilters.statusText);
-    }
-    if (!_.isEmpty(jobfilters.priority)) {
-      filterTexts.push(jobfilters.priorityText);
-    }
-    if (!_.isEmpty(jobfilters.type)) {
-      filterTexts.push(jobfilters.type);
-    }
-    if (!_.isEmpty(jobfilters.assignee)) {
-      filterTexts.push(jobfilters.assigneeName);
-    }
-    if (_.isEmpty(filterTexts)) {
-      return 'Filter';
-    }
-    return `Filtering by ${filterTexts.join(', ')}`;
-  };
-
-  renderEmptyList() {
-    return this.state.loading ? null : <Components.EmptyStateMain title={this.getEmptyStateText()} style={{ marginHorizontal: 16 }} />;
-  }
-
-  renderFilterButton() {
-    return (
-      <TouchableOpacity onPress={this.onToggleFilter}>
-        <View style={styles.filterButton}>
-          <Text style={[styles.filterButtonText, { color: this.props.colourBrandingMain }]}>{this.getFilterButtonText()}</Text>
-        </View>
-      </TouchableOpacity>
-    );
-  }
-
-  renderSearch() {
-    if (!this.props.hasPermission) return null;
-
-    return (
-      <View style={styles.searchContainer}>
-        <Components.GenericInput
-          placeholder={`Search by ${values.textEntityName} ID or Address`}
-          value={this.state.searchText}
-          onChangeText={this.onSearchText}
-          onSubmitEditing={this.onSearchSubmit}
-          squaredCorners
-          hasClear
-          // keyboardType={'numeric'}
-          returnKeyType={'done'}
-        />
-      </View>
-    );
-  }
-
-  renderListHeader() {
-    const { ListHeaderComponent } = this.props;
-    return (
-      <View>
-        {ListHeaderComponent ? ListHeaderComponent : <View style={{ height: 8 }} />}
-        {this.renderFilterButton()}
-        {this.renderSearch()}
-      </View>
-    );
-  }
-
-  renderList() {
-    const { filteredList } = this.state;
-
-    return (
-      <FlatList
-        keyboardShouldPersistTaps="always"
-        style={{ flex: 1 }}
-        contentContainerStyle={{ paddingBottom: 16 }}
-        data={filteredList}
-        keyExtractor={item => item.id}
-        renderItem={({ item }) => <MaintenanceListItem style={this.props.itemStyle} job={item} />}
-        ListEmptyComponent={this.renderEmptyList()}
-        ListHeaderComponent={this.renderListHeader()}
-      />
-    );
-  }
-
-  renderFilterPopup() {
-    const { jobfilters } = this.props;
-    const { showFilterPopup, types } = this.state;
-    if (!showFilterPopup) return null;
-
-    return (
-      <FilterPopupMenu
-        site={this.props.site}
-        types={types}
-        status={jobfilters.status}
-        priority={jobfilters.priority}
-        assignee={jobfilters.assignee}
-        type={jobfilters.type}
-        onClose={this.onSelectFilter}
-      />
-    );
-  }
-
-  render() {
-    return (
-      <View style={[styles.container, this.props.style]}>
-        {this.renderList()}
-        {this.renderFilterPopup()}
-      </View>
-    );
-  }
+	constructor(props) {
+		super(props);
+
+		this.state = {
+			types: [],
+			filteredList: props.jobs,
+			loading: false,
+			searchText: "",
+			showFilterPopup: false,
+		};
+	}
+
+	componentDidMount() {
+		this.props.jobStatusesUpdate(this.props.site);
+		this.props.jobHideSeenUpdate(this.props.site);
+		this.refresh();
+		this.refreshTypes();
+		this.resetDataSource();
+	}
+
+	componentDidUpdate(prevProps) {
+		if (!prevProps.dataUpdated && this.props.dataUpdated) this.refresh();
+		if (
+			!_.isEqual(prevProps.jobs, this.props.jobs) ||
+			!_.isEqual(prevProps.jobfilters, this.props.jobfilters)
+		)
+			this.resetDataSource();
+	}
+
+	refresh = () => {
+		this.onLoadingChanged(true, async () => {
+			try {
+				const { jobfilters } = this.props;
+				const res = await maintenanceActions.getJobsRecursive(
+					this.props.site,
+					jobfilters.status,
+					jobfilters.priority,
+					jobfilters.type,
+				);
+				// 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);
+				}
+			} catch (error) {
+				console.log("refresh error", error);
+			} finally {
+				this.onLoadingChanged(false);
+			}
+		});
+	};
+
+	refreshTypes = async () => {
+		const { data } = await maintenanceActions.getJobTypes(
+			Helper.getSite(this.props.site),
+		);
+		const types = data.map((t) => {
+			return { label: t.typeName, value: t.typeName };
+		});
+		types.splice(0, 0, { label: "All", value: "" });
+		// console.log('refreshTypes', types);
+		this.setState({ types });
+	};
+
+	fetchJob = (jobId) => {
+		if (this.state.loading) return;
+
+		this.onLoadingChanged(true, async () => {
+			try {
+				const job = await maintenanceActions.getJobByJobId(
+					this.props.site,
+					jobId,
+				);
+				// console.log('fetchJob', job?.data);
+				this.props.jobAdded(job.data);
+			} catch (error) {
+				console.log("fetchJob error", error);
+			} finally {
+				this.onLoadingChanged(false);
+			}
+		});
+	};
+
+	getEmptyStateText() {
+		if (this.props.options && !_.isEmpty(this.props.options.EmptyText)) {
+			return this.props.options.EmptyText;
+		}
+		return this.props.userCategory === "staff"
+			? values.emptyRequestsStaff
+			: values.emptyRequestsUser;
+	}
+
+	resetDataSource = (source = "") => {
+		const { jobfilters } = this.props;
+		const { searchText } = this.state;
+		const { jobs } = this.props;
+
+		let filteredList = jobs;
+		let jobIdMatch = null;
+		if (searchText) {
+			jobIdMatch = _.find(jobs, (j) => j.jobId === searchText);
+			filteredList = jobs.filter((j) => {
+				if (
+					j.room &&
+					j.room.toLowerCase().indexOf(searchText.toLowerCase()) > -1
+				) {
+					return true;
+				}
+				return false;
+			});
+			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),
+			);
+		if (jobIdMatch) {
+			const jobIndex = filteredList.indexOf(jobIdMatch);
+			if (jobIndex > -1) {
+				filteredList.splice(jobIndex, 1);
+			}
+			filteredList.unshift(jobIdMatch);
+		}
+		if (source !== "search") this.refresh();
+
+		this.setState({ filteredList });
+	};
+
+	onLoadingChanged = (loading, callback) => {
+		this.setState({ loading }, () => {
+			if (this.props.onLoadingChanged)
+				this.props.onLoadingChanged(this.state.loading);
+			if (callback) callback();
+		});
+	};
+
+	onSearchText = (value) => {
+		this.setState({ searchText: value }, () => {
+			if (_.isEmpty(this.state.searchText)) this.resetDataSource("search");
+		});
+	};
+
+	onSearchSubmit = () => {
+		this.resetDataSource("search");
+	};
+
+	onToggleFilter = () => {
+		this.setState({ showFilterPopup: !this.state.showFilterPopup });
+	};
+
+	onSelectFilter = (selected) => {
+		this.props.jobsFilterLoaded(selected);
+		this.onToggleFilter();
+	};
+
+	getFilterButtonText = () => {
+		const { jobfilters } = this.props;
+		const filterTexts = [];
+		if (!_.isEmpty(jobfilters.status)) {
+			filterTexts.push(jobfilters.statusText);
+		}
+		if (!_.isEmpty(jobfilters.priority)) {
+			filterTexts.push(jobfilters.priorityText);
+		}
+		if (!_.isEmpty(jobfilters.type)) {
+			filterTexts.push(jobfilters.type);
+		}
+		if (!_.isEmpty(jobfilters.assignee)) {
+			filterTexts.push(jobfilters.assigneeName);
+		}
+		if (_.isEmpty(filterTexts)) {
+			return "Filter";
+		}
+		return `Filtering by ${filterTexts.join(", ")}`;
+	};
+
+	renderEmptyList() {
+		return this.state.loading ? null : (
+			<Components.EmptyStateMain
+				title={this.getEmptyStateText()}
+				style={{ marginHorizontal: 16 }}
+			/>
+		);
+	}
+
+	renderFilterButton() {
+		return (
+			<TouchableOpacity onPress={this.onToggleFilter}>
+				<View style={styles.filterButton}>
+					<Text
+						style={[
+							styles.filterButtonText,
+							{ color: this.props.colourBrandingMain },
+						]}
+					>
+						{this.getFilterButtonText()}
+					</Text>
+				</View>
+			</TouchableOpacity>
+		);
+	}
+
+	renderSearch() {
+		if (!this.props.hasPermission) return null;
+
+		return (
+			<View style={styles.searchContainer}>
+				<Components.GenericInput
+					placeholder={`Search by ${values.textEntityName} ID or Address`}
+					value={this.state.searchText}
+					onChangeText={this.onSearchText}
+					onSubmitEditing={this.onSearchSubmit}
+					squaredCorners
+					hasClear
+					// keyboardType={'numeric'}
+					returnKeyType={"done"}
+				/>
+			</View>
+		);
+	}
+
+	renderListHeader() {
+		const { ListHeaderComponent } = this.props;
+		return (
+			<View>
+				{ListHeaderComponent ? (
+					ListHeaderComponent
+				) : (
+					<View style={{ height: 8 }} />
+				)}
+				{this.renderFilterButton()}
+				{this.renderSearch()}
+			</View>
+		);
+	}
+
+	renderList() {
+		const { filteredList } = this.state;
+
+		return (
+			<FlatList
+				keyboardShouldPersistTaps="always"
+				style={{ flex: 1 }}
+				contentContainerStyle={{ paddingBottom: 16 }}
+				data={filteredList}
+				keyExtractor={(item) => item.id}
+				renderItem={({ item }) => (
+					<MaintenanceListItem style={this.props.itemStyle} job={item} />
+				)}
+				ListEmptyComponent={this.renderEmptyList()}
+				ListHeaderComponent={this.renderListHeader()}
+			/>
+		);
+	}
+
+	renderFilterPopup() {
+		const { jobfilters } = this.props;
+		const { showFilterPopup, types } = this.state;
+		if (!showFilterPopup) return null;
+
+		return (
+			<FilterPopupMenu
+				site={this.props.site}
+				types={types}
+				status={jobfilters.status}
+				priority={jobfilters.priority}
+				assignee={jobfilters.assignee}
+				type={jobfilters.type}
+				onClose={this.onSelectFilter}
+			/>
+		);
+	}
+
+	render() {
+		return (
+			<View style={[styles.container, this.props.style]}>
+				{this.renderList()}
+				{this.renderFilterPopup()}
+			</View>
+		);
+	}
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-  },
-  filterContainerOuter: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 16,
-  },
-  filterTitle: {
-    fontFamily: 'sf-bold',
-    fontSize: 11,
-    letterSpacing: 0.8,
-    color: '#4d4d4d',
-  },
-  filterContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  filterText: {
-    fontFamily: 'sf-semibold',
-    fontSize: 16,
-    marginRight: 6,
-  },
-  filterIcon: {
-    fontSize: 20,
-  },
-  searchContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingBottom: 8,
-    paddingHorizontal: 16,
-  },
-  filterButton: {
-    paddingBottom: 8,
-    paddingHorizontal: 16,
-    flexDirection: 'row-reverse',
-  },
-  filterButtonText: {
-    fontFamily: 'sf-semibold',
-    fontSize: 16,
-  },
+	container: {
+		flex: 1,
+		backgroundColor: "#fff",
+	},
+	filterContainerOuter: {
+		flexDirection: "row",
+		justifyContent: "space-between",
+		alignItems: "center",
+		paddingHorizontal: 16,
+		paddingVertical: 16,
+	},
+	filterTitle: {
+		fontFamily: "sf-bold",
+		fontSize: 11,
+		letterSpacing: 0.8,
+		color: "#4d4d4d",
+	},
+	filterContainer: {
+		flexDirection: "row",
+		alignItems: "center",
+	},
+	filterText: {
+		fontFamily: "sf-semibold",
+		fontSize: 16,
+		marginRight: 6,
+	},
+	filterIcon: {
+		fontSize: 20,
+	},
+	searchContainer: {
+		flexDirection: "row",
+		alignItems: "center",
+		paddingBottom: 8,
+		paddingHorizontal: 16,
+	},
+	filterButton: {
+		paddingBottom: 8,
+		paddingHorizontal: 16,
+		flexDirection: "row-reverse",
+	},
+	filterButtonText: {
+		fontFamily: "sf-semibold",
+		fontSize: 16,
+	},
 });
 
-const mapStateToProps = state => {
-  const { user, notifications } = state;
-  const jobs = state[values.reducerKey];
-  const jobsOrdered = _.orderBy(jobs.jobs, ['createdUnix'], ['desc']);
-  const hasPermission = _.includes(user.permissions, 'maintenanceTracking');
-
-  return {
-    hasPermission,
-    jobs: jobsOrdered,
-    site: user.site,
-    userCategory: user.category,
-    colourBrandingMain: Colours.getMainBrandingColourFromState(state),
-    dataUpdated: notifications.dataUpdated[values.updateKey],
-    statusTypes: state[values.reducerKey].jobstatuses,
-    jobfilters: state[values.reducerKey].jobfilters || {},
-  };
+const mapStateToProps = (state) => {
+	const { user, notifications } = state;
+	const jobs = state[values.reducerKey];
+	const jobsOrdered = _.orderBy(jobs.jobs, ["createdUnix"], ["desc"]);
+	const hasPermission = _.includes(user.permissions, "maintenanceTracking");
+
+	return {
+		hasPermission,
+		jobs: jobsOrdered,
+		site: user.site,
+		userCategory: user.category,
+		colourBrandingMain: Colours.getMainBrandingColourFromState(state),
+		dataUpdated: notifications.dataUpdated[values.updateKey],
+		statusTypes: state[values.reducerKey].jobstatuses,
+		jobfilters: state[values.reducerKey].jobfilters || {},
+	};
 };
 
-export default connect(mapStateToProps, { jobsLoaded, jobAdded, jobsAdded, jobStatusesUpdate, jobHideSeenUpdate, jobsFilterLoaded }, null, {
-  forwardRef: true,
-})(MaintenanceList);
+export default connect(
+	mapStateToProps,
+	{
+		jobsLoaded,
+		jobAdded,
+		jobsAdded,
+		jobStatusesUpdate,
+		jobHideSeenUpdate,
+		jobsFilterLoaded,
+	},
+	null,
+	{
+		forwardRef: true,
+	},
+)(MaintenanceList);