Add: Feedback Modal (#253)

* Add: Feedback Modal
coding-blocks · Aug 27, 2018 · 8e9e6e4 · 8e9e6e4
1 parent f961d4a
commit 8e9e6e4
Show file tree

Hide file tree

Showing 7 changed files with 184 additions and 46 deletions.
diff --git a/app/models/run-attempt.js b/app/models/run-attempt.js
@@ -11,4 +11,5 @@ export default DS.Model.extend({
   }),
   run: DS.belongsTo('run'),
   user: DS.belongsTo('user'),
-})
+  rating: DS.attr()
+})
diff --git a/app/pods/classroom/timeline/controller.js b/app/pods/classroom/timeline/controller.js
@@ -14,4 +14,4 @@ export default class TimelineController extends Controller {
             }
         }).then( () => this.send('reloadRoute'))
     }
-}
+}
diff --git a/app/pods/classroom/timeline/route.js b/app/pods/classroom/timeline/route.js
@@ -32,11 +32,19 @@ export default Route.extend({
             }
           );
         }
+      }).then(async (runAttempt) => {
+        await this.get('api').request('courses/' + runAttempt.get('run.course.id') + '/rating', {
+          method: 'GET'
+        }).then((rating) => {
+          runAttempt.set("rating", rating.userScore)
+        })
+        return runAttempt
       })
   },
   setupController(controller, model) {
     controller.set("run", model.get("run"));
     controller.set("runAttempt", model);
+    controller.set("userRating", model.get("rating"));
   },
   actions: {
     reloadRoute() {

diff --git a/app/pods/classroom/timeline/template.hbs b/app/pods/classroom/timeline/template.hbs
@@ -8,7 +8,7 @@
         {{#link-to 'courses.id' run.course.identifier activeClass=""}} {{run.course.title}} {{/link-to}}
         <div class="rating mob">
           {{#if runAttempt.premium}}
-            {{#rating-stars course=run.course}} {{/rating-stars}}
+            {{#rating-stars course=run.course showModal=true initialRating=userRating}} {{/rating-stars}}
           {{else}}
             {{rating-stars-static rating=run.course.rating showValue=true}}
           {{/if}}
@@ -23,7 +23,7 @@
     <div class="rating">
       <br>
       {{#if runAttempt.premium}}
-        {{#rating-stars course=run.course}} {{/rating-stars}}
+        {{#rating-stars course=run.course showModal=true initialRating=userRating}} {{/rating-stars}}
       {{else}}
         {{rating-stars-static rating=run.course.rating showValue=true}}
       {{/if}}

diff --git a/app/pods/components/rating-stars/component.js b/app/pods/components/rating-stars/component.js
@@ -9,52 +9,83 @@ import { service } from 'ember-decorators/service'
     }
 */
 export default class RatingStartComponent extends Component {
-    @service api
-
-    scale = 5
-    ratingMarkedByUser = null
-    isEditing = false
-
-    constructor () {
-        super(...arguments)
-        if (this.get('initialRating')) {
-            this.set('hasUserMarkedRating', true)
-            this.set('ratingMarkedByUser', this.get('initialRating.value'))
-        } else {
-            this.set('hasUserMarkedRating', false)
-        }
-    }
+  @service api
 
-    didReceiveAttrs () {
-        this._super(...arguments)
-    }
+  scale = 5
+  ratingMarkedByUser = null
+  isEditing = false
+  isShowingModal = false
 
-    @action
-    changeRating (val) {
-        this.set('rating', val)
-    }
+  constructor () {
+    super(...arguments)
+    this.set('hasUserMarkedRating', false)
+  }
 
-    @action
-    resetRating () {
-        this.set('rating', this.get('initialRating'))
+  didReceiveAttrs () {
+    this._super(...arguments)
+    if (this.get('initialRating')) {
+      this.set('hasUserMarkedRating', true)
+      this.set('ratingMarkedByUser', this.get('initialRating.value'))
+      this.set('rating', this.get('initialRating.value'))
+      this.set('textExperience', this.get('initialRating.heading'))
+      this.set('textPublic', this.get('initialRating.review'))
     }
+  }
+
+  @action
+  changeRating (val) {
+    this.set('rating', val)
+  }
 
-    @action
-    markRating (rating) {
-        this.set('hasUserMarkedRating', true)
-        this.set('isEditing', false)
-        this.set('ratingMarkedByUser', rating)
-        this.get('api').request('/courses/' + this.get('course.id') + '/rating', {
-            method: 'POST',
-            data: {
-                value: this.get('ratingMarkedByUser'),
-            }
-        })
+  @action
+  resetRating () {
+    this.set('rating', this.get('ratingMarkedByUser'))
+  }
+
+  @action
+  markRating (rating) {
+    this.set('hasUserMarkedRating', true)
+    this.set('isEditing', false)
+    this.set('ratingMarkedByUser', rating)
+  }
+
+  @action
+  toggleEditingMode () {
+    // this.set('rating', 0)
+    this.toggleProperty('isEditing')
+    if (this.get('showModal') == true) {
+      this.set('isShowingModal', true)
     }
+  }
+
+  @action
+  submitFeedback() {
+    this.get('api').request('/courses/' + this.get('course.id') + '/rating', {
+      method: 'POST',
+      data: {
+        value: this.get('ratingMarkedByUser'),
+        experience: this.get('textExperience'),
+        review: this.get('textPublic')
+      }
+    })
+    this.afterFeedback()
+  }
+
+  @action
+  afterFeedback() {
+    this.set('isShowingModal', false)
+    this.set('isEditing', false)
+  }
 
-    @action
-    toggleEditingMode () {
-        this.set('rating', 0)
-        this.toggleProperty('isEditing')
+  @action
+  toggleModal (rating) {
+    this.markRating(rating)
+    if (this.get('showModal') == true) {
+      this.toggleProperty('isShowingModal')
+    } else {
+      this.set('textExperience', '')
+      this.set('textPublic', '')
+      this.submitFeedback()
     }
+  }
 }
diff --git a/app/pods/components/rating-stars/template.hbs b/app/pods/components/rating-stars/template.hbs
@@ -20,10 +20,74 @@
         class="{{if (lte index rating) 'pos-rating' 'neg-rating'}}"
         onMouseEnter={{action 'changeRating' index}}
         onMouseLeave={{action 'resetRating'}}
-        onClick={{action 'markRating' index}}
+        onClick={{action 'toggleModal' index}}
       >
         <i class="fas fa-star"></i>
       </span>
     {{/each}}
   </div>
 {{/if}}
+{{#if isShowingModal}}
+  {{#modal-dialog
+    onClose=(action 'afterFeedback')
+    translucentOverlay=true
+    targetAttachment='none'
+    containerClass='centered-scrolling-container'
+    overlayClass='centered-scrolling-overlay'
+    wrapperClass='centered-scrolling-wrapper'
+  }}
+
+    <!-- Modal -->
+    <div class="c-modal modal-dialog">
+      <div class="c-feedback-modal modal-content">
+        <h3>Submit Feedback</h3>
+        <div>
+          {{#if (and hasUserMarkedRating (not isEditing))}}
+            <div>
+              <div class="title">
+                How would you rate this course overall?
+              </div> &nbsp;&nbsp;
+              {{#each (range 1 (inc scale)) as |index|}}
+                <span
+                  class="{{if (lte index rating) 'pos-rating' 'neg-rating'}}"
+                >
+        <i class="fas fa-star"></i>
+      </span>
+              {{/each}}
+              <a href="#" {{action 'toggleEditingMode'}}><i class="fas fa-edit" style="color:#fc4f4f"></i></a>
+            </div>
+          {{else}}
+            <div>
+              <div class="title">
+                How would you rate this course overall?
+              </div> &nbsp;
+              {{#each (range 1 (inc scale)) as |index|}}
+                <span
+                  class="{{if (lte index rating) 'pos-rating' 'neg-rating'}}"
+                  onMouseEnter={{action 'changeRating' index}}
+                  onMouseLeave={{action 'resetRating'}}
+                  onClick={{action 'markRating' index}}
+                >
+        <i class="fas fa-star"></i>
+      </span>
+              {{/each}}
+            </div>
+          {{/if}}
+        </div>
+        <div class="title">
+          How was the overall experience?
+        </div>
+        {{textarea value=textExperience class='input-textarea'}}
+        <div class="title">
+          Write a public review.
+        </div>
+        {{textarea value=textPublic class='input-textarea' rows=5}}
+        <div class="row justify-content-center">
+          <div class="button-solid">
+            <button {{action 'submitFeedback'}}>Submit Feedback</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  {{/modal-dialog}}
+{{/if}}
diff --git a/app/styles/app.scss b/app/styles/app.scss
@@ -5,4 +5,38 @@
   }
 }
 @import "ember-modal-dialog/ember-modal-structure";
-@import "ember-modal-dialog/ember-modal-appearance";
+@import "ember-modal-dialog/ember-modal-appearance";
+body.centered-modal-showing {
+  overflow: hidden;
+}
+.centered-scrolling-wrapper {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  overflow-y: scroll;
+  z-index: 200;
+}
+
+.centered-scrolling-overlay {
+  position: relative;
+  height: auto;
+  min-height: 100vh;
+  padding: 1em;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+}
+.centered-scrolling-container {
+  position: relative;
+  background-color: white;
+  min-width: 30em;
+  max-width: 650px;
+  min-height: 20em;
+  margin-top: 100px;
+  margin-bottom: 30px;
+  box-sizing: border-box;
+  box-shadow: 0px 4px 25px 4px rgba(0,0,0,0.30);
+}
+