Added work item details to activity

2018-06-04 16:29:58 -07:00
parent 4ebb4341b7
commit cffa0734b8
9 changed files with 81 additions and 38 deletions
--- a/mobile/src/Activity/Activity.js
+++ b/mobile/src/Activity/Activity.js
@@ -27,10 +27,11 @@ import { reactAutoBind } from "auto-bind2"
 import KeyboardSpacer from "react-native-keyboard-spacer"
 import { isIphoneX } from "react-native-iphone-x-helper"
 import { api } from "../API"
-import { formatLatLng } from "../util"
+import { formatLatLng, workItemTypeEnum } from "../util"
 import moment from "moment"
 import "url-search-params-polyfill"
 import { config } from "../config"
+import { FormStaticOptionStrip } from "../ui/FormStaticOptionStrip"

 const styles = StyleSheet.create({
  container: {
@@ -124,6 +125,8 @@ export class Activity extends React.Component {
              ),
              location: formatLatLng(lat, lng),
              dateTime: moment().format(),
+              details: workItem.details,
+              workItemType: workItem.workItemType,
            })

            this.region = {
@@ -288,6 +291,8 @@ export class Activity extends React.Component {
      waitModal,
      dateTime,
      location,
+      details,
+      workItemType,
      uploadPercent,
    } = this.state

@@ -301,14 +306,6 @@ export class Activity extends React.Component {
          rightButton={{ icon: "done", onPress: this.handleDonePress }}
        />
        <ScrollView style={styles.container}>
-          <View style={styles.panel}>
-            <BoundInput
-              binder={binder}
-              name="resolution"
-              label="Resolution:"
-              message="You must supply a resolution for the activity"
-            />
-          </View>
          <View style={styles.panel}>
            <BoundOptionStrip
              binder={binder}
@@ -322,17 +319,34 @@ export class Activity extends React.Component {
              name="status"
              message="You must supply a status for the activity"
            />
-          </View>
-          <View style={styles.panel}>
+            <BoundInput
+              binder={binder}
+              name="resolution"
+              label="Resolution:"
+              message="You must supply a resolution for the activity"
+            />
            <BoundInput
              binder={binder}
              name="notes"
              label="Notes:"
              message="You must supply notes for the activity"
            />
+            <FormStaticInput label="Date &amp; Time:" value={dateTime} />
+            <BoundPhotoPanel
+              name="photos"
+              binder={binder}
+              onUploadStarted={this.handleUploadStarted}
+              onUploadProgress={this.handleUploadProgress}
+              onUploadEnded={this.handleUploadEnded}
+            />
          </View>
          <View style={styles.panel}>
-            <FormStaticInput label="Date &amp; Time:" value={dateTime} />
+            <FormStaticOptionStrip
+              label="Work Item Type:"
+              options={workItemTypeEnum}
+              value={workItemType}
+            />
+            <FormStaticInput label="Details:" value={details} />
            <FormStaticInput label="Location:" value={location} />
            <View style={{ flexDirection: "column", justifyContent: "center" }}>
              <MapView
@@ -369,15 +383,6 @@ export class Activity extends React.Component {
              />
            </View>
          </View>
-          <View style={styles.panel}>
-            <BoundPhotoPanel
-              name="photos"
-              binder={binder}
-              onUploadStarted={this.handleUploadStarted}
-              onUploadProgress={this.handleUploadProgress}
-              onUploadEnded={this.handleUploadEnded}
-            />
-          </View>
          {isIphoneX ? <View style={{ height: 30, width: "100%" }} /> : null}
        </ScrollView>
        <ProgressModal
--- a/mobile/src/App.js
+++ b/mobile/src/App.js
@@ -55,7 +55,7 @@ export default class App extends React.Component {
          <Switch>
            <Route exact path="/login" component={Login} />
            <Route exact path="/logout" component={Logout} />
-            <ProtectedRoute exact path="/home" component={Home} />
+            {/* <ProtectedRoute exact path="/home" component={Home} /> */}
            <ProtectedRoute
              exact
              path="/arviewer"
@@ -69,7 +69,8 @@ export default class App extends React.Component {
              path="/workItemList"
              component={WorkItemList}
            />
-            <DefaultRoute redirect="/home" />
+            {/* <DefaultRoute redirect="/home" /> */}
+            <DefaultRoute redirect="/activity?workItemId=5b0c85995ebbed31c323cdf6" />
          </Switch>
        </View>
      </NativeRouter>
--- a/mobile/src/WorkItem/WorkItem.js
+++ b/mobile/src/WorkItem/WorkItem.js
@@ -100,6 +100,7 @@ export class WorkItem extends React.Component {
      messageModal: null,
      waitModal: null,
      progressModal: null,
+      allowLocationUpdates: false,
    }
    this.region = null
    this.isMapReady = false
@@ -151,6 +152,8 @@ export class WorkItem extends React.Component {
            },
          })
        })
+    } else {
+      this.setState({ allowLocationUpdates: true })
    }
  }

@@ -221,7 +224,7 @@ export class WorkItem extends React.Component {
  }

  handleRegionChange(region) {
-    if (this.state.binder._id || !this.isMapReady) {
+    if (!this.state.allowLocationUpdates || !this.isMapReady) {
      // On iOS we get this after setting the initial region, before the map declared as ready!
      // Also, if we are only viewing the work item, then don't allow region changes
      return
@@ -349,8 +352,6 @@ export class WorkItem extends React.Component {
              options={workItemTypeEnum}
              message="Select a work item type"
            />
-          </View>
-          <View style={styles.panel}>
            <BoundInput
              binder={binder}
              name="details"
@@ -358,8 +359,6 @@ export class WorkItem extends React.Component {
              label="Details:"
              message="You must supply details for the work item"
            />
-          </View>
-          <View style={styles.panel}>
            <View style={{ flexDirection: "column", justifyContent: "center" }}>
              <MapView
                ref={(ref) => (this.mapView = ref)}
@@ -406,8 +405,6 @@ export class WorkItem extends React.Component {
              name="address"
              label="Address:"
            />
-          </View>
-          <View style={styles.panel}>
            <BoundPhotoPanel
              name="photos"
              binder={binder}
@@ -429,7 +426,7 @@ export class WorkItem extends React.Component {
            )}
          {isIphoneX ? <View style={{ height: 30, width: "100%" }} /> : null}
        </ScrollView>
-        {!this.state.binder._id && (
+        {!this.state.allowLocationUpdates && (
          <Geolocation onUpdate={this.handlePositionUpdate} watch={false} />
        )}
        <ProgressModal
--- a/mobile/src/ui/BoundInput.js
+++ b/mobile/src/ui/BoundInput.js
@@ -85,10 +85,9 @@ export class BoundInput extends React.Component {
        <Text
          style={{
            fontSize: 12,
-            display: valid ? "none" : "flex",
            color: "red",
          }}>
-          {message}
+          {valid ? " " : message}
        </Text>
      </View>
    )
--- a/mobile/src/ui/BoundOptionStrip.js
+++ b/mobile/src/ui/BoundOptionStrip.js
@@ -55,10 +55,9 @@ export class BoundOptionStrip extends React.Component {
        <Text
          style={{
            fontSize: 12,
-            display: valid ? "none" : "flex",
            color: "red",
          }}>
-          {message}
+          {valid ? " " : message}
        </Text>
      </View>
    )
--- a/mobile/src/ui/FormStaticInput.js
+++ b/mobile/src/ui/FormStaticInput.js
@@ -39,6 +39,7 @@ export class FormStaticInput extends React.Component {
          underlineColorAndroid="white"
          value={value}
        />
+        <Text>&nbsp;</Text>
      </View>
    )
  }
--- a/mobile/src/ui/FormStaticOptionStrip.js
+++ b/mobile/src/ui/FormStaticOptionStrip.js
@@ -0,0 +1,33 @@
+import React from "react"
+import PropTypes from "prop-types"
+import { Text, View, Platform } from "react-native"
+import { OptionStrip } from "."
+
+export class FormStaticOptionStrip extends React.Component {
+  static propTypes = {
+    label: PropTypes.string,
+    options: PropTypes.arrayOf(
+      PropTypes.shape({ value: PropTypes.string, text: PropTypes.string })
+    ).isRequired,
+    value: PropTypes.string,
+  }
+
+  render() {
+    const { label, value, options } = this.props
+
+    return (
+      <View style={{ width: "100%" }}>
+        <Text
+          style={{
+            color: "black",
+            fontSize: 14,
+            marginBottom: 5,
+          }}>
+          {label}
+        </Text>
+        <OptionStrip value={value} readOnly options={options} />
+        <Text>&nbsp;</Text>
+      </View>
+    )
+  }
+}
--- a/mobile/src/ui/OptionStrip.js
+++ b/mobile/src/ui/OptionStrip.js
@@ -9,6 +9,7 @@ export class OptionStrip extends Component {
      PropTypes.shape({ value: PropTypes.string, text: PropTypes.string })
    ).isRequired,
    value: PropTypes.string,
+    readOnly: PropTypes.bool,
    onValueChanged: PropTypes.func,
  }

@@ -41,14 +42,15 @@ export class OptionStrip extends Component {
  handlePress(option) {
    const { onValueChanged } = this.props

-    this.setState({ selectedOption: option })
    if (onValueChanged) {
      onValueChanged(option.value)
+    } else if (!this.props.readOnly) {
+      this.setState({ selectedOption: option })
    }
  }

  render() {
-    const { style, options, value } = this.props
+    const { style, options, value, readOnly } = this.props
    const { selectedOption } = this.state

    // TODO: Handle visible, disabled & read-only
@@ -58,6 +60,7 @@ export class OptionStrip extends Component {
        {options.map((option, index) => (
          <TouchableHighlight
            key={index}
+            disabled={readOnly}
            underlayColor="#3BB0FD"
            style={[
              {
@@ -65,7 +68,11 @@ export class OptionStrip extends Component {
                flexBasis: 0,
                height: 40,
                backgroundColor:
-                  option === selectedOption ? "#3BB0FD" : "#EEEEEE",
+                  option !== selectedOption
+                    ? "#EEEEEE"
+                    : readOnly
+                      ? "#AAAAAA"
+                      : "#3BB0FD",
              },
              index === 0 && {
                borderTopLeftRadius: 6,
--- a/mobile/src/ui/index.js
+++ b/mobile/src/ui/index.js
@@ -7,6 +7,7 @@ export { Geolocation } from "./Geolocation"
 export { BoundSwitch } from "./BoundSwitch"
 export { BoundInput } from "./BoundInput"
 export { FormStaticInput } from "./FormStaticInput"
+export { FormStaticOptionStrip } from "./FormStaticOptionStrip"
 export { BoundButton } from "./BoundButton"
 export { BoundOptionStrip } from "./BoundOptionStrip"
 export { BoundHeader } from "./BoundHeader"