From e1e9bc67c4b5a6f7b7c236535b5bd7d5e32e6cdf Mon Sep 17 00:00:00 2001
From: Idan Cohen <icohen@salesforce.com>
Date: Fri, 13 Apr 2018 19:17:02 +0300
Subject: [PATCH] Edit Volunteer & Edit Request UI Improvments. (Issue #120)

---
 .../VolunteerTab/VolunteerEditModal.js        | 50 ++++++++++++----
 .../VolunteerRequestPreviewModal.js           | 60 ++++++++++++++-----
 2 files changed, 83 insertions(+), 27 deletions(-)

diff --git a/src/components/VolunteerTab/VolunteerEditModal.js b/src/components/VolunteerTab/VolunteerEditModal.js
index 0db5ff1a..246f8e51 100644
--- a/src/components/VolunteerTab/VolunteerEditModal.js
+++ b/src/components/VolunteerTab/VolunteerEditModal.js
@@ -11,7 +11,7 @@ export default class VolunteerEditModal extends React.Component {
   }
 
   initState = _ => {
-    this.state = { 
+    this.state = {
       loading: true,
 
       generalAnswer: null,
@@ -103,7 +103,7 @@ export default class VolunteerEditModal extends React.Component {
         this.state.isButtonEnabled = true
         this.state.hasChanges = false
         this.setState(this.state)
-        this.props.onSuccess() 
+        this.props.onSuccess()
     })
   }
 
@@ -116,24 +116,52 @@ export default class VolunteerEditModal extends React.Component {
         this.state.hasChanges = false
         this.setState(this.state)
         this.props.onSuccess()
-        this.props.onHide() 
+        this.props.onHide()
     })
   }
 
+  formatingUserDetails = val => {
+    return val? val: ''
+  }
+
+  renderUserDetails = _=> {
+    if (!this.props.volunteer){
+      return (
+        <span className="edit-volunteer-title">
+          No Data
+        </span>
+        )
+    }
+    let {firstName, lastName, contactEmail, email, contactPhone, tags} = this.props.volunteer;
+
+    if (!tags || tags.length==0){ tags='No Tags'}
+    else{
+      let tagList = tags.map((tag, index) => {
+        return <li key={index}>{tag}</li>
+      })
+      tags = <ul>{tagList}</ul>
+    }
+
+    return (
+      <span className="edit-volunteer-title">
+        <h2>{`${firstName} ${lastName}`}</h2>
+        <h4>{email}</h4>
+        <h5>{`${(this.formatingUserDetails(contactEmail))} , ${this.formatingUserDetails(contactPhone)}`}<br/>
+          tags: {tags}
+
+        </h5>
+      </span>
+    )
+  }
+
+
   render() {
-    const name = this.props.volunteer ? 
-                  `${this.props.volunteer.firstName} ${this.props.volunteer.lastName}` :
-                  'No Data'
-    const email = this.props.volunteer ? this.props.volunteer.userId : 'No Data'
     const errorMessage = this.errorMessage();
 
     return (
       <Modal show={this.props.show} onHide={this.onHide} onEnter={this.onEnter} bsSize="lg">
         <Modal.Header closeButton>
-          <span className="edit-volunteer-title">
-            <h2>{name}</h2>
-            <h4>{email}</h4>
-          </span>
+          {this.renderUserDetails()}
         </Modal.Header>
         <Modal.Body>
           <Tabs id="volunteer-edit-tabs">
diff --git a/src/components/VolunteerTab/VolunteerRequestPreviewModal.js b/src/components/VolunteerTab/VolunteerRequestPreviewModal.js
index f25b4698..4325dd9e 100644
--- a/src/components/VolunteerTab/VolunteerRequestPreviewModal.js
+++ b/src/components/VolunteerTab/VolunteerRequestPreviewModal.js
@@ -12,7 +12,7 @@ export default class VolunteerRequestPreviewModal extends React.Component {
   }
 
   initState = _ => {
-    this.state = { 
+    this.state = {
       loading: true,
       request: this.props.request,
       status: '',
@@ -82,12 +82,12 @@ export default class VolunteerRequestPreviewModal extends React.Component {
     }
     return null;
   }
-  
-  handleOptionsChange = event => {    
+
+  handleOptionsChange = event => {
     const field = event.target.id;
     this.state[field] = event.target.value
     this.setState(this.state);
-  }  
+  }
 
   onHide = _ => {
     //TODO: check if there are unsaved changes and show "are you sure" alert
@@ -104,7 +104,7 @@ export default class VolunteerRequestPreviewModal extends React.Component {
         this.state.isButtonEnabled = true
         this.state.hasChanges = false
         this.setState(this.state)
-        this.props.onSuccess() 
+        this.props.onSuccess()
     })
   }
 
@@ -119,7 +119,7 @@ export default class VolunteerRequestPreviewModal extends React.Component {
         this.state.removeEnabled = true
         this.setState(this.state)
         this.props.onSuccess()
-        this.props.onHide() 
+        this.props.onHide()
     })
   }
 
@@ -139,7 +139,7 @@ export default class VolunteerRequestPreviewModal extends React.Component {
       this.state.addEnabled = true
       this.setState(this.state)
       this.props.onSuccess()
-      this.props.onHide() 
+      this.props.onHide()
     })
     .catch(error => {
       this.state.status = error.response.data && error.response.data.error ? error.response.data.error : 'Server Error'
@@ -148,30 +148,58 @@ export default class VolunteerRequestPreviewModal extends React.Component {
     });
   }
 
+    formatingUserDetails = val => {
+    return val? val: ''
+  }
+
+  renderUserDetails = _=> {
+    if (!this.props.volunteer){
+      return (
+        <span className="edit-volunteer-title">
+          No Data
+        </span>
+        )
+    }
+    let {firstName, lastName, contactEmail, email, contactPhone, tags} = this.props.volunteer;
+
+    if (!tags || tags.length==0){ tags='No Tags'}
+    else{
+      let tagList = tags.map((tag, index) => {
+        return <li key={index}>{tag}</li>
+      })
+      tags = <ul>{tagList}</ul>
+    }
+
+    return (
+      <span className="edit-volunteer-title">
+        <h2>{`${firstName} ${lastName}`}</h2>
+        <h4>{email}</h4>
+        <h5>{`${(this.formatingUserDetails(contactEmail))} , ${this.formatingUserDetails(contactPhone)}`}<br/>
+          tags: {tags}
+
+        </h5>
+      </span>
+    )
+  }
+
   render() {
     if (!this.props.request) {
       return (<span/>)
     }
 
-    const name = this.props.request ? `${this.props.request.firstName} ${this.props.request.lastName}` : 'No Data';
-    const email = this.props.request ? this.props.request.userId : 'No Data';
-
     const errorMessage = this.errorMessage();
 
 
     return (
       <Modal show={this.props.show} onHide={this.onHide} onEnter={this.onEnter} bsSize="lg">
         <Modal.Header closeButton>
-          <span className="edit-volunteer-title">
-            <h2>{name}</h2>
-            <h4>{email}</h4>
-          </span>
+          {this.renderUserDetails()}
           {/* {this.state.hasChanges &&
           <Button className="edit-volunteer-save" bsStyle="success" onClick={this.save}>Save</Button>} */}
         </Modal.Header>
         <Modal.Body>
           <Tabs id="edit-department-tabs">
-            
+
             <Tab eventKey={1} title="Status" className="status">
               {errorMessage}
               <div className="add-section">
@@ -200,7 +228,7 @@ export default class VolunteerRequestPreviewModal extends React.Component {
 
               <Button bsStyle="danger" disabled={!this.state.removeEnabled} onClick={this.remove}>Remove</Button>
             </Tab>
-            
+
             <Tab eventKey={2} title="Forms">
               <h4>General</h4>
                 <FromAnswersView answers={this.state.generalAnswer}/>