@plusscommunities/pluss-maintenance-app 6.1.2-beta.0 → 7.0.0-beta.1

package/src/screens/RequestNotes.js

@@ -1,16 +1,31 @@
 import React, { Component } from 'react';
-import { ScrollView, View, Text, TouchableOpacity, Modal, KeyboardAvoidingView } from 'react-native';
+import {
+  ScrollView,
+  View,
+  Text,
+  TouchableOpacity,
+  Modal,
+  KeyboardAvoidingView,
+  Platform,
+  FlatList,
+  Dimensions,
+  ImageBackground,
+  Keyboard,
+} from 'react-native';
 import { connect } from 'react-redux';
-import { Icon } from 'react-native-elements';
+import { Icon } from '@rneui/themed';
 import _ from 'lodash';
 import moment from 'moment';
 import { jobAdded } from '../actions';
-import { generalActions } from '../apis';
+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';
 
+const SCREEN_WIDTH = Dimensions.get('window').width;
+const PHOTO_SIZE = (SCREEN_WIDTH - 64) / 3;
+
 class RequestNotes extends Component {
   constructor(props) {
     super(props);
@@ -21,7 +36,13 @@ class RequestNotes extends Component {
       noteAttachments: [],
       noteInput: '',
       addNoteOpen: false,
+      noteImages: [{ add: true }],
+      uploadingImage: false,
+      galleryOpen: false,
+      galleryImages: [],
+      galleryIndex: 0,
     };
+    this.checkThumb = null;
   }
 
   componentDidMount() {
@@ -34,6 +55,10 @@ class RequestNotes extends Component {
     }
   }
 
+  componentWillUnmount() {
+    clearInterval(this.checkThumb);
+  }
+
   updateJobState() {
     const job = _.find(this.props.jobs, j => j.id === this.props.job.id) || this.props.job;
     this.setState({ job });
@@ -62,13 +87,14 @@ class RequestNotes extends Component {
   };
 
   onPressConfirmDelete = () => {
-    generalActions.deleteNote(this.props.job.id, this.state.noteToDelete.Id);
+    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,
@@ -80,14 +106,14 @@ class RequestNotes extends Component {
   };
 
   isReadyToSaveNote = () => {
-    if (
-      _.some(this.state.noteAttachments, n => {
-        return n.Uploading;
-      })
-    ) {
-      return false;
-    }
-    return !_.isEmpty(this.state.noteInput) || !_.isEmpty(this.state.noteAttachments);
+    const uploadingAttachments = _.some(this.state.noteAttachments, n => n.Uploading);
+    const uploadingImages = _.some(this.state.noteImages, n => n.uploading);
+    if (uploadingAttachments || uploadingImages) return false;
+    return (
+      !_.isEmpty(this.state.noteInput) ||
+      !_.isEmpty(this.state.noteAttachments) ||
+      !_.isEmpty(this.state.noteImages.filter(img => !img.add))
+    );
   };
 
   openAddNote = () => {
@@ -105,13 +131,16 @@ class RequestNotes extends Component {
     if (!!this.state.editingNote) {
       newState.noteInput = '';
       newState.noteAttachments = [];
+      newState.noteImages = [];
     }
     this.setState(newState);
   };
 
   openEditNote = n => {
+    const noteImages = [...(n.Images || []).map(i => ({ url: i, thumbNailUrl: Helper.getThumb300(i) })), { add: true }];
     this.setState({
       noteAttachments: n.Attachments || [],
+      noteImages,
       noteInput: n.Note || '',
       addNoteOpen: true,
       editingNote: n.Id,
@@ -126,28 +155,18 @@ class RequestNotes extends Component {
 
     try {
       this.setState({ submittingNote: true });
+      const attachments = this.state.noteAttachments
+        .filter(a => !a.add)
+        .map(a => {
+          return {
+            Title: a.Title,
+            Source: a.Source,
+          };
+        });
+      const images = this.state.noteImages.filter(img => !img.add).map(img => img.url);
       const res = await (this.state.editingNote
-        ? generalActions.editNote(
-            this.props.job.id,
-            this.state.editingNote,
-            this.state.noteInput,
-            this.state.noteAttachments.map(a => {
-              return {
-                Title: a.Title,
-                Source: a.Source,
-              };
-            }),
-          )
-        : generalActions.addNote(
-            this.props.job.id,
-            this.state.noteInput,
-            this.state.noteAttachments.map(a => {
-              return {
-                Title: a.Title,
-                Source: a.Source,
-              };
-            }),
-          ));
+        ? maintenanceActions.editNote(this.props.job.id, this.state.editingNote, this.state.noteInput, attachments, images)
+        : maintenanceActions.addNote(this.props.job.id, this.state.noteInput, attachments, images));
       this.setState(
         {
           job: res.data.job,
@@ -155,10 +174,13 @@ class RequestNotes extends Component {
           addNoteOpen: false,
           noteInput: '',
           noteAttachments: [],
+          noteImages: [{ add: true }],
+          uploadingImage: false,
           editingNote: null,
         },
         () => {
           this.props.jobAdded(res.data.job);
+          this.props.onChange && this.props.onChange();
         },
       );
     } catch (err) {
@@ -166,10 +188,156 @@ class RequestNotes extends Component {
       console.log(err);
       this.setState({
         submittingNote: false,
+        uploadingImage: false,
       });
     }
   };
 
+  setImages = (noteImages, uploadingImage = false, callback = null) => {
+    this.setState({ noteImages, uploadingImage }, callback);
+  };
+
+  getImages = () => {
+    const { noteImages } = this.state;
+    const imagesList = _.cloneDeep(noteImages);
+    if (!imagesList || !Array.isArray(imagesList) || imagesList.length === 0) {
+      return [{ add: true }];
+    }
+    return imagesList;
+  };
+
+  getImageUrls = () => {
+    const imagesList = this.getImages();
+    return _.filter(imagesList, img => {
+      return !img.uploading && !img.add;
+    }).map(img => {
+      return img.url;
+    });
+  };
+
+  waitForThumbnails = () => {
+    if (this.checkThumb) return;
+
+    this.checkThumb = setInterval(async () => {
+      const imagesList = this.getImages();
+      const imagesUpdate = [];
+      await Promise.all(
+        imagesList.map(image => {
+          return new Promise(async resolve => {
+            const newImage = { ...image };
+            imagesUpdate.push(newImage);
+            if (newImage.url && !newImage.thumbNailExists) {
+              newImage.uploading = false;
+              newImage.allowRetry = false;
+              newImage.thumbNailExists = await Helper.imageExists(newImage.thumbNailUrl);
+              resolve(newImage.thumbNailExists);
+            }
+            resolve(true);
+          });
+        }),
+      );
+      const thumbnailsExist = imagesUpdate.every(image => !image.url || image.thumbNailExists);
+      if (thumbnailsExist) {
+        clearInterval(this.checkThumb);
+        this.checkThumb = null;
+        this.setImages(imagesUpdate);
+      }
+    }, 2000);
+  };
+
+  removeImage = index => {
+    const imagesUpdate = this.getImages();
+    imagesUpdate.splice(index, 1);
+
+    this.setImages(imagesUpdate);
+  };
+
+  showUploadMenu = () => {
+    Keyboard.dismiss();
+    const { uploadingImage, submittingNote } = this.state;
+    if (uploadingImage || submittingNote) return;
+    this.imageUploader.showUploadMenu();
+  };
+
+  toggleFullscreenVideo = url => {
+    if (typeof url !== 'string') url = '';
+    this.setState({ showFullscreenVideo: url.length > 0, currentVideoUrl: url });
+  };
+
+  openGallery(images, index) {
+    this.setState({ galleryOpen: true, galleryImages: images, galleryIndex: index });
+  }
+
+  closeGallery() {
+    this.setState({ galleryOpen: false, galleryImages: [], galleryIndex: 0 });
+  }
+
+  onUploadStarted = (uploadUri, imageUri) => {
+    const imagesUpdate = this.getImages();
+    imagesUpdate.splice(imagesUpdate.length - 1, 0, {
+      uploading: true,
+      uploadProgress: '0%',
+      uploadUri,
+      imageUri,
+      allowRetry: true,
+    });
+
+    this.setImages(imagesUpdate, true);
+  };
+
+  onUploadProgress = progress => {
+    const imagesUpdate = this.getImages();
+    imagesUpdate.map(img => {
+      if (img.uploadUri === progress.uri) {
+        img.uploadProgress = progress.percentage;
+        img.uploading = true;
+        img.allowRetry = true;
+      }
+    });
+
+    this.setImages(imagesUpdate, true);
+  };
+
+  onUploadSuccess = async (uri, uploadUri) => {
+    const imagesUpdate = this.getImages();
+    imagesUpdate.map(img => {
+      if (img.uploadUri === uploadUri && img.uploading) {
+        img.url = uri.replace('/general/', '/general1400/');
+        img.thumbNailExists = false;
+        img.thumbNailUrl = Helper.getThumb300(img.url);
+        img.allowRetry = true;
+      }
+    });
+
+    this.setImages(imagesUpdate, false, () => this.waitForThumbnails());
+  };
+
+  onUploadFailed = uploadUri => {
+    const imagesUpdate = this.getImages();
+    imagesUpdate.map(img => {
+      if (img.uploadUri === uploadUri) {
+        img.uploading = true; // Requried for retry
+        img.uploadProgress = '';
+        img.allowRetry = true;
+      }
+    });
+
+    this.setImages(imagesUpdate);
+  };
+
+  onLibrarySelected = uri => {
+    const imagesUpdate = this.getImages();
+    imagesUpdate.splice(imagesUpdate.length - 1, 0, {
+      uploading: false,
+      allowRetry: false,
+      url: Helper.get1400(uri),
+      thumbNailExists: true,
+      thumbNailUrl: Helper.getThumb300(uri),
+    });
+
+    this.setImages(imagesUpdate);
+  };
+
   renderAttachment(a, i) {
     return (
       <Components.Attachment
@@ -182,6 +350,50 @@ class RequestNotes extends Component {
     );
   }
 
+  renderPlayableImageUrl(images, index, containerStyle) {
+    const url = images[index];
+    const thumbUrl = Helper.getThumb300(url);
+
+    if (Helper.isVideo(url)) {
+      return (
+        <ImageBackground style={[{ flex: 1 }, containerStyle]} source={{ uri: thumbUrl }}>
+          <View style={styles.imagePlayContainer}>
+            <TouchableOpacity onPress={this.toggleFullscreenVideo.bind(this, url)}>
+              <Icon name="play" type="font-awesome" iconStyle={styles.imageControlIcon} />
+            </TouchableOpacity>
+          </View>
+        </ImageBackground>
+      );
+    }
+
+    const imageUrl = Helper.get1400(url);
+    return (
+      <TouchableOpacity style={containerStyle} onPress={this.openGallery.bind(this, images, index || 0)}>
+        <ImageBackground resizeMode="cover" style={styles.imageContainer} source={{ uri: imageUrl }} />
+      </TouchableOpacity>
+    );
+  }
+
+  renderImages(note) {
+    if (!note) return null;
+    if (!_.isNil(note.Images) && !_.isEmpty(note.Images)) {
+      return (
+        <ScrollView horizontal style={styles.sideBySideImages}>
+          {note.Images.map((_p, index) => this.renderPlayableImageUrl(note.Images, index, styles.sideBySideImageContainer))}
+        </ScrollView>
+      );
+    }
+    return null;
+  }
+
+  renderImagePopup() {
+    const { galleryOpen, galleryImages, galleryIndex } = this.state;
+    console.log('renderimagepopup', { galleryOpen, galleryImages, galleryIndex });
+    return (
+      <Components.ImagePopup visible={galleryOpen} images={galleryImages} index={galleryIndex} onClose={this.closeGallery.bind(this)} />
+    );
+  }
+
   renderNote(n) {
     return (
       <View style={styles.noteContainer} key={n.Id}>
@@ -217,6 +429,7 @@ class RequestNotes extends Component {
         </View>
         <Text style={styles.noteContainerText}>{n.Note}</Text>
         {(n.Attachments || []).map((a, i) => this.renderAttachment(a, i))}
+        {this.renderImages(n)}
         <Text style={styles.noteTimestamp}>
           {moment
             .utc(n.Timestamp)
@@ -270,10 +483,118 @@ class RequestNotes extends Component {
     );
   }
 
+  renderUploadMenu() {
+    return (
+      <Components.ImageUploader
+        ref={ref => (this.imageUploader = ref)}
+        onUploadStarted={this.onUploadStarted}
+        onUploadSuccess={this.onUploadSuccess}
+        onUploadFailed={this.onUploadFailed}
+        onUploadProgress={this.onUploadProgress}
+        onLibrarySelected={this.onLibrarySelected}
+        size={{ width: 1400 }}
+        quality={0.8}
+        fileName={'serviceNoteImage'}
+        popupTitle={'Upload Image'}
+        userId={this.props.user.uid}
+        allowsEditing={false}
+        multiple
+        hideLibrary
+      />
+    );
+  }
+
+  renderImage(item, index) {
+    const isVideoUrl = Helper.isVideo(item.url);
+    const imagesList = this.getImages();
+
+    if (item.add) {
+      return (
+        <TouchableOpacity activeOpacity={0.8} onPress={() => this.showUploadMenu()}>
+          <View
+            style={[
+              styles.imageContainer,
+              imagesList.length > 1 && styles.imageContainerNotEmpty,
+              index % 3 === 0 && { marginLeft: 0 },
+              index > 2 && { marginTop: 8 },
+            ]}
+          >
+            <View style={styles.imageCircle}>
+              <Icon name="camera" type="font-awesome" iconStyle={styles.addImageIcon} />
+            </View>
+          </View>
+        </TouchableOpacity>
+      );
+    }
+    return (
+      <View
+        style={[
+          styles.imageContainer,
+          imagesList.length > 1 && styles.imageContainerNotEmpty,
+          index % 3 === 0 && { marginLeft: 0 },
+          index > 2 && { marginTop: 8 },
+        ]}
+      >
+        {item.uploading ? (
+          <Components.ImageUploadProgress uploader={this.imageUploader} image={item} color={this.props.colourBrandingMain} />
+        ) : (
+          <ImageBackground
+            style={styles.imageBackground}
+            source={Helper.getImageSource(item.thumbNailExists ? item.thumbNailUrl : item.url || item)}
+          >
+            {isVideoUrl && (
+              <View style={styles.imagePlayContainer}>
+                <TouchableOpacity onPress={this.toggleFullscreenVideo.bind(this, item.url)}>
+                  <Icon name="play" type="font-awesome" iconStyle={styles.imageControlIcon} />
+                </TouchableOpacity>
+              </View>
+            )}
+            <TouchableOpacity style={styles.removeImage} onPress={() => this.removeImage(index)}>
+              <Icon name="remove" type="font-awesome" iconStyle={styles.imageControlIcon} style={styles.removeImage} />
+            </TouchableOpacity>
+          </ImageBackground>
+        )}
+      </View>
+    );
+  }
+
+  renderImageList() {
+    const imagesList = this.getImages();
+
+    return (
+      <View style={styles.imageListContainer}>
+        <FlatList
+          keyboardShouldPersistTaps="always"
+          enableEmptySections
+          data={imagesList}
+          renderItem={({ item, index }) => this.renderImage(item, index)}
+          keyExtractor={(item, index) => index}
+          numColumns={3}
+          scrollEnabled={false}
+        />
+      </View>
+    );
+  }
+
+  renderVideoPlayerPopup() {
+    const { showFullscreenVideo, currentVideoUrl } = this.state;
+    if (!currentVideoUrl) return;
+
+    return (
+      <Components.VideoPopup
+        uri={currentVideoUrl}
+        visible={showFullscreenVideo}
+        showFullscreenButton={false}
+        onClose={this.toggleFullscreenVideo}
+      />
+    );
+  }
+
   renderAdd() {
     return (
       <Modal animationType="slide" visible={this.state.addNoteOpen}>
         <KeyboardAvoidingView style={styles.container} behavior={Platform.OS === 'ios' && 'padding'}>
+          {this.renderUploadMenu()}
           <Components.Header leftText="Cancel" onPressLeft={this.closeAddNote} text="" />
           <ScrollView style={styles.scrollContainer} contentContainerStyle={styles.innerContainer}>
             <Components.TextStyle type="pageHeading">Add Staff Note</Components.TextStyle>
@@ -295,6 +616,7 @@ class RequestNotes extends Component {
               sectionStyle={styles.inputSection}
             />
             <Components.GenericInputSection label="Attachments" sectionStyle={styles.inputSection}>
+              {this.renderImageList()}
               {this.state.editingNote ? (
                 (this.state.noteAttachments || []).map((a, i) => this.renderAttachment(a, i))
               ) : (
@@ -305,6 +627,7 @@ class RequestNotes extends Component {
             </Components.GenericInputSection>
           </ScrollView>
           <View style={styles.popupFooter}>{this.renderFooterContent()}</View>
+          {this.renderVideoPlayerPopup()}
         </KeyboardAvoidingView>
       </Modal>
     );
@@ -321,6 +644,7 @@ class RequestNotes extends Component {
           {this.renderNotes()}
         </ScrollView>
         <Components.AddButton onPress={this.openAddNote} />
+        {this.renderImagePopup()}
       </View>
     );
   }
@@ -402,6 +726,83 @@ const styles = {
   attachmentInfo: {
     marginTop: 8,
   },
+  imageListContainer: {
+    marginVertical: 8,
+  },
+  imageContainer: {
+    width: PHOTO_SIZE,
+    height: PHOTO_SIZE,
+    borderStyle: 'dashed',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: Colours.LINEGREY,
+    backgroundColor: Colours.BOXGREY,
+    borderRadius: 4,
+    marginLeft: 8,
+  },
+  imageContainerNotEmpty: {
+    borderWidth: 1,
+    borderColor: Colours.LINEGREY,
+    backgroundColor: '#fff',
+    borderStyle: 'dashed',
+  },
+  imageBackground: {
+    flex: 1,
+    height: '100%',
+    width: '100%',
+    borderRadius: 4,
+  },
+  imageCircle: {
+    width: 90,
+    height: 90,
+    borderRadius: 45,
+    backgroundColor: Colours.PINKISH_GREY,
+    justifyContent: 'center',
+  },
+  addImageIcon: {
+    color: '#fff',
+    fontSize: 32,
+  },
+  imagePlayContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  imageControlIcon: {
+    color: '#fff',
+    fontSize: 20,
+    textShadowColor: 'rgba(0,0,0,0.3)',
+    textShadowOffset: { width: 2, height: 2 },
+  },
+  removeImage: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    padding: 4,
+    width: 40,
+    height: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  sideBySideImages: {
+    flex: 1,
+    flexDirection: 'row',
+    marginTop: 12,
+    marginHorizontal: -8,
+  },
+  sideBySideImageContainer: {
+    backgroundColor: '#fff',
+    width: 60,
+    height: 50,
+    borderRadius: 2,
+    overflow: 'hidden',
+    marginRight: 2,
+  },
 };
 
 const mapStateToProps = state => {