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

package/src/components/MaintenanceWidgetItem.js

@@ -1,132 +1,158 @@
-import React, { Component } from 'react';
-import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
-import { connect } from 'react-redux';
-import { Icon } from 'react-native-elements';
-import moment from 'moment';
-import _ from 'lodash';
-import { getJobStatusProps, jobStatusOptions } from '../helper';
-import { Services } from '../feature.config';
-import { Colours, Helper } from '../core.config';
-import { values } from '../values.config';
+import React, { Component } from "react";
+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";
+import _ from "lodash";
+import { getJobStatus } from "../helper";
+import { Services } from "../feature.config";
+import { Colours, Helper } from "../core.config";
+import { values } from "../values.config";
 
 class MaintenanceWidgetItem extends Component {
-  onPressJob = () => {
-    Services.navigation.navigate(values.screenRequestDetail, { job: this.props.job });
-  };
+	onPressJob = () => {
+		Services.navigation.navigate(values.screenRequestDetail, {
+			job: this.props.job,
+		});
+	};
 
-  render() {
-    const { job } = this.props;
-    const createdTime = moment(job.createdUnix);
-    const createdTimeText = `${createdTime.format('ddd, D MMMM')} • ${createdTime.format('h:mma')}`;
-    const { statusText, statusColor } = getJobStatusProps(job.status);
-    const seenText = (() => {
-      if (!job.status || job.status === jobStatusOptions[0].name) {
-        return job.seen ? 'Seen' : 'Unseen';
-      }
-      return '';
-    })();
+	render() {
+		const { job, hideSeen } = this.props;
+		const createdTime = moment(job.createdUnix);
+		const createdTimeText = `${createdTime.format("ddd, D MMMM")} • ${createdTime.format("h:mma")}`;
+		const status = getJobStatus(job.status, this.props);
+		const seenText = (() => {
+			if (!job.status || job.status === getJobStatus(null, this.props).text) {
+				return job.seen ? "Seen" : "Unseen";
+			}
+			return "";
+		})();
 
-    return (
-      <TouchableOpacity key={job.id} onPress={this.onPressJob}>
-        <View style={styles.jobContainer}>
-          <View style={styles.jobInnerContainer}>
-            <View style={styles.jobTopSection}>
-              <Text numberOfLines={2} style={styles.jobTitleText}>
-                {job.title}
-              </Text>
-              <Text style={styles.jobCreatedTimeText}>{createdTimeText}</Text>
-              <View style={styles.jobSeenContainer}>
-                {job.seen && !_.isEmpty(seenText) && (
-                  <Icon name="check" type="font-awesome" iconStyle={[styles.jobSeenIcon, { color: this.props.colourBrandingMain }]} />
-                )}
-                <Text style={[styles.jobSeenText, job.seen && { color: this.props.colourBrandingMain }]}>{seenText}</Text>
-              </View>
-            </View>
-            <View style={styles.jobBottomSection}>
-              <View style={[styles.jobStatusContainer, { backgroundColor: statusColor }]}>
-                {/* <Icon name="wrench" type="font-awesome" iconStyle={styles.jobStatusIcon} /> */}
-                <Text style={styles.jobStatusText}>{statusText}</Text>
-              </View>
-            </View>
-          </View>
-        </View>
-      </TouchableOpacity>
-    );
-  }
+		return (
+			<TouchableOpacity key={job.id} onPress={this.onPressJob}>
+				<View style={styles.jobContainer}>
+					<View style={styles.jobInnerContainer}>
+						<View style={styles.jobTopSection}>
+							<Text numberOfLines={2} style={styles.jobTitleText}>
+								{job.title}
+							</Text>
+							<Text style={styles.jobCreatedTimeText}>{createdTimeText}</Text>
+							{!hideSeen ? (
+								<View style={styles.jobSeenContainer}>
+									{job.seen && !_.isEmpty(seenText) && (
+										<Icon
+											name="check"
+											type="font-awesome"
+											iconStyle={[
+												styles.jobSeenIcon,
+												{ color: this.props.colourBrandingMain },
+											]}
+										/>
+									)}
+									<Text
+										style={[
+											styles.jobSeenText,
+											job.seen && { color: this.props.colourBrandingMain },
+										]}
+									>
+										{seenText}
+									</Text>
+								</View>
+							) : null}
+						</View>
+						<View style={styles.jobBottomSection}>
+							<View
+								style={[
+									styles.jobStatusContainer,
+									{ backgroundColor: status?.color },
+								]}
+							>
+								{/* <Icon name="wrench" type="font-awesome" iconStyle={styles.jobStatusIcon} /> */}
+								<Text style={styles.jobStatusText}>{status?.text}</Text>
+							</View>
+						</View>
+					</View>
+				</View>
+			</TouchableOpacity>
+		);
+	}
 }
 
 const styles = StyleSheet.create({
-  jobContainer: {
-    padding: 10,
-  },
-  jobInnerContainer: {
-    width: 140,
-    height: 160,
-    ...Helper.getShadowStyle(),
-  },
-  jobTopSection: {
-    flex: 1,
-    padding: 10,
-    paddingTop: 20,
-  },
-  jobTitleText: {
-    flex: 1,
-    fontFamily: 'sf-semibold',
-    fontSize: 16,
-    color: Colours.TEXT_DARK,
-  },
-  jobCreatedTimeText: {
-    fontFamily: 'sf-medium',
-    fontSize: 11,
-    color: Colours.TEXT_LIGHT,
-    paddingTop: 3,
-  },
-  jobSeenContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingTop: 5,
-  },
-  jobSeenIcon: {
-    fontSize: 12,
-    marginRight: 4,
-  },
-  jobSeenText: {
-    fontFamily: 'sf-semibold',
-    fontSize: 12,
-    color: Colours.TEXT_SUPER_LIGHT,
-  },
-  jobBottomSection: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 10,
-    borderTopWidth: 1,
-    borderTopColor: Colours.LINEGREY,
-  },
-  jobStatusContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    width: 105,
-    height: 30,
-    paddingHorizontal: 8,
-    borderRadius: 4,
-  },
-  jobStatusIcon: {
-    color: '#fff',
-    fontSize: 14,
-  },
-  jobStatusText: {
-    color: '#fff',
-    textAlign: 'center',
-    fontFamily: 'sf-semibold',
-    fontSize: 13,
-  },
+	jobContainer: {
+		padding: 10,
+	},
+	jobInnerContainer: {
+		width: 140,
+		height: 160,
+		...Helper.getShadowStyle(),
+	},
+	jobTopSection: {
+		flex: 1,
+		padding: 10,
+		paddingTop: 20,
+	},
+	jobTitleText: {
+		flex: 1,
+		fontFamily: "sf-semibold",
+		fontSize: 16,
+		color: Colours.TEXT_DARK,
+	},
+	jobCreatedTimeText: {
+		fontFamily: "sf-medium",
+		fontSize: 11,
+		color: Colours.TEXT_LIGHT,
+		paddingTop: 3,
+	},
+	jobSeenContainer: {
+		flexDirection: "row",
+		alignItems: "center",
+		paddingTop: 5,
+	},
+	jobSeenIcon: {
+		fontSize: 12,
+		marginRight: 4,
+	},
+	jobSeenText: {
+		fontFamily: "sf-semibold",
+		fontSize: 12,
+		color: Colours.TEXT_SUPER_LIGHT,
+	},
+	jobBottomSection: {
+		alignItems: "center",
+		justifyContent: "center",
+		paddingVertical: 10,
+		borderTopWidth: 1,
+		borderTopColor: Colours.LINEGREY,
+	},
+	jobStatusContainer: {
+		flexDirection: "row",
+		alignItems: "center",
+		justifyContent: "space-between",
+		width: 105,
+		height: 30,
+		paddingHorizontal: 8,
+		borderRadius: 4,
+	},
+	jobStatusIcon: {
+		color: "#fff",
+		fontSize: 14,
+	},
+	jobStatusText: {
+		color: "#fff",
+		textAlign: "center",
+		fontFamily: "sf-semibold",
+		fontSize: 13,
+	},
 });
 
-const mapStateToProps = state => {
-  return {
-    colourBrandingMain: Colours.getMainBrandingColourFromState(state),
-  };
+const mapStateToProps = (state) => {
+	return {
+		colourBrandingMain: Colours.getMainBrandingColourFromState(state),
+		statusTypes: state[values.reducerKey].jobstatuses,
+		hideSeen: state[values.reducerKey].hideSeen,
+	};
 };
 
 export default connect(mapStateToProps, {})(MaintenanceWidgetItem);

package/src/components/PrioritySelectorPopup.js

@@ -0,0 +1,93 @@
+import React, { PureComponent } from "react";
+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";
+
+class PrioritySelectorPopup extends PureComponent {
+	render() {
+		const { title, includeAll, allText, onClose, onSelect } = this.props;
+		let priorities = jobPriorityOptions;
+		if (includeAll)
+			priorities = [
+				{
+					label: allText || "Show All",
+					color: this.props.colourBrandingMain,
+				},
+				...priorities,
+			];
+
+		return (
+			<Components.MiddlePopup
+				style={[styles.statusPopup, { height: priorities.length * 50 + 40 }]}
+				onClose={onClose}
+			>
+				<Text style={styles.statusPopupTitle}>
+					{title || "Select Priority"}
+				</Text>
+				<View style={styles.statusPopupOptionsContainer}>
+					{priorities.map((priority) => {
+						return (
+							<TouchableOpacity
+								key={priority.label}
+								onPress={() => onSelect(priority.label)}
+							>
+								<View
+									style={[
+										styles.jobStatusContainer,
+										{ backgroundColor: priority.color },
+									]}
+								>
+									<Text style={styles.jobStatusText}>{priority.label}</Text>
+								</View>
+							</TouchableOpacity>
+						);
+					})}
+				</View>
+			</Components.MiddlePopup>
+		);
+	}
+}
+
+const styles = StyleSheet.create({
+	statusPopup: {
+		width: 160,
+		padding: 16,
+		borderRadius: 12,
+	},
+	statusPopupTitle: {
+		fontFamily: "sf-bold",
+		color: Colours.TEXT_DARK,
+		fontSize: 18,
+		marginBottom: 16,
+	},
+	statusPopupOptionsContainer: {
+		flex: 1,
+		justifyContent: "space-between",
+	},
+	jobStatusContainer: {
+		flexDirection: "row",
+		alignItems: "center",
+		justifyContent: "space-between",
+		width: 105,
+		height: 30,
+		paddingHorizontal: 8,
+		borderRadius: 4,
+	},
+	jobStatusText: {
+		color: "#fff",
+		textAlign: "center",
+		fontFamily: "sf-semibold",
+		fontSize: 13,
+		flex: 1,
+	},
+});
+
+const mapStateToProps = (state) => {
+	return {
+		colourBrandingMain: Colours.getMainBrandingColourFromState(state),
+	};
+};
+
+export default connect(mapStateToProps, {})(PrioritySelectorPopup);

package/src/components/StatusSelectorPopup.js

@@ -1,87 +1,93 @@
-import React, { PureComponent } from 'react';
-import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
-import { connect } from 'react-redux';
-import { jobStatusOptions, getJobStatusColour } from '../helper';
-import { Components, Colours } from '../core.config';
+import React, { PureComponent } from "react";
+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";
+import { values } from "../values.config";
 
 class StatusSelectorPopup extends PureComponent {
-  render() {
-    const { title, filter, includeAll, allText, onClose, onSelect } = this.props;
-    let statuses = filter
-      ? filter.map(status => {
-          return {
-            name: status,
-            label: getJobStatusLabel(status),
-            color: getJobStatusColour(status),
-          };
-        })
-      : jobStatusOptions;
-    if (includeAll)
-      statuses = [
-        {
-          name: allText || 'Show All',
-          color: this.props.colourBrandingMain,
-        },
-        ...statuses,
-      ];
+	render() {
+		const { title, includeAll, allText, onClose, onSelect } = this.props;
+		let statuses = getJobStatusOptions(this.props);
+		if (includeAll)
+			statuses = [
+				{
+					text: allText || "Show All",
+					color: this.props.colourBrandingMain,
+				},
+				...statuses,
+			];
 
-    return (
-      <Components.MiddlePopup style={[styles.statusPopup, { height: statuses.length * 50 + 40 }]} onClose={onClose}>
-        <Text style={styles.statusPopupTitle}>{title || 'Select Status'}</Text>
-        <View style={styles.statusPopupOptionsContainer}>
-          {statuses.map(status => {
-            return (
-              <TouchableOpacity key={status.name} onPress={() => onSelect(status.name)}>
-                <View style={[styles.jobStatusContainer, { backgroundColor: status.color }]}>
-                  <Text style={styles.jobStatusText}>{status.label}</Text>
-                </View>
-              </TouchableOpacity>
-            );
-          })}
-        </View>
-      </Components.MiddlePopup>
-    );
-  }
+		return (
+			<Components.MiddlePopup
+				style={[styles.statusPopup, { height: statuses.length * 50 + 40 }]}
+				onClose={onClose}
+			>
+				<Text style={styles.statusPopupTitle}>{title || "Select Status"}</Text>
+				<View style={styles.statusPopupOptionsContainer}>
+					{statuses.map((status) => {
+						return (
+							<TouchableOpacity
+								key={status.text}
+								onPress={() => onSelect(status.text)}
+							>
+								<View
+									style={[
+										styles.jobStatusContainer,
+										{ backgroundColor: status.color },
+									]}
+								>
+									<Text style={styles.jobStatusText}>{status.text}</Text>
+								</View>
+							</TouchableOpacity>
+						);
+					})}
+				</View>
+			</Components.MiddlePopup>
+		);
+	}
 }
 
 const styles = StyleSheet.create({
-  statusPopup: {
-    width: 160,
-    padding: 16,
-    borderRadius: 12,
-  },
-  statusPopupTitle: {
-    fontFamily: 'sf-bold',
-    color: Colours.TEXT_DARK,
-    fontSize: 18,
-    marginBottom: 16,
-  },
-  statusPopupOptionsContainer: {
-    flex: 1,
-    justifyContent: 'space-between',
-  },
-  jobStatusContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    width: 105,
-    height: 30,
-    paddingHorizontal: 8,
-    borderRadius: 4,
-  },
-  jobStatusText: {
-    color: '#fff',
-    textAlign: 'center',
-    fontFamily: 'sf-semibold',
-    fontSize: 13,
-    flex: 1,
-  },
+	statusPopup: {
+		width: 160,
+		padding: 16,
+		borderRadius: 12,
+	},
+	statusPopupTitle: {
+		fontFamily: "sf-bold",
+		color: Colours.TEXT_DARK,
+		fontSize: 18,
+		marginBottom: 16,
+	},
+	statusPopupOptionsContainer: {
+		flex: 1,
+		justifyContent: "space-between",
+	},
+	jobStatusContainer: {
+		flexDirection: "row",
+		alignItems: "center",
+		justifyContent: "space-between",
+		width: 105,
+		height: 30,
+		paddingHorizontal: 8,
+		borderRadius: 4,
+	},
+	jobStatusText: {
+		color: "#fff",
+		textAlign: "center",
+		fontFamily: "sf-semibold",
+		fontSize: 13,
+		flex: 1,
+	},
 });
 
-const mapStateToProps = state => {
-  return {
-    colourBrandingMain: Colours.getMainBrandingColourFromState(state),
-  };
+const mapStateToProps = (state) => {
+	return {
+		colourBrandingMain: Colours.getMainBrandingColourFromState(state),
+		statusTypes: state[values.reducerKey].jobstatuses,
+	};
 };
 
 export default connect(mapStateToProps, {})(StatusSelectorPopup);

package/src/components/WidgetLarge.js

@@ -1,10 +1,10 @@
-import React, { PureComponent } from 'react';
-import MaintenanceList from './MaintenanceList';
+import React, { PureComponent } from "react";
+import MaintenanceList from "./MaintenanceList";
 
 class WidgetLarge extends PureComponent {
-  render() {
-    return <MaintenanceList {...this.props} />;
-  }
+	render() {
+		return <MaintenanceList {...this.props} />;
+	}
 }
 
 export default WidgetLarge;