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

package/src/components/FilterPopupMenu.js

@@ -4,6 +4,8 @@ import { connect } from 'react-redux';
 import _ from 'lodash';
 import { maintenanceActions } from '../apis';
 import { Colours, Helper } from '../core.config';
+import { getJobStatusOptions, getIncompleteJobStatuses, jobPriorityOptions } from '../helper';
+import { values } from '../values.config';
 
 const SCREEN_HEIGHT = Dimensions.get('window').height;
 
@@ -14,31 +16,20 @@ class FilterPopupMenu extends Component {
     this.state = {
       types: props.types || [],
       selectedStatus: props.status || '',
+      selectedPriority: props.priority || '',
       selectedType: props.type || '',
       selectedAssignee: props.assignee || '',
       assignees: [],
     };
-    this.statusOptions = [
+    this.priorityOptions = [
       {
         label: 'All',
         value: '',
       },
-      {
-        label: 'Incomplete',
-        value: 'Unassigned|In Progress',
-      },
-      {
-        label: 'Open',
-        value: 'Unassigned',
-      },
-      {
-        label: 'In Progress',
-        value: 'In Progress',
-      },
-      {
-        label: 'Completed',
-        value: 'Completed',
-      },
+      ...jobPriorityOptions.map(p => ({
+        label: p.label,
+        value: p.label,
+      }))
     ];
   }
 
@@ -53,6 +44,26 @@ class FilterPopupMenu extends Component {
     }
   }
 
+  getStatusOptions = () => {
+    const statusOptions = getJobStatusOptions(this.props);
+    const options = [
+      {
+        label: 'All',
+        value: '',
+      },
+      {
+        label: 'Incomplete',
+        value: `Unassigned|${getIncompleteJobStatuses(this.props).map(s => s.text).join('|')}`,
+      },
+      ...statusOptions.map(s => ({
+        label: s.text,
+        value: s.text,
+      })),
+    ];
+    // console.log('getStatusOptions', options);
+    return options;
+  }
+
   getAssignees = async () => {
     try {
       const res = await maintenanceActions.getAssignees(this.props.site);
@@ -93,11 +104,12 @@ class FilterPopupMenu extends Component {
 
   onDone = () => {
     const { onClose } = this.props;
-    const { selectedStatus, selectedType, selectedAssignee } = this.state;
+    const { selectedStatus, selectedPriority, selectedType, selectedAssignee } = this.state;
     if (onClose)
       onClose({
         status: selectedStatus,
-        statusText: this.statusOptions.find(o => o.value === selectedStatus)?.label,
+        statusText: this.getStatusOptions().find(o => o.value === selectedStatus)?.label,
+        priority: selectedPriority,
         type: selectedType,
         assignee: selectedAssignee,
         assigneeName: this.state.assignees.find(a => a.value === selectedAssignee)?.label,
@@ -148,15 +160,20 @@ class FilterPopupMenu extends Component {
   }
 
   render() {
+    // console.log('FilterPopupMenu', JSON.stringify({ category: this.props.user.category, permissions: this.props.user.permissions }, null, 2))
+    const isStaff = this.props.user.category === 'staff'
+    const canFilterAssignee = !_.includes(this.props.user.permissions, values.permissionMaintenanceAssignment);
+
     return (
       <Modal visible transparent animationType="slide" onRequestClose={this.onDone}>
         <View style={styles.container}>
           <View style={styles.menu}>
             {this.renderTitle()}
             <ScrollView style={styles.optionContent}>
-              {this.renderOptions('Status', this.statusOptions, 'selectedStatus')}
+              {this.renderOptions('Status', this.getStatusOptions(), 'selectedStatus')}
+              {isStaff ? this.renderOptions('Priority', this.priorityOptions, 'selectedPriority') : null}
               {this.renderOptions('Type', this.state.types, 'selectedType')}
-              {this.renderOptions('Assigned To', this.state.assignees, 'selectedAssignee')}
+              {canFilterAssignee ? this.renderOptions('Assigned To', this.state.assignees, 'selectedAssignee') : null}
             </ScrollView>
             {this.renderCancel()}
           </View>
@@ -248,8 +265,10 @@ const mapStateToProps = state => {
   const { user } = state;
 
   return {
+    user,
     site: user.site,
     colourBrandingMain: Colours.getMainBrandingColourFromState(state),
+    statusTypes: state[values.reducerKey].jobstatuses,
   };
 };
 

package/src/components/MaintenanceList.js

@@ -3,53 +3,45 @@ import { View, StyleSheet, FlatList, TouchableOpacity, Text } from 'react-native
 import _ from 'lodash';
 import { connect } from 'react-redux';
 import { maintenanceActions } from '../apis';
-import { jobsLoaded, jobAdded, jobsAdded } from '../actions';
+import { jobsLoaded, jobAdded, jobsAdded, jobStatusesUpdate, jobHideSeenUpdate, jobsFilterLoaded } from '../actions';
 import MaintenanceListItem from '../components/MaintenanceListItem';
 import FilterPopupMenu from './FilterPopupMenu';
-import { Components, Colours, Config, Helper } from '../core.config';
+import { Components, Colours, Helper } from '../core.config';
 import { values } from '../values.config';
 
 class MaintenanceList extends Component {
   constructor(props) {
     super(props);
 
-    this.initialStatus = props.hasPermission ? 'Unassigned|In Progress' : '';
-    this.initialStatusText = props.hasPermission ? 'Incomplete' : '';
-
     this.state = {
       types: [],
       filteredList: props.jobs,
       loading: false,
       searchText: '',
       showFilterPopup: false,
-      selectedStatus: this.initialStatus,
-      selectedStatusText: this.initialStatusText,
-      selectedType: '',
-      selectedAssignee: '',
-      selectedAssigneeName: '',
     };
   }
 
   componentDidMount() {
+    this.props.jobStatusesUpdate(this.props.site);
+    this.props.jobHideSeenUpdate(this.props.site);
     this.refresh();
     this.refreshTypes();
-
     this.resetDataSource();
   }
 
   componentDidUpdate(prevProps) {
     if (!prevProps.dataUpdated && this.props.dataUpdated) this.refresh();
-    if (!_.isEqual(prevProps.jobs, this.props.jobs)) this.resetDataSource();
+    if (!_.isEqual(prevProps.jobs, this.props.jobs) || !_.isEqual(prevProps.jobfilters, this.props.jobfilters)) this.resetDataSource();
   }
 
   refresh = () => {
     this.onLoadingChanged(true, async () => {
       try {
-        const { selectedStatus, selectedType } = this.state;
-        // console.log('filters', { selectedStatus, selectedType });
-        const res = await maintenanceActions.getJobsRecursive(this.props.site, selectedStatus, selectedType);
-        // console.log('refresh', res?.data);
-        if (selectedStatus !== this.initialStatus || !_.isEmpty(selectedType)) {
+        const { jobfilters } = this.props;
+        const res = await maintenanceActions.getJobsRecursive(this.props.site, jobfilters.status, jobfilters.priority, jobfilters.type);
+        // console.log('refresh', res ? JSON.stringify(res[0], null, 2) : null);
+        if (!_.isEmpty(jobfilters.status) || !_.isEmpty(jobfilters.priority) || !_.isEmpty(jobfilters.type)) {
           this.props.jobsAdded(res);
         } else {
           this.props.jobsLoaded(res);
@@ -96,7 +88,8 @@ class MaintenanceList extends Component {
   }
 
   resetDataSource = (source = '') => {
-    const { searchText, selectedStatus, selectedType, selectedAssignee } = this.state;
+    const { jobfilters } = this.props;
+    const { searchText } = this.state;
     const { jobs } = this.props;
 
     let filteredList = jobs;
@@ -111,9 +104,10 @@ class MaintenanceList extends Component {
       });
       if (!jobIdMatch) this.fetchJob(searchText);
     }
-    if (selectedStatus) filteredList = filteredList.filter(j => selectedStatus.includes(j.status));
-    if (selectedType) filteredList = filteredList.filter(j => selectedType.includes(j.type));
-    if (selectedAssignee) filteredList = filteredList.filter(j => selectedAssignee.includes(j.AssigneeId));
+    if (jobfilters.status) filteredList = filteredList.filter(j => jobfilters.status.includes(j.status));
+    if (jobfilters.priority) filteredList = filteredList.filter(j => jobfilters.priority.includes(j.priority));
+    if (jobfilters.type) filteredList = filteredList.filter(j => jobfilters.type.includes(j.type));
+    if (jobfilters.assignee) filteredList = filteredList.filter(j => jobfilters.assignee.includes(j.AssigneeId));
     if (jobIdMatch) {
       const jobIndex = filteredList.indexOf(jobIdMatch);
       if (jobIndex > -1) {
@@ -148,33 +142,24 @@ class MaintenanceList extends Component {
   };
 
   onSelectFilter = selected => {
-    this.setState(
-      {
-        selectedStatus: selected.status,
-        selectedStatusText: selected.statusText,
-        selectedType: selected.type,
-        selectedAssignee: selected.assignee,
-        selectedAssigneeName: selected.assigneeName,
-      },
-      () => {
-        this.resetDataSource();
-        this.onToggleFilter();
-      },
-    );
+    this.props.jobsFilterLoaded(selected);
+    this.onToggleFilter();
   };
 
   getFilterButtonText = () => {
-    const { selectedStatus, selectedStatusText, selectedType, selectedAssignee, selectedAssigneeName } = this.state;
+    const { jobfilters } = this.props;
     const filterTexts = [];
-    if (!_.isEmpty(selectedStatus)) {
-      filterTexts.push(selectedStatusText);
+    if (!_.isEmpty(jobfilters.status)) {
+      filterTexts.push(jobfilters.statusText);
     }
-
-    if (!_.isEmpty(selectedType)) {
-      filterTexts.push(selectedType);
+    if (!_.isEmpty(jobfilters.priority)) {
+      filterTexts.push(jobfilters.priority);
+    }
+    if (!_.isEmpty(jobfilters.type)) {
+      filterTexts.push(jobfilters.type);
     }
-    if (!_.isEmpty(selectedAssignee)) {
-      filterTexts.push(selectedAssigneeName);
+    if (!_.isEmpty(jobfilters.assignee)) {
+      filterTexts.push(jobfilters.assigneeName);
     }
     if (_.isEmpty(filterTexts)) {
       return 'Filter';
@@ -244,16 +229,18 @@ class MaintenanceList extends Component {
   }
 
   renderFilterPopup() {
-    const { showFilterPopup, types, selectedStatus, selectedType, selectedAssignee } = this.state;
+    const { jobfilters } = this.props;
+    const { showFilterPopup, types } = this.state;
     if (!showFilterPopup) return null;
 
     return (
       <FilterPopupMenu
         site={this.props.site}
         types={types}
-        status={selectedStatus}
-        assignee={selectedAssignee}
-        type={selectedType}
+        status={jobfilters.status}
+        priority={jobfilters.priority}
+        assignee={jobfilters.assignee}
+        type={jobfilters.type}
         onClose={this.onSelectFilter}
       />
     );
@@ -329,7 +316,11 @@ const mapStateToProps = state => {
     userCategory: user.category,
     colourBrandingMain: Colours.getMainBrandingColourFromState(state),
     dataUpdated: notifications.dataUpdated[values.updateKey],
+    statusTypes: state[values.reducerKey].jobstatuses,
+    jobfilters: state[values.reducerKey].jobfilters,
   };
 };
 
-export default connect(mapStateToProps, { jobsLoaded, jobAdded, jobsAdded }, null, { forwardRef: true })(MaintenanceList);
+export default connect(mapStateToProps, { jobsLoaded, jobAdded, jobsAdded, jobStatusesUpdate, jobHideSeenUpdate, jobsFilterLoaded }, null, { forwardRef: true })(
+  MaintenanceList,
+);

package/src/components/MaintenanceListItem.js

@@ -4,19 +4,7 @@ import _ from 'lodash';
 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 (
@@ -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 '@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 }]}>
+              <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);