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

package/src/components/MaintenanceWidgetItem.js

@@ -0,0 +1,132 @@
+import React, { Component } from 'react';
+import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
+import { connect } from 'react-redux';
+import { Icon } from 'react-native-elements';
+import moment from 'moment';
+import _ from 'lodash';
+import { getJobStatusProps, jobStatusOptions } from '../helper';
+import { Services } from '../feature.config';
+import { Colours, Helper } from '../core.config';
+import { values } from '../values.config';
+
+class MaintenanceWidgetItem extends Component {
+  onPressJob = () => {
+    Services.navigation.navigate(values.screenRequestDetail, { job: this.props.job });
+  };
+
+  render() {
+    const { job } = 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 seenText = (() => {
+      if (!job.status || job.status === jobStatusOptions[0].name) {
+        return job.seen ? 'Seen' : 'Unseen';
+      }
+      return '';
+    })();
+
+    return (
+      <TouchableOpacity key={job.id} onPress={this.onPressJob}>
+        <View style={styles.jobContainer}>
+          <View style={styles.jobInnerContainer}>
+            <View style={styles.jobTopSection}>
+              <Text numberOfLines={2} style={styles.jobTitleText}>
+                {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>
+            </View>
+            <View style={styles.jobBottomSection}>
+              <View style={[styles.jobStatusContainer, { backgroundColor: statusColor }]}>
+                {/* <Icon name="wrench" type="font-awesome" iconStyle={styles.jobStatusIcon} /> */}
+                <Text style={styles.jobStatusText}>{statusText}</Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </TouchableOpacity>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  jobContainer: {
+    padding: 10,
+  },
+  jobInnerContainer: {
+    width: 140,
+    height: 160,
+    ...Helper.getShadowStyle(),
+  },
+  jobTopSection: {
+    flex: 1,
+    padding: 10,
+    paddingTop: 20,
+  },
+  jobTitleText: {
+    flex: 1,
+    fontFamily: 'sf-semibold',
+    fontSize: 16,
+    color: Colours.TEXT_DARK,
+  },
+  jobCreatedTimeText: {
+    fontFamily: 'sf-medium',
+    fontSize: 11,
+    color: Colours.TEXT_LIGHT,
+    paddingTop: 3,
+  },
+  jobSeenContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingTop: 5,
+  },
+  jobSeenIcon: {
+    fontSize: 12,
+    marginRight: 4,
+  },
+  jobSeenText: {
+    fontFamily: 'sf-semibold',
+    fontSize: 12,
+    color: Colours.TEXT_SUPER_LIGHT,
+  },
+  jobBottomSection: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 10,
+    borderTopWidth: 1,
+    borderTopColor: Colours.LINEGREY,
+  },
+  jobStatusContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: 105,
+    height: 30,
+    paddingHorizontal: 8,
+    borderRadius: 4,
+  },
+  jobStatusIcon: {
+    color: '#fff',
+    fontSize: 14,
+  },
+  jobStatusText: {
+    color: '#fff',
+    textAlign: 'center',
+    fontFamily: 'sf-semibold',
+    fontSize: 13,
+  },
+});
+
+const mapStateToProps = state => {
+  return {
+    colourBrandingMain: Colours.getMainBrandingColourFromState(state),
+  };
+};
+
+export default connect(mapStateToProps, {})(MaintenanceWidgetItem);

package/src/components/StatusSelectorPopup.js

@@ -0,0 +1,87 @@
+import React, { PureComponent } from 'react';
+import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
+import { connect } from 'react-redux';
+import { jobStatusOptions, getJobStatusColour } from '../helper';
+import { Components, Colours } from '../core.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;
+    if (includeAll)
+      statuses = [
+        {
+          name: allText || 'Show All',
+          color: this.props.colourBrandingMain,
+        },
+        ...statuses,
+      ];
+
+    return (
+      <Components.MiddlePopup style={[styles.statusPopup, { height: statuses.length * 50 + 40 }]} onClose={onClose}>
+        <Text style={styles.statusPopupTitle}>{title || 'Select Status'}</Text>
+        <View style={styles.statusPopupOptionsContainer}>
+          {statuses.map(status => {
+            return (
+              <TouchableOpacity key={status.name} onPress={() => onSelect(status.name)}>
+                <View style={[styles.jobStatusContainer, { backgroundColor: status.color }]}>
+                  <Text style={styles.jobStatusText}>{status.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, {})(StatusSelectorPopup);

package/src/components/WidgetLarge.js

@@ -0,0 +1,10 @@
+import React, { PureComponent } from 'react';
+import MaintenanceList from './MaintenanceList';
+
+class WidgetLarge extends PureComponent {
+  render() {
+    return <MaintenanceList {...this.props} />;
+  }
+}
+
+export default WidgetLarge;

package/src/components/WidgetSmall.js

@@ -0,0 +1,152 @@
+import React, { Component } from 'react';
+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 MaintenanceWidgetItem from './MaintenanceWidgetItem';
+import { Services } from '../feature.config';
+import { Colours, Components, Config } from '../core.config';
+import { values } from '../values.config';
+
+const MAX_ITEMS = 10;
+
+class WidgetSmall extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { loading: false };
+  }
+
+  componentDidMount() {
+    this.refresh();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (!prevProps.dataUpdated && this.props.dataUpdated) this.refresh();
+  }
+
+  getTitle = () => {
+    const { options } = this.props;
+    if (options && !_.isEmpty(options.Title)) return options.Title;
+    return this.props.strings[`${values.featureKey}_textFeatureTitle`] || values.textFeatureTitle;
+  };
+
+  getEmptyStateText = () => {
+    const { options, userCategory } = this.props;
+    if (options && !_.isEmpty(options.EmptyText)) return options.EmptyText;
+    return userCategory === 'staff' ? values.emptyRequestsStaff : values.emptyRequestsUser;
+  };
+
+  refresh = () => {
+    this.onLoadingChanged(true, async () => {
+      try {
+        const res = await maintenanceActions.getJobsRecursive(this.props.site);
+        // console.log('WidgetSmall - refresh', res.data);
+        this.props.jobsLoaded(res);
+      } catch (error) {
+        console.log('refresh error', error);
+      } finally {
+        this.onLoadingChanged(false);
+      }
+    });
+  };
+
+  onLoadingChanged = (loading, callback) => {
+    this.setState({ loading }, () => {
+      if (this.props.onLoadingChanged) this.props.onLoadingChanged(this.state.loading);
+      if (callback) callback();
+    });
+  };
+
+  onPressAll = () => {
+    Services.navigation.navigate(values.screenMaintenance, { options: this.props.options });
+  };
+
+  renderContent() {
+    const { jobs } = this.props;
+    if (_.isEmpty(jobs)) {
+      if (this.state.loading) {
+        return (
+          <View style={styles.loadingPadding}>
+            <Components.LoadingStateWidget height={180} />
+          </View>
+        );
+      }
+      return (
+        <View style={styles.loadingPadding}>
+          <Components.EmptyStateWidget title={this.getEmptyStateText()} height={180} />
+        </View>
+      );
+    }
+    return (
+      <ScrollView horizontal contentContainerStyle={{ paddingLeft: 6, paddingRight: 8 }} showsHorizontalScrollIndicator={false}>
+        {jobs.slice(0, MAX_ITEMS).map(job => {
+          return <MaintenanceWidgetItem key={job.id} job={job} />;
+        })}
+      </ScrollView>
+    );
+  }
+
+  render() {
+    const { colourBrandingMain } = this.props;
+
+    return (
+      <View style={styles.sectionContainer}>
+        <View style={styles.sectionPadding}>
+          <View style={styles.sectionHeading}>
+            <Text style={styles.sectionTitle}>{this.getTitle()}</Text>
+            <Components.InlineButton
+              onPress={this.onPressAll}
+              color={colourBrandingMain}
+              touchableStyle={{ paddingTop: 6 }}
+              textStyle={{ color: '#fff' }}
+            >
+              View All
+            </Components.InlineButton>
+          </View>
+        </View>
+        {this.renderContent()}
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  sectionContainer: {
+    backgroundColor: '#fff',
+    paddingTop: 16,
+  },
+  sectionPadding: {
+    paddingHorizontal: 16,
+    paddingBottom: 6,
+  },
+  loadingPadding: {
+    paddingHorizontal: 16,
+  },
+  sectionHeading: {
+    marginBottom: 4,
+    flexDirection: 'row',
+    alignContent: 'flex-start',
+    justifyContent: 'space-between',
+  },
+  sectionTitle: {
+    fontFamily: 'sf-bold',
+    fontSize: 24,
+    color: Colours.TEXT_DARKEST,
+  },
+});
+
+const mapStateToProps = state => {
+  const { user, notifications } = state;
+  const jobs = state[values.reducerKey];
+  return {
+    colourBrandingMain: Colours.getMainBrandingColourFromState(state),
+    jobs: _.orderBy(jobs.jobs, ['createdUnix'], ['desc']),
+    site: user.site,
+    userCategory: user.category,
+    dataUpdated: notifications.dataUpdated[values.updateKey],
+    strings: state.strings?.config || {},
+  };
+};
+
+export default connect(mapStateToProps, { jobsLoaded }, null, { forwardRef: true })(WidgetSmall);

package/src/core.config.js

@@ -0,0 +1,5 @@
+// import * as PlussCore from '../../pluss-core/src';
+import * as PlussCore from '@plusscommunities/pluss-core-app';
+
+const { Apis, Fonts, Actions, ActionTypes, Config, Components, Styles, Session, Helper, Constants, Colours } = PlussCore;
+export { Apis, Fonts, Actions, ActionTypes, Config, Components, Styles, Session, Helper, Constants, Colours };

package/src/feature.config.js

@@ -0,0 +1,73 @@
+// import * as PlussCore from '../../pluss-core/src';
+import * as PlussCore from '@plusscommunities/pluss-core-app';
+import { values } from './values.config';
+
+export const Services = {
+  navigation: null,
+};
+
+export const BaseComponents = {
+  NotificationBell: null,
+};
+
+const FeatureConfig = {
+  key: values.featureKey,
+  aliases: values.aliases,
+  title: values.textFeatureTitle,
+  gridMenu: {
+    icon: values.iconGridMenu,
+    viewBox: values.gridViewBox,
+    navigate: values.screenMaintenance,
+  },
+  addMenu: {
+    order: values.orderAddMenu,
+    icon: values.iconAddMenu,
+    title: values.textAddMenuTitle,
+    navigate: values.screenServiceRequest,
+    visibleExps: { type: 'feature', value: values.featureKey },
+  },
+  moreMenu: values.hasMoreOption
+    ? {
+        order: values.orderMoreMenu,
+        title: values.textMoreMenuTitle,
+        navigate: values.screenMaintenance,
+        visibleExps: {
+          type: 'and',
+          exps: [
+            { type: 'notHidden', value: 'maintenanceRequest' },
+            { type: 'notUserType', value: 'KIOSK' },
+          ],
+        },
+      }
+    : undefined,
+  kioskAction: {
+    order: values.orderKioskAction,
+    icon: values.iconKioskAction,
+    title: values.textKioskActionTitle,
+    navigate: values.screenServiceRequest,
+  },
+  hideTabBar: [],
+  env: {
+    baseStage: '',
+    baseAPIUrl: '',
+    hasGradientHeader: false,
+    defaultProfileImage: '',
+    tinyChatDefault: '',
+    baseUploadsUrl: '',
+    allowMediaDownload: false,
+    allowMediaSharing: false,
+    awsUploadsBucket: '',
+    awsStorageBucket: '',
+    preferredSite: '',
+    strings: {},
+    newEventDefaults: '',
+    defaultAllowComments: true,
+  },
+  init: (environment, navigation, notificationBell) => {
+    FeatureConfig.env = environment;
+    Services.navigation = navigation;
+    BaseComponents.NotificationBell = notificationBell;
+    PlussCore.Config.init(environment, navigation);
+  },
+};
+export default FeatureConfig;

package/src/helper.js

@@ -0,0 +1,39 @@
+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,
+  },
+];
+
+const getJobStatusColour = status => {
+  const option = jobStatusOptions.find(item => item.name === 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 = getJobStatusLabel(status) || jobStatusOptions[0].label;
+  const statusColor = getJobStatusColour(statusText);
+
+  return { statusText, statusColor };
+};
+
+export { jobStatusOptions, getJobStatusColour, getJobStatusProps, getJobStatusLabel };

package/src/index.js

@@ -0,0 +1,25 @@
+import MaintenancePage from './screens/MaintenancePage';
+import RequestDetail from './screens/RequestDetail';
+import ServiceRequest from './screens/ServiceRequest';
+import JobTypePicker from './screens/JobTypePicker';
+import RequestNotes from './screens/RequestNotes';
+import JobsReducer from './reducers/JobsReducer';
+import { values } from './values.config';
+
+export const Reducers = (() => {
+  const reducers = {};
+  reducers[values.reducerKey] = JobsReducer;
+  return reducers;
+})();
+export const Screens = (() => {
+  const screens = {};
+  screens[values.screenMaintenance] = MaintenancePage;
+  screens[values.screenRequestDetail] = RequestDetail;
+  screens[values.screenServiceRequest] = ServiceRequest;
+  screens[values.screenJobTypePicker] = JobTypePicker;
+  screens[values.screenRequestNotes] = RequestNotes;
+  return screens;
+})();
+export { default as Config } from './feature.config';
+export { default as WidgetSmall } from './components/WidgetSmall';
+export { default as WidgetLarge } from './components/WidgetLarge';

package/src/reducers/JobsReducer.js

@@ -0,0 +1,51 @@
+/* eslint-disable no-param-reassign */
+import _ from 'lodash';
+import { REHYDRATE } from 'redux-persist';
+import { JOBS_LOADED, JOB_ADDED, JOBS_ADDED } from '../actions/types';
+import { ActionTypes } from '../core.config';
+import { values } from '../values.config';
+
+const REDUCER_KEY = values.reducerKey;
+
+const INITIAL_STATE = {
+  jobs: [],
+};
+
+export default (state = INITIAL_STATE, action) => {
+  let updateJobs = [];
+  let index = 0;
+
+  switch (action.type) {
+    case ActionTypes.LOGOUT:
+    case ActionTypes.CHANGE_ROLE:
+      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);
+      if (index > -1) {
+        updateJobs[index] = action.payload;
+      } else {
+        updateJobs.push(action.payload);
+      }
+      return { ...state, jobs: updateJobs };
+    case REHYDRATE:
+      if (!action.payload) return state;
+      if (action.payload[REDUCER_KEY]) {
+        if (action.payload[REDUCER_KEY].jobs == null) {
+          action.payload[REDUCER_KEY].jobs = [];
+        }
+        return action.payload[REDUCER_KEY];
+      }
+      return state;
+    default:
+      return state;
+  }
+};

package/src/screens/JobTypePicker.js

@@ -0,0 +1,107 @@
+import React, { Component } from 'react';
+import _ from 'lodash';
+import { TouchableOpacity, View, ScrollView, Text } from 'react-native';
+import { connect } from 'react-redux';
+import { Icon } from 'react-native-elements';
+import { Services } from '../feature.config';
+import { Components, Colours } from '../core.config';
+
+class JobTypePicker extends Component {
+  state = {
+    currentType: null,
+  };
+
+  UNSAFE_componentWillMount() {
+    this.setState({ currentType: this.props.currentType });
+  }
+
+  onPressBack() {
+    Services.navigation.goBack();
+  }
+
+  onTypePress(type) {
+    this.props.onSelectType(type);
+    this.setState({ currentType: type });
+    setTimeout(() => {
+      this.onPressBack();
+    }, 200);
+  }
+
+  renderMain() {
+    if (_.isEmpty(this.props.types)) {
+      return (
+        <View style={{ marginTop: 16 }}>
+          <Components.Spinner />
+        </View>
+      );
+    }
+
+    return <Components.FormCard style={{ marginTop: 16 }}>{this.renderOptions()}</Components.FormCard>;
+  }
+
+  renderOptions() {
+    return this.props.types.map((rep, index) => {
+      return (
+        <TouchableOpacity key={index} onPress={this.onTypePress.bind(this, rep.typeName)}>
+          <Components.FormCardSection label={rep.typeName} labelStyle={{ height: 0, margin: 0 }} hasUnderline hasContent>
+            <View style={styles.labelContainer}>
+              <Text style={styles.labelText}>{rep.typeName}</Text>
+              <Icon
+                name="check-circle"
+                //style={styles.uploadButtonInner}
+                type="font-awesome"
+                iconStyle={[{ color: '#d5d9e0', fontSize: 20 }, rep.typeName === this.state.currentType && { color: Colours.COLOUR_GREEN }]}
+              />
+            </View>
+            {!_.isEmpty(rep.description) && <Text style={styles.description}>{rep.description}</Text>}
+          </Components.FormCardSection>
+        </TouchableOpacity>
+      );
+    });
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Components.Header leftIcon="angle-left" onPressLeft={this.onPressBack.bind(this)} text="Select type" />
+        <ScrollView style={{ flex: 1 }}>{this.renderMain()}</ScrollView>
+      </View>
+    );
+  }
+}
+
+const styles = {
+  container: {
+    flex: 1,
+    position: 'relative',
+    backgroundColor: '#f0f0f5',
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    minHeight: 22,
+  },
+  text: {
+    flex: 1,
+    fontFamily: 'sf-regular',
+    fontSize: 14,
+    color: Colours.TEXT_DARK,
+  },
+  labelContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  labelText: {
+    fontFamily: 'sf-medium',
+    fontSize: 16,
+    color: Colours.TEXT_DARK,
+  },
+  description: {
+    marginTop: 5,
+    fontSize: 14,
+    fontFamily: 'sf-regular',
+    color: Colours.TEXT_DARK,
+  },
+};
+
+export default connect(null, {})(JobTypePicker);