@plusscommunities/pluss-maintenance-app 6.0.4-auth.0 → 6.0.4

package/src/components/FilterPopupMenu.js

@@ -1,10 +1,12 @@
 import React, { Component } from 'react';
-import { View, Text, TouchableOpacity, Modal } from 'react-native';
+import { View, Text, TouchableOpacity, Modal, ScrollView, Dimensions } from 'react-native';
 import { connect } from 'react-redux';
 import _ from 'lodash';
-import { generalActions } from '../apis';
+import { maintenanceActions } from '../apis';
 import { Colours, Helper } from '../core.config';
 
+const SCREEN_HEIGHT = Dimensions.get('window').height;
+
 class FilterPopupMenu extends Component {
   constructor(props) {
     super(props);
@@ -13,6 +15,8 @@ class FilterPopupMenu extends Component {
       types: props.types || [],
       selectedStatus: props.status || '',
       selectedType: props.type || '',
+      selectedAssignee: props.assignee || '',
+      assignees: [],
     };
     this.statusOptions = [
       {
@@ -24,7 +28,7 @@ class FilterPopupMenu extends Component {
         value: 'Unassigned|In Progress',
       },
       {
-        label: 'Unassigned',
+        label: 'Open',
         value: 'Unassigned',
       },
       {
@@ -39,6 +43,7 @@ class FilterPopupMenu extends Component {
   }
 
   componentDidMount() {
+    this.getAssignees();
     if (_.isEmpty(this.state.types)) this.refreshTypes();
   }
 
@@ -48,8 +53,30 @@ class FilterPopupMenu extends Component {
     }
   }
 
+  getAssignees = async () => {
+    try {
+      const res = await maintenanceActions.getAssignees(this.props.site);
+      let assignees = res.data.Users.map(t => {
+        return { label: t.displayName, value: t.id };
+      });
+      assignees = _.orderBy(assignees, 'label');
+
+      assignees.splice(0, 0, { label: 'All', value: '' });
+
+      const newState = { assignees };
+
+      if (!assignees.some(a => a.value === this.state.selectedAssignee)) {
+        newState.selectedAssignee = '';
+      }
+      // console.log('refreshassignees', assignees);
+      this.setState(newState);
+    } catch (error) {
+      console.error('getAssignees', error);
+    }
+  };
+
   refreshTypes = async () => {
-    const { data } = await generalActions.getJobTypes(Helper.getSite(this.props.site));
+    const { data } = await maintenanceActions.getJobTypes(Helper.getSite(this.props.site));
     const types = data.map(t => {
       return { label: t.typeName, value: t.typeName };
     });
@@ -66,11 +93,14 @@ class FilterPopupMenu extends Component {
 
   onDone = () => {
     const { onClose } = this.props;
-    const { selectedStatus, selectedType } = this.state;
+    const { selectedStatus, selectedType, selectedAssignee } = this.state;
     if (onClose)
       onClose({
         status: selectedStatus,
+        statusText: this.statusOptions.find(o => o.value === selectedStatus)?.label,
         type: selectedType,
+        assignee: selectedAssignee,
+        assigneeName: this.state.assignees.find(a => a.value === selectedAssignee)?.label,
       });
   };
 
@@ -123,10 +153,11 @@ class FilterPopupMenu extends Component {
         <View style={styles.container}>
           <View style={styles.menu}>
             {this.renderTitle()}
-            <View style={styles.optionContent}>
+            <ScrollView style={styles.optionContent}>
               {this.renderOptions('Status', this.statusOptions, 'selectedStatus')}
               {this.renderOptions('Type', this.state.types, 'selectedType')}
-            </View>
+              {this.renderOptions('Assigned To', this.state.assignees, 'selectedAssignee')}
+            </ScrollView>
             {this.renderCancel()}
           </View>
         </View>
@@ -153,6 +184,7 @@ const styles = {
     backgroundColor: '#fff',
     borderTopLeftRadius: 12,
     borderTopRightRadius: 12,
+    maxHeight: SCREEN_HEIGHT * 0.8,
   },
   cancelContainer: {
     paddingVertical: 16,

package/src/components/MaintenanceList.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { View, StyleSheet, FlatList, TouchableOpacity, Text } from 'react-native';
 import _ from 'lodash';
 import { connect } from 'react-redux';
-import { generalActions } from '../apis';
+import { maintenanceActions } from '../apis';
 import { jobsLoaded, jobAdded, jobsAdded } from '../actions';
 import MaintenanceListItem from '../components/MaintenanceListItem';
 import FilterPopupMenu from './FilterPopupMenu';
@@ -13,6 +13,7 @@ class MaintenanceList extends Component {
     super(props);
 
     this.initialStatus = props.hasPermission ? 'Unassigned|In Progress' : '';
+    this.initialStatusText = props.hasPermission ? 'Incomplete' : '';
 
     this.state = {
       types: [],
@@ -21,7 +22,10 @@ class MaintenanceList extends Component {
       searchText: '',
       showFilterPopup: false,
       selectedStatus: this.initialStatus,
+      selectedStatusText: this.initialStatusText,
       selectedType: '',
+      selectedAssignee: '',
+      selectedAssigneeName: '',
     };
   }
 
@@ -42,7 +46,7 @@ class MaintenanceList extends Component {
       try {
         const { selectedStatus, selectedType } = this.state;
         // console.log('filters', { selectedStatus, selectedType });
-        const res = await generalActions.getJobsRecursive(this.props.site, selectedStatus, selectedType);
+        const res = await maintenanceActions.getJobsRecursive(this.props.site, selectedStatus, selectedType);
         // console.log('refresh', res?.data);
         if (selectedStatus !== this.initialStatus || !_.isEmpty(selectedType)) {
           this.props.jobsAdded(res);
@@ -58,7 +62,7 @@ class MaintenanceList extends Component {
   };
 
   refreshTypes = async () => {
-    const { data } = await generalActions.getJobTypes(Helper.getSite(this.props.site));
+    const { data } = await maintenanceActions.getJobTypes(Helper.getSite(this.props.site));
     const types = data.map(t => {
       return { label: t.typeName, value: t.typeName };
     });
@@ -72,7 +76,7 @@ class MaintenanceList extends Component {
 
     this.onLoadingChanged(true, async () => {
       try {
-        const job = await generalActions.getJobByJobId(this.props.site, jobId);
+        const job = await maintenanceActions.getJobByJobId(this.props.site, jobId);
         // console.log('fetchJob', job?.data);
         this.props.jobAdded(job.data);
       } catch (error) {
@@ -91,7 +95,7 @@ class MaintenanceList extends Component {
   }
 
   resetDataSource = (source = '') => {
-    const { searchText, selectedStatus, selectedType } = this.state;
+    const { searchText, selectedStatus, selectedType, selectedAssignee } = this.state;
     const { jobs } = this.props;
 
     let filteredList = jobs;
@@ -108,6 +112,7 @@ class MaintenanceList extends Component {
     }
     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 (jobIdMatch) {
       const jobIndex = filteredList.indexOf(jobIdMatch);
       if (jobIndex > -1) {
@@ -142,10 +147,38 @@ class MaintenanceList extends Component {
   };
 
   onSelectFilter = selected => {
-    this.setState({ selectedStatus: selected.status, selectedType: selected.type }, () => {
-      this.resetDataSource();
-      this.onToggleFilter();
-    });
+    this.setState(
+      {
+        selectedStatus: selected.status,
+        selectedStatusText: selected.statusText,
+        selectedType: selected.type,
+        selectedAssignee: selected.assignee,
+        selectedAssigneeName: selected.assigneeName,
+      },
+      () => {
+        this.resetDataSource();
+        this.onToggleFilter();
+      },
+    );
+  };
+
+  getFilterButtonText = () => {
+    const { selectedStatus, selectedStatusText, selectedType, selectedAssignee, selectedAssigneeName } = this.state;
+    const filterTexts = [];
+    if (!_.isEmpty(selectedStatus)) {
+      filterTexts.push(selectedStatusText);
+    }
+
+    if (!_.isEmpty(selectedType)) {
+      filterTexts.push(selectedType);
+    }
+    if (!_.isEmpty(selectedAssignee)) {
+      filterTexts.push(selectedAssigneeName);
+    }
+    if (_.isEmpty(filterTexts)) {
+      return 'Filter';
+    }
+    return `Filtering by ${filterTexts.join(', ')}`;
   };
 
   renderEmptyList() {
@@ -156,7 +189,7 @@ class MaintenanceList extends Component {
     return (
       <TouchableOpacity onPress={this.onToggleFilter}>
         <View style={styles.filterButton}>
-          <Text style={[styles.filterButtonText, { color: this.props.colourBrandingMain }]}>Filter</Text>
+          <Text style={[styles.filterButtonText, { color: this.props.colourBrandingMain }]}>{this.getFilterButtonText()}</Text>
         </View>
       </TouchableOpacity>
     );
@@ -185,7 +218,7 @@ class MaintenanceList extends Component {
     const { ListHeaderComponent } = this.props;
     return (
       <View>
-        {ListHeaderComponent ? ListHeaderComponent : <View style={{ height: 32 }} />}
+        {ListHeaderComponent ? ListHeaderComponent : <View style={{ height: 8 }} />}
         {this.renderFilterButton()}
         {this.renderSearch()}
       </View>
@@ -210,11 +243,18 @@ class MaintenanceList extends Component {
   }
 
   renderFilterPopup() {
-    const { showFilterPopup, types, selectedStatus, selectedType } = this.state;
+    const { showFilterPopup, types, selectedStatus, selectedType, selectedAssignee } = this.state;
     if (!showFilterPopup) return null;
 
     return (
-      <FilterPopupMenu site={this.props.site} types={types} status={selectedStatus} type={selectedType} onClose={this.onSelectFilter} />
+      <FilterPopupMenu
+        site={this.props.site}
+        types={types}
+        status={selectedStatus}
+        assignee={selectedAssignee}
+        type={selectedType}
+        onClose={this.onSelectFilter}
+      />
     );
   }
 
@@ -265,9 +305,9 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
   },
   filterButton: {
-    position: 'absolute',
-    right: 20,
-    top: -32,
+    paddingBottom: 8,
+    paddingHorizontal: 16,
+    flexDirection: 'row-reverse',
   },
   filterButtonText: {
     fontFamily: 'sf-semibold',

package/src/components/MaintenanceListItem.js

@@ -63,7 +63,7 @@ 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 assigneeText = job.Assignee ? `Assigned to\n${job.Assignee.displayName}` : '';
     const { statusText, statusColor } = getJobStatusProps(job.status);
 
     return (
@@ -77,7 +77,9 @@ class MaintenanceListItem extends Component {
                 {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,14 +94,14 @@ class MaintenanceListItem extends Component {
               <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} />
+                  {/* <Icon name="wrench" type="font-awesome" iconStyle={styles.jobStatusIcon} /> */}
                   <Text style={styles.jobStatusText}>{statusText}</Text>
                 </View>
                 <View style={[styles.jobStatusLine, { borderColor: statusColor }]}>
                   <View style={styles.jobStatusLineMask} />
                 </View>
                 <View style={[styles.jobStatusCircle, { backgroundColor: statusColor }]} />
-                <Text style={styles.jobStatusDateText}>{activityTimeText}</Text>
+                <Text style={styles.jobStatusDateText}>{assigneeText}</Text>
               </View>
             </View>
           </View>
@@ -151,8 +153,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   jobTypeContainer: {
-    height: 20,
-    width: 80,
+    padding: 4,
+    minWidth: 80,
+    maxWidth: 140,
     borderRadius: 4,
     justifyContent: 'center',
   },
@@ -160,6 +163,7 @@ const styles = StyleSheet.create({
     fontFamily: 'sf-semibold',
     fontSize: 12,
     textAlign: 'center',
+    maxWidth: '100%',
   },
   jobSeenContainer: {
     flexDirection: 'row',
@@ -227,7 +231,7 @@ const styles = StyleSheet.create({
   jobStatusContainer: {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'space-between',
+    justifyContent: 'center',
     width: 105,
     height: 30,
     paddingHorizontal: 8,
@@ -265,7 +269,7 @@ const styles = StyleSheet.create({
   jobStatusDateText: {
     flex: 1,
     textAlign: 'right',
-    fontFamily: 'sf-bold',
+    fontFamily: 'sf-medium',
     fontSize: 14,
     color: Colours.TEXT_DARK,
   },

package/src/components/MaintenanceWidgetItem.js

@@ -43,7 +43,7 @@ class MaintenanceWidgetItem extends Component {
             </View>
             <View style={styles.jobBottomSection}>
               <View style={[styles.jobStatusContainer, { backgroundColor: statusColor }]}>
-                <Icon name="wrench" type="font-awesome" iconStyle={styles.jobStatusIcon} />
+                {/* <Icon name="wrench" type="font-awesome" iconStyle={styles.jobStatusIcon} /> */}
                 <Text style={styles.jobStatusText}>{statusText}</Text>
               </View>
             </View>

package/src/components/StatusSelectorPopup.js

@@ -11,6 +11,7 @@ class StatusSelectorPopup extends PureComponent {
       ? filter.map(status => {
           return {
             name: status,
+            label: getJobStatusLabel(status),
             color: getJobStatusColour(status),
           };
         })
@@ -32,7 +33,7 @@ class StatusSelectorPopup extends PureComponent {
             return (
               <TouchableOpacity key={status.name} onPress={() => onSelect(status.name)}>
                 <View style={[styles.jobStatusContainer, { backgroundColor: status.color }]}>
-                  <Text style={styles.jobStatusText}>{status.name}</Text>
+                  <Text style={styles.jobStatusText}>{status.label}</Text>
                 </View>
               </TouchableOpacity>
             );

package/src/components/WidgetSmall.js

@@ -2,7 +2,7 @@ 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 { maintenanceActions } from '../apis';
 import { jobsLoaded } from '../actions';
 import MaintenanceWidgetItem from './MaintenanceWidgetItem';
 import { Services } from '../feature.config';
@@ -39,7 +39,7 @@ class WidgetSmall extends Component {
   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) {

package/src/helper.js

@@ -1,16 +1,20 @@
+import { label } from 'aws-amplify';
 import { Colours } from './core.config';
 
 const jobStatusOptions = [
   {
     name: 'Unassigned',
+    label: 'Open',
     color: Colours.LINEGREY,
   },
   {
     name: 'In Progress',
+    label: 'In Progress',
     color: Colours.COLOUR_TEAL,
   },
   {
     name: 'Completed',
+    label: 'Completed',
     color: Colours.COLOUR_GREEN_LIGHT,
   },
 ];
@@ -20,11 +24,16 @@ const getJobStatusColour = status => {
   return option ? option.color : jobStatusOptions[0].color;
 };
 
+const getJobStatusLabel = status => {
+  const option = jobStatusOptions.find(item => item.name === status);
+  return option ? option.label : jobStatusOptions[0].label;
+};
+
 const getJobStatusProps = status => {
-  const statusText = status || jobStatusOptions[0].name;
+  const statusText = getJobStatusLabel(status) || jobStatusOptions[0].label;
   const statusColor = getJobStatusColour(statusText);
 
   return { statusText, statusColor };
 };
 
-export { jobStatusOptions, getJobStatusColour, getJobStatusProps };
+export { jobStatusOptions, getJobStatusColour, getJobStatusProps, getJobStatusLabel };