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

package/src/apis/maintenanceActions.js

@@ -0,0 +1,163 @@
+import { Helper, Session } from '../core.config';
+import { values } from '../values.config';
+
+export const maintenanceActions = {
+  getJob: (site, id) => {
+    return Session.authedFunction({
+      method: 'POST',
+      url: Helper.getUrl(values.serviceKey, 'getJob'),
+      data: { site, id },
+    });
+  },
+  getJobByJobId: (site, jobId) => {
+    return Session.authedFunction({
+      method: 'POST',
+      url: Helper.getUrl(values.serviceKey, 'getJob'),
+      data: { site, jobId },
+    });
+  },
+  getJobs: (site, status = '', type = '') => {
+    return Session.authedFunction({
+      method: 'POST',
+      url: Helper.getUrl(values.serviceKey, 'getJobs'),
+      data: { site, status, type },
+    });
+  },
+  getJobs2: (site, status, type, lastKey) => {
+    const query = { site };
+    if (status) {
+      query.status = status;
+    }
+    if (type) {
+      query.type = type;
+    }
+    if (lastKey) {
+      query.lastKey = JSON.stringify(lastKey);
+    }
+    return Session.authedFunction({
+      method: 'GET',
+      url: Helper.getUrl(values.serviceKey, 'get/requests', query),
+    });
+  },
+  getJobsRecursive: (site, status, type, lastKey, jobs = []) => {
+    return new Promise(resolve => {
+      maintenanceActions.getJobs2(site, status, type, lastKey).then(jobRes => {
+        const newJobs = [...jobs, ...jobRes.data.Items];
+        if (!jobRes.data.LastKey) {
+          return resolve(newJobs);
+        }
+        return resolve(maintenanceActions.getJobsRecursive(site, status, type, jobRes.data.LastKey, newJobs));
+      });
+    });
+  },
+  sendMaintenanceRequest: (
+    userID,
+    userName,
+    phone,
+    room,
+    title,
+    description,
+    date,
+    type,
+    images,
+    location,
+    isHome,
+    homeText,
+    customFields,
+  ) => {
+    const request = {
+      method: 'POST',
+      url: Helper.getUrl(values.serviceKey, 'sendMaintenance'),
+      data: {
+        userID,
+        userName,
+        phone,
+        room,
+        title,
+        description,
+        date,
+        type,
+        images,
+        location,
+        isHome,
+        homeText,
+        customFields,
+      },
+    };
+    return Session.authedFunction(request);
+  },
+  editJob: (job, site) => {
+    return Session.authedFunction({
+      method: 'POST',
+      url: Helper.getUrl(values.serviceKey, 'editJob'),
+      data: { job, site },
+    });
+  },
+  editJobStatus: (id, status) => {
+    return Session.authedFunction({
+      method: 'POST',
+      url: Helper.getUrl(values.serviceKey, 'editJobStatus'),
+      data: { id, status },
+    });
+  },
+  assignJob: (jobId, userId) => {
+    return Session.authedFunction({
+      method: 'POST',
+      url: Helper.getUrl(values.serviceKey, 'update/assign'),
+      data: {
+        id: jobId,
+        userId,
+      },
+    });
+  },
+  getAssignees: site => {
+    return Session.authedFunction({
+      method: 'GET',
+      url: Helper.getUrl(values.serviceKey, 'get/assignees', { site }),
+    });
+  },
+  addNote: (jobId, note, attachments) => {
+    return Session.authedFunction({
+      method: 'POST',
+      url: Helper.getUrl(values.serviceKey, 'requests/note'),
+      data: {
+        id: jobId,
+        note,
+        attachments,
+        action: 'AddNote',
+      },
+    });
+  },
+  editNote: (jobId, noteId, note, attachments) => {
+    return Session.authedFunction({
+      method: 'POST',
+      url: Helper.getUrl(values.serviceKey, 'requests/note'),
+      data: {
+        id: jobId,
+        note,
+        attachments,
+        noteId,
+        action: 'EditNote',
+      },
+    });
+  },
+  deleteNote: (jobId, noteId) => {
+    return Session.authedFunction({
+      method: 'POST',
+      url: Helper.getUrl(values.serviceKey, 'requests/note'),
+      data: {
+        id: jobId,
+        noteId,
+        action: 'DeleteNote',
+      },
+    });
+  },
+  getJobTypes: async site => {
+    const url = Helper.getUrl(values.serviceKey, 'getjobtypes');
+    return Session.authedFunction({
+      method: 'POST',
+      url,
+      data: { site },
+    });
+  },
+};

package/src/components/FilterPopupMenu.js

@@ -0,0 +1,256 @@
+import React, { Component } from 'react';
+import { View, Text, TouchableOpacity, Modal, ScrollView, Dimensions } from 'react-native';
+import { connect } from 'react-redux';
+import _ from 'lodash';
+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);
+
+    this.state = {
+      types: props.types || [],
+      selectedStatus: props.status || '',
+      selectedType: props.type || '',
+      selectedAssignee: props.assignee || '',
+      assignees: [],
+    };
+    this.statusOptions = [
+      {
+        label: 'All',
+        value: '',
+      },
+      {
+        label: 'Incomplete',
+        value: 'Unassigned|In Progress',
+      },
+      {
+        label: 'Open',
+        value: 'Unassigned',
+      },
+      {
+        label: 'In Progress',
+        value: 'In Progress',
+      },
+      {
+        label: 'Completed',
+        value: 'Completed',
+      },
+    ];
+  }
+
+  componentDidMount() {
+    this.getAssignees();
+    if (_.isEmpty(this.state.types)) this.refreshTypes();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.site !== this.props.site) {
+      this.refreshTypes();
+    }
+  }
+
+  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 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 });
+  };
+
+  onSelectOption = (key, value) => {
+    const newState = {};
+    newState[key] = value;
+    this.setState(newState);
+  };
+
+  onDone = () => {
+    const { onClose } = this.props;
+    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,
+      });
+  };
+
+  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()}
+            <ScrollView style={styles.optionContent}>
+              {this.renderOptions('Status', this.statusOptions, 'selectedStatus')}
+              {this.renderOptions('Type', this.state.types, 'selectedType')}
+              {this.renderOptions('Assigned To', this.state.assignees, 'selectedAssignee')}
+            </ScrollView>
+            {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,
+    maxHeight: SCREEN_HEIGHT * 0.8,
+  },
+  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);