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

package/src/components/FilterPopupMenu.js

@@ -1,342 +1,285 @@
-import React, { Component } from "react";
-import {
-	View,
-	Text,
-	TouchableOpacity,
-	Modal,
-	ScrollView,
-	Dimensions,
-} from "react-native";
-import { connect } from "react-redux";
-import _ from "lodash";
-import { maintenanceActions } from "../apis";
-import { Colours, Helper } from "../core.config";
-import {
-	getJobStatusOptions,
-	getIncompleteJobStatuses,
-	jobPriorityOptions,
-	getDefaultJobPriority,
-} from "../helper";
-import { values } from "../values.config";
+import React, { Component } from 'react';
+import { View, Text, TouchableOpacity, Modal, ScrollView, Dimensions } from 'react-native';
+import { connect } from 'react-redux';
+import _ from 'lodash';
+import { maintenanceActions } from '../apis';
+import { Colours, Helper } from '../core.config';
+import { getJobStatusOptions, getIncompleteJobStatuses, jobPriorityOptions, getDefaultJobPriority } from '../helper';
+import { values } from '../values.config';
 
-const SCREEN_HEIGHT = Dimensions.get("window").height;
+const SCREEN_HEIGHT = Dimensions.get('window').height;
 
 class FilterPopupMenu extends Component {
-	constructor(props) {
-		super(props);
+  constructor(props) {
+    super(props);
 
-		this.state = {
-			types: props.types || [],
-			selectedStatus: props.status || "",
-			selectedPriority: props.priority || "",
-			selectedType: props.type || "",
-			selectedAssignee: props.assignee || "",
-			assignees: [],
-		};
-	}
+    this.state = {
+      types: props.types || [],
+      selectedStatus: props.status || '',
+      selectedPriority: props.priority || '',
+      selectedType: props.type || '',
+      selectedAssignee: props.assignee || '',
+      assignees: [],
+    };
+  }
 
-	componentDidMount() {
-		this.getAssignees();
-		if (_.isEmpty(this.state.types)) this.refreshTypes();
-	}
+  componentDidMount() {
+    this.getAssignees();
+    if (_.isEmpty(this.state.types)) this.refreshTypes();
+  }
 
-	componentDidUpdate(prevProps) {
-		if (prevProps.site !== this.props.site) {
-			this.refreshTypes();
-		}
-	}
+  componentDidUpdate(prevProps) {
+    if (prevProps.site !== this.props.site) {
+      this.refreshTypes();
+    }
+  }
 
-	getStatusOptions = () => {
-		const statusOptions = getJobStatusOptions(this.props);
-		const options = [
-			{
-				label: "All",
-				value: "",
-			},
-			{
-				label: "Incomplete",
-				value: `Unassigned|${getIncompleteJobStatuses(this.props)
-					.map((s) => s.text)
-					.join("|")}`,
-			},
-			...statusOptions.map((s) => ({
-				label: s.text,
-				value: s.text,
-			})),
-		];
-		// console.log('getStatusOptions', JSON.stringify(options, null, 2));
-		return options;
-	};
+  getStatusOptions = () => {
+    const statusOptions = getJobStatusOptions(this.props);
+    const options = [
+      {
+        label: 'All',
+        value: '',
+      },
+      {
+        label: 'Incomplete',
+        value: `Unassigned|${getIncompleteJobStatuses(this.props)
+          .map(s => s.text)
+          .join('|')}`,
+      },
+      ...statusOptions.map(s => ({
+        label: s.text,
+        value: s.text,
+      })),
+    ];
+    // console.log('getStatusOptions', JSON.stringify(options, null, 2));
+    return options;
+  };
 
-	getPriorityOptions = () => {
-		const priorityOptions = jobPriorityOptions;
-		const defaultPriority = getDefaultJobPriority();
-		const options = [
-			{
-				label: "All",
-				value: "",
-			},
-			...priorityOptions.map((p) => ({
-				label: p.label,
-				value:
-					p.label === defaultPriority?.label ? `${p.label}|undefined` : p.label,
-			})),
-		];
-		// console.log('getPriorityOptions', JSON.stringify(options, null, 2));
-		return options;
-	};
+  getPriorityOptions = () => {
+    const priorityOptions = jobPriorityOptions;
+    const defaultPriority = getDefaultJobPriority();
+    const options = [
+      {
+        label: 'All',
+        value: '',
+      },
+      ...priorityOptions.map(p => ({
+        label: p.label,
+        value: p.label === defaultPriority?.label ? `${p.label}|undefined` : p.label,
+      })),
+    ];
+    // console.log('getPriorityOptions', JSON.stringify(options, null, 2));
+    return options;
+  };
 
-	getAssignees = async () => {
-		try {
-			const res = await maintenanceActions.getAssignees(this.props.site);
-			let assignees = res.data.Users.map((t) => {
-				return { label: t.displayName, value: t.id };
-			});
-			assignees = _.orderBy(assignees, "label");
+  getAssignees = async () => {
+    try {
+      const res = await maintenanceActions.getAssignees(this.props.site);
+      let assignees = res.data.Users.map(t => {
+        return { label: t.displayName, value: t.id };
+      });
+      assignees = _.orderBy(assignees, 'label');
 
-			assignees.splice(0, 0, { label: "All", value: "" });
+      assignees.splice(0, 0, { label: 'All', value: '' });
 
-			const newState = { assignees };
+      const newState = { assignees };
 
-			if (!assignees.some((a) => a.value === this.state.selectedAssignee)) {
-				newState.selectedAssignee = "";
-			}
-			// console.log('refreshassignees', assignees);
-			this.setState(newState);
-		} catch (error) {
-			console.error("getAssignees", error);
-		}
-	};
+      if (!assignees.some(a => a.value === this.state.selectedAssignee)) {
+        newState.selectedAssignee = '';
+      }
+      // console.log('refreshassignees', assignees);
+      this.setState(newState);
+    } catch (error) {
+      console.error('getAssignees', error);
+    }
+  };
 
-	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 });
-	};
+  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 });
+  };
 
-	onSelectOption = (key, value) => {
-		const newState = {};
-		newState[key] = value;
-		this.setState(newState);
-	};
+  onSelectOption = (key, value) => {
+    const newState = {};
+    newState[key] = value;
+    this.setState(newState);
+  };
 
-	onDone = () => {
-		const { onClose } = this.props;
-		const { selectedStatus, selectedPriority, selectedType, selectedAssignee } =
-			this.state;
-		if (onClose)
-			onClose({
-				status: selectedStatus,
-				statusText: this.getStatusOptions().find(
-					(o) => o.value === selectedStatus,
-				)?.label,
-				priority: selectedPriority,
-				priorityText: this.getPriorityOptions().find(
-					(o) => o.value === selectedPriority,
-				)?.label,
-				type: selectedType,
-				assignee: selectedAssignee,
-				assigneeName: this.state.assignees.find(
-					(a) => a.value === selectedAssignee,
-				)?.label,
-			});
-	};
+  onDone = () => {
+    const { onClose } = this.props;
+    const { selectedStatus, selectedPriority, selectedType, selectedAssignee } = this.state;
+    if (onClose)
+      onClose({
+        status: selectedStatus,
+        statusText: this.getStatusOptions().find(o => o.value === selectedStatus)?.label,
+        priority: selectedPriority,
+        priorityText: this.getPriorityOptions().find(o => o.value === selectedPriority)?.label,
+        type: selectedType,
+        assignee: selectedAssignee,
+        assigneeName: this.state.assignees.find(a => a.value === selectedAssignee)?.label,
+      });
+  };
 
-	renderTitle() {
-		const { title } = this.props;
-		return (
-			<View style={styles.titleContainer}>
-				<Text style={styles.titleText}>{title || "Filter By"}</Text>
-			</View>
-		);
-	}
+  renderTitle() {
+    const { title } = this.props;
+    return (
+      <View style={styles.titleContainer}>
+        <Text style={styles.titleText}>{title || 'Filter By'}</Text>
+      </View>
+    );
+  }
 
-	renderCancel() {
-		const { colourBrandingMain, cancelText } = this.props;
-		return (
-			<TouchableOpacity onPress={this.onDone}>
-				<View style={styles.cancelContainer}>
-					<Text style={[styles.cancelText, { color: colourBrandingMain }]}>
-						{cancelText || "Done"}
-					</Text>
-				</View>
-			</TouchableOpacity>
-		);
-	}
+  renderCancel() {
+    const { colourBrandingMain, cancelText } = this.props;
+    return (
+      <TouchableOpacity onPress={this.onDone}>
+        <View style={styles.cancelContainer}>
+          <Text style={[styles.cancelText, { color: colourBrandingMain }]}>{cancelText || 'Done'}</Text>
+        </View>
+      </TouchableOpacity>
+    );
+  }
 
-	renderOptions(title, options, selectedKey) {
-		const { colourBrandingMain } = this.props;
-		return (
-			<View style={styles.optionsContainer}>
-				<Text style={styles.optionsTitle}>{title}</Text>
-				<View style={styles.options}>
-					{options.map((o) => {
-						const selected = this.state[selectedKey];
-						const backgroundColor =
-							o.value === selected ? colourBrandingMain : "#fff";
-						const color = o.value === selected ? "#fff" : colourBrandingMain;
-						return (
-							<TouchableOpacity
-								key={o.label}
-								onPress={() => this.onSelectOption(selectedKey, o.value)}
-							>
-								<View
-									style={[
-										styles.optionContainer,
-										{ backgroundColor, borderColor: colourBrandingMain },
-									]}
-								>
-									<Text style={[styles.optionText, { color }]}>{o.label}</Text>
-								</View>
-							</TouchableOpacity>
-						);
-					})}
-				</View>
-			</View>
-		);
-	}
+  renderOptions(title, options, selectedKey) {
+    const { colourBrandingMain } = this.props;
+    return (
+      <View style={styles.optionsContainer}>
+        <Text style={styles.optionsTitle}>{title}</Text>
+        <View style={styles.options}>
+          {options.map(o => {
+            const selected = this.state[selectedKey];
+            const backgroundColor = o.value === selected ? colourBrandingMain : '#fff';
+            const color = o.value === selected ? '#fff' : colourBrandingMain;
+            return (
+              <TouchableOpacity key={o.label} onPress={() => this.onSelectOption(selectedKey, o.value)}>
+                <View style={[styles.optionContainer, { backgroundColor, borderColor: colourBrandingMain }]}>
+                  <Text style={[styles.optionText, { color }]}>{o.label}</Text>
+                </View>
+              </TouchableOpacity>
+            );
+          })}
+        </View>
+      </View>
+    );
+  }
 
-	render() {
-		// console.log('FilterPopupMenu', JSON.stringify({ category: this.props.user.category, permissions: this.props.user.permissions }, null, 2))
-		const isStaff = this.props.user.category === "staff";
-		const canFilterAssignee = !_.includes(
-			this.props.user.permissions,
-			values.permissionMaintenanceAssignment,
-		);
+  render() {
+    // console.log('FilterPopupMenu', JSON.stringify({ category: this.props.user.category, permissions: this.props.user.permissions }, null, 2))
+    const isStaff = this.props.user.category === 'staff';
+    const canFilterAssignee = !_.includes(this.props.user.permissions, values.permissionMaintenanceAssignment);
 
-		return (
-			<Modal
-				visible
-				transparent
-				animationType="slide"
-				onRequestClose={this.onDone}
-			>
-				<View style={styles.container}>
-					<View style={styles.menu}>
-						{this.renderTitle()}
-						<ScrollView style={styles.optionContent}>
-							{this.renderOptions(
-								"Status",
-								this.getStatusOptions(),
-								"selectedStatus",
-							)}
-							{isStaff
-								? this.renderOptions(
-										"Priority",
-										this.getPriorityOptions(),
-										"selectedPriority",
-									)
-								: null}
-							{this.renderOptions("Type", this.state.types, "selectedType")}
-							{canFilterAssignee
-								? this.renderOptions(
-										"Assigned To",
-										this.state.assignees,
-										"selectedAssignee",
-									)
-								: null}
-						</ScrollView>
-						{this.renderCancel()}
-					</View>
-				</View>
-			</Modal>
-		);
-	}
+    return (
+      <Modal visible transparent animationType="slide" onRequestClose={this.onDone}>
+        <View style={styles.container}>
+          <View style={styles.menu}>
+            {this.renderTitle()}
+            <ScrollView style={styles.optionContent}>
+              {this.renderOptions('Status', this.getStatusOptions(), 'selectedStatus')}
+              {isStaff ? this.renderOptions('Priority', this.getPriorityOptions(), 'selectedPriority') : null}
+              {this.renderOptions('Type', this.state.types, 'selectedType')}
+              {canFilterAssignee ? this.renderOptions('Assigned To', this.state.assignees, 'selectedAssignee') : null}
+            </ScrollView>
+            {this.renderCancel()}
+          </View>
+        </View>
+      </Modal>
+    );
+  }
 }
 
 const styles = {
-	container: {
-		position: "absolute",
-		bottom: 0,
-		left: 0,
-		right: 0,
-		top: 0,
-		backgroundColor: "rgba(0,0,0,0.5)",
-		zIndex: 1000,
-	},
-	menu: {
-		position: "absolute",
-		bottom: 0,
-		left: 0,
-		right: 0,
-		backgroundColor: "#fff",
-		borderTopLeftRadius: 12,
-		borderTopRightRadius: 12,
-		maxHeight: SCREEN_HEIGHT * 0.8,
-	},
-	cancelContainer: {
-		paddingVertical: 16,
-		borderColor: Colours.LINEGREY,
-		borderTopWidth: 1,
-		paddingHorizontal: 16,
-	},
-	cancelText: {
-		fontFamily: "sf-medium",
-		fontSize: 16,
-		textAlign: "center",
-		color: Colours.TEXT_DARK,
-	},
-	titleContainer: {
-		padding: 16,
-		borderColor: Colours.LINEGREY,
-		borderBottomWidth: 1,
-	},
-	titleText: {
-		fontFamily: "sf-semibold",
-		fontSize: 16,
-		textAlign: "center",
-		color: Colours.TEXT_DARK,
-	},
-	optionContent: {
-		paddingVertical: 10,
-	},
-	optionsContainer: {
-		marginHorizontal: 14,
-	},
-	optionsTitle: {
-		fontFamily: "sf-semibold",
-		marginBottom: 4,
-	},
-	options: {
-		flex: 1,
-		flexDirection: "row",
-		flexWrap: "wrap",
-	},
-	optionContainer: {
-		flexDirection: "row",
-		alignItems: "center",
-		justifyContent: "center",
-		minWidth: 50,
-		height: 30,
-		paddingHorizontal: 8,
-		borderRadius: 4,
-		borderWidth: 1,
-		marginRight: 8,
-		marginBottom: 8,
-	},
-	optionText: {
-		color: "#fff",
-		textAlign: "center",
-		fontFamily: "sf-semibold",
-		fontSize: 13,
-	},
+  container: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    zIndex: 1000,
+  },
+  menu: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: '#fff',
+    borderTopLeftRadius: 12,
+    borderTopRightRadius: 12,
+    maxHeight: SCREEN_HEIGHT * 0.8,
+  },
+  cancelContainer: {
+    paddingVertical: 16,
+    borderColor: Colours.LINEGREY,
+    borderTopWidth: 1,
+    paddingHorizontal: 16,
+  },
+  cancelText: {
+    fontFamily: 'sf-medium',
+    fontSize: 16,
+    textAlign: 'center',
+    color: Colours.TEXT_DARK,
+  },
+  titleContainer: {
+    padding: 16,
+    borderColor: Colours.LINEGREY,
+    borderBottomWidth: 1,
+  },
+  titleText: {
+    fontFamily: 'sf-semibold',
+    fontSize: 16,
+    textAlign: 'center',
+    color: Colours.TEXT_DARK,
+  },
+  optionContent: {
+    paddingVertical: 10,
+  },
+  optionsContainer: {
+    marginHorizontal: 14,
+  },
+  optionsTitle: {
+    fontFamily: 'sf-semibold',
+    marginBottom: 4,
+  },
+  options: {
+    flex: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  optionContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minWidth: 50,
+    height: 30,
+    paddingHorizontal: 8,
+    borderRadius: 4,
+    borderWidth: 1,
+    marginRight: 8,
+    marginBottom: 8,
+  },
+  optionText: {
+    color: '#fff',
+    textAlign: 'center',
+    fontFamily: 'sf-semibold',
+    fontSize: 13,
+  },
 };
 
-const mapStateToProps = (state) => {
-	const { user } = state;
+const mapStateToProps = state => {
+  const { user } = state;
 
-	return {
-		user,
-		site: user.site,
-		colourBrandingMain: Colours.getMainBrandingColourFromState(state),
-		statusTypes: state[values.reducerKey].jobstatuses,
-	};
+  return {
+    user,
+    site: user.site,
+    colourBrandingMain: Colours.getMainBrandingColourFromState(state),
+    statusTypes: state[values.reducerKey].jobstatuses,
+  };
 };
 
 export default connect(mapStateToProps, {})(FilterPopupMenu);