@plusscommunities/pluss-maintenance-app-forms 7.0.21 → 7.0.23-beta.0

package/src/components/MaintenanceList.js

@@ -1,405 +1,326 @@
-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);