@plusscommunities/pluss-maintenance-app 2.1.4 → 2.2.1-beta.0

package/src/actions/types.js

@@ -1,2 +1,3 @@
 export const JOBS_LOADED = 'JOBS_LOADED';
 export const JOB_ADDED = 'JOB_ADDED';
+export const JOBS_ADDED = 'JOBS_ADDED';

package/src/apis/generalActions.js

@@ -4,18 +4,25 @@
 import { Helper, Session } from '../core.config';
 
 export const generalActions = {
-  getJob: (site, jobId) => {
+  getJob: (site, id) => {
+    return Session.authedFunction({
+      method: 'POST',
+      url: Helper.getUrl('maintenance', 'getJob'),
+      data: { site, id },
+    });
+  },
+  getJobByJobId: (site, jobId) => {
     return Session.authedFunction({
       method: 'POST',
       url: Helper.getUrl('maintenance', 'getJob'),
       data: { site, jobId },
     });
   },
-  getJobs: site => {
+  getJobs: (site, status = '', type = '') => {
     return Session.authedFunction({
       method: 'POST',
       url: Helper.getUrl('maintenance', 'getJobs'),
-      data: { site },
+      data: { site, status, type },
     });
   },
   sendMaintenanceRequest: (userID, userName, phone, room, title, description, date, type, images, location, isHome, homeText) => {

package/src/components/FilterPopupMenu.js

@@ -0,0 +1,224 @@
+import React, { Component } from 'react';
+import { View, Text, TouchableOpacity, Modal } from 'react-native';
+import { connect } from 'react-redux';
+import _ from 'lodash';
+import { generalActions } from '../apis';
+import { Colours, Helper } from '../core.config';
+
+class FilterPopupMenu extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      types: props.types || [],
+      selectedStatus: props.status || '',
+      selectedType: props.type || '',
+    };
+    this.statusOptions = [
+      {
+        label: 'All',
+        value: '',
+      },
+      {
+        label: 'Incomplete',
+        value: 'Unassigned|In Progress',
+      },
+      {
+        label: 'Unassigned',
+        value: 'Unassigned',
+      },
+      {
+        label: 'In Progress',
+        value: 'In Progress',
+      },
+      {
+        label: 'Completed',
+        value: 'Completed',
+      },
+    ];
+  }
+
+  componentDidMount() {
+    if (_.isEmpty(this.state.types)) this.refreshTypes();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.site !== this.props.site) {
+      this.refreshTypes();
+    }
+  }
+
+  refreshTypes = async () => {
+    const { data } = await generalActions.getJobTypes(Helper.getSite(this.props.site));
+    const types = data.map(t => {
+      return { label: t.typeName, value: t.typeName };
+    });
+    types.splice(0, 0, { label: 'All', value: '' });
+    // console.log('refreshTypes', types);
+    this.setState({ types });
+  };
+
+  onSelectOption = (key, value) => {
+    const newState = {};
+    newState[key] = value;
+    this.setState(newState);
+  };
+
+  onDone = () => {
+    const { onClose } = this.props;
+    const { selectedStatus, selectedType } = this.state;
+    if (onClose)
+      onClose({
+        status: selectedStatus,
+        type: selectedType,
+      });
+  };
+
+  renderTitle() {
+    const { title } = this.props;
+    return (
+      <View style={styles.titleContainer}>
+        <Text style={styles.titleText}>{title || 'Filter By'}</Text>
+      </View>
+    );
+  }
+
+  renderCancel() {
+    const { colourBrandingMain, cancelText } = this.props;
+    return (
+      <TouchableOpacity onPress={this.onDone}>
+        <View style={styles.cancelContainer}>
+          <Text style={[styles.cancelText, { color: colourBrandingMain }]}>{cancelText || 'Done'}</Text>
+        </View>
+      </TouchableOpacity>
+    );
+  }
+
+  renderOptions(title, options, selectedKey) {
+    const { colourBrandingMain } = this.props;
+    return (
+      <View style={styles.optionsContainer}>
+        <Text style={styles.optionsTitle}>{title}</Text>
+        <View style={styles.options}>
+          {options.map(o => {
+            const selected = this.state[selectedKey];
+            const backgroundColor = o.value === selected ? colourBrandingMain : '#fff';
+            const color = o.value === selected ? '#fff' : colourBrandingMain;
+            return (
+              <TouchableOpacity key={o.label} onPress={() => this.onSelectOption(selectedKey, o.value)}>
+                <View style={[styles.optionContainer, { backgroundColor, borderColor: colourBrandingMain }]}>
+                  <Text style={[styles.optionText, { color }]}>{o.label}</Text>
+                </View>
+              </TouchableOpacity>
+            );
+          })}
+        </View>
+      </View>
+    );
+  }
+
+  render() {
+    return (
+      <Modal visible transparent animationType="slide" onRequestClose={this.onDone}>
+        <View style={styles.container}>
+          <View style={styles.menu}>
+            {this.renderTitle()}
+            <View style={styles.optionContent}>
+              {this.renderOptions('Status', this.statusOptions, 'selectedStatus')}
+              {this.renderOptions('Type', this.state.types, 'selectedType')}
+            </View>
+            {this.renderCancel()}
+          </View>
+        </View>
+      </Modal>
+    );
+  }
+}
+
+const styles = {
+  container: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    zIndex: 1000,
+  },
+  menu: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: '#fff',
+    borderTopLeftRadius: 12,
+    borderTopRightRadius: 12,
+  },
+  cancelContainer: {
+    paddingVertical: 16,
+    borderColor: Colours.LINEGREY,
+    borderTopWidth: 1,
+    paddingHorizontal: 16,
+  },
+  cancelText: {
+    fontFamily: 'sf-medium',
+    fontSize: 16,
+    textAlign: 'center',
+    color: Colours.TEXT_DARK,
+  },
+  titleContainer: {
+    padding: 16,
+    borderColor: Colours.LINEGREY,
+    borderBottomWidth: 1,
+  },
+  titleText: {
+    fontFamily: 'sf-semibold',
+    fontSize: 16,
+    textAlign: 'center',
+    color: Colours.TEXT_DARK,
+  },
+  optionContent: {
+    paddingVertical: 10,
+  },
+  optionsContainer: {
+    marginHorizontal: 14,
+  },
+  optionsTitle: {
+    fontFamily: 'sf-semibold',
+    marginBottom: 4,
+  },
+  options: {
+    flex: 1,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  optionContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minWidth: 50,
+    height: 30,
+    paddingHorizontal: 8,
+    borderRadius: 4,
+    borderWidth: 1,
+    marginRight: 8,
+    marginBottom: 8,
+  },
+  optionText: {
+    color: '#fff',
+    textAlign: 'center',
+    fontFamily: 'sf-semibold',
+    fontSize: 13,
+  },
+};
+
+const mapStateToProps = state => {
+  const { user } = state;
+
+  return {
+    site: user.site,
+    colourBrandingMain: Colours.getMainBrandingColourFromState(state),
+  };
+};
+
+export default connect(mapStateToProps, {})(FilterPopupMenu);

package/src/components/MaintenanceList.js

@@ -1,44 +1,52 @@
 import React, { Component } from 'react';
 import { View, StyleSheet, FlatList, TouchableOpacity, Text } from 'react-native';
-import { Icon } from 'react-native-elements';
 import _ from 'lodash';
 import { connect } from 'react-redux';
 import { generalActions } from '../apis';
-import { jobsLoaded } from '../actions';
+import { jobsLoaded, jobAdded, jobsAdded } from '../actions';
 import MaintenanceListItem from '../components/MaintenanceListItem';
-import StatusSelectorPopup from './StatusSelectorPopup';
-import { Components, Colours, Config } from '../core.config';
-
-const SHOW_ALL_STATUS = 'Show All';
+import FilterPopupMenu from './FilterPopupMenu';
+import { Components, Colours, Config, Helper } from '../core.config';
 
 class MaintenanceList extends Component {
   constructor(props) {
     super(props);
 
     this.state = {
+      types: [],
+      filteredList: props.jobs,
       loading: false,
-      selectedStatus: SHOW_ALL_STATUS,
-      showStatusPopup: false,
+      searchText: '',
+      showFilterPopup: false,
+      selectedStatus: props.hasPermission ? 'Unassigned|In Progress' : '',
+      selectedType: '',
     };
   }
 
   componentDidMount() {
     this.refresh();
+    this.refreshTypes();
+
+    this.resetDataSource();
   }
 
   componentDidUpdate(prevProps) {
-    if (!_.isEqual(prevProps.statuses, this.props.statuses) && !this.props.statuses.includes(this.state.selectedStatus)) {
-      // Reset selected status if not exists
-      this.setState({ selectedStatus: SHOW_ALL_STATUS });
-    }
     if (!prevProps.dataUpdated && this.props.dataUpdated) this.refresh();
+    if (!_.isEqual(prevProps.jobs, this.props.jobs)) this.resetDataSource();
   }
 
   refresh = () => {
     this.onLoadingChanged(true, async () => {
       try {
-        const res = await generalActions.getJobs(this.props.site);
-        this.props.jobsLoaded(res.data);
+        const { selectedStatus, selectedType } = this.state;
+        // console.log('filters', { selectedStatus, selectedType });
+        const res = await generalActions.getJobs(this.props.site, selectedStatus, selectedType);
+        // console.log('refresh', res?.data);
+        if (selectedStatus || selectedType) {
+          this.props.jobsAdded(res.data);
+        } else {
+          this.props.jobsLoaded(res.data);
+        }
       } catch (error) {
         console.log('refresh error', error);
       } finally {
@@ -47,6 +55,32 @@ class MaintenanceList extends Component {
     });
   };
 
+  refreshTypes = async () => {
+    const { data } = await generalActions.getJobTypes(Helper.getSite(this.props.site));
+    const types = data.map(t => {
+      return { label: t.typeName, value: t.typeName };
+    });
+    types.splice(0, 0, { label: 'All', value: '' });
+    // console.log('refreshTypes', types);
+    this.setState({ types });
+  };
+
+  fetchJob = jobId => {
+    if (this.state.loading) return;
+
+    this.onLoadingChanged(true, async () => {
+      try {
+        const job = await generalActions.getJobByJobId(this.props.site, jobId);
+        // console.log('fetchJob', job?.data);
+        this.props.jobAdded(job.data);
+      } catch (error) {
+        console.log('fetchJob error', error);
+      } finally {
+        this.onLoadingChanged(false);
+      }
+    });
+  };
+
   getEmptyStateText() {
     if (this.props.options && !_.isEmpty(this.props.options.EmptyText)) {
       return this.props.options.EmptyText;
@@ -54,6 +88,23 @@ class MaintenanceList extends Component {
     return this.props.userCategory === 'staff' ? Config.env.strings.EMPTY_REQUESTS_STAFF : Config.env.strings.EMPTY_REQUESTS_USER;
   }
 
+  resetDataSource = (source = '') => {
+    const { searchText, selectedStatus, selectedType } = this.state;
+    const { jobs } = this.props;
+
+    let filteredList = jobs;
+    if (searchText) {
+      filteredList = jobs.filter(j => j.jobId === searchText);
+      if (filteredList.length === 0) this.fetchJob(searchText);
+    } else if (source !== 'search') {
+      if (selectedStatus) filteredList = filteredList.filter(j => selectedStatus.includes(j.status));
+      if (selectedType) filteredList = filteredList.filter(j => selectedType.includes(j.type));
+      this.refresh();
+    }
+
+    this.setState({ filteredList });
+  };
+
   onLoadingChanged = (loading, callback) => {
     this.setState({ loading }, () => {
       if (this.props.onLoadingChanged) this.props.onLoadingChanged(this.state.loading);
@@ -61,36 +112,56 @@ class MaintenanceList extends Component {
     });
   };
 
-  onPressFilter = () => {
-    this.setState({ showStatusPopup: true });
+  onSearchText = value => {
+    this.setState({ searchText: value }, () => {
+      if (_.isEmpty(this.state.searchText)) this.resetDataSource('search');
+    });
   };
 
-  onCloseFilter = () => {
-    this.setState({ showStatusPopup: false });
+  onSearchSubmit = () => {
+    this.resetDataSource('search');
   };
 
-  onSelectStatus = selectedStatus => {
-    this.setState({ showStatusPopup: false, selectedStatus });
+  onToggleFilter = () => {
+    this.setState({ showFilterPopup: !this.state.showFilterPopup });
+  };
+
+  onSelectFilter = selected => {
+    this.setState({ selectedStatus: selected.status, selectedType: selected.type }, () => {
+      this.resetDataSource();
+      this.onToggleFilter();
+    });
   };
 
   renderEmptyList() {
     return this.state.loading ? null : <Components.EmptyStateMain title={this.getEmptyStateText()} style={{ marginHorizontal: 16 }} />;
   }
 
-  renderFilter() {
-    if (this.props.statuses?.length <= 1) return;
+  renderFilterButton() {
+    return (
+      <TouchableOpacity onPress={this.onToggleFilter}>
+        <View style={styles.filterButton}>
+          <Text style={[styles.filterButtonText, { color: this.props.colourBrandingMain }]}>Filter</Text>
+        </View>
+      </TouchableOpacity>
+    );
+  }
+
+  renderSearch() {
+    if (!this.props.hasPermission) return null;
 
     return (
-      <View style={styles.filterContainerOuter}>
-        <Text style={styles.filterTitle}>FILTER</Text>
-        <TouchableOpacity onPress={this.onPressFilter}>
-          <View style={styles.filterContainer}>
-            <Text style={[styles.filterText, { color: this.props.colourBrandingMain }]}>
-              {this.state.selectedStatus || SHOW_ALL_STATUS}
-            </Text>
-            <Icon name="angle-down" type="font-awesome" iconStyle={[styles.filterIcon, { color: this.props.colourBrandingMain }]} />
-          </View>
-        </TouchableOpacity>
+      <View style={styles.searchContainer}>
+        <Components.GenericInput
+          placeholder="Search by Job ID"
+          value={this.state.searchText}
+          onChangeText={this.onSearchText}
+          onSubmitEditing={this.onSearchSubmit}
+          squaredCorners
+          hasClear
+          keyboardType={'numeric'}
+          returnKeyType={'done'}
+        />
       </View>
     );
   }
@@ -99,15 +170,14 @@ class MaintenanceList extends Component {
     return (
       <View>
         {this.props.ListHeaderComponent}
-        {this.renderFilter()}
+        {this.renderFilterButton()}
+        {this.renderSearch()}
       </View>
     );
   }
 
   renderList() {
-    const { selectedStatus } = this.state;
-    const { jobs } = this.props;
-    const filteredList = selectedStatus === SHOW_ALL_STATUS ? jobs : jobs.filter(job => job.status === selectedStatus);
+    const { filteredList } = this.state;
 
     return (
       <FlatList
@@ -123,21 +193,12 @@ class MaintenanceList extends Component {
     );
   }
 
-  // renderAddButton() {
-  //   return this.props.enableAdd ? <Components.AddContentButton /> : null;
-  // }
-
-  renderStatusPopup() {
-    if (!this.state.showStatusPopup) return null;
+  renderFilterPopup() {
+    const { showFilterPopup, types, selectedStatus, selectedType } = this.state;
+    if (!showFilterPopup) return null;
 
     return (
-      <StatusSelectorPopup
-        filter={this.props.statuses}
-        includeAll
-        allText={SHOW_ALL_STATUS}
-        onClose={this.onCloseFilter}
-        onSelect={this.onSelectStatus}
-      />
+      <FilterPopupMenu site={this.props.site} types={types} status={selectedStatus} type={selectedType} onClose={this.onSelectFilter} />
     );
   }
 
@@ -145,8 +206,7 @@ class MaintenanceList extends Component {
     return (
       <View style={[styles.container, this.props.style]}>
         {this.renderList()}
-        {/* {this.renderAddButton()} */}
-        {/* {this.renderStatusPopup()} */}
+        {this.renderFilterPopup()}
       </View>
     );
   }
@@ -182,16 +242,31 @@ const styles = StyleSheet.create({
   filterIcon: {
     fontSize: 20,
   },
+  searchContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingBottom: 8,
+    paddingHorizontal: 16,
+  },
+  filterButton: {
+    position: 'absolute',
+    right: 20,
+    top: -32,
+  },
+  filterButtonText: {
+    fontFamily: 'sf-semibold',
+    fontSize: 16,
+  },
 });
 
 const mapStateToProps = state => {
   const { user, jobs, notifications } = state;
   const jobsOrdered = _.orderBy(jobs.jobs, ['createdUnix'], ['desc']);
-  const statuses = _.uniq(jobsOrdered.map(job => job.status));
+  const hasPermission = _.includes(user.permissions, 'maintenanceTracking');
 
   return {
+    hasPermission,
     jobs: jobsOrdered,
-    statuses,
     site: user.site,
     userCategory: user.category,
     colourBrandingMain: Colours.getMainBrandingColourFromState(state),
@@ -199,4 +274,4 @@ const mapStateToProps = state => {
   };
 };
 
-export default connect(mapStateToProps, { jobsLoaded }, null, { forwardRef: true })(MaintenanceList);
+export default connect(mapStateToProps, { jobsLoaded, jobAdded, jobsAdded }, null, { forwardRef: true })(MaintenanceList);

package/src/components/MaintenanceListItem.js

@@ -72,7 +72,9 @@ 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}
                 <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>
@@ -117,22 +119,34 @@ const styles = StyleSheet.create({
   },
   jobTopSection: {
     flexDirection: 'row',
-    alignItems: 'center',
+    alignItems: 'flex-end',
     paddingHorizontal: 10,
-    paddingVertical: 16,
+    paddingVertical: 10,
     borderBottomWidth: 1,
     borderBottomColor: Colours.LINEGREY,
   },
   jobTopLeft: {
     flex: 1,
   },
+  jobIdText: {
+    fontFamily: 'sf-medium',
+    fontSize: 12,
+    marginBottom: 4,
+  },
   jobTitleText: {
     fontFamily: 'sf-semibold',
     fontSize: 18,
     color: Colours.TEXT_DARK,
-    marginBottom: 8,
+    marginBottom: 4,
+  },
+  jobLocationText: {
+    fontFamily: 'sf-medium',
+    fontSize: 12,
+    color: Colours.TEXT_LIGHT,
+    marginBottom: 4,
   },
   jobTypeSeenContainer: {
+    marginTop: 4,
     flexDirection: 'row',
     alignItems: 'center',
   },

package/src/reducers/JobsReducer.js

@@ -1,6 +1,7 @@
 /* eslint-disable no-param-reassign */
+import _ from 'lodash';
 import { REHYDRATE } from 'redux-persist';
-import { JOBS_LOADED, JOB_ADDED } from '../actions/types';
+import { JOBS_LOADED, JOB_ADDED, JOBS_ADDED } from '../actions/types';
 import { ActionTypes } from '../core.config';
 
 const REDUCER_KEY = 'jobs';
@@ -19,6 +20,12 @@ export default (state = INITIAL_STATE, action) => {
       return INITIAL_STATE;
     case JOBS_LOADED:
       return { ...state, jobs: action.payload.map(job => ({ title: job.title || job.description, ...job })) };
+    case JOBS_ADDED:
+      updateJobs = action.payload.map(job => ({ title: job.title || job.description, ...job }));
+      updateJobs = _.unionWith(updateJobs, state.jobs, (j1, j2) => {
+        return j1.id === j2.id;
+      });
+      return { ...state, jobs: updateJobs };
     case JOB_ADDED:
       updateJobs = [...state.jobs];
       index = updateJobs.findIndex(item => item.id === action.payload.id);