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

package/src/components/FilterPopupMenu.js

@@ -1,256 +1,342 @@
-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 React, { Component } from "react";
+import { Text } from "@plusscommunities/pluss-core-app/components";
+import {
+	View,
+	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 || '',
-      selectedType: props.type || '',
-      selectedAssignee: props.assignee || '',
-      assignees: [],
-    };
-    this.statusOptions = [
-      {
-        label: 'All',
-        value: '',
-      },
-      {
-        label: 'Incomplete',
-        value: 'Unassigned|In Progress',
-      },
-      {
-        label: 'Open',
-        value: 'Unassigned',
-      },
-      {
-        label: 'In Progress',
-        value: 'In Progress',
-      },
-      {
-        label: 'Completed',
-        value: 'Completed',
-      },
-    ];
-  }
+		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();
+		}
+	}
 
-  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');
+	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;
+	};
 
-      assignees.splice(0, 0, { label: 'All', value: '' });
+	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;
+	};
 
-      const newState = { assignees };
+	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");
 
-      if (!assignees.some(a => a.value === this.state.selectedAssignee)) {
-        newState.selectedAssignee = '';
-      }
-      // console.log('refreshassignees', assignees);
-      this.setState(newState);
-    } catch (error) {
-      console.error('getAssignees', error);
-    }
-  };
+			assignees.splice(0, 0, { label: "All", value: "" });
 
-  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 });
-  };
+			const newState = { assignees };
 
-  onSelectOption = (key, value) => {
-    const newState = {};
-    newState[key] = value;
-    this.setState(newState);
-  };
+			if (!assignees.some((a) => a.value === this.state.selectedAssignee)) {
+				newState.selectedAssignee = "";
+			}
+			// console.log('refreshassignees', assignees);
+			this.setState(newState);
+		} catch (error) {
+			console.error("getAssignees", error);
+		}
+	};
 
-  onDone = () => {
-    const { onClose } = this.props;
-    const { selectedStatus, selectedType, selectedAssignee } = this.state;
-    if (onClose)
-      onClose({
-        status: selectedStatus,
-        statusText: this.statusOptions.find(o => o.value === selectedStatus)?.label,
-        type: selectedType,
-        assignee: selectedAssignee,
-        assigneeName: this.state.assignees.find(a => a.value === selectedAssignee)?.label,
-      });
-  };
+	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 });
+	};
 
-  renderTitle() {
-    const { title } = this.props;
-    return (
-      <View style={styles.titleContainer}>
-        <Text style={styles.titleText}>{title || 'Filter By'}</Text>
-      </View>
-    );
-  }
+	onSelectOption = (key, value) => {
+		const newState = {};
+		newState[key] = value;
+		this.setState(newState);
+	};
 
-  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>
-    );
-  }
+	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,
+			});
+	};
 
-  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>
-    );
-  }
+	renderTitle() {
+		const { title } = this.props;
+		return (
+			<View style={styles.titleContainer}>
+				<Text style={styles.titleText}>{title || "Filter By"}</Text>
+			</View>
+		);
+	}
 
-  render() {
-    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.statusOptions, 'selectedStatus')}
-              {this.renderOptions('Type', this.state.types, 'selectedType')}
-              {this.renderOptions('Assigned To', this.state.assignees, 'selectedAssignee')}
-            </ScrollView>
-            {this.renderCancel()}
-          </View>
-        </View>
-      </Modal>
-    );
-  }
+	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>
+		);
+	}
+
+	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>
+		);
+	}
 }
 
 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 {
-    site: user.site,
-    colourBrandingMain: Colours.getMainBrandingColourFromState(state),
-  };
+	return {
+		user,
+		site: user.site,
+		colourBrandingMain: Colours.getMainBrandingColourFromState(state),
+		statusTypes: state[values.reducerKey].jobstatuses,
+	};
 };
 
 export default connect(mapStateToProps, {})(FilterPopupMenu);