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

package/src/components/MaintenanceListItem.js

@@ -1,289 +1,363 @@
-import React, { Component } from 'react';
-import { Image, Text, TouchableOpacity, View, StyleSheet } from 'react-native';
-import _ from 'lodash';
-import { Icon } from 'react-native-elements';
-import { connect } from 'react-redux';
-import moment from 'moment';
-// import {
-//   getShadowStyle,
-//   LINEGREY,
-//   TEXT_DARK,
-//   TEXT_LIGHT,
-//   COLOUR_GREEN,
-//   getMainBrandingColourFromState,
-//   hexToRGBAstring,
-//   getJobStatusProps,
-//   jobStatusOptions,
-// } from '../../js';
-// import NavigationService from '../../js/NavigationService';
-import { getJobStatusProps, jobStatusOptions } 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, TouchableOpacity, View, StyleSheet } from "react-native";
+import { Text } from "@plusscommunities/pluss-core-app/components";
+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 } = this.props;
-    const showSeen = !job.status || job.status === jobStatusOptions[0].name;
-    if (!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 { statusText, statusColor } = getJobStatusProps(job.status);
+	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: statusColor }]}>
-                  {/* <Icon name="wrench" type="font-awesome" iconStyle={styles.jobStatusIcon} /> */}
-                  <Text style={styles.jobStatusText}>{statusText}</Text>
-                </View>
-                <View style={[styles.jobStatusLine, { borderColor: statusColor }]}>
-                  <View style={styles.jobStatusLineMask} />
-                </View>
-                <View style={[styles.jobStatusCircle, { backgroundColor: statusColor }]} />
-                <Text style={styles.jobStatusDateText}>{assigneeText}</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,
-  },
+	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 {
-    colourBrandingMain: Colours.getMainBrandingColourFromState(state),
-  };
+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);