@plusscommunities/pluss-maintenance-app-forms 6.0.8-beta.0

package/src/components/MaintenanceList.js

@@ -0,0 +1,335 @@
+import React, { Component } from 'react';
+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 MaintenanceListItem from '../components/MaintenanceListItem';
+import FilterPopupMenu from './FilterPopupMenu';
+import { Components, Colours, Config, 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.refresh();
+    this.refreshTypes();
+
+    this.resetDataSource();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (!prevProps.dataUpdated && this.props.dataUpdated) this.refresh();
+    if (!_.isEqual(prevProps.jobs, this.props.jobs)) 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)) {
+          this.props.jobsAdded(res);
+        } else {
+          this.props.jobsLoaded(res);
+        }
+      } catch (error) {
+        console.log('refresh error', error);
+      } finally {
+        this.onLoadingChanged(false);
+      }
+    });
+  };
+
+  refreshTypes = async () => {
+    const { data } = await maintenanceActions.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 maintenanceActions.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;
+    }
+    return this.props.userCategory === 'staff' ? values.emptyRequestsStaff : values.emptyRequestsUser;
+  }
+
+  resetDataSource = (source = '') => {
+    const { searchText, selectedStatus, selectedType, selectedAssignee } = this.state;
+    const { jobs } = this.props;
+
+    let filteredList = jobs;
+    let jobIdMatch = null;
+    if (searchText) {
+      jobIdMatch = _.find(jobs, j => j.jobId === searchText);
+      filteredList = jobs.filter(j => {
+        if (j.room && j.room.toLowerCase().indexOf(searchText.toLowerCase()) > -1) {
+          return true;
+        }
+        return false;
+      });
+      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 (jobIdMatch) {
+      const jobIndex = filteredList.indexOf(jobIdMatch);
+      if (jobIndex > -1) {
+        filteredList.splice(jobIndex, 1);
+      }
+      filteredList.unshift(jobIdMatch);
+    }
+    if (source !== 'search') this.refresh();
+
+    this.setState({ filteredList });
+  };
+
+  onLoadingChanged = (loading, callback) => {
+    this.setState({ loading }, () => {
+      if (this.props.onLoadingChanged) this.props.onLoadingChanged(this.state.loading);
+      if (callback) callback();
+    });
+  };
+
+  onSearchText = value => {
+    this.setState({ searchText: value }, () => {
+      if (_.isEmpty(this.state.searchText)) this.resetDataSource('search');
+    });
+  };
+
+  onSearchSubmit = () => {
+    this.resetDataSource('search');
+  };
+
+  onToggleFilter = () => {
+    this.setState({ showFilterPopup: !this.state.showFilterPopup });
+  };
+
+  onSelectFilter = selected => {
+    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() {
+    return this.state.loading ? null : <Components.EmptyStateMain title={this.getEmptyStateText()} style={{ marginHorizontal: 16 }} />;
+  }
+
+  renderFilterButton() {
+    return (
+      <TouchableOpacity onPress={this.onToggleFilter}>
+        <View style={styles.filterButton}>
+          <Text style={[styles.filterButtonText, { color: this.props.colourBrandingMain }]}>{this.getFilterButtonText()}</Text>
+        </View>
+      </TouchableOpacity>
+    );
+  }
+
+  renderSearch() {
+    if (!this.props.hasPermission) return null;
+
+    return (
+      <View style={styles.searchContainer}>
+        <Components.GenericInput
+          placeholder={`Search by ${values.textEntityName} ID or Address`}
+          value={this.state.searchText}
+          onChangeText={this.onSearchText}
+          onSubmitEditing={this.onSearchSubmit}
+          squaredCorners
+          hasClear
+          // keyboardType={'numeric'}
+          returnKeyType={'done'}
+        />
+      </View>
+    );
+  }
+
+  renderListHeader() {
+    const { ListHeaderComponent } = this.props;
+    return (
+      <View>
+        {ListHeaderComponent ? ListHeaderComponent : <View style={{ height: 8 }} />}
+        {this.renderFilterButton()}
+        {this.renderSearch()}
+      </View>
+    );
+  }
+
+  renderList() {
+    const { filteredList } = this.state;
+
+    return (
+      <FlatList
+        keyboardShouldPersistTaps="always"
+        style={{ flex: 1 }}
+        contentContainerStyle={{ paddingBottom: 16 }}
+        data={filteredList}
+        keyExtractor={item => item.id}
+        renderItem={({ item }) => <MaintenanceListItem style={this.props.itemStyle} job={item} />}
+        ListEmptyComponent={this.renderEmptyList()}
+        ListHeaderComponent={this.renderListHeader()}
+      />
+    );
+  }
+
+  renderFilterPopup() {
+    const { showFilterPopup, types, selectedStatus, selectedType, selectedAssignee } = this.state;
+    if (!showFilterPopup) return null;
+
+    return (
+      <FilterPopupMenu
+        site={this.props.site}
+        types={types}
+        status={selectedStatus}
+        assignee={selectedAssignee}
+        type={selectedType}
+        onClose={this.onSelectFilter}
+      />
+    );
+  }
+
+  render() {
+    return (
+      <View style={[styles.container, this.props.style]}>
+        {this.renderList()}
+        {this.renderFilterPopup()}
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  filterContainerOuter: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+  },
+  filterTitle: {
+    fontFamily: 'sf-bold',
+    fontSize: 11,
+    letterSpacing: 0.8,
+    color: '#4d4d4d',
+  },
+  filterContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  filterText: {
+    fontFamily: 'sf-semibold',
+    fontSize: 16,
+    marginRight: 6,
+  },
+  filterIcon: {
+    fontSize: 20,
+  },
+  searchContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingBottom: 8,
+    paddingHorizontal: 16,
+  },
+  filterButton: {
+    paddingBottom: 8,
+    paddingHorizontal: 16,
+    flexDirection: 'row-reverse',
+  },
+  filterButtonText: {
+    fontFamily: 'sf-semibold',
+    fontSize: 16,
+  },
+});
+
+const mapStateToProps = state => {
+  const { user, notifications } = state;
+  const jobs = state[values.reducerKey];
+  const jobsOrdered = _.orderBy(jobs.jobs, ['createdUnix'], ['desc']);
+  const hasPermission = _.includes(user.permissions, 'maintenanceTracking');
+
+  return {
+    hasPermission,
+    jobs: jobsOrdered,
+    site: user.site,
+    userCategory: user.category,
+    colourBrandingMain: Colours.getMainBrandingColourFromState(state),
+    dataUpdated: notifications.dataUpdated[values.updateKey],
+  };
+};
+
+export default connect(mapStateToProps, { jobsLoaded, jobAdded, jobsAdded }, null, { forwardRef: true })(MaintenanceList);

package/src/components/MaintenanceListItem.js

@@ -0,0 +1,289 @@
+import React, { Component } from 'react';
+import { Image, Text, TouchableOpacity, View, StyleSheet } from 'react-native';
+import _ from 'lodash';
+import { Icon } from 'react-native-elements';
+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 { Services } from '../feature.config';
+import { Helper, Colours } from '../core.config';
+import { values } from '../values.config';
+
+class MaintenanceListItem extends Component {
+  onPressJob = () => {
+    Services.navigation.navigate(values.screenRequestDetail, { job: this.props.job });
+  };
+
+  renderCommentCount() {
+    const { job } = this.props;
+    if (!job.commentCount) {
+      return null;
+    }
+    return (
+      <View style={styles.commentCountContainer}>
+        <Text style={styles.commentCountText}>{job.commentCount > 99 ? '99' : job.commentCount}</Text>
+      </View>
+    );
+  }
+
+  renderDescription() {
+    const { job } = this.props;
+    if (_.isEmpty(job.description)) {
+      return null;
+    }
+    return <Text style={styles.jobDescriptionText}>{job.description}</Text>;
+  }
+
+  renderSeen() {
+    const { job } = this.props;
+    const showSeen = !job.status || job.status === jobStatusOptions[0].name;
+    if (!showSeen || !job.seen) {
+      return null;
+    }
+    return (
+      <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>
+      </View>
+    );
+  }
+
+  render() {
+    const { job } = this.props;
+    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);
+
+    return (
+      <TouchableOpacity onPress={this.onPressJob}>
+        <View style={[styles.jobContainer, this.props.style]}>
+          <View style={styles.jobInnerContainer}>
+            <View style={styles.jobTopSection}>
+              <View style={styles.jobTopLeft}>
+                {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 }]} numberOfLines={2}>
+                      {job.type}
+                    </Text>
+                  </View>
+                  {this.renderSeen()}
+                </View>
+              </View>
+              <View style={styles.jobTopRight}>
+                <Image style={styles.jobCommentImage} source={require('../images/speechbubble.png')} />
+                {this.renderCommentCount()}
+              </View>
+            </View>
+            <View style={styles.jobBottomSection}>
+              {/* {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>
+                <View style={[styles.jobStatusLine, { borderColor: statusColor }]}>
+                  <View style={styles.jobStatusLineMask} />
+                </View>
+                <View style={[styles.jobStatusCircle, { backgroundColor: statusColor }]} />
+                <Text style={styles.jobStatusDateText}>{assigneeText}</Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </TouchableOpacity>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  jobContainer: {
+    marginVertical: 8,
+    paddingHorizontal: 16,
+  },
+  jobInnerContainer: {
+    ...Helper.getShadowStyle(),
+  },
+  jobTopSection: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    paddingHorizontal: 10,
+    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: 4,
+  },
+  jobLocationText: {
+    fontFamily: 'sf-medium',
+    fontSize: 12,
+    color: Colours.TEXT_LIGHT,
+    marginBottom: 4,
+  },
+  jobTypeSeenContainer: {
+    marginTop: 4,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  jobTypeContainer: {
+    padding: 4,
+    minWidth: 80,
+    maxWidth: 140,
+    borderRadius: 4,
+    justifyContent: 'center',
+  },
+  jobTypeText: {
+    fontFamily: 'sf-semibold',
+    fontSize: 12,
+    textAlign: 'center',
+    maxWidth: '100%',
+  },
+  jobSeenContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginLeft: 10,
+  },
+  jobSeenIcon: {
+    fontSize: 12,
+  },
+  jobSeenText: {
+    fontFamily: 'sf-semibold',
+    fontSize: 12,
+    marginLeft: 4,
+  },
+  jobTopRight: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+    paddingTop: 10,
+  },
+  jobCommentImage: {
+    width: 34,
+    height: 34,
+    resizeMode: 'contain',
+  },
+  commentCountContainer: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    borderRadius: 10,
+    borderWidth: 2,
+    borderColor: '#fff',
+    width: 20,
+    height: 20,
+    backgroundColor: Colours.COLOUR_GREEN,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  commentCountText: {
+    textAlign: 'center',
+    fontFamily: 'sf-bold',
+    fontSize: 10,
+    color: '#fff',
+  },
+  jobBottomSection: {
+    paddingHorizontal: 10,
+    paddingVertical: 16,
+  },
+  jobDescriptionText: {
+    fontFamily: 'sf-medium',
+    fontSize: 14,
+    color: Colours.TEXT_DARK,
+    marginBottom: 8,
+  },
+  jobCreatedText: {
+    fontFamily: 'sf-medium',
+    fontSize: 12,
+    color: Colours.TEXT_LIGHT,
+    marginBottom: 10,
+  },
+  jobActivityContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  jobStatusContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 105,
+    height: 30,
+    paddingHorizontal: 8,
+    borderRadius: 4,
+  },
+  jobStatusIcon: {
+    color: '#fff',
+    fontSize: 14,
+  },
+  jobStatusText: {
+    color: '#fff',
+    textAlign: 'center',
+    fontFamily: 'sf-semibold',
+    fontSize: 13,
+  },
+  jobStatusLine: {
+    borderWidth: 1,
+    borderStyle: 'dashed',
+    width: 30,
+  },
+  jobStatusLineMask: {
+    position: 'absolute',
+    left: -1,
+    top: -1,
+    width: '100%',
+    height: 1,
+    backgroundColor: '#fff',
+    zIndex: 1,
+  },
+  jobStatusCircle: {
+    width: 18,
+    height: 18,
+    borderRadius: 9,
+  },
+  jobStatusDateText: {
+    flex: 1,
+    textAlign: 'right',
+    fontFamily: 'sf-medium',
+    fontSize: 14,
+    color: Colours.TEXT_DARK,
+  },
+});
+
+const mapStateToProps = state => {
+  return {
+    colourBrandingMain: Colours.getMainBrandingColourFromState(state),
+  };
+};
+
+export default connect(mapStateToProps, {})(MaintenanceListItem);