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

package/src/components/MaintenanceListItem.js

@@ -1,362 +1,303 @@
-import React, { Component } from "react";
-import { Image, Text, TouchableOpacity, View, StyleSheet } from "react-native";
-import _ from "lodash";
-import { Icon } from "@rneui/themed";
-import { connect } from "react-redux";
-import moment from "moment";
-import { getJobStatus, getJobPriority } from "../helper";
-import { Services } from "../feature.config";
-import { Helper, Colours } from "../core.config";
-import { values } from "../values.config";
+import React, { Component } from 'react';
+import { Image, Text, TouchableOpacity, View, StyleSheet } from 'react-native';
+import _ from 'lodash';
+import { Icon } from '@rneui/themed';
+import { connect } from 'react-redux';
+import moment from 'moment';
+import { getJobStatus, getJobPriority } from '../helper';
+import { Services } from '../feature.config';
+import { Helper, Colours } from '../core.config';
+import { values } from '../values.config';
 
 class MaintenanceListItem extends Component {
-	onPressJob = () => {
-		Services.navigation.navigate(values.screenRequestDetail, {
-			job: this.props.job,
-		});
-	};
+  onPressJob = () => {
+    Services.navigation.navigate(values.screenRequestDetail, { job: this.props.job });
+  };
 
-	renderCommentCount() {
-		const { job } = this.props;
-		if (!job.commentCount) {
-			return null;
-		}
-		return (
-			<View style={styles.commentCountContainer}>
-				<Text style={styles.commentCountText}>
-					{job.commentCount > 99 ? "99" : job.commentCount}
-				</Text>
-			</View>
-		);
-	}
+  renderCommentCount() {
+    const { job } = this.props;
+    if (!job.commentCount) {
+      return null;
+    }
+    return (
+      <View style={styles.commentCountContainer}>
+        <Text style={styles.commentCountText}>{job.commentCount > 99 ? '99' : job.commentCount}</Text>
+      </View>
+    );
+  }
 
-	renderDescription() {
-		const { job } = this.props;
-		if (_.isEmpty(job.description)) {
-			return null;
-		}
-		return <Text style={styles.jobDescriptionText}>{job.description}</Text>;
-	}
+  renderDescription() {
+    const { job } = this.props;
+    if (_.isEmpty(job.description)) {
+      return null;
+    }
+    return <Text style={styles.jobDescriptionText}>{job.description}</Text>;
+  }
 
-	renderSeen() {
-		const { job, hideSeen } = this.props;
-		const showSeen =
-			!job.status || job.status === getJobStatus(null, this.props).text;
-		if (hideSeen || !showSeen || !job.seen) {
-			return null;
-		}
-		return (
-			<View style={styles.jobSeenContainer}>
-				<Icon
-					name="check"
-					type="font-awesome"
-					iconStyle={[
-						styles.jobSeenIcon,
-						{ color: this.props.colourBrandingMain },
-					]}
-				/>
-				<Text
-					style={[styles.jobSeenText, { color: this.props.colourBrandingMain }]}
-				>
-					Seen
-				</Text>
-			</View>
-		);
-	}
+  renderSeen() {
+    const { job, hideSeen } = this.props;
+    const showSeen = !job.status || job.status === getJobStatus(null, this.props).text;
+    if (hideSeen || !showSeen || !job.seen) {
+      return null;
+    }
+    return (
+      <View style={styles.jobSeenContainer}>
+        <Icon name="check" type="font-awesome" iconStyle={[styles.jobSeenIcon, { color: this.props.colourBrandingMain }]} />
+        <Text style={[styles.jobSeenText, { color: this.props.colourBrandingMain }]}>Seen</Text>
+      </View>
+    );
+  }
 
-	render() {
-		const { job } = this.props;
-		const createdTime = moment(job.createdUnix);
-		const createdTimeText = `${createdTime.format("ddd, D MMMM")} • ${createdTime.format("h:mma")}`;
-		const assigneeText = job.Assignee
-			? `Assigned to\n${job.Assignee.displayName}`
-			: "";
-		const status = getJobStatus(job.status, this.props);
-		const priority = getJobPriority(job.priority);
-		const isStaff = this.props.user.category === "staff";
+  render() {
+    const { job } = this.props;
+    const createdTime = moment(job.createdUnix);
+    const createdTimeText = `${createdTime.format('ddd, D MMMM')} • ${createdTime.format('h:mma')}`;
+    const assigneeText = job.Assignee ? `Assigned to\n${job.Assignee.displayName}` : '';
+    const status = getJobStatus(job.status, this.props);
+    const priority = getJobPriority(job.priority);
+    const isStaff = this.props.user.category === 'staff'
 
-		return (
-			<TouchableOpacity onPress={this.onPressJob}>
-				<View style={[styles.jobContainer, this.props.style]}>
-					<View style={styles.jobInnerContainer}>
-						<View style={styles.jobTopSection}>
-							<View style={styles.jobTopLeft}>
-								{job.jobId ? (
-									<Text
-										style={[
-											styles.jobIdText,
-											{ color: this.props.colourBrandingMain },
-										]}
-									>{`${values.textEntityName} #${job.jobId}`}</Text>
-								) : null}
-								<Text style={styles.jobTitleText}>{job.title}</Text>
-								{job.room ? (
-									<Text style={styles.jobLocationText}>{job.room}</Text>
-								) : null}
-								<View style={styles.jobTypeSeenContainer}>
-									<View
-										style={[
-											styles.jobTypeContainer,
-											{
-												backgroundColor: Colours.hexToRGBAstring(
-													this.props.colourBrandingMain,
-													0.2,
-												),
-											},
-										]}
-									>
-										<Text
-											style={[
-												styles.jobTypeText,
-												{ color: this.props.colourBrandingMain },
-											]}
-											numberOfLines={2}
-										>
-											{job.type}
-										</Text>
-									</View>
-									{this.renderSeen()}
-								</View>
-							</View>
-							<View style={styles.jobTopRight}>
-								<Image
-									style={styles.jobCommentImage}
-									source={require("../images/speechbubble.png")}
-								/>
-								{this.renderCommentCount()}
-							</View>
-						</View>
-						<View style={styles.jobBottomSection}>
-							{/* {this.renderDescription()} */}
-							<Text style={styles.jobCreatedText}>{createdTimeText}</Text>
-							<View style={styles.jobActivityContainer}>
-								<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
-									style={[styles.jobStatusLine, { borderColor: status?.color }]}
-								>
-									<View style={styles.jobStatusLineMask} />
-								</View>
-								<View
-									style={[
-										styles.jobStatusCircle,
-										{ backgroundColor: status?.color },
-									]}
-								/>
-								<Text style={styles.jobStatusDateText}>{assigneeText}</Text>
-							</View>
-							{isStaff && (
-								<View
-									style={[
-										styles.jobPriorityContainer,
-										{ backgroundColor: priority.color },
-									]}
-								>
-									<Text style={styles.jobPriorityText}>{priority.label}</Text>
-								</View>
-							)}
-						</View>
-					</View>
-				</View>
-			</TouchableOpacity>
-		);
-	}
+    return (
+      <TouchableOpacity onPress={this.onPressJob}>
+        <View style={[styles.jobContainer, this.props.style]}>
+          <View style={styles.jobInnerContainer}>
+            <View style={styles.jobTopSection}>
+              <View style={styles.jobTopLeft}>
+                {job.jobId ? (
+                  <Text
+                    style={[styles.jobIdText, { color: this.props.colourBrandingMain }]}
+                  >{`${values.textEntityName} #${job.jobId}`}</Text>
+                ) : null}
+                <Text style={styles.jobTitleText}>{job.title}</Text>
+                {job.room ? <Text style={styles.jobLocationText}>{job.room}</Text> : null}
+                <View style={styles.jobTypeSeenContainer}>
+                  <View style={[styles.jobTypeContainer, { backgroundColor: Colours.hexToRGBAstring(this.props.colourBrandingMain, 0.2) }]}>
+                    <Text style={[styles.jobTypeText, { color: this.props.colourBrandingMain }]} numberOfLines={2}>
+                      {job.type}
+                    </Text>
+                  </View>
+                  {this.renderSeen()}
+                </View>
+              </View>
+              <View style={styles.jobTopRight}>
+                <Image style={styles.jobCommentImage} source={require('../images/speechbubble.png')} />
+                {this.renderCommentCount()}
+              </View>
+            </View>
+            <View style={styles.jobBottomSection}>
+              {/* {this.renderDescription()} */}
+              <Text style={styles.jobCreatedText}>{createdTimeText}</Text>
+              <View style={styles.jobActivityContainer}>
+                <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 style={[styles.jobStatusLine, { borderColor: status?.color }]}>
+                  <View style={styles.jobStatusLineMask} />
+                </View>
+                <View style={[styles.jobStatusCircle, { backgroundColor: status?.color }]} />
+                <Text style={styles.jobStatusDateText}>{assigneeText}</Text>
+              </View>
+              {isStaff && (
+                <View style={[styles.jobPriorityContainer, { backgroundColor: priority.color }]}>
+                  <Text style={styles.jobPriorityText}>{priority.label}</Text>
+                </View>
+              )}
+            </View>
+          </View>
+        </View>
+      </TouchableOpacity>
+    );
+  }
 }
 
 const styles = StyleSheet.create({
-	jobContainer: {
-		marginVertical: 8,
-		paddingHorizontal: 16,
-	},
-	jobInnerContainer: {
-		...Helper.getShadowStyle(),
-	},
-	jobTopSection: {
-		flexDirection: "row",
-		alignItems: "flex-end",
-		paddingHorizontal: 10,
-		paddingVertical: 10,
-		borderBottomWidth: 1,
-		borderBottomColor: Colours.LINEGREY,
-	},
-	jobTopLeft: {
-		flex: 1,
-	},
-	jobIdText: {
-		fontFamily: "sf-medium",
-		fontSize: 12,
-		marginBottom: 4,
-	},
-	jobTitleText: {
-		fontFamily: "sf-semibold",
-		fontSize: 18,
-		color: Colours.TEXT_DARK,
-		marginBottom: 4,
-	},
-	jobLocationText: {
-		fontFamily: "sf-medium",
-		fontSize: 12,
-		color: Colours.TEXT_LIGHT,
-		marginBottom: 4,
-	},
-	jobTypeSeenContainer: {
-		marginTop: 4,
-		flexDirection: "row",
-		alignItems: "center",
-	},
-	jobTypeContainer: {
-		padding: 4,
-		minWidth: 80,
-		maxWidth: 140,
-		borderRadius: 4,
-		justifyContent: "center",
-	},
-	jobTypeText: {
-		fontFamily: "sf-semibold",
-		fontSize: 12,
-		textAlign: "center",
-		maxWidth: "100%",
-	},
-	jobSeenContainer: {
-		flexDirection: "row",
-		alignItems: "center",
-		marginLeft: 10,
-	},
-	jobSeenIcon: {
-		fontSize: 12,
-	},
-	jobSeenText: {
-		fontFamily: "sf-semibold",
-		fontSize: 12,
-		marginLeft: 4,
-	},
-	jobTopRight: {
-		alignItems: "center",
-		justifyContent: "center",
-		paddingHorizontal: 10,
-		paddingTop: 10,
-	},
-	jobCommentImage: {
-		width: 34,
-		height: 34,
-		resizeMode: "contain",
-	},
-	commentCountContainer: {
-		position: "absolute",
-		top: 0,
-		right: 0,
-		borderRadius: 10,
-		borderWidth: 2,
-		borderColor: "#fff",
-		width: 20,
-		height: 20,
-		backgroundColor: Colours.COLOUR_GREEN,
-		justifyContent: "center",
-		alignItems: "center",
-	},
-	commentCountText: {
-		textAlign: "center",
-		fontFamily: "sf-bold",
-		fontSize: 10,
-		color: "#fff",
-	},
-	jobBottomSection: {
-		paddingHorizontal: 10,
-		paddingVertical: 16,
-	},
-	jobDescriptionText: {
-		fontFamily: "sf-medium",
-		fontSize: 14,
-		color: Colours.TEXT_DARK,
-		marginBottom: 8,
-	},
-	jobCreatedText: {
-		fontFamily: "sf-medium",
-		fontSize: 12,
-		color: Colours.TEXT_LIGHT,
-		marginBottom: 10,
-	},
-	jobActivityContainer: {
-		flexDirection: "row",
-		alignItems: "center",
-	},
-	jobStatusContainer: {
-		flexDirection: "row",
-		alignItems: "center",
-		justifyContent: "center",
-		width: 105,
-		height: 30,
-		paddingHorizontal: 8,
-		borderRadius: 4,
-	},
-	jobStatusIcon: {
-		color: "#fff",
-		fontSize: 14,
-	},
-	jobStatusText: {
-		color: "#fff",
-		textAlign: "center",
-		fontFamily: "sf-semibold",
-		fontSize: 13,
-	},
-	jobStatusLine: {
-		borderWidth: 1,
-		borderStyle: "dashed",
-		width: 30,
-	},
-	jobStatusLineMask: {
-		position: "absolute",
-		left: -1,
-		top: -1,
-		width: "100%",
-		height: 1,
-		backgroundColor: "#fff",
-		zIndex: 1,
-	},
-	jobStatusCircle: {
-		width: 18,
-		height: 18,
-		borderRadius: 9,
-	},
-	jobStatusDateText: {
-		flex: 1,
-		textAlign: "right",
-		fontFamily: "sf-medium",
-		fontSize: 14,
-		color: Colours.TEXT_DARK,
-	},
-	jobPriorityContainer: {
-		flexDirection: "row",
-		alignItems: "center",
-		justifyContent: "center",
-		width: 105,
-		height: 24,
-		paddingHorizontal: 8,
-		borderRadius: 4,
-		marginTop: 8,
-	},
-	jobPriorityText: {
-		color: "#fff",
-		textAlign: "center",
-		fontFamily: "sf-semibold",
-		fontSize: 13,
-	},
+  jobContainer: {
+    marginVertical: 8,
+    paddingHorizontal: 16,
+  },
+  jobInnerContainer: {
+    ...Helper.getShadowStyle(),
+  },
+  jobTopSection: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    paddingHorizontal: 10,
+    paddingVertical: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: Colours.LINEGREY,
+  },
+  jobTopLeft: {
+    flex: 1,
+  },
+  jobIdText: {
+    fontFamily: 'sf-medium',
+    fontSize: 12,
+    marginBottom: 4,
+  },
+  jobTitleText: {
+    fontFamily: 'sf-semibold',
+    fontSize: 18,
+    color: Colours.TEXT_DARK,
+    marginBottom: 4,
+  },
+  jobLocationText: {
+    fontFamily: 'sf-medium',
+    fontSize: 12,
+    color: Colours.TEXT_LIGHT,
+    marginBottom: 4,
+  },
+  jobTypeSeenContainer: {
+    marginTop: 4,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  jobTypeContainer: {
+    padding: 4,
+    minWidth: 80,
+    maxWidth: 140,
+    borderRadius: 4,
+    justifyContent: 'center',
+  },
+  jobTypeText: {
+    fontFamily: 'sf-semibold',
+    fontSize: 12,
+    textAlign: 'center',
+    maxWidth: '100%',
+  },
+  jobSeenContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginLeft: 10,
+  },
+  jobSeenIcon: {
+    fontSize: 12,
+  },
+  jobSeenText: {
+    fontFamily: 'sf-semibold',
+    fontSize: 12,
+    marginLeft: 4,
+  },
+  jobTopRight: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+    paddingTop: 10,
+  },
+  jobCommentImage: {
+    width: 34,
+    height: 34,
+    resizeMode: 'contain',
+  },
+  commentCountContainer: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    borderRadius: 10,
+    borderWidth: 2,
+    borderColor: '#fff',
+    width: 20,
+    height: 20,
+    backgroundColor: Colours.COLOUR_GREEN,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  commentCountText: {
+    textAlign: 'center',
+    fontFamily: 'sf-bold',
+    fontSize: 10,
+    color: '#fff',
+  },
+  jobBottomSection: {
+    paddingHorizontal: 10,
+    paddingVertical: 16,
+  },
+  jobDescriptionText: {
+    fontFamily: 'sf-medium',
+    fontSize: 14,
+    color: Colours.TEXT_DARK,
+    marginBottom: 8,
+  },
+  jobCreatedText: {
+    fontFamily: 'sf-medium',
+    fontSize: 12,
+    color: Colours.TEXT_LIGHT,
+    marginBottom: 10,
+  },
+  jobActivityContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  jobStatusContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 105,
+    height: 30,
+    paddingHorizontal: 8,
+    borderRadius: 4,
+  },
+  jobStatusIcon: {
+    color: '#fff',
+    fontSize: 14,
+  },
+  jobStatusText: {
+    color: '#fff',
+    textAlign: 'center',
+    fontFamily: 'sf-semibold',
+    fontSize: 13,
+  },
+  jobStatusLine: {
+    borderWidth: 1,
+    borderStyle: 'dashed',
+    width: 30,
+  },
+  jobStatusLineMask: {
+    position: 'absolute',
+    left: -1,
+    top: -1,
+    width: '100%',
+    height: 1,
+    backgroundColor: '#fff',
+    zIndex: 1,
+  },
+  jobStatusCircle: {
+    width: 18,
+    height: 18,
+    borderRadius: 9,
+  },
+  jobStatusDateText: {
+    flex: 1,
+    textAlign: 'right',
+    fontFamily: 'sf-medium',
+    fontSize: 14,
+    color: Colours.TEXT_DARK,
+  },
+  jobPriorityContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 105,
+    height: 24,
+    paddingHorizontal: 8,
+    borderRadius: 4,
+    marginTop: 8,
+  },
+  jobPriorityText: {
+    color: '#fff',
+    textAlign: 'center',
+    fontFamily: 'sf-semibold',
+    fontSize: 13,
+  },
 });
 
-const mapStateToProps = (state) => {
-	return {
-		user: state.user,
-		colourBrandingMain: Colours.getMainBrandingColourFromState(state),
-		statusTypes: state[values.reducerKey].jobstatuses,
-		hideSeen: state[values.reducerKey].hideSeen,
-	};
+const mapStateToProps = state => {
+  return {
+    user: state.user,
+    colourBrandingMain: Colours.getMainBrandingColourFromState(state),
+    statusTypes: state[values.reducerKey].jobstatuses,
+    hideSeen: state[values.reducerKey].hideSeen,
+  };
 };
 
 export default connect(mapStateToProps, {})(MaintenanceListItem);