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

package/src/components/StatusSelectorPopup.js

@@ -1,18 +1,25 @@
 import React, { PureComponent } from 'react';
 import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
 import { connect } from 'react-redux';
-import { getJobStatusOptions } from '../helper';
+import { jobStatusOptions, getJobStatusColour } 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);
+    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;
     if (includeAll)
       statuses = [
         {
-          text: allText || 'Show All',
+          name: allText || 'Show All',
           color: this.props.colourBrandingMain,
         },
         ...statuses,
@@ -24,9 +31,9 @@ class StatusSelectorPopup extends PureComponent {
         <View style={styles.statusPopupOptionsContainer}>
           {statuses.map(status => {
             return (
-              <TouchableOpacity key={status.text} onPress={() => onSelect(status.text)}>
+              <TouchableOpacity key={status.name} onPress={() => onSelect(status.name)}>
                 <View style={[styles.jobStatusContainer, { backgroundColor: status.color }]}>
-                  <Text style={styles.jobStatusText}>{status.text}</Text>
+                  <Text style={styles.jobStatusText}>{status.label}</Text>
                 </View>
               </TouchableOpacity>
             );
@@ -74,7 +81,6 @@ 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, jobStatusesUpdate, jobHideSeenUpdate } from '../actions';
+import { jobsLoaded } from '../actions';
 import MaintenanceWidgetItem from './MaintenanceWidgetItem';
 import { Services } from '../feature.config';
-import { Colours, Components } from '../core.config';
+import { Colours, Components, Config } from '../core.config';
 import { values } from '../values.config';
 
 const MAX_ITEMS = 10;
@@ -18,8 +18,6 @@ class WidgetSmall extends Component {
   }
 
   componentDidMount() {
-    this.props.jobStatusesUpdate(this.props.site);
-    this.props.jobHideSeenUpdate(this.props.site);
     this.refresh();
   }
 
@@ -151,4 +149,4 @@ const mapStateToProps = state => {
   };
 };
 
-export default connect(mapStateToProps, { jobsLoaded, jobStatusesUpdate, jobHideSeenUpdate }, null, { forwardRef: true })(WidgetSmall);
+export default connect(mapStateToProps, { jobsLoaded }, null, { forwardRef: true })(WidgetSmall);

package/src/helper.js

@@ -1,68 +1,39 @@
+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 = [
   {
-    text: 'Open',
-    order: 0,
+    name: 'Unassigned',
+    label: 'Open',
     color: Colours.LINEGREY,
-    category: STATUS_NOT_ACTIONED,
   },
   {
-    text: 'In Progress',
-    order: 1,
+    name: 'In Progress',
+    label: 'In Progress',
     color: Colours.COLOUR_TEAL,
-    category: STATUS_IN_PROGRESS,
   },
   {
-    text: 'Completed',
-    order: 2,
+    name: 'Completed',
+    label: 'Completed',
     color: Colours.COLOUR_GREEN_LIGHT,
-    category: STATUS_COMPLETED,
-  },
-];
-
-const jobPriorityOptions = [
-  {
-    label: 'Low',
-    color: Colours.COLOUR_GREEN,
-    default: true,
-  },
-  {
-    label: 'Medium',
-    color: Colours.COLOUR_TANGERINE,
-  },
-  {
-    label: 'High',
-    color: Colours.COLOUR_RED,
   },
 ];
 
-const getJobStatusOptions = props => props?.statusTypes?.length ? props?.statusTypes : jobStatusOptions;
-
-const getDefaultJobStatuses = props => getJobStatusOptions(props).filter(s => s.category === STATUS_NOT_ACTIONED);
-
-const getIncompleteJobStatuses = props => getJobStatusOptions(props).filter(s => s.category === STATUS_IN_PROGRESS);
+const getJobStatusColour = status => {
+  const option = jobStatusOptions.find(item => item.name === status);
+  return option ? option.color : jobStatusOptions[0].color;
+};
 
-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 getJobStatusLabel = status => {
+  const option = jobStatusOptions.find(item => item.name === status);
+  return option ? option.label : jobStatusOptions[0].label;
+};
 
-const getJobPriority = priority => jobPriorityOptions.find(p => p.label === priority) || jobPriorityOptions.find(p => p.default);
+const getJobStatusProps = status => {
+  const statusText = getJobStatusLabel(status) || jobStatusOptions[0].label;
+  const statusColor = getJobStatusColour(statusText);
 
-export {
-  jobStatusOptions,
-  jobPriorityOptions,
-  getJobStatusOptions,
-  getDefaultJobStatuses,
-  getIncompleteJobStatuses,
-  getJobStatus,
-  getJobPriority,
+  return { statusText, statusColor };
 };
+
+export { jobStatusOptions, getJobStatusColour, getJobStatusProps, getJobStatusLabel };

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, JOBS_STATUSES_LOADED, JOBS_HIDE_SEEN, JOB_FILTER_LOADED } from '../actions/types';
+import { JOBS_LOADED, JOB_ADDED, JOBS_ADDED } from '../actions/types';
 import { ActionTypes } from '../core.config';
 import { values } from '../values.config';
 
@@ -9,22 +9,11 @@ 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:
@@ -47,19 +36,6 @@ 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/JobTypePicker.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import _ from 'lodash';
 import { TouchableOpacity, View, ScrollView, Text } from 'react-native';
 import { connect } from 'react-redux';
-import { Icon } from 'react-native-elements';
+import { Icon } from '@rneui/themed';
 import { Services } from '../feature.config';
 import { Components, Colours } from '../core.config';
 

package/src/screens/RequestDetail.js

@@ -1,15 +1,14 @@
 import React, { Component } from 'react';
 import { ScrollView, View, StyleSheet, Text, KeyboardAvoidingView, TouchableOpacity, ImageBackground, Platform } from 'react-native';
 import DateTimePicker from 'react-native-modal-datetime-picker';
-import { Icon } from 'react-native-elements';
+import { Icon } from '@rneui/themed';
 import _ from 'lodash';
 import moment from 'moment';
 import { connect } from 'react-redux';
 import { maintenanceActions } from '../apis';
-import { jobAdded, jobStatusesUpdate, jobHideSeenUpdate } from '../actions';
+import { jobAdded } from '../actions';
 import StatusSelectorPopup from '../components/StatusSelectorPopup';
-import PrioritySelectorPopup from '../components/PrioritySelectorPopup';
-import { getJobStatus, getJobPriority } from '../helper';
+import { jobStatusOptions, getJobStatusProps } from '../helper';
 import { Services } from '../feature.config';
 import { Colours, Helper, Components, Config } from '../core.config';
 import { values } from '../values.config';
@@ -23,13 +22,11 @@ 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: '',
@@ -45,8 +42,6 @@ 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();
@@ -56,7 +51,6 @@ 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) {
@@ -161,20 +155,6 @@ 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();
   };
@@ -188,27 +168,11 @@ 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 });
   };
@@ -330,11 +294,9 @@ class RequestDetail extends Component {
 
   renderTop() {
     const { status, job } = this.state;
-    const statusOption = getJobStatus(status, this.props);
-    const priority = getJobPriority(job.priority);
+    const { statusText, statusColor } = getJobStatusProps(status);
     const canEdit = this.hasPermission();
-    const isStaff = this.props.user.category === 'staff'
-    const showSeen = !status || status === getJobStatus(null, this.props).text;
+    const showSeen = !status || status === jobStatusOptions[0].name;
 
     return (
       <View style={{ ...Helper.getShadowStyle() }}>
@@ -349,7 +311,7 @@ class RequestDetail extends Component {
                 {job.type}
               </Text>
             </View>
-            {!this.props.hideSeen && showSeen && this.state.seen && (
+            {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>
@@ -379,34 +341,22 @@ class RequestDetail extends Component {
             </TouchableOpacity>
           </View> */}
         </View>
-        <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 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>
-            )}
+            </TouchableOpacity>
           </View>
-          {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>
+          {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>
@@ -653,11 +603,6 @@ 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 />;
@@ -676,7 +621,6 @@ class RequestDetail extends Component {
         </ScrollView>
         {this.renderMessagesReply()}
         {this.renderStatusPopup()}
-        {this.renderPriorityPopup()}
         {this.renderImagePopup()}
         <DateTimePicker
           isVisible={this.state.isDateTimePickerVisible}
@@ -750,16 +694,14 @@ const styles = StyleSheet.create({
     fontSize: 13,
     color: Colours.TEXT_LIGHT,
   },
-  jobInfoContainer: {
-    borderTopWidth: 1,
-    borderTopColor: Colours.LINEGREY,
-    paddingVertical: 14,
-    paddingHorizontal: 12,
-  },
   jobStatusExpectedContainer: {
     flexDirection: 'row',
     alignItems: 'flex-start',
     justifyContent: 'space-between',
+    borderTopWidth: 1,
+    borderTopColor: Colours.LINEGREY,
+    paddingVertical: 14,
+    paddingHorizontal: 12,
   },
   jobStatusOuterContainer: {
     // marginRight: 50,
@@ -792,9 +734,6 @@ const styles = StyleSheet.create({
     flex: 1,
     textAlign: 'center',
   },
-  jobPriorityOuterContainer: {
-    marginTop: 12,
-  },
   jobExpectedDateContainer: {
     backgroundColor: Colours.BOXGREY,
     flexDirection: 'row',
@@ -969,9 +908,7 @@ 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, jobStatusesUpdate, jobHideSeenUpdate })(RequestDetail);
+export default connect(mapStateToProps, { jobAdded })(RequestDetail);