@plusscommunities/pluss-maintenance-app 6.0.11 → 6.0.12-beta.0

package/src/components/MaintenanceListItem.js

@@ -4,19 +4,7 @@ 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 { getJobStatus, getJobPriority } from '../helper';
 import { Services } from '../feature.config';
 import { Helper, Colours } from '../core.config';
 import { values } from '../values.config';
@@ -47,9 +35,9 @@ class MaintenanceListItem extends Component {
   }
 
   renderSeen() {
-    const { job } = this.props;
-    const showSeen = !job.status || job.status === jobStatusOptions[0].name;
-    if (!showSeen || !job.seen) {
+    const { job, hideSeen } = this.props;
+    const showSeen = !job.status || job.status === getJobStatus(null, this.props).text;
+    if (hideSeen || !showSeen || !job.seen) {
       return null;
     }
     return (
@@ -65,7 +53,9 @@ class MaintenanceListItem extends Component {
     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);
+    const status = getJobStatus(job.status, this.props);
+    const priority = getJobPriority(job.priority);
+    const isStaff = this.props.user.category === 'staff'
 
     return (
       <TouchableOpacity onPress={this.onPressJob}>
@@ -98,16 +88,21 @@ class MaintenanceListItem extends Component {
               {/* {this.renderDescription()} */}
               <Text style={styles.jobCreatedText}>{createdTimeText}</Text>
               <View style={styles.jobActivityContainer}>
-                <View style={[styles.jobStatusContainer, { backgroundColor: statusColor }]}>
+                <View style={[styles.jobStatusContainer, { backgroundColor: status?.color }]}>
                   {/* <Icon name="wrench" type="font-awesome" iconStyle={styles.jobStatusIcon} /> */}
-                  <Text style={styles.jobStatusText}>{statusText}</Text>
+                  <Text style={styles.jobStatusText}>{status?.text}</Text>
                 </View>
-                <View style={[styles.jobStatusLine, { borderColor: statusColor }]}>
+                <View style={[styles.jobStatusLine, { borderColor: status?.color }]}>
                   <View style={styles.jobStatusLineMask} />
                 </View>
-                <View style={[styles.jobStatusCircle, { backgroundColor: statusColor }]} />
+                <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>
@@ -278,11 +273,30 @@ const styles = StyleSheet.create({
     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,
   };
 };
 

package/src/components/MaintenanceWidgetItem.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import { Icon } from 'react-native-elements';
 import moment from 'moment';
 import _ from 'lodash';
-import { getJobStatusProps, jobStatusOptions } from '../helper';
+import { getJobStatus } from '../helper';
 import { Services } from '../feature.config';
 import { Colours, Helper } from '../core.config';
 import { values } from '../values.config';
@@ -15,12 +15,12 @@ class MaintenanceWidgetItem extends Component {
   };
 
   render() {
-    const { job } = this.props;
+    const { job, hideSeen } = 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 status = getJobStatus(job.status, this.props);
     const seenText = (() => {
-      if (!job.status || job.status === jobStatusOptions[0].name) {
+      if (!job.status || job.status === getJobStatus(null, this.props).text) {
         return job.seen ? 'Seen' : 'Unseen';
       }
       return '';
@@ -35,17 +35,19 @@ class MaintenanceWidgetItem extends Component {
                 {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>
+              {!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: statusColor }]}>
+              <View style={[styles.jobStatusContainer, { backgroundColor: status?.color }]}>
                 {/* <Icon name="wrench" type="font-awesome" iconStyle={styles.jobStatusIcon} /> */}
-                <Text style={styles.jobStatusText}>{statusText}</Text>
+                <Text style={styles.jobStatusText}>{status?.text}</Text>
               </View>
             </View>
           </View>
@@ -126,6 +128,8 @@ const styles = StyleSheet.create({
 const mapStateToProps = state => {
   return {
     colourBrandingMain: Colours.getMainBrandingColourFromState(state),
+    statusTypes: state[values.reducerKey].jobstatuses,
+    hideSeen: state[values.reducerKey].hideSeen,
   };
 };
 

package/src/components/PrioritySelectorPopup.js

@@ -0,0 +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';
+
+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,25 +1,18 @@
 import React, { PureComponent } from 'react';
 import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
 import { connect } from 'react-redux';
-import { jobStatusOptions, getJobStatusColour } from '../helper';
+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;
+    const { title, includeAll, allText, onClose, onSelect } = this.props;
+    let statuses = getJobStatusOptions(this.props);
     if (includeAll)
       statuses = [
         {
-          name: allText || 'Show All',
+          text: allText || 'Show All',
           color: this.props.colourBrandingMain,
         },
         ...statuses,
@@ -31,9 +24,9 @@ class StatusSelectorPopup extends PureComponent {
         <View style={styles.statusPopupOptionsContainer}>
           {statuses.map(status => {
             return (
-              <TouchableOpacity key={status.name} onPress={() => onSelect(status.name)}>
+              <TouchableOpacity key={status.text} onPress={() => onSelect(status.text)}>
                 <View style={[styles.jobStatusContainer, { backgroundColor: status.color }]}>
-                  <Text style={styles.jobStatusText}>{status.label}</Text>
+                  <Text style={styles.jobStatusText}>{status.text}</Text>
                 </View>
               </TouchableOpacity>
             );
@@ -81,6 +74,7 @@ const styles = StyleSheet.create({
 const mapStateToProps = state => {
   return {
     colourBrandingMain: Colours.getMainBrandingColourFromState(state),
+    statusTypes: state[values.reducerKey].jobstatuses,
   };
 };
 

package/src/components/WidgetSmall.js

@@ -3,10 +3,10 @@ import { Text, View, ScrollView, StyleSheet } from 'react-native';
 import { connect } from 'react-redux';
 import _ from 'lodash';
 import { maintenanceActions } from '../apis';
-import { jobsLoaded } from '../actions';
+import { jobsLoaded, jobStatusesUpdate, jobHideSeenUpdate } from '../actions';
 import MaintenanceWidgetItem from './MaintenanceWidgetItem';
 import { Services } from '../feature.config';
-import { Colours, Components, Config } from '../core.config';
+import { Colours, Components } from '../core.config';
 import { values } from '../values.config';
 
 const MAX_ITEMS = 10;
@@ -18,6 +18,8 @@ class WidgetSmall extends Component {
   }
 
   componentDidMount() {
+    this.props.jobStatusesUpdate(this.props.site);
+    this.props.jobHideSeenUpdate(this.props.site);
     this.refresh();
   }
 
@@ -149,4 +151,4 @@ const mapStateToProps = state => {
   };
 };
 
-export default connect(mapStateToProps, { jobsLoaded }, null, { forwardRef: true })(WidgetSmall);
+export default connect(mapStateToProps, { jobsLoaded, jobStatusesUpdate, jobHideSeenUpdate }, null, { forwardRef: true })(WidgetSmall);

package/src/helper.js

@@ -1,39 +1,68 @@
-import { label } from 'aws-amplify';
 import { Colours } from './core.config';
 
+const STATUS_NOT_ACTIONED = 'Not Actioned';
+const STATUS_IN_PROGRESS = 'In Progress';
+const STATUS_COMPLETED = 'Completed';
+
 const jobStatusOptions = [
   {
-    name: 'Unassigned',
-    label: 'Open',
+    text: 'Open',
+    order: 0,
     color: Colours.LINEGREY,
+    category: STATUS_NOT_ACTIONED,
   },
   {
-    name: 'In Progress',
-    label: 'In Progress',
+    text: 'In Progress',
+    order: 1,
     color: Colours.COLOUR_TEAL,
+    category: STATUS_IN_PROGRESS,
   },
   {
-    name: 'Completed',
-    label: 'Completed',
+    text: 'Completed',
+    order: 2,
     color: Colours.COLOUR_GREEN_LIGHT,
+    category: STATUS_COMPLETED,
   },
 ];
 
-const getJobStatusColour = status => {
-  const option = jobStatusOptions.find(item => item.name === status);
-  return option ? option.color : jobStatusOptions[0].color;
-};
+const jobPriorityOptions = [
+  {
+    label: 'Low',
+    color: Colours.COLOUR_GREEN,
+    default: true,
+  },
+  {
+    label: 'Medium',
+    color: Colours.COLOUR_TANGERINE,
+  },
+  {
+    label: 'High',
+    color: Colours.COLOUR_RED,
+  },
+];
 
-const getJobStatusLabel = status => {
-  const option = jobStatusOptions.find(item => item.name === status);
-  return option ? option.label : jobStatusOptions[0].label;
-};
+const getJobStatusOptions = props => props?.statusTypes?.length ? props?.statusTypes : jobStatusOptions;
 
-const getJobStatusProps = status => {
-  const statusText = getJobStatusLabel(status) || jobStatusOptions[0].label;
-  const statusColor = getJobStatusColour(statusText);
+const getDefaultJobStatuses = props => getJobStatusOptions(props).filter(s => s.category === STATUS_NOT_ACTIONED);
 
-  return { statusText, statusColor };
-};
+const getIncompleteJobStatuses = props => getJobStatusOptions(props).filter(s => s.category === STATUS_IN_PROGRESS);
 
-export { jobStatusOptions, getJobStatusColour, getJobStatusProps, getJobStatusLabel };
+const getJobStatus = (status, props) => {
+  const statusOptions = getJobStatusOptions(props);
+  // console.log('getJobStatus', JSON.stringify({ status, statusOptions }, null, 2));
+  let statusOption = null;
+  if (status) statusOption = statusOptions.find(s => s.text === status);
+  return statusOption || getDefaultJobStatuses(props)[0];
+}
+
+const getJobPriority = priority => jobPriorityOptions.find(p => p.label === priority) || jobPriorityOptions.find(p => p.default);
+
+export {
+  jobStatusOptions,
+  jobPriorityOptions,
+  getJobStatusOptions,
+  getDefaultJobStatuses,
+  getIncompleteJobStatuses,
+  getJobStatus,
+  getJobPriority,
+};

package/src/reducers/JobsReducer.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-param-reassign */
 import _ from 'lodash';
 import { REHYDRATE } from 'redux-persist';
-import { JOBS_LOADED, JOB_ADDED, JOBS_ADDED } from '../actions/types';
+import { JOBS_LOADED, JOB_ADDED, JOBS_ADDED, JOBS_STATUSES_LOADED, JOBS_HIDE_SEEN, JOB_FILTER_LOADED } from '../actions/types';
 import { ActionTypes } from '../core.config';
 import { values } from '../values.config';
 
@@ -9,11 +9,22 @@ const REDUCER_KEY = values.reducerKey;
 
 const INITIAL_STATE = {
   jobs: [],
+  jobstatuses: [],
+  hideSeen: false,
+  jobfilters: {
+    status: '',
+    statusText: '',
+    priority: '',
+    type: '',
+    assignee: '',
+    assigneeName: '',
+  },
 };
 
 export default (state = INITIAL_STATE, action) => {
   let updateJobs = [];
   let index = 0;
+  let jobstatuses = [];
 
   switch (action.type) {
     case ActionTypes.LOGOUT:
@@ -36,6 +47,19 @@ export default (state = INITIAL_STATE, action) => {
         updateJobs.push(action.payload);
       }
       return { ...state, jobs: updateJobs };
+    case JOBS_STATUSES_LOADED:
+      jobstatuses = _.orderBy(
+        _.unionWith(action.payload, state.jobstatuses, (v1, v2) => {
+          return v1 != null && v2 != null && v1.text === v2.text;
+        }),
+        'order',
+        'asc',
+      );
+      return { ...state, jobstatuses };
+    case JOBS_HIDE_SEEN:
+      return { ...state, hideSeen: action.payload };
+    case JOB_FILTER_LOADED:
+      return { ...state, jobfilters: action.payload };
     case REHYDRATE:
       if (!action.payload) return state;
       if (action.payload[REDUCER_KEY]) {