@plusscommunities/pluss-maintenance-app 7.0.0-beta.0 → 7.0.0-beta.1

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]) {

package/src/screens/RequestDetail.js

@@ -6,9 +6,10 @@ import _ from 'lodash';
 import moment from 'moment';
 import { connect } from 'react-redux';
 import { maintenanceActions } from '../apis';
-import { jobAdded } from '../actions';
+import { jobAdded, jobStatusesUpdate, jobHideSeenUpdate } from '../actions';
 import StatusSelectorPopup from '../components/StatusSelectorPopup';
-import { jobStatusOptions, getJobStatusProps } from '../helper';
+import PrioritySelectorPopup from '../components/PrioritySelectorPopup';
+import { getJobStatus, getJobPriority } from '../helper';
 import { Services } from '../feature.config';
 import { Colours, Helper, Components, Config } from '../core.config';
 import { values } from '../values.config';
@@ -22,11 +23,13 @@ class RequestDetail extends Component {
       isDateTimePickerVisible: false,
       popUpType: '',
       status: '',
+      priority: '',
       expectedDate: null,
       expectedDateText: '',
       seen: false,
       showMore: true,
       showStatusPopup: false,
+      showPriorityPopup: false,
       loading: false,
       showFullscreenVideo: false,
       currentVideoUrl: '',
@@ -42,6 +45,8 @@ class RequestDetail extends Component {
   }
 
   componentDidMount() {
+    this.props.jobStatusesUpdate(this.props.job.site);
+    this.props.jobHideSeenUpdate(this.props.job.site);
     this.getJob();
     this.updateJobState(this.props.job);
     this.getAssignees();
@@ -51,6 +56,7 @@ class RequestDetail extends Component {
     this.setState({ loading: true }, async () => {
       try {
         const res = await maintenanceActions.getJob(this.props.job.site, this.props.job.id);
+        // console.log('getJob', JSON.stringify(res.data, null, 2));
         this.props.jobAdded(res.data);
         this.updateJobState(res.data);
       } catch (error) {
@@ -155,6 +161,20 @@ class RequestDetail extends Component {
     });
   };
 
+  updateJobPriority = () => {
+    this.setState({ loading: true }, async () => {
+      try {
+        const res = await maintenanceActions.editJobPriority(this.props.job.id, this.state.priority);
+        this.props.jobAdded(res.data.job);
+        this.getJob();
+      } catch (error) {
+        console.log('updateJobPriority error', error);
+      } finally {
+        this.setState({ loading: false });
+      }
+    });
+  };
+
   onPressBack = () => {
     Services.navigation.goBack();
   };
@@ -168,11 +188,27 @@ class RequestDetail extends Component {
   };
 
   onSelectStatus = status => {
+    if (this.state.loading) return;
     this.setState({ status, showStatusPopup: false }, () => {
       this.updateJobStatus();
     });
   };
 
+  onOpenPriorityPicker = () => {
+    this.setState({ showPriorityPopup: true });
+  };
+
+  onClosePriorityPopup = () => {
+    this.setState({ showPriorityPopup: false });
+  };
+
+  onSelectPriority = priority => {
+    if (this.state.loading) return;
+    this.setState({ priority, showPriorityPopup: false }, () => {
+      this.updateJobPriority();
+    });
+  };
+
   openStaffNotes = () => {
     Services.navigation.navigate(values.screenRequestNotes, { job: this.state.job, onChange: this.getJob });
   };
@@ -294,9 +330,11 @@ class RequestDetail extends Component {
 
   renderTop() {
     const { status, job } = this.state;
-    const { statusText, statusColor } = getJobStatusProps(status);
+    const statusOption = getJobStatus(status, this.props);
+    const priority = getJobPriority(job.priority);
     const canEdit = this.hasPermission();
-    const showSeen = !status || status === jobStatusOptions[0].name;
+    const isStaff = this.props.user.category === 'staff'
+    const showSeen = !status || status === getJobStatus(null, this.props).text;
 
     return (
       <View style={{ ...Helper.getShadowStyle() }}>
@@ -311,7 +349,7 @@ class RequestDetail extends Component {
                 {job.type}
               </Text>
             </View>
-            {showSeen && this.state.seen && (
+            {!this.props.hideSeen && showSeen && this.state.seen && (
               <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>
@@ -341,22 +379,34 @@ class RequestDetail extends Component {
             </TouchableOpacity>
           </View> */}
         </View>
-        <View style={styles.jobStatusExpectedContainer}>
-          <View style={styles.jobStatusOuterContainer}>
-            <Text style={styles.jobStatusHeading}>STATUS</Text>
-            <TouchableOpacity onPress={canEdit ? this.onOpenStatusPicker : null}>
-              <View style={[styles.jobStatusContainer, { backgroundColor: statusColor }]}>
-                <Text style={styles.jobStatusText}>{statusText}</Text>
+        <View style={styles.jobInfoContainer}>
+          <View style={styles.jobStatusExpectedContainer}>
+            <View style={styles.jobStatusOuterContainer}>
+              <Text style={styles.jobStatusHeading}>STATUS</Text>
+              <TouchableOpacity onPress={canEdit ? this.onOpenStatusPicker : null}>
+                <View style={[styles.jobStatusContainer, { backgroundColor: statusOption.color }]}>
+                  <Text style={styles.jobStatusText}>{statusOption?.text}</Text>
+                </View>
+              </TouchableOpacity>
+            </View>
+            {this.hasPermission() && (
+              <View style={styles.jobStatusOuterContainer}>
+                <Text style={styles.jobStatusHeading}>STAFF NOTES</Text>
+                <TouchableOpacity onPress={this.openStaffNotes}>
+                  <View style={[styles.jobStatusContainer, { backgroundColor: this.props.colourBrandingMain }]}>
+                    <Icon name="pencil-square-o" type="font-awesome" iconStyle={styles.jobStatusIcon} />
+                    <Text style={styles.jobStatusText}>Notes ({(job.Notes || []).length})</Text>
+                  </View>
+                </TouchableOpacity>
               </View>
-            </TouchableOpacity>
+            )}
           </View>
-          {this.hasPermission() && (
-            <View style={styles.jobStatusOuterContainer}>
-              <Text style={styles.jobStatusHeading}>STAFF NOTES</Text>
-              <TouchableOpacity onPress={this.openStaffNotes}>
-                <View style={[styles.jobStatusContainer, { backgroundColor: this.props.colourBrandingMain }]}>
-                  <Icon name="pencil-square-o" type="font-awesome" iconStyle={styles.jobStatusIcon} />
-                  <Text style={styles.jobStatusText}>Notes ({(job.Notes || []).length})</Text>
+          {isStaff && (
+            <View style={styles.jobPriorityOuterContainer}>
+              <Text style={styles.jobStatusHeading}>PRIORITY</Text>
+              <TouchableOpacity onPress={canEdit ? this.onOpenPriorityPicker : null}>
+                <View style={[styles.jobStatusContainer, { backgroundColor: priority.color }]}>
+                  <Text style={styles.jobStatusText}>{priority.label}</Text>
                 </View>
               </TouchableOpacity>
             </View>
@@ -603,6 +653,11 @@ class RequestDetail extends Component {
     return <StatusSelectorPopup onClose={this.onCloseStatusPopup} onSelect={this.onSelectStatus} />;
   }
 
+  renderPriorityPopup() {
+    if (!this.state.showPriorityPopup) return null;
+    return <PrioritySelectorPopup onClose={this.onClosePriorityPopup} onSelect={this.onSelectPriority} />;
+  }
+
   render() {
     if (this.state.forbidden) {
       return <Components.Forbidden />;
@@ -621,6 +676,7 @@ class RequestDetail extends Component {
         </ScrollView>
         {this.renderMessagesReply()}
         {this.renderStatusPopup()}
+        {this.renderPriorityPopup()}
         {this.renderImagePopup()}
         <DateTimePicker
           isVisible={this.state.isDateTimePickerVisible}
@@ -694,15 +750,17 @@ const styles = StyleSheet.create({
     fontSize: 13,
     color: Colours.TEXT_LIGHT,
   },
-  jobStatusExpectedContainer: {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    justifyContent: 'space-between',
+  jobInfoContainer: {
     borderTopWidth: 1,
     borderTopColor: Colours.LINEGREY,
     paddingVertical: 14,
     paddingHorizontal: 12,
   },
+  jobStatusExpectedContainer: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+  },
   jobStatusOuterContainer: {
     // marginRight: 50,
   },
@@ -734,6 +792,9 @@ const styles = StyleSheet.create({
     flex: 1,
     textAlign: 'center',
   },
+  jobPriorityOuterContainer: {
+    marginTop: 12,
+  },
   jobExpectedDateContainer: {
     backgroundColor: Colours.BOXGREY,
     flexDirection: 'row',
@@ -908,7 +969,9 @@ const mapStateToProps = state => {
     user: state.user,
     colourBrandingMain: Colours.getMainBrandingColourFromState(state),
     jobs: state[values.reducerKey].jobs,
+    statusTypes: state[values.reducerKey].jobstatuses,
+    hideSeen: state[values.reducerKey].hideSeen,
   };
 };
 
-export default connect(mapStateToProps, { jobAdded })(RequestDetail);
+export default connect(mapStateToProps, { jobAdded, jobStatusesUpdate, jobHideSeenUpdate })(RequestDetail);