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

package/src/screens/RequestNotes.js

@@ -0,0 +1,418 @@
+import React, { Component } from 'react';
+import { ScrollView, View, Text, TouchableOpacity, Modal, KeyboardAvoidingView, Platform } from 'react-native';
+import { connect } from 'react-redux';
+import { Icon } from 'react-native-elements';
+import _ from 'lodash';
+import moment from 'moment';
+import { jobAdded } from '../actions';
+import { maintenanceActions } from '../apis';
+import { getBottomSpace } from 'react-native-iphone-x-helper';
+import { Services } from '../feature.config';
+import { Components, Colours, Helper } from '../core.config';
+import { values } from '../values.config';
+
+class RequestNotes extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      job: {},
+      selectedPDF: null,
+      noteAttachments: [],
+      noteInput: '',
+      addNoteOpen: false,
+    };
+  }
+
+  componentDidMount() {
+    this.updateJobState();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.jobs !== this.props.jobs) {
+      this.updateJobState();
+    }
+  }
+
+  updateJobState() {
+    const job = _.find(this.props.jobs, j => j.id === this.props.job.id) || this.props.job;
+    this.setState({ job });
+  }
+
+  onPressBack = () => {
+    Services.navigation.goBack();
+  };
+
+  onOpenAttachment = a => {
+    this.setState({
+      selectedPDF: a,
+    });
+  };
+
+  onCloseAttachment = () => {
+    this.setState({
+      selectedPDF: null,
+    });
+  };
+
+  onPressDeleteNote = n => {
+    this.setState({
+      noteToDelete: n,
+    });
+  };
+
+  onPressConfirmDelete = () => {
+    maintenanceActions.deleteNote(this.props.job.id, this.state.noteToDelete.Id);
+    const newNotes = _.filter(this.state.job.Notes, note => {
+      return note.Id !== this.state.noteToDelete.Id;
+    });
+    const newJob = { ...this.props.job };
+    newJob.Notes = newNotes;
+    this.props.jobAdded(newJob);
+    this.props.onChange && this.props.onChange();
+    this.setState({
+      job: newJob,
+      noteToDelete: null,
+    });
+  };
+
+  onPressCancelDelete = () => {
+    this.setState({ noteToDelete: null });
+  };
+
+  isReadyToSaveNote = () => {
+    if (
+      _.some(this.state.noteAttachments, n => {
+        return n.Uploading;
+      })
+    ) {
+      return false;
+    }
+    return !_.isEmpty(this.state.noteInput) || !_.isEmpty(this.state.noteAttachments);
+  };
+
+  openAddNote = () => {
+    this.setState({
+      addNoteOpen: true,
+      editingNote: null,
+    });
+  };
+
+  closeAddNote = () => {
+    const newState = {
+      addNoteOpen: false,
+      editingNote: null,
+    };
+    if (!!this.state.editingNote) {
+      newState.noteInput = '';
+      newState.noteAttachments = [];
+    }
+    this.setState(newState);
+  };
+
+  openEditNote = n => {
+    this.setState({
+      noteAttachments: n.Attachments || [],
+      noteInput: n.Note || '',
+      addNoteOpen: true,
+      editingNote: n.Id,
+      noteMenuOpen: null,
+    });
+  };
+
+  confirmAddNote = async () => {
+    if (!this.isReadyToSaveNote()) {
+      return;
+    }
+
+    try {
+      this.setState({ submittingNote: true });
+      const res = await (this.state.editingNote
+        ? maintenanceActions.editNote(
+            this.props.job.id,
+            this.state.editingNote,
+            this.state.noteInput,
+            this.state.noteAttachments.map(a => {
+              return {
+                Title: a.Title,
+                Source: a.Source,
+              };
+            }),
+          )
+        : maintenanceActions.addNote(
+            this.props.job.id,
+            this.state.noteInput,
+            this.state.noteAttachments.map(a => {
+              return {
+                Title: a.Title,
+                Source: a.Source,
+              };
+            }),
+          ));
+      this.setState(
+        {
+          job: res.data.job,
+          submittingNote: false,
+          addNoteOpen: false,
+          noteInput: '',
+          noteAttachments: [],
+          editingNote: null,
+        },
+        () => {
+          this.props.jobAdded(res.data.job);
+          this.props.onChange && this.props.onChange();
+        },
+      );
+    } catch (err) {
+      console.log('error');
+      console.log(err);
+      this.setState({
+        submittingNote: false,
+      });
+    }
+  };
+
+  renderAttachment(a, i) {
+    return (
+      <Components.Attachment
+        onPress={() => {
+          this.onOpenAttachment(a);
+        }}
+        key={i}
+        title={a.Title}
+      />
+    );
+  }
+
+  renderNote(n) {
+    return (
+      <View style={styles.noteContainer} key={n.Id}>
+        <View style={styles.noteContainerTop}>
+          <Components.ProfilePic Diameter={30} ProfilePic={n.User.profilePic} style={styles.profilePic} />
+          <View style={styles.noteContainerTopRight}>
+            {this.props.user.uid === n.User.id && (
+              <TouchableOpacity
+                onPress={() => {
+                  this.onPressDeleteNote(n);
+                }}
+              >
+                <View style={[styles.noteContainerButtonContainer, { backgroundColor: this.props.colourBrandingMain }]}>
+                  <Icon name="trash" type="font-awesome" iconStyle={styles.noteContainerButtonIcon} />
+                </View>
+              </TouchableOpacity>
+            )}
+            {this.props.user.uid === n.User.id && (
+              <TouchableOpacity
+                onPress={() => {
+                  this.openEditNote(n);
+                }}
+              >
+                <View style={[styles.noteContainerButtonContainer, { backgroundColor: this.props.colourBrandingMain }]}>
+                  <Icon name="pencil" type="font-awesome" iconStyle={styles.noteContainerButtonIcon} />
+                </View>
+              </TouchableOpacity>
+            )}
+            <View style={styles.noteContainerTopFill}>
+              <Text style={styles.noteContainerName}>{n.User.displayName}</Text>
+            </View>
+          </View>
+        </View>
+        <Text style={styles.noteContainerText}>{n.Note}</Text>
+        {(n.Attachments || []).map((a, i) => this.renderAttachment(a, i))}
+        <Text style={styles.noteTimestamp}>
+          {moment
+            .utc(n.Timestamp)
+            .local()
+            .format(Helper.TIMESTAMP_FORMAT)}
+        </Text>
+      </View>
+    );
+  }
+
+  renderNotes() {
+    return (this.state.job.Notes || []).map((n, i) => {
+      return this.renderNote(n, i);
+    });
+  }
+
+  renderPDF() {
+    if (_.isEmpty(this.state.selectedPDF)) {
+      return null;
+    }
+    return (
+      <Components.PDFPopup
+        source={this.state.selectedPDF.Source}
+        onClose={this.onCloseAttachment}
+        title={this.state.selectedPDF.Title}
+        pdfCount={1}
+      />
+    );
+  }
+
+  renderNoteDeleteConfirm() {
+    return (
+      <Components.ConfirmPopup
+        visible={!!this.state.noteToDelete}
+        onConfirm={this.onPressConfirmDelete}
+        onCancel={this.onPressCancelDelete}
+        onClose={this.onPressCancelDelete}
+        text="Are you sure you want to delete this note?"
+      />
+    );
+  }
+
+  renderFooterContent() {
+    if (this.state.submittingNote) {
+      return <Components.Spinner />;
+    }
+    return (
+      <Components.InlineButton color={this.props.colourBrandingMain} onPress={this.confirmAddNote} fillTouchable large>
+        Save
+      </Components.InlineButton>
+    );
+  }
+
+  renderAdd() {
+    return (
+      <Modal animationType="slide" visible={this.state.addNoteOpen}>
+        <KeyboardAvoidingView style={styles.container} behavior={Platform.OS === 'ios' && 'padding'}>
+          <Components.Header leftText="Cancel" onPressLeft={this.closeAddNote} text="" />
+          <ScrollView style={styles.scrollContainer} contentContainerStyle={styles.innerContainer}>
+            <Components.TextStyle type="pageHeading">Add Staff Note</Components.TextStyle>
+            <Components.GenericInputSection
+              label="Content"
+              placeholder="Insert your notes here..."
+              value={this.state.noteInput}
+              onChangeText={noteInput => this.setState({ noteInput })}
+              isValid={() => {
+                return !_.isEmpty(this.state.noteInput);
+              }}
+              autoCapitalize="sentences"
+              minHeight={135}
+              autoCorrect
+              multiline
+              autoGrow
+              required
+              squaredCorners
+              sectionStyle={styles.inputSection}
+            />
+            <Components.GenericInputSection label="Attachments" sectionStyle={styles.inputSection}>
+              {this.state.editingNote ? (
+                (this.state.noteAttachments || []).map((a, i) => this.renderAttachment(a, i))
+              ) : (
+                <Components.TextStyle type="body" style={styles.attachmentInfo}>
+                  PDFs can only be attached to notes from the Community Manager.
+                </Components.TextStyle>
+              )}
+            </Components.GenericInputSection>
+          </ScrollView>
+          <View style={styles.popupFooter}>{this.renderFooterContent()}</View>
+        </KeyboardAvoidingView>
+      </Modal>
+    );
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        {this.renderPDF()}
+        {this.renderNoteDeleteConfirm()}
+        {this.renderAdd()}
+        <Components.Header leftIcon="angle-left" onPressLeft={this.onPressBack} text="Staff Notes" />
+        <ScrollView style={styles.scrollContainer} contentContainerStyle={styles.innerContainer}>
+          {this.renderNotes()}
+        </ScrollView>
+        <Components.AddButton onPress={this.openAddNote} />
+      </View>
+    );
+  }
+}
+
+const styles = {
+  container: {
+    flex: 1,
+    position: 'relative',
+    backgroundColor: '#fff',
+  },
+  scrollContainer: {
+    flex: 1,
+  },
+  innerContainer: {
+    padding: 16,
+  },
+  popupFooter: {
+    paddingHorizontal: 16,
+    paddingBottom: getBottomSpace() + 16,
+  },
+  noteContainer: {
+    ...Helper.getShadowStyle(),
+    padding: 8,
+    marginBottom: 16,
+  },
+  noteContainerTop: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  profilePic: {
+    marginRight: 8,
+  },
+  noteContainerTopFill: {
+    flex: 1,
+  },
+  noteContainerName: {
+    fontFamily: 'sf-semibold',
+    fontSize: 13,
+    color: Colours.TEXT_DARKEST,
+  },
+  noteContainerText: {
+    marginTop: 8,
+    fontFamily: 'sf-regular',
+    fontSize: 13,
+    color: Colours.TEXT_DARKEST,
+  },
+  noteTimestamp: {
+    marginTop: 8,
+    fontFamily: 'sf-semibold',
+    fontSize: 11,
+    color: Colours.TEXT_LIGHT,
+  },
+  noteContainerTopRight: {
+    flex: 1,
+    flexDirection: 'row-reverse',
+    alignItems: 'center',
+  },
+  noteContainerButtonContainer: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: 8,
+  },
+  noteContainerButtonIcon: {
+    fontSize: 13,
+    color: '#fff',
+  },
+  inputSection: {
+    marginTop: 24,
+  },
+  sectionHeading: {
+    fontFamily: 'qs-bold',
+    fontSize: 24,
+    color: Colours.TEXT_DARKEST,
+  },
+  attachmentInfo: {
+    marginTop: 8,
+  },
+};
+
+const mapStateToProps = state => {
+  return {
+    user: state.user,
+    colourBrandingMain: Colours.getMainBrandingColourFromState(state),
+    colourBrandingLight: Colours.getLightBrandingColourFromState(state),
+    jobs: state[values.reducerKey].jobs,
+  };
+};
+
+export default connect(mapStateToProps, { jobAdded })(RequestNotes);