@plusscommunities/pluss-maintenance-app-forms 6.0.10 → 6.0.11-auth.0

package/dist/module/screens/RequestNotes.js

@@ -1,18 +1,21 @@
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-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';
+import React, { Component } from "react";
+import { Text } from "@plusscommunities/pluss-core-app/components";
+import { ScrollView, View, TouchableOpacity, Modal, KeyboardAvoidingView, Platform, FlatList, Dimensions, ImageBackground, Keyboard } from "react-native";
+import { connect } from "react-redux";
+import { Icon } from "@rneui/themed";
+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";
+const SCREEN_WIDTH = Dimensions.get("window").width;
+const PHOTO_SIZE = (SCREEN_WIDTH - 64) / 3;
 class RequestNotes extends Component {
   constructor(props) {
     super(props);
@@ -56,12 +59,10 @@ class RequestNotes extends Component {
       });
     });
     _defineProperty(this, "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));
     });
     _defineProperty(this, "openAddNote", () => {
       this.setState({
@@ -75,15 +76,23 @@ class RequestNotes extends Component {
         editingNote: null
       };
       if (!!this.state.editingNote) {
-        newState.noteInput = '';
+        newState.noteInput = "";
         newState.noteAttachments = [];
+        newState.noteImages = [];
       }
       this.setState(newState);
     });
     _defineProperty(this, "openEditNote", n => {
+      const noteImages = [...(n.Images || []).map(i => ({
+        url: i,
+        thumbNailUrl: Helper.getThumb300(i)
+      })), {
+        add: true
+      }];
       this.setState({
         noteAttachments: n.Attachments || [],
-        noteInput: n.Note || '',
+        noteImages,
+        noteInput: n.Note || "",
         addNoteOpen: true,
         editingNote: n.Id,
         noteMenuOpen: null
@@ -97,43 +106,184 @@ class RequestNotes extends Component {
         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 => {
+        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 ? 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,
           submittingNote: false,
           addNoteOpen: false,
-          noteInput: '',
+          noteInput: "",
           noteAttachments: [],
+          noteImages: [{
+            add: true
+          }],
+          uploadingImage: false,
           editingNote: null
         }, () => {
           this.props.jobAdded(res.data.job);
           this.props.onChange && this.props.onChange();
         });
       } catch (err) {
-        console.log('error');
+        console.log("error");
         console.log(err);
         this.setState({
-          submittingNote: false
+          submittingNote: false,
+          uploadingImage: false
         });
       }
     });
+    _defineProperty(this, "setImages", (noteImages, uploadingImage = false, callback = null) => {
+      this.setState({
+        noteImages,
+        uploadingImage
+      }, callback);
+    });
+    _defineProperty(this, "getImages", () => {
+      const {
+        noteImages
+      } = this.state;
+      const imagesList = _.cloneDeep(noteImages);
+      if (!imagesList || !Array.isArray(imagesList) || imagesList.length === 0) {
+        return [{
+          add: true
+        }];
+      }
+      return imagesList;
+    });
+    _defineProperty(this, "getImageUrls", () => {
+      const imagesList = this.getImages();
+      return _.filter(imagesList, img => {
+        return !img.uploading && !img.add;
+      }).map(img => {
+        return img.url;
+      });
+    });
+    _defineProperty(this, "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);
+    });
+    _defineProperty(this, "removeImage", index => {
+      const imagesUpdate = this.getImages();
+      imagesUpdate.splice(index, 1);
+      this.setImages(imagesUpdate);
+    });
+    _defineProperty(this, "showUploadMenu", () => {
+      Keyboard.dismiss();
+      const {
+        uploadingImage,
+        submittingNote
+      } = this.state;
+      if (uploadingImage || submittingNote) return;
+      this.imageUploader.showUploadMenu();
+    });
+    _defineProperty(this, "toggleFullscreenVideo", url => {
+      if (typeof url !== "string") url = "";
+      this.setState({
+        showFullscreenVideo: url.length > 0,
+        currentVideoUrl: url
+      });
+    });
+    _defineProperty(this, "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);
+    });
+    _defineProperty(this, "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);
+    });
+    _defineProperty(this, "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());
+    });
+    _defineProperty(this, "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);
+    });
+    _defineProperty(this, "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);
+    });
     this.state = {
       job: {},
       selectedPDF: null,
       noteAttachments: [],
-      noteInput: '',
-      addNoteOpen: false
+      noteInput: "",
+      addNoteOpen: false,
+      noteImages: [{
+        add: true
+      }],
+      uploadingImage: false,
+      galleryOpen: false,
+      galleryImages: [],
+      galleryIndex: 0
     };
+    this.checkThumb = null;
   }
   componentDidMount() {
     this.updateJobState();
@@ -143,12 +293,29 @@ class RequestNotes extends Component {
       this.updateJobState();
     }
   }
+  componentWillUnmount() {
+    clearInterval(this.checkThumb);
+  }
   updateJobState() {
     const job = _.find(this.props.jobs, j => j.id === this.props.job.id) || this.props.job;
     this.setState({
       job
     });
   }
+  openGallery(images, index) {
+    this.setState({
+      galleryOpen: true,
+      galleryImages: images,
+      galleryIndex: index
+    });
+  }
+  closeGallery() {
+    this.setState({
+      galleryOpen: false,
+      galleryImages: [],
+      galleryIndex: 0
+    });
+  }
   renderAttachment(a, i) {
     return /*#__PURE__*/React.createElement(Components.Attachment, {
       onPress: () => {
@@ -158,6 +325,67 @@ class RequestNotes extends Component {
       title: a.Title
     });
   }
+  renderPlayableImageUrl(images, index, containerStyle) {
+    const url = images[index];
+    const thumbUrl = Helper.getThumb300(url);
+    if (Helper.isVideo(url)) {
+      return /*#__PURE__*/React.createElement(ImageBackground, {
+        style: [{
+          flex: 1
+        }, containerStyle],
+        source: {
+          uri: thumbUrl
+        }
+      }, /*#__PURE__*/React.createElement(View, {
+        style: styles.imagePlayContainer
+      }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+        onPress: this.toggleFullscreenVideo.bind(this, url)
+      }, /*#__PURE__*/React.createElement(Icon, {
+        name: "play",
+        type: "font-awesome",
+        iconStyle: styles.imageControlIcon
+      }))));
+    }
+    const imageUrl = Helper.get1400(url);
+    return /*#__PURE__*/React.createElement(TouchableOpacity, {
+      style: containerStyle,
+      onPress: this.openGallery.bind(this, images, index || 0)
+    }, /*#__PURE__*/React.createElement(ImageBackground, {
+      resizeMode: "cover",
+      style: styles.imageContainer,
+      source: {
+        uri: imageUrl
+      }
+    }));
+  }
+  renderImages(note) {
+    if (!note) return null;
+    if (!_.isNil(note.Images) && !_.isEmpty(note.Images)) {
+      return /*#__PURE__*/React.createElement(ScrollView, {
+        horizontal: true,
+        style: styles.sideBySideImages
+      }, note.Images.map((_p, index) => this.renderPlayableImageUrl(note.Images, index, styles.sideBySideImageContainer)));
+    }
+    return null;
+  }
+  renderImagePopup() {
+    const {
+      galleryOpen,
+      galleryImages,
+      galleryIndex
+    } = this.state;
+    console.log("renderimagepopup", {
+      galleryOpen,
+      galleryImages,
+      galleryIndex
+    });
+    return /*#__PURE__*/React.createElement(Components.ImagePopup, {
+      visible: galleryOpen,
+      images: galleryImages,
+      index: galleryIndex,
+      onClose: this.closeGallery.bind(this)
+    });
+  }
   renderNote(n) {
     return /*#__PURE__*/React.createElement(View, {
       style: styles.noteContainer,
@@ -200,7 +428,7 @@ class RequestNotes extends Component {
       style: styles.noteContainerName
     }, n.User.displayName)))), /*#__PURE__*/React.createElement(Text, {
       style: styles.noteContainerText
-    }, n.Note), (n.Attachments || []).map((a, i) => this.renderAttachment(a, i)), /*#__PURE__*/React.createElement(Text, {
+    }, n.Note), (n.Attachments || []).map((a, i) => this.renderAttachment(a, i)), this.renderImages(n), /*#__PURE__*/React.createElement(Text, {
       style: styles.noteTimestamp
     }, moment.utc(n.Timestamp).local().format(Helper.TIMESTAMP_FORMAT)));
   }
@@ -240,21 +468,123 @@ class RequestNotes extends Component {
       large: true
     }, "Save");
   }
+  renderUploadMenu() {
+    return /*#__PURE__*/React.createElement(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: true,
+      hideLibrary: true
+    });
+  }
+  renderImage(item, index) {
+    const isVideoUrl = Helper.isVideo(item.url);
+    const imagesList = this.getImages();
+    if (item.add) {
+      return /*#__PURE__*/React.createElement(TouchableOpacity, {
+        activeOpacity: 0.8,
+        onPress: () => this.showUploadMenu()
+      }, /*#__PURE__*/React.createElement(View, {
+        style: [styles.imageContainer, imagesList.length > 1 && styles.imageContainerNotEmpty, index % 3 === 0 && {
+          marginLeft: 0
+        }, index > 2 && {
+          marginTop: 8
+        }]
+      }, /*#__PURE__*/React.createElement(View, {
+        style: styles.imageCircle
+      }, /*#__PURE__*/React.createElement(Icon, {
+        name: "camera",
+        type: "font-awesome",
+        iconStyle: styles.addImageIcon
+      }))));
+    }
+    return /*#__PURE__*/React.createElement(View, {
+      style: [styles.imageContainer, imagesList.length > 1 && styles.imageContainerNotEmpty, index % 3 === 0 && {
+        marginLeft: 0
+      }, index > 2 && {
+        marginTop: 8
+      }]
+    }, item.uploading ? /*#__PURE__*/React.createElement(Components.ImageUploadProgress, {
+      uploader: this.imageUploader,
+      image: item,
+      color: this.props.colourBrandingMain
+    }) : /*#__PURE__*/React.createElement(ImageBackground, {
+      style: styles.imageBackground,
+      source: Helper.getImageSource(item.thumbNailExists ? item.thumbNailUrl : item.url || item)
+    }, isVideoUrl && /*#__PURE__*/React.createElement(View, {
+      style: styles.imagePlayContainer
+    }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+      onPress: this.toggleFullscreenVideo.bind(this, item.url)
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "play",
+      type: "font-awesome",
+      iconStyle: styles.imageControlIcon
+    }))), /*#__PURE__*/React.createElement(TouchableOpacity, {
+      style: styles.removeImage,
+      onPress: () => this.removeImage(index)
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "remove",
+      type: "font-awesome",
+      iconStyle: styles.imageControlIcon,
+      style: styles.removeImage
+    }))));
+  }
+  renderImageList() {
+    const imagesList = this.getImages();
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles.imageListContainer
+    }, /*#__PURE__*/React.createElement(FlatList, {
+      keyboardShouldPersistTaps: "always",
+      enableEmptySections: true,
+      data: imagesList,
+      renderItem: ({
+        item,
+        index
+      }) => this.renderImage(item, index),
+      keyExtractor: (item, index) => index,
+      numColumns: 3,
+      scrollEnabled: false
+    }));
+  }
+  renderVideoPlayerPopup() {
+    const {
+      showFullscreenVideo,
+      currentVideoUrl
+    } = this.state;
+    if (!currentVideoUrl) return;
+    return /*#__PURE__*/React.createElement(Components.VideoPopup, {
+      uri: currentVideoUrl,
+      visible: showFullscreenVideo,
+      showFullscreenButton: false,
+      onClose: this.toggleFullscreenVideo
+    });
+  }
   renderAdd() {
     return /*#__PURE__*/React.createElement(Modal, {
       animationType: "slide",
       visible: this.state.addNoteOpen
     }, /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
       style: styles.container,
-      behavior: Platform.OS === 'ios' && 'padding'
-    }, /*#__PURE__*/React.createElement(Components.Header, {
+      behavior: "padding"
+    }, this.renderUploadMenu(), /*#__PURE__*/React.createElement(Components.Header, {
       leftText: "Cancel",
       onPressLeft: this.closeAddNote,
       text: ""
     }), /*#__PURE__*/React.createElement(ScrollView, {
       style: styles.scrollContainer,
       contentContainerStyle: styles.innerContainer
-    }, /*#__PURE__*/React.createElement(Components.TextStyle, {
+    }, /*#__PURE__*/React.createElement(Components.Text, {
       type: "pageHeading"
     }, "Add Staff Note"), /*#__PURE__*/React.createElement(Components.GenericInputSection, {
       label: "Content",
@@ -277,12 +607,12 @@ class RequestNotes extends Component {
     }), /*#__PURE__*/React.createElement(Components.GenericInputSection, {
       label: "Attachments",
       sectionStyle: styles.inputSection
-    }, this.state.editingNote ? (this.state.noteAttachments || []).map((a, i) => this.renderAttachment(a, i)) : /*#__PURE__*/React.createElement(Components.TextStyle, {
+    }, this.renderImageList(), this.state.editingNote ? (this.state.noteAttachments || []).map((a, i) => this.renderAttachment(a, i)) : /*#__PURE__*/React.createElement(Components.Text, {
       type: "body",
       style: styles.attachmentInfo
     }, "PDFs can only be attached to notes from the Community Manager."))), /*#__PURE__*/React.createElement(View, {
       style: styles.popupFooter
-    }, this.renderFooterContent())));
+    }, this.renderFooterContent()), this.renderVideoPlayerPopup()));
   }
   render() {
     return /*#__PURE__*/React.createElement(View, {
@@ -296,14 +626,14 @@ class RequestNotes extends Component {
       contentContainerStyle: styles.innerContainer
     }, this.renderNotes()), /*#__PURE__*/React.createElement(Components.AddButton, {
       onPress: this.openAddNote
-    }));
+    }), this.renderImagePopup());
   }
 }
 const styles = {
   container: {
     flex: 1,
-    position: 'relative',
-    backgroundColor: '#fff'
+    position: "relative",
+    backgroundColor: "#fff"
   },
   scrollContainer: {
     flex: 1
@@ -321,8 +651,8 @@ const styles = {
     marginBottom: 16
   },
   noteContainerTop: {
-    flexDirection: 'row',
-    alignItems: 'center'
+    flexDirection: "row",
+    alignItems: "center"
   },
   profilePic: {
     marginRight: 8
@@ -331,49 +661,129 @@ const styles = {
     flex: 1
   },
   noteContainerName: {
-    fontFamily: 'sf-semibold',
+    fontFamily: "sf-semibold",
     fontSize: 13,
     color: Colours.TEXT_DARKEST
   },
   noteContainerText: {
     marginTop: 8,
-    fontFamily: 'sf-regular',
+    fontFamily: "sf-regular",
     fontSize: 13,
     color: Colours.TEXT_DARKEST
   },
   noteTimestamp: {
     marginTop: 8,
-    fontFamily: 'sf-semibold',
+    fontFamily: "sf-semibold",
     fontSize: 11,
     color: Colours.TEXT_LIGHT
   },
   noteContainerTopRight: {
     flex: 1,
-    flexDirection: 'row-reverse',
-    alignItems: 'center'
+    flexDirection: "row-reverse",
+    alignItems: "center"
   },
   noteContainerButtonContainer: {
     width: 24,
     height: 24,
     borderRadius: 12,
-    alignItems: 'center',
-    justifyContent: 'center',
+    alignItems: "center",
+    justifyContent: "center",
     marginLeft: 8
   },
   noteContainerButtonIcon: {
     fontSize: 13,
-    color: '#fff'
+    color: "#fff"
   },
   inputSection: {
     marginTop: 24
   },
   sectionHeading: {
-    fontFamily: 'qs-bold',
+    fontFamily: "qs-bold",
     fontSize: 24,
     color: Colours.TEXT_DARKEST
   },
   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 => {