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

package/src/components/MaintenanceWidgetItem.js

@@ -1,157 +1,136 @@
-import React, { Component } from "react";
-import { Text, View, StyleSheet, TouchableOpacity } from "react-native";
-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";
+import React, { Component } from 'react';
+import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
+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, 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 "";
-		})();
+  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>
-							{!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>
-		);
-	}
+    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),
-		statusTypes: state[values.reducerKey].jobstatuses,
-		hideSeen: state[values.reducerKey].hideSeen,
-	};
+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

@@ -1,92 +1,79 @@
-import React, { PureComponent } from "react";
-import { View, StyleSheet, TouchableOpacity, Text } from "react-native";
-import { connect } from "react-redux";
-import { jobPriorityOptions } from "../helper";
-import { Components, Colours } from "../core.config";
+import React, { PureComponent } from 'react';
+import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
+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,
-			];
+  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>
-		);
-	}
+    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,
-	},
+  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),
+  };
 };
 
 export default connect(mapStateToProps, {})(PrioritySelectorPopup);

package/src/components/StatusSelectorPopup.js

@@ -1,92 +1,81 @@
-import React, { PureComponent } from "react";
-import { View, StyleSheet, TouchableOpacity, Text } from "react-native";
-import { connect } from "react-redux";
-import { getJobStatusOptions } from "../helper";
-import { Components, Colours } from "../core.config";
-import { values } from "../values.config";
+import React, { PureComponent } from 'react';
+import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
+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, includeAll, allText, onClose, onSelect } = this.props;
-		let statuses = getJobStatusOptions(this.props);
-		if (includeAll)
-			statuses = [
-				{
-					text: 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.text}
-								onPress={() => onSelect(status.text)}
-							>
-								<View
-									style={[
-										styles.jobStatusContainer,
-										{ backgroundColor: status.color },
-									]}
-								>
-									<Text style={styles.jobStatusText}>{status.text}</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),
-		statusTypes: state[values.reducerKey].jobstatuses,
-	};
+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;