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

package/src/components/MaintenanceListItem.js

@@ -1,22 +1,10 @@
 import React, { Component } from 'react';
 import { Image, Text, TouchableOpacity, View, StyleSheet } from 'react-native';
 import _ from 'lodash';
-import { Icon } from 'react-native-elements';
+import { Icon } from '@rneui/themed';
 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 (
@@ -64,8 +52,10 @@ class MaintenanceListItem extends Component {
     const { job } = this.props;
     const createdTime = moment(job.createdUnix);
     const createdTimeText = `${createdTime.format('ddd, D MMMM')} • ${createdTime.format('h:mma')}`;
-    const activityTimeText = job.expectedDate ? moment(job.expectedDate).format('D MMMM') : '--';
-    const { statusText, statusColor } = getJobStatusProps(job.status);
+    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}>
@@ -73,12 +63,18 @@ class MaintenanceListItem extends Component {
           <View style={styles.jobInnerContainer}>
             <View style={styles.jobTopSection}>
               <View style={styles.jobTopLeft}>
-                {job.jobId ? <Text style={[styles.jobIdText, { color: this.props.colourBrandingMain }]}>{`Job #${job.jobId}`}</Text> : null}
+                {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 }]}>{job.type}</Text>
+                    <Text style={[styles.jobTypeText, { color: this.props.colourBrandingMain }]} numberOfLines={2}>
+                      {job.type}
+                    </Text>
                   </View>
                   {this.renderSeen()}
                 </View>
@@ -92,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 }]}>
-                  <Icon name="wrench" type="font-awesome" iconStyle={styles.jobStatusIcon} />
-                  <Text style={styles.jobStatusText}>{statusText}</Text>
+                <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: statusColor }]}>
+                <View style={[styles.jobStatusLine, { borderColor: status?.color }]}>
                   <View style={styles.jobStatusLineMask} />
                 </View>
-                <View style={[styles.jobStatusCircle, { backgroundColor: statusColor }]} />
-                <Text style={styles.jobStatusDateText}>{activityTimeText}</Text>
+                <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>
@@ -152,8 +153,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   jobTypeContainer: {
-    height: 20,
-    width: 80,
+    padding: 4,
+    minWidth: 80,
+    maxWidth: 140,
     borderRadius: 4,
     justifyContent: 'center',
   },
@@ -161,6 +163,7 @@ const styles = StyleSheet.create({
     fontFamily: 'sf-semibold',
     fontSize: 12,
     textAlign: 'center',
+    maxWidth: '100%',
   },
   jobSeenContainer: {
     flexDirection: 'row',
@@ -228,7 +231,7 @@ const styles = StyleSheet.create({
   jobStatusContainer: {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'space-between',
+    justifyContent: 'center',
     width: 105,
     height: 30,
     paddingHorizontal: 8,
@@ -266,15 +269,34 @@ const styles = StyleSheet.create({
   jobStatusDateText: {
     flex: 1,
     textAlign: 'right',
-    fontFamily: 'sf-bold',
+    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,
   };
 };
 

package/src/components/MaintenanceWidgetItem.js

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
 import { connect } from 'react-redux';
-import { Icon } from 'react-native-elements';
+import { Icon } from '@rneui/themed';
 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 }]}>
-                <Icon name="wrench" type="font-awesome" iconStyle={styles.jobStatusIcon} />
-                <Text style={styles.jobStatusText}>{statusText}</Text>
+              <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>
           </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,24 +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,
-            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,
@@ -30,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.name}</Text>
+                  <Text style={styles.jobStatusText}>{status.text}</Text>
                 </View>
               </TouchableOpacity>
             );
@@ -80,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

@@ -2,11 +2,11 @@ import React, { Component } from 'react';
 import { Text, View, ScrollView, StyleSheet } from 'react-native';
 import { connect } from 'react-redux';
 import _ from 'lodash';
-import { generalActions } from '../apis';
-import { jobsLoaded } from '../actions';
+import { maintenanceActions } from '../apis';
+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();
   }
 
@@ -34,13 +36,13 @@ class WidgetSmall extends Component {
   getEmptyStateText = () => {
     const { options, userCategory } = this.props;
     if (options && !_.isEmpty(options.EmptyText)) return options.EmptyText;
-    return userCategory === 'staff' ? Config.env.strings.EMPTY_REQUESTS_STAFF : Config.env.strings.EMPTY_REQUESTS_USER;
+    return userCategory === 'staff' ? values.emptyRequestsStaff : values.emptyRequestsUser;
   };
 
   refresh = () => {
     this.onLoadingChanged(true, async () => {
       try {
-        const res = await generalActions.getJobsRecursive(this.props.site);
+        const res = await maintenanceActions.getJobsRecursive(this.props.site);
         // console.log('WidgetSmall - refresh', res.data);
         this.props.jobsLoaded(res);
       } catch (error) {
@@ -59,7 +61,7 @@ class WidgetSmall extends Component {
   };
 
   onPressAll = () => {
-    Services.navigation.navigate('maintenance', { options: this.props.options });
+    Services.navigation.navigate(values.screenMaintenance, { options: this.props.options });
   };
 
   renderContent() {
@@ -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/feature.config.js

@@ -16,7 +16,7 @@ const FeatureConfig = {
   title: values.textFeatureTitle,
   gridMenu: {
     icon: values.iconGridMenu,
-    viewBox: '0 0 30 30',
+    viewBox: values.gridViewBox,
     navigate: values.screenMaintenance,
   },
   addMenu: {
@@ -26,18 +26,20 @@ const FeatureConfig = {
     navigate: values.screenServiceRequest,
     visibleExps: { type: 'feature', value: values.featureKey },
   },
-  moreMenu: {
-    order: values.orderMoreMenu,
-    title: values.textMoreMenuTitle,
-    navigate: values.screenMaintenance,
-    visibleExps: {
-      type: 'and',
-      exps: [
-        { type: 'notHidden', value: 'maintenanceRequest' },
-        { type: 'notUserType', value: 'KIOSK' },
-      ],
-    },
-  },
+  moreMenu: values.hasMoreOption
+    ? {
+        order: values.orderMoreMenu,
+        title: values.textMoreMenuTitle,
+        navigate: values.screenMaintenance,
+        visibleExps: {
+          type: 'and',
+          exps: [
+            { type: 'notHidden', value: 'maintenanceRequest' },
+            { type: 'notUserType', value: 'KIOSK' },
+          ],
+        },
+      }
+    : undefined,
   kioskAction: {
     order: values.orderKioskAction,
     icon: values.iconKioskAction,

package/src/helper.js

@@ -1,30 +1,68 @@
 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',
+    text: 'Open',
+    order: 0,
     color: Colours.LINEGREY,
+    category: STATUS_NOT_ACTIONED,
   },
   {
-    name: 'In Progress',
+    text: 'In Progress',
+    order: 1,
     color: Colours.COLOUR_TEAL,
+    category: STATUS_IN_PROGRESS,
   },
   {
-    name: '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 getJobStatusProps = status => {
-  const statusText = status || jobStatusOptions[0].name;
-  const statusColor = getJobStatusColour(statusText);
+const getJobStatusOptions = props => props?.statusTypes?.length ? props?.statusTypes : jobStatusOptions;
 
-  return { statusText, statusColor };
-};
+const getDefaultJobStatuses = props => getJobStatusOptions(props).filter(s => s.category === STATUS_NOT_ACTIONED);
+
+const getIncompleteJobStatuses = props => getJobStatusOptions(props).filter(s => s.category === STATUS_IN_PROGRESS);
 
-export { jobStatusOptions, getJobStatusColour, getJobStatusProps };
+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,18 +1,30 @@
 /* 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';
 
-const REDUCER_KEY = 'jobs';
+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:
@@ -35,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/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';