Merge pull request #48 from mskcc/integrate-feedback-home

Integrate feedback home
mskcc · Jul 27, 2021 · 5645dd4 · 5645dd4
2 parents c454fa4 + b30f549
commit 5645dd4
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 4 deletions.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -1,5 +1,9 @@
 <template>
   <div id="app" v-cloak>
+    <span class="feedback-button">
+      <md-tooltip md-direction="right">We appreciate your feedback!</md-tooltip>
+      <md-button class="md-fab md-mini md-primary" :to="{ name: 'feedback' }"><md-icon>thumb_up_alt</md-icon></md-button>
+    </span>
     <div class="app-body">
       <div class="app-header md-elevation-7">
         <div class="logo-header">

diff --git a/frontend/src/assets/css/style.css b/frontend/src/assets/css/style.css
@@ -767,3 +767,9 @@ sup {
 .single-cell-hub .md-divider {
   margin: 15px 0 !important;
 }
+
+.feedback-button {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+}
diff --git a/frontend/src/components/pages/FeedbackPage.vue b/frontend/src/components/pages/FeedbackPage.vue
@@ -7,9 +7,23 @@
     <div v-else>
       <form @submit.prevent="submitFeedback">
         <md-card>
-          <md-card-header>
+          <md-card-header v-if="application">
             <div class="md-title">Tell us about your experience with {{ validApplications[application] }}*</div>
           </md-card-header>
+          <md-card-header v-else>
+            <div class="md-title">
+              <div>Tell us about your experience with</div>
+              <md-field>
+                <label for="application">Process or web application</label>
+                <md-select v-model="applicationClone" name="application" id="application">
+                  <md-option v-for="(app, name) in validApplications" :key="name" :value="name">{{ app }}</md-option>
+                </md-select>
+              </md-field>
+              <span>
+                <span class="error" v-if="formHasErrors">This field is required</span>
+              </span>
+            </div>
+          </md-card-header>
           <br />
           <md-card-content>
             <div>
@@ -92,6 +106,7 @@ export default {
         'request-tracker': 'Request Tracker',
         'data-delivery': 'Data Delivery',
       },
+      applicationClone: this.application,
       form: {
         opinionRating: '',
         feedbackCategory: '',
@@ -102,14 +117,15 @@ export default {
   },
   validations() {
     return {
+      applicationClone: { required },
       form: {
         opinionRating: { required },
       },
     };
   },
   computed: {
     valid: function() {
-      return this.application in this.validApplications;
+      return this.application in this.validApplications || !this.application;
     },
   },
   methods: {
@@ -131,7 +147,7 @@ export default {
       if (!this.formHasErrors) {
         app.axios
           .post(`${API_URL}/submitFeedback`, {
-            data: { application: this.application, ...this.form },
+            data: { application: this.applicationClone, ...this.form },
           })
           .then((response) => {
             this.$swal({ title: 'Thank you', text: response.data.message, icon: 'success' });

diff --git a/frontend/src/main.js b/frontend/src/main.js
@@ -146,7 +146,7 @@ const routes = [
 
   { path: '/careers', component: CareersPage, name: 'careers' },
   { path: '/single-cell-hub', component: SingleCellHub, name: 'single cell hub' },
-  { path: '/feedback/:application', component: FeedbackPage, name: 'feedback', props: true },
+  { path: '/feedback/:application?', component: FeedbackPage, name: 'feedback', props: true },
   { path: '/view-feedback', component: ViewFeedbackPage, name: 'view feedback' },
 ];